I think monorepo is fairly correct now but I don't know for sure
This commit is contained in:
@@ -1,184 +1,70 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { DesktopIcon, MoonIcon, SunIcon } from '@radix-ui/react-icons';
|
||||
import * as z from 'zod/v4';
|
||||
import type { ComponentProps } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Moon, Sun } from 'lucide-react';
|
||||
import { ThemeProvider as NextThemesProvider, useTheme } from 'next-themes';
|
||||
|
||||
import { Button } from './button';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from './dropdown-menu';
|
||||
import { Button, cn } from '@gib/ui';
|
||||
|
||||
const ThemeModeSchema = z.enum(['light', 'dark', 'auto']);
|
||||
const ThemeProvider = ({
|
||||
children,
|
||||
...props
|
||||
}: ComponentProps<typeof NextThemesProvider>) => {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
const themeKey = 'theme-mode';
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
export type ThemeMode = z.output<typeof ThemeModeSchema>;
|
||||
export type ResolvedTheme = Exclude<ThemeMode, 'auto'>;
|
||||
if (!mounted) return null;
|
||||
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
|
||||
};
|
||||
|
||||
const getStoredThemeMode = (): ThemeMode => {
|
||||
if (typeof window === 'undefined') return 'auto';
|
||||
try {
|
||||
const storedTheme = localStorage.getItem(themeKey);
|
||||
return ThemeModeSchema.parse(storedTheme);
|
||||
} catch {
|
||||
return 'auto';
|
||||
interface ThemeToggleProps {
|
||||
size?: number;
|
||||
buttonProps?: Omit<ComponentProps<typeof Button>, 'onClick'>;
|
||||
};
|
||||
|
||||
const ThemeToggle = ({ size = 1, buttonProps }: ThemeToggleProps) => {
|
||||
const { setTheme, resolvedTheme } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
if (!mounted) {
|
||||
return (
|
||||
<Button {...buttonProps}>
|
||||
<span style={{ height: `${size}rem`, width: `${size}rem` }} />
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const setStoredThemeMode = (theme: ThemeMode) => {
|
||||
try {
|
||||
const parsedTheme = ThemeModeSchema.parse(theme);
|
||||
localStorage.setItem(themeKey, parsedTheme);
|
||||
} catch {
|
||||
// Silently fail if localStorage is unavailable
|
||||
}
|
||||
};
|
||||
|
||||
const getSystemTheme = () => {
|
||||
if (typeof window === 'undefined') return 'light';
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
? 'dark'
|
||||
: 'light';
|
||||
};
|
||||
|
||||
const updateThemeClass = (themeMode: ThemeMode) => {
|
||||
const root = document.documentElement;
|
||||
root.classList.remove('light', 'dark', 'auto');
|
||||
const newTheme = themeMode === 'auto' ? getSystemTheme() : themeMode;
|
||||
root.classList.add(newTheme);
|
||||
|
||||
if (themeMode === 'auto') {
|
||||
root.classList.add('auto');
|
||||
}
|
||||
};
|
||||
|
||||
const setupPreferredListener = () => {
|
||||
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
const handler = () => updateThemeClass('auto');
|
||||
mediaQuery.addEventListener('change', handler);
|
||||
return () => mediaQuery.removeEventListener('change', handler);
|
||||
};
|
||||
|
||||
const getNextTheme = (current: ThemeMode): ThemeMode => {
|
||||
const themes: ThemeMode[] =
|
||||
getSystemTheme() === 'dark'
|
||||
? ['auto', 'light', 'dark']
|
||||
: ['auto', 'dark', 'light'];
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
return themes[(themes.indexOf(current) + 1) % themes.length]!;
|
||||
};
|
||||
|
||||
export const themeDetectorScript = (function () {
|
||||
function themeFn() {
|
||||
const isValidTheme = (theme: string): theme is ThemeMode => {
|
||||
const validThemes = ['light', 'dark', 'auto'] as const;
|
||||
return validThemes.includes(theme as ThemeMode);
|
||||
};
|
||||
|
||||
const storedTheme = localStorage.getItem('theme-mode') ?? 'auto';
|
||||
const validTheme = isValidTheme(storedTheme) ? storedTheme : 'auto';
|
||||
|
||||
if (validTheme === 'auto') {
|
||||
const autoTheme = window.matchMedia('(prefers-color-scheme: dark)')
|
||||
.matches
|
||||
? 'dark'
|
||||
: 'light';
|
||||
document.documentElement.classList.add(autoTheme, 'auto');
|
||||
} else {
|
||||
document.documentElement.classList.add(validTheme);
|
||||
}
|
||||
}
|
||||
return `(${themeFn.toString()})();`;
|
||||
})();
|
||||
|
||||
interface ThemeContextProps {
|
||||
themeMode: ThemeMode;
|
||||
resolvedTheme: ResolvedTheme;
|
||||
setTheme: (theme: ThemeMode) => void;
|
||||
toggleMode: () => void;
|
||||
}
|
||||
const ThemeContext = React.createContext<ThemeContextProps | undefined>(
|
||||
undefined,
|
||||
);
|
||||
|
||||
export function ThemeProvider({ children }: React.PropsWithChildren) {
|
||||
const [themeMode, setThemeMode] = React.useState(getStoredThemeMode);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (themeMode !== 'auto') return;
|
||||
return setupPreferredListener();
|
||||
}, [themeMode]);
|
||||
|
||||
const resolvedTheme = themeMode === 'auto' ? getSystemTheme() : themeMode;
|
||||
|
||||
const setTheme = (newTheme: ThemeMode) => {
|
||||
setThemeMode(newTheme);
|
||||
setStoredThemeMode(newTheme);
|
||||
updateThemeClass(newTheme);
|
||||
};
|
||||
|
||||
const toggleMode = () => {
|
||||
setTheme(getNextTheme(themeMode));
|
||||
const toggleTheme = () => {
|
||||
if (resolvedTheme === 'dark') setTheme('light');
|
||||
else setTheme('dark');
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeContext
|
||||
value={{
|
||||
themeMode,
|
||||
resolvedTheme,
|
||||
setTheme,
|
||||
toggleMode,
|
||||
}}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
{...buttonProps}
|
||||
onClick={toggleTheme}
|
||||
className={cn('cursor-pointer', buttonProps?.className)}
|
||||
>
|
||||
<script
|
||||
dangerouslySetInnerHTML={{ __html: themeDetectorScript }}
|
||||
suppressHydrationWarning
|
||||
<Sun
|
||||
style={{ height: `${size}rem`, width: `${size}rem` }}
|
||||
className="scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90"
|
||||
/>
|
||||
{children}
|
||||
</ThemeContext>
|
||||
<Moon
|
||||
style={{ height: `${size}rem`, width: `${size}rem` }}
|
||||
className="absolute scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0"
|
||||
/>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export function useTheme() {
|
||||
const context = React.use(ThemeContext);
|
||||
if (!context) {
|
||||
throw new Error('useTheme must be used within a ThemeProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
|
||||
export function ThemeToggle() {
|
||||
const { setTheme } = useTheme();
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="[&>svg]:absolute [&>svg]:size-5 [&>svg]:scale-0"
|
||||
>
|
||||
<SunIcon className="light:scale-100! auto:scale-0!" />
|
||||
<MoonIcon className="auto:scale-0! dark:scale-100!" />
|
||||
<DesktopIcon className="auto:scale-100!" />
|
||||
<span className="sr-only">Toggle theme</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => setTheme('light')}>
|
||||
Light
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setTheme('dark')}>
|
||||
Dark
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setTheme('auto')}>
|
||||
System
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
export { ThemeProvider, ThemeToggle, type ThemeToggleProps };
|
||||
|
||||
Reference in New Issue
Block a user