Skip to content

feat(theme): add persistent dark mode toggle - #845

Merged
dzekojohn4 merged 1 commit into
UnityChainxx:mainfrom
lovesmilesmall-hue:feat/issue-694-dark-mode-toggle
Oct 20, 2026
Merged

dzekojohn4 merged 1 commit into
UnityChainxx:mainfrom
lovesmilesmall-hue:feat/issue-694-dark-mode-toggle

Conversation

@lovesmilesmall-hue

Copy link
Copy Markdown

Summary

Adds a light/dark theme toggle to the frontend with a persistent user preference. Users can switch themes from the navbar, the choice is remembered across reloads, and first-time visitors get the theme matching their system preference.

Problem

Tailwind was configured for class-based dark mode (darkMode: ["class"]), but nothing ever added the dark class to the document, so the dark styles were unreachable. There was no control to switch themes, no persistence of a user's choice, and no handling of the system preference, meaning the app always rendered in light mode regardless of the environment.

Changes Made

  • Added frontend/hooks/useTheme.js: resolves the active theme from the persisted localStorage value, falling back to prefers-color-scheme, applies the dark/light class to document.documentElement, and persists an explicit toggle choice under stellarhunts.theme.
  • Added frontend/components/ThemeToggle.jsx: a button that switches between themes and shows a sun or moon icon for the current theme.
  • Wired the toggle into frontend/components/Navbar.jsx next to the mobile menu control.
  • Added an inline script in frontend/app/layout.js that applies the stored or system theme before hydration to avoid a light-mode flash on load.

Implementation Details

useTheme toggles the dark/light classes on the root element, matching the existing Tailwind class strategy so all components using dark: variants are themed consistently. The initial class is set by a small inline script in the document head, which reads localStorage first and otherwise consults matchMedia("(prefers-color-scheme: dark)"); React state then syncs to that value on mount so the toggle reflects reality without a flash.

Closes #692

Closes #694

Closes #695

Closes #706

@drips-wave

drips-wave Bot commented Oct 20, 2026

Copy link
Copy Markdown

@lovesmilesmall-hue 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

@dzekojohn4 dzekojohn4 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@dzekojohn4
dzekojohn4 merged commit 4dac776 into UnityChainxx:main Oct 20, 2026
14 of 17 checks 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

2 participants