Harden `next-themes` hydration and the theme toggle experience

[grantfox-oss]

Problem

The current theme system uses next-themes and ThemeToggle, but hydration mismatches and theme flash are common risks with this pattern.

Goals

• Harden components/theme-toggle.tsx and app/layout.tsx for stable client/server rendering.
• Ensure the theme is correctly persisted across browser reloads and server-rendered pages.
• Make the toggle fully keyboard accessible and announce the active theme state.
• Add a fallback for browsers that do not support local storage.

Acceptance criteria

• The theme preference persists across refreshes and custom routes.
• No hydration warnings occur when switching themes or loading pages.
• Keyboard and screen-reader users can use the toggle successfully.
• The only ThemeToggle icon state is the active theme (no flicker or incorrect state before mount).

---

[SHEROSE0]

Hi Maintainer,

I've read through the task description and understand the requirements. I'm confident I can work on this issue. Could you kindly assign it to me?

Thank you!

[grantfox-oss]

🦊 GrantFox — @SHEROSE0 has been assigned to this issue as part of the Official Campaign | FWC26 campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #527)
2. Your PR will be reviewed by the MERIDIAN-CITY maintainers

Good luck! Track your progress on GrantFox.