如何在网站加载之前（onMount 之前）更新元素上的类？

Question

我在我的 Svelte + Tailwind 网站上添加了深色模式。我通过首先检查用户的首选（系统默认）主题来做到这一点，但还添加了一个可以随时更改它的按钮。我本质上只是更新本地存储以存储深色或浅色，然后从根 html 元素中添加或删除类“dark”。不过，我遇到了一个问题：我在 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 并在显示初始网站之前应用“dark”类？

如果无法完成我想要做的事情，是否有其他方法可以立即正确实现页面渲染的主题？

Answer 1

我通过将 onMount 代码从最顶层的 +layout.svelte 直接移动到 app.html 中的脚本元素来修复它。这消除了重新加载时闪烁的浅色主题。