7d6fcb4d8d
- Add chart palette, motion, and z-index CSS vars to globals.css - Replace custom theme-provider with next-themes (dark default) - Extend tailwind.config.ts with heading fonts, spacing (row-compact, row-roomy, sidebar), chart colors, elevation shadows, glow shadows, transition timing, pill border-radius, z-index scale - Update tick-flash animations to match design token spec (480ms) - Add prefers-reduced-motion support for all animations - Create base design-system components: Surface, SurfaceElevated, Divider, DensityProvider/useDensity, Numeric (VND/percent/compact formatting), Signal (up/down/neutral pill) - Add dev-only /dev/tokens showcase route (404 in production) - Update theme-provider tests to match next-themes integration Co-Authored-By: Paperclip <noreply@paperclip.ing>
32 lines
788 B
TypeScript
32 lines
788 B
TypeScript
'use client';
|
|
|
|
import { ThemeProvider as NextThemesProvider, useTheme as useNextTheme } from 'next-themes';
|
|
|
|
export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<NextThemesProvider
|
|
attribute="class"
|
|
defaultTheme="dark"
|
|
storageKey="goodgo-theme"
|
|
enableSystem={false}
|
|
>
|
|
{children}
|
|
</NextThemesProvider>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Backward-compatible useTheme hook.
|
|
* Returns `theme` ('light' | 'dark') and `toggleTheme`.
|
|
*/
|
|
export function useTheme() {
|
|
const { theme, setTheme, resolvedTheme } = useNextTheme();
|
|
const current = (resolvedTheme ?? theme ?? 'dark') as 'light' | 'dark';
|
|
|
|
const toggleTheme = () => {
|
|
setTheme(current === 'dark' ? 'light' : 'dark');
|
|
};
|
|
|
|
return { theme: current, toggleTheme };
|
|
}
|