Skip to content

Implement persisted light/dark theme toggle in Settings #289

Description

@Lakes41

Difficulty: Intermediate
Type: feature

Background
The Settings page (/settings) is described as holding app settings, but there's no evidence of a theme toggle despite Tailwind CSS being the styling layer, which supports dark mode out of the box.

Problem
Users cannot switch between light and dark themes, and any preference isn't remembered across sessions.

Expected outcome
A theme toggle in Settings switches the whole dashboard between light and dark mode, and the choice persists across reloads.

Suggested implementation

  • Enable Tailwind's darkMode: 'class' strategy in the Tailwind config.
  • Add a small ThemeProvider (context) wrapping the app layout that reads/writes the preference.
  • Persist preference via a cookie or localStorage (guard SSR access appropriately in Next.js 14).
  • Add a toggle UI control in the Settings page.

Acceptance criteria

  • Toggling updates all pages immediately, not just Settings
  • Preference persists after a full page reload
  • No flash-of-wrong-theme on initial load
  • Works with existing Tailwind utility classes without a full re-theme

Likely affected files/directories

  • apps/dashboard/app/settings/
  • apps/dashboard/tailwind.config.*
  • apps/dashboard/app/layout.tsx

Metadata

Metadata

Assignees

Labels

GrantFox OSSGrantFox Open Source Sponsorship program tagMaybe RewardedIssue may qualify for a reward upon successful completion per campaign rulesOfficial Campaign | FWC26Official FWC26 campaign issue — eligible for campaign scoring and rewardsfeatureNew feature, enhancement, or functional additionintermediateIntermediate difficulty tasks requiring solid experience and some contextui/uxUser interface or user experience improvements and design work

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions