Skip to content

Implement persisted dark mode toggle with class-based Tailwind theme#99

Open
yuliuyi717-ux wants to merge 1 commit intosorosave-protocol:mainfrom
yuliuyi717-ux:codex/dark-mode-toggle-31
Open

Implement persisted dark mode toggle with class-based Tailwind theme#99
yuliuyi717-ux wants to merge 1 commit intosorosave-protocol:mainfrom
yuliuyi717-ux:codex/dark-mode-toggle-31

Conversation

@yuliuyi717-ux
Copy link

Related to #31

Implements dark mode with a persisted user preference and applies dark styles across existing pages/components.

What's included:

  1. Theme context in src/app/providers.tsx
    • useTheme() hook
    • persisted sorosave-theme preference in localStorage
    • fallback to system preference on first load
    • applies dark class to <html>
  2. Tailwind class-based dark mode
    • tailwind.config.js -> darkMode: "class"
  3. New toggle component
    • src/components/ThemeToggle.tsx
  4. Navbar integration
    • toggle added to src/components/Navbar.tsx
  5. Existing UI adapted for both modes
    • updated layout + major page/components to include dark variants

TDD-style checks used before/after implementation:

  • RED checks: missing darkMode class, missing toggle component, missing theme hook
  • GREEN checks: all expected artifacts present and wired (darkMode, ThemeToggle, useTheme, Navbar usage)

Note: local full app build wasn't run because this repo uses workspace:* dependency resolution not available in this environment, so validation here was done via targeted structural checks.

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