Function App

src/index.jsx:20–211

()

});

function App() {
    const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
    const [mode, setMode] = useState(null);
    const activeMode = mode ?? (prefersDarkMode ? 'dark' : 'light');
    useEffect(() => {
        let mounted = true;
        localforage.getItem('theme').then((theme) => {
            if (mounted && theme) {
                setMode(theme);
            }
        });
        return () => {
            mounted = false;
        };
    }, []);

    useEffect(() => {
        const root = document.documentElement;
        if (activeMode === 'dark') {
            root.style.setProperty('--scrollbar-color', 'rgba(155, 155, 155, 0.7)');
            root.style.setProperty('--bg-color', '#0F1318');
            root.style.setProperty('--link-color', '#6BA6E8');
        } else {
            root.style.setProperty('--scrollbar-color', 'rgba(0, 0, 0, 0.5)');
            root.style.setProperty('--bg-color', '#E8EDF5');
            root.style.setProperty('--link-color', '#1C5BAA');
        }
    }, [activeMode]);

    const toggleTheme = useCallback(() => {
        const nextMode = activeMode === 'dark' ? 'light' : 'dark';
        setMode(nextMode);
        localforage.setItem('theme', nextMode);
    }, [activeMode]);
    const theme = useMemo(() => createTheme({
        palette: {
            mode: activeMode,
            contrastThreshold: 3,
            primary: {
                main: activeMode === 'dark' ? '#6BA6E8' : '#1C5BAA',
                light: activeMode === 'dark' ? '#93C0F2' : '#5189C9',
                dark: activeMode === 'dark' ? '#4F86CE' : '#14457F',
                contrastText: activeMode === 'dark' ? '#0B1B2E' : '#ffffff',
            },
            secondary: {
                main: activeMode === 'dark' ? '#9AA4B2' : '#55606C',
                contrastText: activeMode === 'dark' ? '#0B1B2E' : '#ffffff',
            },
            background: {
                default: activeMode === 'dark' ? '#0F1318' : '#E2E8F2',
                paper: activeMode === 'dark' ? '#181D25' : '#ECF1F9',
            },
            text: {
                primary: activeMode === 'dark' ? '#E7EBF1' : '#1A2027',
                secondary: activeMode === 'dark' ? '#97A1AF' : '#55606C',
            },
            divider: activeMode === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(16,24,40,0.08)',
            // App-level surface tiers. Light mode is a soft blue-tinted off-white family