Describe the Bug
Light mode for the authenticated app is still implemented with a global CSS filter on the document root. On main, light theme uses invert plus hue rotate on html when the theme data attribute is set to light, and counter filters on images, videos, and some green backgrounds.
That is not real theming. It inverts brand colors, avatars, charts, and screenshots. The sidebar already has a theme toggle that stores the choice in localStorage and sets the theme data attribute on the document, so the plumbing is fine; the light values are wrong.
We need CSS variables (or Tailwind theme tokens) for shell surfaces and a plan to migrate page level hardcoded dark colors over time.
Steps to Reproduce
- Sign in and open the app shell (dashboard or issues).
- Use the sidebar control to switch to light mode.
- Notice the whole UI is inverted rather than true light surfaces.
- Check avatars, green accents, and charts: colors look wrong or double filtered.
Expected Behavior
- Remove the invert / hue rotate rules from
src/app/globals.css.
- Define shell tokens on
:root for dark defaults, for example shell background, card background, border, text, muted text.
- Override those tokens under the light theme data attribute with real light colors.
- Point layout and sidebar (and then high traffic pages) at those tokens instead of hardcoded hex / zinc classes.
- Keep the existing ThemeToggle and localStorage key.
Ship shell first if needed, then follow up PRs for dashboard cards and maintainer pages so light mode is consistent.
Screenshots (If applicable)
Toggle light mode on the app shell and capture sidebar + main content. Compare brand green and avatar colors before and after invert.
Environment Details
Area: Contributor Dashboard / app shell
Files: src/app/globals.css, app layout, sidebar, theme toggle under src/app/(app)/
Browser: any modern browser
AI Usage Disclosure
No
Describe the Bug
Light mode for the authenticated app is still implemented with a global CSS filter on the document root. On main, light theme uses invert plus hue rotate on
htmlwhen the theme data attribute is set to light, and counter filters on images, videos, and some green backgrounds.That is not real theming. It inverts brand colors, avatars, charts, and screenshots. The sidebar already has a theme toggle that stores the choice in localStorage and sets the theme data attribute on the document, so the plumbing is fine; the light values are wrong.
We need CSS variables (or Tailwind theme tokens) for shell surfaces and a plan to migrate page level hardcoded dark colors over time.
Steps to Reproduce
Expected Behavior
src/app/globals.css.:rootfor dark defaults, for example shell background, card background, border, text, muted text.Ship shell first if needed, then follow up PRs for dashboard cards and maintainer pages so light mode is consistent.
Screenshots (If applicable)
Toggle light mode on the app shell and capture sidebar + main content. Compare brand green and avatar colors before and after invert.
Environment Details
Area: Contributor Dashboard / app shell
Files:
src/app/globals.css, app layout, sidebar, theme toggle undersrc/app/(app)/Browser: any modern browser
AI Usage Disclosure
No