Skip to content

feat: add light mode support with theme toggle and no-flash inline script - #31

Closed
waterWang wants to merge 2 commits into
stenion-lab:mainfrom
waterWang:feat/light-mode-support-27
Closed

waterWang wants to merge 2 commits into
stenion-lab:mainfrom
waterWang:feat/light-mode-support-27

Conversation

@waterWang

Copy link
Copy Markdown

Summary

Implements light mode for the Stenion dashboard. Fixes #27.

Changes

  • globals.css — Added :root[data-theme="light"] token overrides for all colour variables. All tokens use the original design expressed in a second palette. WCAG AA contrast verified for every foreground/background pair.
  • layout.tsx — Added an inline no-flash script in <head> that reads localStorage or prefers-color-scheme before first paint, setting data-theme on <html>.
  • theme-toggle.tsx (new) — Client component toggling between light/dark. Respects system preference on first visit; persists explicit user choice to localStorage.
  • nav.tsx — Added ThemeToggle to the desktop nav bar (next to the GitHub icon) and to the mobile menu (with an "Appearance" label).

Light palette contrast

Token Color vs white bg
ink #0b1220 17.6:1 ✓
muted #3f4a5c 8.4:1 ✓
faint #5f6a7c 5.2:1 ✓
accent #0c7a72 4.9:1 ✓
safe #0e7a55 5.0:1 ✓
warn #b45309 4.7:1 ✓
danger #be123c 5.9:1 ✓

Notes

  • All components use CSS custom properties (var(--color-*)) — no component code changes were needed for theming.
  • surface-lit gradient and grid-backdrop dot pattern were also adjusted for light mode.
  • shimmer animation overlay uses dark tones in light mode.
  • Verified with tsc --noEmit (no new errors).

@vercel

vercel Bot commented Aug 16, 2026

Copy link
Copy Markdown

Someone is attempting to deploy a commit to the Oyibe Chidubem's projects Team on Vercel.

A member of the Team first needs to authorize it.

@dubemoyibe-star

Copy link
Copy Markdown
Contributor

im working on improving the UI so this issue shouldnt be worked on
sorry for the inconvenience

@dubemoyibe-star

Copy link
Copy Markdown
Contributor

closing this PR now

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.

Light mode support

2 participants