Improve dark-theme contrast with CSS variables and color-scheme
Description
src/app/globals.css defines --foreground/--background only for light mode and never overrides them for .dark, so the <body> keeps light colors even when ThemeToggle adds the dark class — many dark: utility surfaces then sit on a light body, hurting contrast (a WCAG concern). This issue makes the base palette theme-aware.
Requirements and context
- Repository scope: StableRoute-Org/Stableroute-frontend only.
- Add
.dark overrides for --foreground/--background (and any base text color) in globals.css, and set color-scheme appropriately so native UI (scrollbars, form controls) matches.
- Verify body and primary text meet WCAG AA contrast (4.5:1) in both themes; adjust the neutral palette references if needed.
- Coordinate with the
dark class applied by src/components/ThemeToggle.tsx; do not change toggle logic.
- Keep Tailwind's existing utility usage; this is base-layer CSS only.
Suggested execution
- Fork the repo and create a branch
git checkout -b a11y/styling-29-dark-mode-palette- Implement changes
- Write code in:
src/app/globals.css.
- Write comprehensive tests in: n/a for CSS — add a smoke test rendering
src/app/layout.tsx under a dark root if feasible, else document manual contrast checks.
- Add documentation: record measured contrast ratios in
README.md or docs/.
- Add comments explaining each variable.
- Validate AA contrast with a checker and note results.
- Test and commit
Test and commit
- Run
npm run lint, npm test, and npm run build, and manually toggle themes via npm run dev.
- Cover edge cases: light text on light bug fixed, dark surfaces consistent, and form-control contrast.
- Include before/after screenshots and contrast figures in the PR description.
Example commit message
a11y: add dark-mode palette variables and color-scheme for contrast
Guidelines
- Minimum 95 percent test coverage for impacted modules.
- Clear, reviewer-focused documentation.
- Timeframe: 96 hours.
Community & contribution rewards
- 💬 Join the StableRoute community on Discord for questions, reviews, and faster merges: https://discord.gg/37aCpusvx
- ⭐ This is a GrantFox OSS / Official Campaign task and may be rewarded. When your PR is merged you'll be prompted to rate the project — if this issue and the maintainers helped you ship, we'd be grateful for a 5-star rating. Clear questions in Discord and tidy, well-tested PRs are the fastest path to a merge and a reward.
Improve dark-theme contrast with CSS variables and color-scheme
Description
src/app/globals.cssdefines--foreground/--backgroundonly for light mode and never overrides them for.dark, so the<body>keeps light colors even whenThemeToggleadds thedarkclass — manydark:utility surfaces then sit on a light body, hurting contrast (a WCAG concern). This issue makes the base palette theme-aware.Requirements and context
.darkoverrides for--foreground/--background(and any base text color) inglobals.css, and setcolor-schemeappropriately so native UI (scrollbars, form controls) matches.darkclass applied bysrc/components/ThemeToggle.tsx; do not change toggle logic.Suggested execution
git checkout -b a11y/styling-29-dark-mode-palettesrc/app/globals.css.src/app/layout.tsxunder adarkroot if feasible, else document manual contrast checks.README.mdordocs/.Test and commit
npm run lint,npm test, andnpm run build, and manually toggle themes vianpm run dev.Example commit message
a11y: add dark-mode palette variables and color-scheme for contrastGuidelines
Community & contribution rewards