Как я могу обновить класс элемента до загрузки веб-сайта (до onMount)?
Я добавил темный режим на свой сайт Svelte + Tailwind. Я сделал это, сначала проверив предпочтительную тему пользователя (системную по умолчанию), а также добавил кнопку, позволяющую изменить ее в любое время. По сути, я просто обновляю локальное хранилище, чтобы хранить либо темное, либо светлое, а затем добавляю или удаляю класс «темный» из корневого элемента html. Однако я столкнулся с проблемой: я добавляю или удаляю «темный» класс onMount, что означает, что светлая тема по умолчанию мигает на секунду (ослепляя любого в радиусе 10 км), прежде чем она сменится на темную тему.
Связанный код (взят непосредственно из руководства по темному режиму Tailwind):
onMount(() => {
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
localStorage.theme = 'dark';
} else {
document.documentElement.classList.remove('dark');
localStorage.theme = 'light';
}
});
Мои вопросы):
Есть ли способ запустить функцию, которая проверяет localStorage и применяет «темный» класс перед отображением исходного веб-сайта?
Если нет способа сделать то, что я пытаюсь сделать, есть ли другой способ сразу реализовать темы с правильным рендерингом страницы?
Ответы 2
Я исправил это, переместив код onMount из самого верхнего +layout.svelte непосредственно в элемент сценария в app.html. Это устранило мигание светлой темы при перезагрузке.
onMount работает на клиенте довольно поздно.
Вероятно, вы также можете переместить логику в главный скрипт макета:
<svelte:head>
<script>
...
</script>
</svelte:head>
Такие сценарии должны выполняться как можно раньше (но вы не можете использовать там возможности Svelte).