feat: add dark mode theme with toggle#29
Open
devin-ai-integration[bot] wants to merge 1 commit into
Open
Conversation
- Add ThemeService with localStorage persistence and system preference detection - Add ThemeToggleComponent in the navbar header - Add dark-theme.css with CSS variable overrides for all UI elements - Support data-theme attribute on <html> for theme switching Co-Authored-By: Wes Convery <2wconvery@gmail.com>
Author
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a full dark mode theme to the Conduit application with a toggle button in the navbar.
What's included:
ThemeService— manages theme state using Angular signals, persists preference tolocalStorage, and respectsprefers-color-schemeon first visitThemeToggleComponent— moon/sun toggle button in the header navbar, accessible witharia-labeldark-theme.css— comprehensive CSS variable overrides scoped to[data-theme="dark"]covering all UI elements: navbar, cards, forms, pagination, tags, banners, article pages, profile pages, footer, sidebar, and buttonsThe implementation leverages the existing CSS custom property system in
styles.css, overriding variables under the[data-theme="dark"]selector without modifying the shared submodule theme file.Screenshots
Light mode (default):
Dark mode:
Review & Testing Checklist for Human
Notes
zone.jsdependency — this is a pre-existing issue unrelated to these changesrealworld/assets/theme/styles.csswas intentionally not modified; all dark mode overrides live insrc/dark-theme.cssLink to Devin session: https://app.devin.ai/sessions/02d8be4cba814e5cb489872261c3ad55
Requested by: @WesternConcrete
Devin Review