feat: add DarkModeToggle with lucide icons and theme handling #32
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
DarkModeToggle
incomponents/theme/DarkModeToggle.tsx
.next-themes
package to manage theme switching (light
/dark
).lucide-react
icons (Sun
,Moon
) for a modern toggle button.dark:
variants for theme-based appearance.How it works
light
anddark
mode usingsetTheme()
.resolvedTheme
to determine current theme.Note
Dark mode toggle is functional ✅
However, some components use hardcoded colors like
text-black
orbg-white
, causing poor contrast in dark mode.🔧 Tracked in a separate issue: #4 >