前端如何实现动态主题

前端实现动态主题主要依靠CSS 变量、JavaScript 操纵 DOM、Web 存储 API，以及CSS 媒体查询。这些技术联合使用，可以灵活地在用户界面上切换主题色彩和样式，提升用户体验。其中，CSS 变量的使用尤为关键，它允许我们在样式表中定义可重用的值，这些值可以在多个地方引用，并且可以通过 JavaScript 动态地修改这些值来实现主题的切换。这样，当需要更改主题时，我们只需要更改一组变量的值，而不是替换整个样式表，这大大简化了主题切换的实现。

一、CSS 变量的定义与应用

CSS 变量，也称为自定义属性，是 CSS 的一项强大功能，它允许开发者定义一个值并在整个文档中重复使用该值。定义 CSS 变量通常在 :root 伪类中进行，这样确保了在全局范围内都能访问到这些变量。

首先，定义一组基础的主题变量：

:root {
  --primary-color: #007bff;
  --background-color: #fff;
  --text-color: #333;
}

随后，在CSS中引用这些变量：

body {
  background-color: var(--background-color);
  color: var(--text-color);
}
.button {
  background-color: var(--primary-color);
  color: var(--background-color);
}

通过这种方式，当我们需要切换主题时，只需通过 JavaScript 修改 :root 中的变量值，UI 就会自动更新为新的主题色彩。

二、JavaScript 切换主题

要通过 JavaScript 动态切换主题，首先需要编写函数来更改 :root 中 CSS 变量的值。在这个函数中，可以定义一个主题对象，用于存储不同主题的颜色值。根据用户的选择，我们可以替换当前主题变量的值来实现主题的动态切换。

示例代码如下：

const themes = {
  dark: {
    '--primary-color': '#17a2b8',
    '--background-color': '#343a40',
    '--text-color': '#fff',
  },
  light: {
    '--primary-color': '#007bff',
    '--background-color': '#fff',
    '--text-color': '#333',
  },
};
function switchTheme(newTheme) {
  const theme = themes[newTheme];
  for (let variable in theme) {
    document.documentElement.style.setProperty(variable, theme[variable]);
  }
}

在这个函数中，document.documentElement.style.setProperty 方法用于更新 CSS 变量的值。这种方法极大地增加了前端主题切换的灵活性和便捷性。

三、利用 Web 存储 API 保存主题偏好

为了提升用户体验，可以使用 Web 存储 API（如 localStorage）来保存用户的主题偏好。这样，当用户下次访问网站时，可以自动加载他们偏好的主题，而无需手动切换。

function storeThemePreference(theme) {
  localStorage.setItem('preferredTheme', theme);
}
function loadThemePreference() {
  const preferredTheme = localStorage.getItem('preferredTheme');
  if (preferredTheme) {
    switchTheme(preferredTheme);
  }
}
// 页面加载时调用
loadThemePreference();

四、使用媒体查询实现自动主题切换

通过CSS媒体查询（Media Query），可以根据系统主题偏好自动调整网站主题。这对于实现根据操作系统色彩方案（如深色模式和浅色模式）自动切换网站主题尤为有用。

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #17a2b8;
    --background-color: #343a40;
    --text-color: #fff;
  }
}
@media (prefers-color-scheme: light) {
  :root {
    --primary-color: #007bff;
    --background-color: #fff;
    --text-color: #333;
  }
}