Template
Rami BitarandClaude Fable 5.1
07a99b441c
- Set up next-themes with a light/dark toggle in the header and move all sections onto theme tokens; dark mode stays pure black - Replace the hero terminal line with the AI Elements Snippet component - Restructure components into layout/, sections/, and shared/ with site-wide config in lib/site.ts Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
'use client';
|
|
|
|
import { useSyncExternalStore } from 'react';
|
|
import { RiMoonLine, RiSunLine } from '@remixicon/react';
|
|
import { useTheme } from 'next-themes';
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
const emptySubscribe = () => () => {};
|
|
|
|
export function ThemeToggle() {
|
|
const mounted = useSyncExternalStore(
|
|
emptySubscribe,
|
|
() => true,
|
|
() => false,
|
|
);
|
|
const { resolvedTheme, setTheme } = useTheme();
|
|
|
|
const isDark = mounted && resolvedTheme === 'dark';
|
|
|
|
return (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon-lg"
|
|
aria-label={
|
|
mounted ? `Switch to ${isDark ? 'light' : 'dark'} theme` : 'Toggle theme'
|
|
}
|
|
className="text-foreground/70 hover:bg-foreground/5 hover:text-foreground"
|
|
onClick={() => setTheme(isDark ? 'light' : 'dark')}
|
|
>
|
|
{mounted ? (
|
|
isDark ? (
|
|
<RiSunLine className="size-4" />
|
|
) : (
|
|
<RiMoonLine className="size-4" />
|
|
)
|
|
) : (
|
|
<span className="size-4" aria-hidden="true" />
|
|
)}
|
|
</Button>
|
|
);
|
|
}
|