diff --git a/docs/app/components/ThemeToggle.tsx b/docs/app/components/ThemeToggle.tsx index 6138d44..b980ea6 100644 --- a/docs/app/components/ThemeToggle.tsx +++ b/docs/app/components/ThemeToggle.tsx @@ -4,6 +4,15 @@ import { FiSun, FiMonitor, FiMoon } from 'react-icons/fi' type Mode = 'light' | 'dark' | 'system' +function getStoredMode(): Mode { + if (typeof window === 'undefined') return 'system' + const stored = localStorage.getItem('theme') + if (stored === 'light' || stored === 'dark' || stored === 'system') { + return stored + } + return 'system' +} + function applyTheme(mode: Mode) { const root = document.documentElement if (mode === 'system') { @@ -16,17 +25,15 @@ function applyTheme(mode: Mode) { } export default function ThemeToggle() { - const [mode, setMode] = useState('system') + const [mode, setMode] = useState(getStoredMode) useEffect(() => { - const saved = (localStorage.getItem('theme') as Mode) || 'system' - setMode(saved) - applyTheme(saved) + const current = getStoredMode() + applyTheme(current) const mq = window.matchMedia('(prefers-color-scheme: dark)') const onChange = () => { - const current = (localStorage.getItem('theme') as Mode) || 'system' - if (current === 'system') applyTheme('system') + if (getStoredMode() === 'system') applyTheme('system') } mq.addEventListener?.('change', onChange) return () => mq.removeEventListener?.('change', onChange) diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx index fa1de28..a49f065 100644 --- a/docs/app/layout.tsx +++ b/docs/app/layout.tsx @@ -1,7 +1,14 @@ import type { Metadata } from 'next' +import { Roboto } from 'next/font/google' import './globals.css' import ThemeToggle from './components/ThemeToggle' +const roboto = Roboto({ + subsets: ['latin'], + weight: ['400', '700'], + display: 'swap', +}) + export const metadata: Metadata = { title: 'Metbit Docs', description: 'Documentation for Metbit built with Next.js', @@ -11,16 +18,13 @@ export default function RootLayout({ children }: { children: React.ReactNode }) return ( - - -