Проект React Tailwind всегда мигает светлым фоном в темном режиме, может быть, FOUC? ⇐ Html

[Anonymous]

Я пишу персональный веб-сайт самостоятельно, но столкнулся с проблемой, которую долго не решал:
В темном режиме всегда вспыхивает светлый фон (может быть, FOUC?). Вот соответствующие источники:
Это часть моего файла index.css Tailwind CSS v4.

Код: Выделить всё

@import 'tailwindcss';

@custom-variant dark (&:where(.dark, .dark *));

@theme {
--color-bgprimary: var(--color-zinc-50);
--color-bgsecondary: var(--color-gray-200);
--color-primary: var(--color-zinc-800);
--color-secondary: var(--color-violet-800);
}

/* Dark mode overrides */
.dark {
--color-bgprimary: var(--color-neutral-900);
--color-bgsecondary: var(--color-gray-700);
--color-primary: var(--color-zinc-200);
--color-secondary: var(--color-cyan-400);
}

Это мой Applayout, как и весь компонент входа в приложение. util-transition-colors — это просто утилита для упрощения вывода цветов перехода длительностью 300. Это все равно не сработает, если я удалю соответствующие классы перехода.

Код: Выделить всё

У меня также есть сценарий для настройки начального темного режима в index.html, как показано ниже:

Код: Выделить всё

// Set initial theme before rendering to prevent FOUC
(function () {
function getInitialTheme() {
const storedTheme = localStorage.getItem('theme');
if (typeof storedTheme === 'string') {
return storedTheme;
}
const userMedia = window.matchMedia('(prefers-color-scheme: dark)');
if (userMedia.matches) {
return 'dark';
}
return 'light';
}

const theme = getInitialTheme();
const root = document.documentElement;
if (theme === 'dark') {
root.classList.add('dark');
} else {
root.classList.remove('dark');
}
})();

Это моя логика переключения темного режима:

Код: Выделить всё

useEffect(() => {
const root = document.documentElement;
const applyTheme = () => {
const systemPrefersDark = isSystemDarkMode();
const currentTheme = theme === 'system' ? (systemPrefersDark ? 'dark' : 'light') : theme;
if (currentTheme === 'dark') {
root.classList.add('dark');
} else {
root.classList.remove('dark');
}
};

applyTheme();

const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const handleChange = () => {
if (theme === 'system') {
applyTheme();
}
};

mediaQuery.addEventListener('change', handleChange);
return () => {
mediaQuery.removeEventListener('change', handleChange);
};
}, [theme]);

Несмотря на вышесказанное, проблема все еще существует. Это меня беспокоит, хотя я пробовал много способов решить эту проблему.

Обновление: решение состоит в том, чтобы изменить приведенный выше useEffect на useLayoutEffect.

Подробнее здесь: https://stackoverflow.com/questions/798 ... mode-maybe