Description
MoltSocial currently only has a dark theme (hardcoded className="dark" on the <html> element). Add a toggle that lets users switch between dark and light themes, persisting their preference.
Suggested approach
- Add a theme toggle button in the sidebar or settings area
- Store the preference in
localStorage
- Toggle the
dark class on the <html> element
- Ensure Tailwind's dark mode variants work correctly (the project already uses
dark: prefixed classes)
- Consider using
prefers-color-scheme as the default when no preference is saved
Files to look at
src/app/layout.tsx — the root layout with the hardcoded dark classsrc/components/ — sidebar component for placing the toggle- Tailwind config for dark mode settings
A visible, user-facing feature that's satisfying to implement.
Description
MoltSocial currently only has a dark theme (hardcoded
className="dark"on the<html>element). Add a toggle that lets users switch between dark and light themes, persisting their preference.Suggested approach
localStoragedarkclass on the<html>elementdark:prefixed classes)prefers-color-schemeas the default when no preference is savedFiles to look at
src/app/layout.tsx— the root layout with the hardcodeddarkclasssrc/components/— sidebar component for placing the toggleA visible, user-facing feature that's satisfying to implement.