Skip to content

feat: add dark mode theme with toggle#29

Open
devin-ai-integration[bot] wants to merge 1 commit into
mainfrom
devin/1779398541-dark-mode-theme
Open

feat: add dark mode theme with toggle#29
devin-ai-integration[bot] wants to merge 1 commit into
mainfrom
devin/1779398541-dark-mode-theme

Conversation

@devin-ai-integration

@devin-ai-integration devin-ai-integration Bot commented May 21, 2026

Copy link
Copy Markdown

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 to localStorage, and respects prefers-color-scheme on first visit
  • ThemeToggleComponent — moon/sun toggle button in the header navbar, accessible with aria-label
  • dark-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 buttons

The 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):

Light mode

Dark mode:

Dark mode

Review & Testing Checklist for Human

  • Toggle the theme button in the navbar — verify it switches between light/dark smoothly and the icon changes (moon → sun)
  • Refresh the page after toggling — verify the theme preference persists via localStorage
  • Navigate to article detail, profile, settings, editor, and auth pages in dark mode — verify all elements are styled correctly with readable contrast
  • Test on a fresh browser (no localStorage) with OS-level dark mode preference — verify the app auto-detects and applies dark theme

Notes

  • The existing unit tests fail on the base branch due to a missing zone.js dependency — this is a pre-existing issue unrelated to these changes
  • The submodule file realworld/assets/theme/styles.css was intentionally not modified; all dark mode overrides live in src/dark-theme.css
  • Build passes cleanly with no warnings

Link to Devin session: https://app.devin.ai/sessions/02d8be4cba814e5cb489872261c3ad55
Requested by: @WesternConcrete


Devin Review

Status Commit
⚪ Not started

Run Devin Review

💡 Connect your GitHub account to enable automatic code reviews.

Open in Devin Review (Staging)
Open in Devin Review

- 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>
@devin-ai-integration

Copy link
Copy Markdown
Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

@devin-ai-integration devin-ai-integration Bot left a comment

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 2 additional findings.

Open in Devin Review

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant