-
Notifications
You must be signed in to change notification settings - Fork 26
claude driven dark mode #96
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
ZachBeta
wants to merge
6
commits into
RelistenNet:master
Choose a base branch
from
ZachBeta:dark-mode
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
6 commits
Select commit
Hold shift + click to select a range
2c0a14b
claude driven dark mode
ZachBeta 88fecc0
second pass - removing js, focusing on css and cookies
ZachBeta 1ac8c9d
roll back accidental change
ZachBeta 6bde23c
remove accdiental package lock add
ZachBeta 28b3be6
remove router refresh
ZachBeta bf67c6b
theme validation
ZachBeta File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,7 @@ | ||
| module.exports = { | ||
| plugins: { | ||
| '@tailwindcss/postcss': {}, | ||
| '@tailwindcss/postcss': { | ||
| darkMode: 'class', | ||
| }, | ||
| }, | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| 'use client'; | ||
|
|
||
| import { Moon, Sun } from 'lucide-react'; | ||
| import { useEffect, useState } from 'react'; | ||
| import { setTheme as setThemeCookie } from '@/lib/theme'; | ||
|
|
||
| export default function ThemeToggle() { | ||
| const [theme, setTheme] = useState<'light' | 'dark'>('light'); | ||
|
|
||
| useEffect(() => { | ||
| // Sync with current DOM state (set server-side) | ||
| const isDark = document.documentElement.classList.contains('dark'); | ||
| setTheme(isDark ? 'dark' : 'light'); | ||
| }, []); | ||
|
|
||
| const toggleTheme = async () => { | ||
| const newTheme = theme === 'light' ? 'dark' : 'light'; | ||
| setTheme(newTheme); | ||
|
|
||
| // Update DOM immediately for instant feedback | ||
| if (newTheme === 'dark') { | ||
| document.documentElement.classList.add('dark'); | ||
| document.documentElement.classList.remove('light'); | ||
| } else { | ||
| document.documentElement.classList.add('light'); | ||
| document.documentElement.classList.remove('dark'); | ||
| } | ||
|
|
||
| // Update cookie for persistence across navigation | ||
| await setThemeCookie(newTheme); | ||
| }; | ||
|
|
||
| return ( | ||
| <button | ||
| onClick={toggleTheme} | ||
| className="text-foreground-muted flex h-full items-center justify-center px-2 transition-colors hover:text-foreground active:relative active:top-[1px]" | ||
| aria-label="Toggle theme" | ||
| title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`} | ||
| > | ||
| {theme === 'light' ? <Moon size={18} /> : <Sun size={18} />} | ||
| </button> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| 'use server'; | ||
|
|
||
| import { cookies } from 'next/headers'; | ||
|
|
||
| const THEME_COOKIE_NAME = 'relisten_theme'; | ||
|
|
||
| export type Theme = 'light' | 'dark'; | ||
|
|
||
| export async function getTheme(): Promise<Theme | null> { | ||
| const cookieStore = await cookies(); | ||
| const themeCookie = cookieStore.get(THEME_COOKIE_NAME); | ||
| return (themeCookie?.value as Theme) || null; | ||
| } | ||
|
|
||
| export async function setTheme(theme: Theme) { | ||
| // Runtime validation to ensure theme is valid and fallback to 'light' if invalid | ||
| if (theme !== 'light' && theme !== 'dark') { | ||
| theme = 'light'; | ||
| console.error(`Invalid theme: ${theme}. Theme must be 'light' or 'dark'.`); | ||
| } | ||
|
|
||
| const cookieStore = await cookies(); | ||
| cookieStore.set(THEME_COOKIE_NAME, theme, { | ||
| path: '/', | ||
| maxAge: 60 * 60 * 24 * 365, // 1 year | ||
| sameSite: 'lax', | ||
| }); | ||
| } | ||
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this will create a server action (since use server) which isn't necessary since its only called from the server.
setTheme can be a server action, but it should include validation (theme can only be light|dark)