Skip to content

feat: add dark/light theme support#71

Closed
Ai-chan-0411 wants to merge 1 commit intoO2sa:mainfrom
Ai-chan-0411:feat/dark-light-theme-support
Closed

feat: add dark/light theme support#71
Ai-chan-0411 wants to merge 1 commit intoO2sa:mainfrom
Ai-chan-0411:feat/dark-light-theme-support

Conversation

@Ai-chan-0411
Copy link
Copy Markdown
Contributor

closes #15

Summary

Add dark/light theme toggle using next-themes:

  • ThemeProvider wrapping the app with attribute="class", defaultTheme="system", enableSystem
  • ThemeToggle component: Sun/Moon icon button in header with hydration-safe mounting
  • CSS: Added color-scheme: dark for .dark class, dark mode body background gradient
  • Layout: Added suppressHydrationWarning on <html> for SSR compatibility

Changes

  • app/providers.tsx - Wrap TooltipProvider with ThemeProvider from next-themes
  • app/layout.tsx - Add suppressHydrationWarning to <html>
  • app/globals.css - Add .dark { color-scheme: dark } rule
  • app/page.tsx - Add ThemeToggle to header
  • components/theme-toggle.tsx - New component with Sun/Moon toggle

Test plan

  • Page loads with system theme by default
  • Click toggle - switches between light and dark
  • Dark mode shows dark background gradient and proper text colors
  • No hydration mismatch warnings in console
  • Theme persists on page reload (stored in localStorage)

closes O2sa#15

Signed-off-by: Ai-chan-0411 (藍) <aoikabu12@gmail.com>
@vercel
Copy link
Copy Markdown

vercel bot commented Apr 12, 2026

@Ai-chan-0411 is attempting to deploy a commit to the osama's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions
Copy link
Copy Markdown

Thank you for the pull request! ✅

A maintainer will review this soon. Please be patient while we take a look. 🙌

@vercel
Copy link
Copy Markdown

vercel bot commented Apr 12, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
dev-impact Error Error Apr 12, 2026 8:36pm

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.

Add dark/light theme support

1 participant