Skip to content

feat: add theme provider and toggle functionality to support light/dark#109

Open
kerwin2046 wants to merge 1 commit into
guasam:mainfrom
kerwin2046:update/mode-stored
Open

feat: add theme provider and toggle functionality to support light/dark#109
kerwin2046 wants to merge 1 commit into
guasam:mainfrom
kerwin2046:update/mode-stored

Conversation

@kerwin2046

Copy link
Copy Markdown

Summary

This PR improves the starter kit's dark mode behavior by introducing a global ThemeProvider and
making the welcome screen's dark mode toggle use it.

  • Add a ThemeProvider with a useTheme hook to manage the app theme (light / dark) in a single
    place.
  • Initialize the theme from localStorage (when available) or from the system prefers-color-scheme
    media query.
  • Persist the selected theme in localStorage so it survives app restarts.
  • Apply the dark class on document.documentElement to integrate with Tailwind's dark mode
    styling.
  • Refactor WelcomeKit's dark mode toggle to use useTheme instead of mutating
    document.documentElement directly.

Implementation details

  • New file app/components/theme/ThemeProvider.tsx:
    • Exposes ThemeProvider and useTheme.
    • Resolves the initial theme in this order: localStorage → system preference → default light.
    • Listens to prefers-color-scheme: dark changes when the user has not explicitly chosen a theme.
    • Keeps document.documentElement in sync by adding/removing the dark class.
  • app/renderer.tsx:
    • Wraps <App /> with ThemeProvider inside WindowContextProvider.
  • app/components/welcome/WelcomeKit.tsx:
    • Replaces direct DOM manipulation with useTheme.
    • The toggle label now reflects the current theme (Dark Mode / Light Mode).

Testing

  • Run npm install and npm run dev.
  • Open the app and:
    • Toggle dark mode using the badge in the welcome screen and confirm the UI updates.
    • Reload the app and confirm the chosen theme is preserved.
    • (Optional) Change the OS theme and restart the app without manually toggling, to see it pick up
      the system preference when no explicit choice is stored.

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