Svelte（非SvelteKit）中darkmode无法保存到localStorage如何解决

代码存在的核心问题 #

• 类型不匹配：localStorage 仅支持存储字符串，你直接读取返回的"true"/"false"字符串作为writable初始值，后续取反逻辑会出现非预期结果（比如对字符串"false"取反会得到布尔值false，状态直接混乱）
• 存储逻辑错误：订阅回调里的value===false ? false : true逻辑完全没有同步实际状态，无论传入什么值最终都会固定存入布尔真值
• 缺少初始兜底：首次访问用户本地无对应存储字段时，读取到的null会作为初始状态传入store，导致初始主题判断异常
• 导出语法不规范：Svelte自定义store应使用export const导出，export let多用于组件props声明，用于store导出可能引发引用异常

修正后可直接运行的代码 #

Store 实现（../store/Store.js） #

import { writable } from 'svelte/store';

// 初始化时读取本地存储，做类型转换+默认值兜底
const initTheme = () => {
  const storedVal = localStorage.getItem('darkmode');
  // 已有存储值时把字符串转回布尔类型
  if (storedVal !== null) return storedVal === 'true';
  // 无存储值时默认跟随系统主题偏好
  return window.matchMedia('(prefers-color-scheme: dark)').matches;
};

export const darkmode = writable(initTheme());

// 状态变更时同步写入本地存储
darkmode.subscribe((val) => {
  localStorage.setItem('darkmode', String(val));
  // 同步给根节点加类名，方便写全局深色样式
  document.documentElement.classList.toggle('dark', val);
});

主题开关组件 #

<script>
  import { darkmode } from '../store/Store.js';
  const toggleTheme = () => darkmode.update(current => !current);
</script>

<button on:click={toggleTheme}>
  切换深浅模式
</button>

优化提示 #

• 若要避免页面初始加载时的主题闪烁，可以把读取本地主题、给html根节点加class的逻辑提前写到入口HTML的<head>标签中，在DOM渲染前执行完主题判断
• 不需要额外引入第三方库，原生Svelte的writable订阅机制完全可以满足持久化需求

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