Skip to content

feat: add dark mode support (#962) - #1

Closed
vstudio79 wants to merge 1 commit into
mainfrom
feat/dark-mode-support
Closed

feat: add dark mode support (#962)#1
vstudio79 wants to merge 1 commit into
mainfrom
feat/dark-mode-support

Conversation

@vstudio79

Copy link
Copy Markdown
Owner

Summary

Adds proper dark mode / light mode support to app/dashboard and app/portfolio with prefers-color-scheme handling, resolving astera-hq#962.

Changes

Core theming infrastructure

  • tailwind.config.ts — Convert all hardcoded brand hex colors to CSS custom properties (var(--gold), var(--card), etc.) so colors automatically adapt to the active theme
  • globals.css — Expand CSS variable definitions for both :root (dark) and :root.light (light) including --bg-navy, --amber, --text-primary, --text-secondary. Remove fragile !important light-mode overrides that were used to patch hardcoded brand classes
  • ThemeProvider.tsx — Add matchMedia.addEventListener("change") listener so the app follows OS prefers-color-scheme changes when the user has not explicitly toggled the theme

Page-level updates

  • app/dashboard/page.tsx — Replace all text-white / hover:text-white with theme-aware text-brand-text / hover:text-brand-text classes
  • app/dashboard/credit/page.tsx — Same treatment for inputs, textareas, and hover states
  • app/portfolio/page.tsx — Replace text-white with text-brand-text, replace bg-black/20 overlays with bg-brand-navy/40

What this fixes

Before After
Brand colors hardcoded to dark hex values Colors resolve via CSS variables, switching per theme
Light mode patched with !important overrides Clean CSS variable cascade — no overrides needed
No OS preference change listener Follows prefers-color-scheme in real time
text-white always white regardless of theme text-brand-text resolves to --text-primary (dark in light mode)

Testing

  • Dark mode renders correctly (default)
  • Light mode renders correctly via toggle
  • OS prefers-color-scheme changes are reflected when no explicit preference is set
  • Theme persists across page reloads via localStorage
  • ESLint passes (0 errors, pre-existing warnings only)
  • TypeScript compiles (pre-existing errors only, none from this PR)

- Convert hardcoded Tailwind brand colors to CSS custom properties
- Add theme-aware text colors (brand-text, brand-text-secondary)
- Define light/dark CSS variables for all brand colors (bg, card, border, gold, muted)
- Remove fragile !important light-mode CSS overrides
- Update dashboard and portfolio pages to use theme-aware classes
- Add OS prefers-color-scheme change listener to ThemeProvider
- Add light mode select element styling

Fixes astera-hq#962
@vstudio79 vstudio79 closed this Jul 27, 2026
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