BeerCSS项目中实现跨页面主题持久化的解决方案

在Web开发中，实现主题切换功能是提升用户体验的重要手段。本文将介绍在使用BeerCSS框架时，如何解决主题切换后无法跨页面持久化的问题。

问题背景

许多开发者在使用BeerCSS时，会遇到一个常见问题：当用户在页面A切换了主题模式（如从浅色切换到深色），但跳转到页面B时，主题又恢复到了默认状态。这是因为主题状态仅保存在当前页面的内存中，没有进行持久化存储。

核心原理

BeerCSS通过修改body元素的class来应用不同的主题样式。要实现跨页面主题一致，需要将用户选择的主题状态保存在持久化存储中。浏览器提供了两种主要的客户端存储方案：

1. sessionStorage：仅在当前会话期间有效，关闭浏览器标签页后数据会被清除
2. localStorage：长期有效，除非用户手动清除

实现方案

1. 保存主题状态

当用户切换主题时，除了调用BeerCSS的ui方法更新当前页面主题外，还需要将主题状态保存到存储中：

const saveTheme = async () => {
  const currentTheme = await ui("theme");
  const currentMode = await ui("mode");
  
  // 使用sessionStorage
  window.sessionStorage.setItem("theme", JSON.stringify(currentTheme));
  window.sessionStorage.setItem("mode", JSON.stringify(currentMode));
  
  // 或使用localStorage实现长期保存
  window.localStorage.setItem("theme", JSON.stringify(currentTheme));
  window.localStorage.setItem("mode", JSON.stringify(currentMode));
};

2. 加载主题状态

在每个页面加载时，先从存储中读取保存的主题状态，然后应用到当前页面：

const loadTheme = async () => {
  // 从sessionStorage读取
  const savedTheme = JSON.parse(window.sessionStorage.getItem("theme"));
  const savedMode = JSON.parse(window.sessionStorage.getItem("mode"));
  
  // 或从localStorage读取
  // const savedTheme = JSON.parse(window.localStorage.getItem("theme"));
  // const savedMode = JSON.parse(window.localStorage.getItem("mode"));
  
  if (savedTheme) await ui("theme", savedTheme);
  if (savedMode) await ui("mode", savedMode);
};

// 页面加载时调用
window.addEventListener("DOMContentLoaded", loadTheme);

3. 完整的主题切换函数

结合上述功能，可以创建一个完整的主题切换函数：

const toggleTheme = async () => {
  // 切换当前主题
  const newMode = (await ui("mode")) === "dark" ? "light" : "dark";
  await ui("mode", newMode);
  
  // 保存状态
  saveTheme();
};

进阶优化

1. 默认主题设置：可以在存储中没有主题设置时提供一个默认值
2. 服务器端同步：对于需要登录的应用，可以将主题偏好同步到服务器
3. 响应系统偏好：可以检测用户的系统主题偏好作为初始设置

// 检测系统主题偏好
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
const initialMode = prefersDark ? "dark" : "light";

注意事项

1. 使用JSON.stringify和JSON.parse是因为存储API只能存储字符串
2. 对于单页应用(SPA)，由于不会真正刷新页面，可能不需要持久化存储
3. 考虑添加过渡动画使主题切换更平滑

通过以上方法，可以确保用户在网站的任何页面都能保持统一的主题体验，提升产品的整体质感。