在Svelte中切换明暗主题时响应变化遇500错误求助

错误原因 #

你的代码在服务端渲染（SSR）场景下会触发500错误：Svelte的响应式声明$: isDarkMode = ...会在服务端执行，但服务端环境中不存在document对象，直接访问会抛出"document is not defined"的未定义错误。而toggleTheme是点击触发的客户端函数，仅在浏览器环境执行，所以不会出现问题。

解决方法 #

1. 先判断当前是否处于浏览器环境，避免服务端访问document
2. 让isDarkMode能响应主题的动态变化（手动切换、系统主题变更），而非仅初始化一次

修改后的代码示例 #

<script lang="ts">
  // 纯Svelte项目用这个判断浏览器环境；SvelteKit可直接导入`import { browser } from '$app/environment'`
  const browser = typeof document !== 'undefined';

  let isDarkMode = false;

  function toggleTheme() {
    if (!browser) return;
    
    const root = document.documentElement;
    root.classList.toggle('dark');
    isDarkMode = root.classList.contains('dark');
    // 可选：保存主题到localStorage，刷新后保持状态
    localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
  }

  // 仅在客户端初始化主题状态
  if (browser) {
    // 优先读取用户手动设置的主题，无则跟随系统主题
    const savedTheme = localStorage.getItem('theme');
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    isDarkMode = savedTheme ? savedTheme === 'dark' : prefersDark;
    
    // 同步根元素的主题类
    document.documentElement.classList.toggle('dark', isDarkMode);

    // 监听系统主题自动变化（仅当用户未手动设置时生效）
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
      if (!localStorage.getItem('theme')) {
        isDarkMode = e.matches;
        document.documentElement.classList.toggle('dark', isDarkMode);
      }
    });
  }
</script>

<button on:click={toggleTheme}>Change theme</button>

{#if isDarkMode}
  <p>Welcome to the dark side!</p>
{:else}
  <p>Please have your health checked</p>
{/if}

额外优化点 #

• 用classList.toggle简化主题切换逻辑，替代原有的判断-添加/移除操作
• 增加localStorage持久化，确保刷新页面后主题状态不丢失
• 监听系统主题变化，实现自动跟随系统的适配能力

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