Skip to content

Conversation

maneeshkumarr
Copy link

Summary

  • Created DarkModeToggle in components/theme/DarkModeToggle.tsx.
  • Added and configured the next-themes package to manage theme switching (light/dark).
  • Used lucide-react icons (Sun, Moon) for a modern toggle button.
  • Handles SSR hydration by waiting for the component to mount.
  • Fully styled with Tailwind CSS using dark: variants for theme-based appearance.

How it works

  • On button click, toggles between light and dark mode using setTheme().
  • Uses resolvedTheme to determine current theme.
  • Button styling and icon updates based on the active theme.

Note

Dark mode toggle is functional ✅
However, some components use hardcoded colors like text-black or bg-white, causing poor contrast in dark mode.


🔧 Tracked in a separate issue: #4 >

@maneeshkumarr
Copy link
Author

Uploading Screen Recording 2025-07-04 151831.mp4…

@ixartz
Copy link
Owner

ixartz commented Jul 5, 2025

Should I start reviewing it?

@maneeshkumarr
Copy link
Author

yes please..

@maneeshkumarr
Copy link
Author

please review
if any mistake let me know

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.

2 participants