alboped
a09dcef3f1
基于 React + Vite + Ant Design Pro 搭建登录、动态菜单、布局主题与数据总览，并补充按菜单整理的 UI 设计稿。 Co-authored-by: Cursor <cursoragent@cursor.com>
27 lines
929 B
TypeScript
27 lines
929 B
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useAppStore, type ResolvedTheme } from '@/stores/app';
|
|
|
|
function getSystemTheme(): ResolvedTheme {
|
|
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
}
|
|
|
|
/** 返回当前真正应用的 light/dark */
|
|
export function useResolvedTheme(): ResolvedTheme {
|
|
const preference = useAppStore(s => s.themePreference);
|
|
const [systemTheme, setSystemTheme] = useState<ResolvedTheme>(() =>
|
|
typeof window === 'undefined' ? 'light' : getSystemTheme(),
|
|
);
|
|
|
|
useEffect(() => {
|
|
const mql = window.matchMedia('(prefers-color-scheme: dark)');
|
|
const onChange = (e: MediaQueryListEvent) => {
|
|
setSystemTheme(e.matches ? 'dark' : 'light');
|
|
};
|
|
mql.addEventListener('change', onChange);
|
|
return () => mql.removeEventListener('change', onChange);
|
|
}, []);
|
|
|
|
if (preference === 'system') return systemTheme;
|
|
return preference;
|
|
}
|