CSS `Theming` (主题化) 方案：CSS 变量与 JavaScript 切换主题

各位前端的伙伴们，大家好！今天咱们聊聊CSS主题化这事儿，保证让你的网站换装像换衣服一样轻松愉快。主题化听起来高大上，其实核心就两字：灵活。咱要让用户觉得，这网站是为他量身定做的，他喜欢啥颜色就给他啥颜色！

今天的主角是：CSS 变量 和 JavaScript。这对黄金搭档能让我们在不修改大量 CSS 代码的情况下，实现主题的快速切换。准备好了吗？咱们这就开讲！

一、为啥要搞主题化？

在深入技术细节之前，咱们先搞清楚为什么要搞主题化。简单来说，好处多多：

用户体验 UP! UP! UP!： 让用户选择自己喜欢的主题，增强用户粘性，提高用户满意度。想想看，如果一个网站能根据你的喜好自动切换明暗模式，是不是感觉很贴心？
品牌定制： 不同的品牌可能有不同的主题色。通过主题化，可以轻松地为不同的品牌定制不同的外观。
无障碍考虑： 一些用户可能需要高对比度的主题才能更好地浏览网站。主题化可以帮助我们提供更友好的无障碍体验。
代码维护性： 通过 CSS 变量，我们可以将主题相关的颜色、字体等信息集中管理，方便修改和维护。告别到处查找、替换颜色值的噩梦！

二、CSS 变量：主题化的基石

CSS 变量（也叫自定义属性）是 CSS 中一种强大的特性。它允许我们在 CSS 中定义变量，并在整个样式表中重复使用。这样，当我们想要修改某个颜色或字体时，只需要修改变量的值，而不需要修改所有使用该颜色的地方。

定义 CSS 变量：

CSS 变量以 -- 开头，可以在 :root 选择器中定义全局变量，也可以在其他选择器中定义局部变量。
```
:root {
  --primary-color: #007bff; /* 主题色 */
  --secondary-color: #6c757d; /* 次要颜色 */
  --background-color: #f8f9fa; /* 背景色 */
  --text-color: #212529; /* 文本颜色 */
}
```
这里我们在 :root 中定义了四个全局变量，分别代表主题色、次要颜色、背景色和文本颜色。

使用 CSS 变量：

使用 var() 函数来引用 CSS 变量。

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

.button {
  background-color: var(--primary-color);
  color: white;
  border: 1px solid var(--primary-color);
}

.button:hover {
  background-color: darken(var(--primary-color), 10%); /* 使用 darken 函数调整颜色 */
}

这样，所有使用这些变量的元素都会根据变量的值来渲染。如果我们要修改主题色，只需要修改 --primary-color 的值，所有使用该变量的按钮颜色都会自动更新。

CSS 变量的作用域：

CSS 变量有作用域的概念。如果在某个选择器中定义了 CSS 变量，那么该变量只在该选择器及其子元素中有效。

.container {
  --container-background-color: #e9ecef; /* 容器背景色 */
  background-color: var(--container-background-color);
}

body {
  /* background-color: var(--container-background-color);  无效，--container-background-color 不在 body 的作用域内 */
}

在这个例子中，--container-background-color 只在 .container 及其子元素中有效。

使用 calc() 函数进行计算：

CSS 变量还可以和 calc() 函数一起使用，进行动态计算。

:root {
  --base-font-size: 16px;
}

h1 {
  font-size: calc(var(--base-font-size) * 2); /* h1 的字体大小是 base font size 的两倍 */
}

p {
  font-size: calc(var(--base-font-size) * 1.2); /* p 的字体大小是 base font size 的 1.2 倍 */
}

这样，我们只需要修改 --base-font-size 的值，所有使用该变量的字体大小都会自动更新。

三、JavaScript：切换主题的魔法师

有了 CSS 变量，我们就可以通过 JavaScript 来动态修改变量的值，从而实现主题的切换。

获取 CSS 变量：

使用 document.documentElement.style.getPropertyValue() 方法可以获取 CSS 变量的值。

const primaryColor = document.documentElement.style.getPropertyValue('--primary-color');
console.log(primaryColor); // 输出当前主题色

设置 CSS 变量：

使用 document.documentElement.style.setProperty() 方法可以设置 CSS 变量的值。

function setTheme(theme) {
  if (theme === 'light') {
    document.documentElement.style.setProperty('--primary-color', '#007bff');
    document.documentElement.style.setProperty('--background-color', '#f8f9fa');
    document.documentElement.style.setProperty('--text-color', '#212529');
  } else if (theme === 'dark') {
    document.documentElement.style.setProperty('--primary-color', '#66b3ff');
    document.documentElement.style.setProperty('--background-color', '#343a40');
    document.documentElement.style.setProperty('--text-color', '#f8f9fa');
  }
}

// 调用 setTheme('dark') 切换到暗黑主题
setTheme('dark');

这个函数接受一个主题名称作为参数，然后根据主题名称设置不同的 CSS 变量的值。

用户交互：

为了让用户能够选择主题，我们需要添加一些用户交互元素，比如一个下拉列表或一组单选按钮。

<label for="theme-select">选择主题：</label>
<select id="theme-select">
  <option value="light">浅色主题</option>
  <option value="dark">暗黑主题</option>
</select>

<script>
  const themeSelect = document.getElementById('theme-select');

  themeSelect.addEventListener('change', function() {
    const selectedTheme = this.value;
    setTheme(selectedTheme);
    localStorage.setItem('theme', selectedTheme); // 保存用户选择的主题
  });

  // 在页面加载时，从 localStorage 中读取用户选择的主题
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme) {
    themeSelect.value = savedTheme;
    setTheme(savedTheme);
  }
</script>

这段代码创建了一个下拉列表，当用户选择不同的主题时，会调用 setTheme() 函数来切换主题，并将用户选择的主题保存在 localStorage 中，以便下次访问时恢复上次选择的主题。

四、更高级的技巧

使用 Sass/Less 等 CSS 预处理器：

Sass/Less 等 CSS 预处理器可以让我们更方便地管理 CSS 变量和主题。例如，我们可以将不同的主题定义在不同的 Sass 变量中，然后通过条件判断来选择不同的主题。

// _variables.scss

// 浅色主题
$light-primary-color: #007bff;
$light-background-color: #f8f9fa;
$light-text-color: #212529;

// 暗黑主题
$dark-primary-color: #66b3ff;
$dark-background-color: #343a40;
$dark-text-color: #f8f9fa;

// 主题选择
$theme: light; // 默认主题

@if $theme == light {
  --primary-color: $light-primary-color;
  --background-color: $light-background-color;
  --text-color: $light-text-color;
} @else if $theme == dark {
  --primary-color: $dark-primary-color;
  --background-color: $dark-background-color;
  --text-color: $dark-text-color;
}

// style.scss

:root {
  --primary-color: #007bff; // 默认值，会被 _variables.scss 中的值覆盖
  --background-color: #f8f9fa;
  --text-color: #212529;
}

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

通过修改 $theme 变量的值，我们可以快速切换不同的主题。

使用 CSS prefers-color-scheme 媒体查询：

CSS prefers-color-scheme 媒体查询可以检测用户操作系统的主题设置，并根据用户的设置自动选择主题。

:root {
  --primary-color: #007bff; /* 默认主题色 */
  --background-color: #f8f9fa; /* 默认背景色 */
  --text-color: #212529; /* 默认文本颜色 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #66b3ff; /* 暗黑主题色 */
    --background-color: #343a40; /* 暗黑背景色 */
    --text-color: #f8f9fa; /* 暗黑文本颜色 */
  }
}

这样，如果用户的操作系统设置为暗黑模式，网站会自动切换到暗黑主题。

使用 Web Components：

Web Components 可以让我们将主题相关的 HTML、CSS 和 JavaScript 封装成一个独立的组件，方便在不同的项目中重复使用。

// theme-switcher.js

class ThemeSwitcher extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        select {
          padding: 5px;
          border: 1px solid #ccc;
        }
      </style>
      <label for="theme-select">选择主题：</label>
      <select id="theme-select">
        <option value="light">浅色主题</option>
        <option value="dark">暗黑主题</option>
      </select>
    `;

    this.themeSelect = this.shadowRoot.getElementById('theme-select');

    this.themeSelect.addEventListener('change', () => {
      const selectedTheme = this.themeSelect.value;
      this.setTheme(selectedTheme);
      localStorage.setItem('theme', selectedTheme);
    });

    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      this.themeSelect.value = savedTheme;
      this.setTheme(savedTheme);
    }
  }

  setTheme(theme) {
    if (theme === 'light') {
      document.documentElement.style.setProperty('--primary-color', '#007bff');
      document.documentElement.style.setProperty('--background-color', '#f8f9fa');
      document.documentElement.style.setProperty('--text-color', '#212529');
    } else if (theme === 'dark') {
      document.documentElement.style.setProperty('--primary-color', '#66b3ff');
      document.documentElement.style.setProperty('--background-color', '#343a40');
      document.documentElement.style.setProperty('--text-color', '#f8f9fa');
    }
  }
}

customElements.define('theme-switcher', ThemeSwitcher);

<!-- 在 HTML 中使用 Web Component -->
<theme-switcher></theme-switcher>

这样，我们就可以在任何地方使用 <theme-switcher> 元素来添加主题切换功能。

五、最佳实践

统一管理 CSS 变量： 将所有主题相关的 CSS 变量定义在一个文件中，方便管理和维护。
使用语义化的 CSS 变量名： 使用语义化的 CSS 变量名，例如 --primary-color 而不是 --color-1，提高代码的可读性。
提供默认主题： 提供一个默认主题，确保在 JavaScript 加载失败或用户禁用 JavaScript 的情况下，网站仍然可以正常显示。
考虑无障碍性： 提供高对比度的主题，确保所有用户都可以无障碍地访问网站。
测试： 在不同的浏览器和设备上测试主题切换功能，确保其正常工作。

六、一些代码示例

功能	代码示例	说明
定义全局 CSS 变量	`:root { --primary-color: #007bff; }`	在 `:root` 中定义全局 CSS 变量，所有元素都可以访问。
使用 CSS 变量	`body { color: var(--primary-color); }`	使用 `var()` 函数引用 CSS 变量。
JavaScript 设置 CSS 变量	`document.documentElement.style.setProperty('--primary-color', '#ff0000');`	使用 JavaScript 动态设置 CSS 变量的值。
`prefers-color-scheme`	`@media (prefers-color-scheme: dark) { :root { --primary-color: #fff; --background-color: #000; } }`	根据用户操作系统的主题设置自动选择主题。
Sass/Less 变量	`$primary-color: #007bff; :root { --primary-color: $primary-color; }`	使用 Sass/Less 变量管理 CSS 变量。

七、总结

CSS 变量和 JavaScript 是实现 CSS 主题化的利器。通过它们，我们可以轻松地实现主题的快速切换，提高用户体验，并增强代码的可维护性。记住，主题化的关键在于灵活和 可维护。只要掌握了 CSS 变量和 JavaScript 的用法，你就可以打造出个性化十足的网站！

今天的讲座就到这里，希望大家都能掌握 CSS 主题化的技巧，让你的网站变得更加精彩！下次见！

发表回复 取消回复

发表回复取消回复