Svelte+Tailwind网站如何在页面加载前设置主题类避免闪烁？

问题背景 #

给Svelte + Tailwind网站实现了深色模式，逻辑是先检测系统默认主题偏好，同时添加了主题切换按钮。核心逻辑是用localStorage存储dark或light，再给根html元素添加/移除dark类。但目前用onMount钩子执行逻辑，导致页面加载时会短暂闪烁浅色主题，再切换到深色。

相关代码：

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';
    }
});

提出两个问题：

1. 是否可以在页面初始渲染前执行检测localStorage并添加dark类的函数？
2. 若无法实现上述需求，有无其他方式能让主题即时正确渲染？

问题1解答：可以在页面渲染前执行逻辑 #

方案1：在Svelte根组件的顶级脚本中执行 #

不用依赖onMount，直接在根组件（比如App.svelte）的<script>里写逻辑，Svelte的顶级脚本会在组件初始化时同步执行，早于DOM渲染，不会出现闪烁：

// App.svelte
<script>
    // 页面渲染前执行主题检测
    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';
    }

    // 主题切换函数
    function toggleTheme() {
        const isDark = document.documentElement.classList.contains('dark');
        document.documentElement.classList.toggle('dark');
        localStorage.theme = isDark ? 'light' : 'dark';
    }
</script>

方案2：直接写在index.html的<head>中 #

把检测逻辑放到index.html的<head>里，用原生JS执行，这是最早能执行代码的时机，彻底避免闪烁：

<!-- index.html -->
<head>
    <!-- 其他头部资源 -->
    <script>
        // 页面渲染前设置主题类
        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
    </script>
</head>

问题2解答：替代方案（预加载主题样式） #

如果因为某些限制不能提前执行JS，可以用CSS媒体查询配合内联样式，给初始状态设置正确的主题样式，避免闪烁：

1. 全局样式中定义主题变量：

/* 全局样式文件或index.html的<style>标签 */
:root {
    --bg-color: #ffffff;
    --text-color: #111827;
}

/* 系统深色偏好下的默认样式 */
@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        --bg-color: #111827;
        --text-color: #ffffff;
    }
}

/* 手动切换的深色主题 */
:root.dark {
    --bg-color: #111827;
    --text-color: #ffffff;
}

/* 手动切换的浅色主题 */
:root.light {
    --bg-color: #ffffff;
    --text-color: #111827;
}

2. 在index.html的<body>标签中直接应用变量：

<body style="background-color: var(--bg-color); color: var(--text-color); transition: background-color 0.2s, color 0.2s;">
    <!-- 页面内容 -->
</body>

这样即使JS还没执行，CSS也会根据系统偏好先渲染正确的主题样式，后续JS切换类时也能平滑过渡。

内容的提问来源于stack exchange，提问作者Petr Hora