diff --git a/sundynix-admin/src/site/components/layout/site-header.tsx b/sundynix-admin/src/site/components/layout/site-header.tsx index 93aff17..dcaa2c5 100644 --- a/sundynix-admin/src/site/components/layout/site-header.tsx +++ b/sundynix-admin/src/site/components/layout/site-header.tsx @@ -1,34 +1,17 @@ import { useState } from 'react' import { Link, NavLink } from 'react-router-dom' -import { Menu, Moon, Sun, X } from 'lucide-react' -import { useTheme } from '@/components/theme-provider' +import { Menu, X } from 'lucide-react' import { LogoMark } from '@/components/logo' import { cn } from '@/lib/utils' +// 官网默认浅色,不搬深浅切换(ThemeProvider 未挂载)。 + const NAV_ITEMS = [ { label: '产品', to: '/', end: true }, { label: '功能', to: '/#features' }, { label: '架构', to: '/#architecture' }, ] -function ThemeToggle() { - const { resolved, setTheme } = useTheme() - return ( - setTheme(resolved === 'dark' ? 'light' : 'dark')} - className="flex size-8 items-center justify-center rounded-full border border-hairline-strong text-ink-2 transition-colors hover:border-accent hover:text-accent-ink" - > - {resolved === 'dark' ? ( - - ) : ( - - )} - - ) -} - export function SiteHeader() { const [open, setOpen] = useState(false) @@ -70,7 +53,6 @@ export function SiteHeader() { {links} - - void -} - -const ThemeContext = createContext(null) - -const STORAGE_KEY = 'sundynix-theme' - -function systemTheme(): 'light' | 'dark' { - return window.matchMedia('(prefers-color-scheme: dark)').matches - ? 'dark' - : 'light' -} - -export function ThemeProvider({ children }: { children: ReactNode }) { - const [theme, setThemeState] = useState( - () => (localStorage.getItem(STORAGE_KEY) as Theme) ?? 'system', - ) - const [resolved, setResolved] = useState<'light' | 'dark'>(() => - theme === 'system' ? systemTheme() : theme, - ) - - useEffect(() => { - const apply = () => { - const r = theme === 'system' ? systemTheme() : theme - setResolved(r) - document.documentElement.classList.toggle('dark', r === 'dark') - } - apply() - const mq = window.matchMedia('(prefers-color-scheme: dark)') - mq.addEventListener('change', apply) - return () => mq.removeEventListener('change', apply) - }, [theme]) - - const setTheme = (t: Theme) => { - localStorage.setItem(STORAGE_KEY, t) - setThemeState(t) - } - - return ( - - {children} - - ) -} - -export function useTheme() { - const ctx = useContext(ThemeContext) - if (!ctx) throw new Error('useTheme must be used within ThemeProvider') - return ctx -}