Skip to content

feat: add dark mode theme toggle with next-themes (#118)#203

Merged
gabito1451 merged 1 commit intoGalactiGuild:mainfrom
Awointa:main
Mar 28, 2026
Merged

feat: add dark mode theme toggle with next-themes (#118)#203
gabito1451 merged 1 commit intoGalactiGuild:mainfrom
Awointa:main

Conversation

@Awointa
Copy link
Copy Markdown
Contributor

@Awointa Awointa commented Mar 28, 2026

Summary

Implements full dark/light/system theme support across the app using next-themes, replacing the previous Zustand themeStore. Preference persists across reloads with no flash of unstyled content.


What changed

Dependencies

  • Installed next-themes
  • Configured Tailwind darkMode: 'class'

frontend/src/app/layout.tsx

  • ThemeProvider wired in with system as the default
  • Prevents FOUC on reload via next-themes built-in attribute injection

ThemeToggle (new component)

  • 3-step cycle: Light → Dark → System
  • Sun / Moon / Monitor icons per mode
  • Exposed in the Header action area

Removed

  • Zustand themeStore — replaced entirely by next-themes useTheme

Acceptance criteria

Criteria Status
Light, dark, and system modes supported
Preference persists in local storage
No FOUC on reload
Zustand theme store removed

Checklist

  • ThemeProvider configured with system default
  • ThemeToggle cycles through all 3 modes
  • FOUC prevented on reload
  • Preference persists across sessions
  • Zustand themeStore fully removed
  • Ready for review

Closes #118

- Install next-themes and configure Tailwind darkMode: 'class'
- Wire ThemeProvider into layout.tsx with system default
- Add ThemeToggle component (Sun/Moon/Monitor icons, 3-step cycle)
- Expose ThemeToggle in Header action area
- Remove Zustand themeStore in favour of next-themes useTheme
@drips-wave
Copy link
Copy Markdown

drips-wave bot commented Mar 28, 2026

@Awointa Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@gabito1451 gabito1451 merged commit 21e0a72 into GalactiGuild:main Mar 28, 2026
1 check passed
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.

Dark/Light Mode Theme Toggle

2 participants