使用JavaScript和CSS变量实现动态颜色主题切换-js教程-PHP中文网

使用javascript和css变量实现动态颜色主题切换

本文详细介绍了如何利用CSS自定义属性和JavaScript实现网页的明暗模式切换功能。重点阐述了通过JavaScript动态修改CSS变量的原理，并特别强调了在条件判断中正确使用比较运算符（==或===）而非赋值运算符（=）的重要性，以避免常见的逻辑错误，确保主题切换功能的稳定运行。

在现代网页设计中，为用户提供自定义体验，特别是颜色主题切换（如明暗模式），已成为一项普遍需求。这不仅能提升用户体验，还能在不同光照环境下提供更好的可读性。本教程将深入探讨如何结合CSS自定义属性（CSS Variables）和JavaScript来实现一个高效且易于管理的主题切换系统。

1. 核心技术：CSS自定义属性（CSS Variables）

CSS自定义属性（也称为CSS变量）是实现动态主题切换的关键。它们允许我们定义可在整个CSS文档中重复使用的值，并且这些值可以通过JavaScript轻松修改。通过将颜色、字体等主题相关的属性定义为变量，我们可以在运行时动态改变它们，从而实现主题的切换。

在 :root 伪类中定义全局变量是最佳实践，因为 :root 代表文档的根元素（<html>），确保这些变量在整个文档中都可访问。

CSS 代码示例：

立即学习“Java免费学习笔记（深入）”；

@import url('https://fonts.googleapis.com/css2?family=Lexend&family=Nunito&display=swap');

/* 定义CSS变量，设置默认（亮色）主题 */
:root {
  --maincolor: #ed1818; /* 主色调 */
  --backgroundcolor: #d4d4d4; /* 页面背景色 */
  --bodycolor: #f2f2f2; /* 内容区域背景色 */
  --fontcolor: black; /* 字体颜色 */
}

/* 应用CSS变量到元素 */
body {
  background-color: var(--backgroundcolor);
  font-family: Nunito, sans-serif;
  color: var(--fontcolor);
  padding: 20px;
}

.body {
  background-color: var(--bodycolor);
  border-radius: 5px;
  padding: 10px 30px;
}

.header {
  padding: 20px 0px;
}

button {
  border: 0px solid black;
  border-radius: 5px;
  background-color: var(--backgroundcolor);
  font-family: Nunito, sans-serif; /* 注意：原文此处有拼写错误，已更正为 font-family */
  color: var(--fontcolor);
  padding: 10px;
  transition-duration: 0.2s; /* 添加过渡效果，使切换更平滑 */
}

button:hover {
  border: 0px solid black;
  border-radius: 5px;
  background-color: var(--bodycolor);
  font-family: Nunito, sans-serif; /* 注意：原文此处有拼写错误，已更正为 font-family */
  color: var(--fontcolor);
  cursor: pointer;
}

登录后复制

2. JavaScript逻辑：实现主题切换

JavaScript负责检测用户操作并动态修改CSS变量的值。我们将创建一个函数，该函数根据当前主题状态切换颜色方案。

HTML 结构示例：

一个简单的HTML结构，包含一个用于触发主题切换的按钮。

<div class="header">
  <img src="https://www.youtube.com/s/desktop/c1d331ff/img/favicon_48x48.png" alt="YouTube Icon">
  <button class="lightdark" onclick="darkLight()">
    <svg viewBox="0 0 512 512" width="20" title="adjust">
      <path d="M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z" />
    </svg>
    <p>Adjust colors</p>
  </button>
</div>
<div class="body">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

登录后复制

JavaScript 代码与常见陷阱：

在实现主题切换逻辑时，一个常见的错误是混淆赋值运算符（=）和比较运算符（==或===）。

初始（错误）的JavaScript代码：

var r = document.querySelector(':root');
var isdark = 0; // 0代表亮色模式，1代表暗色模式

function darkLight() {
  if (isdark = 0) { // 错误：这里使用了赋值运算符
    r.style.setProperty('--backgroundcolor', '#1a1a1a');
    r.style.setProperty('--bodycolor', '#3b3b3b')
    r.style.setProperty('--fontcolor', 'white')
    isdark = 1;
  } else if (isdark = 1) { // 错误：这里也使用了赋值运算符
    r.style.setProperty('--backgroundcolor', '#d4d4d4')
    r.style.setProperty('--bodycolor', '#f2f2f2')
    r.style.setProperty('--fontcolor', 'black')
    isdark = 0;
  }
}

登录后复制

问题分析： 上述代码中的 if (isdark = 0) 和 else if (isdark = 1) 是导致按钮在几次点击后失效的根本原因。在JavaScript中：

= 是赋值运算符，它将右侧的值赋给左侧的变量，并返回赋的值。
== 是相等比较运算符，用于比较两个值是否相等（可能进行类型转换）。
=== 是严格相等比较运算符，用于比较两个值是否严格相等（不进行类型转换）。

当 if (isdark = 0) 执行时，isdark 会被赋值为 0，然后整个表达式的值就是 0。在JavaScript中，0 被视为 false。因此，无论 isdark 之前的实际值是什么，if (isdark = 0) 永远不会为真，if 块内的代码永远不会执行。同理，else if (isdark = 1) 会将 isdark 赋值为 1，然后表达式的值为 1，1 被视为 true。这意味着 else if 块会一直被执行。结果就是，代码始终停留在亮色模式，并且 isdark 的值在每次点击后都被错误地重置。

修正后的JavaScript代码：

超级简历WonderCV

免费求职简历模版下载制作，应届生职场人必备简历制作神器

271

查看详情

为了正确地比较 isdark 的值，我们需要将赋值运算符 = 替换为比较运算符 == 或 ===。

var r = document.querySelector(':root');
var isdark = 0; // 0代表亮色模式，1代表暗色模式

function darkLight() {
  // 获取 :root 元素的样式对象，用于设置CSS变量
  var rootStyle = r.style;

  if (isdark === 0) { // 正确：使用严格相等比较运算符
    // 切换到暗色模式
    rootStyle.setProperty('--backgroundcolor', '#1a1a1a');
    rootStyle.setProperty('--bodycolor', '#3b3b3b');
    rootStyle.setProperty('--fontcolor', 'white');
    isdark = 1; // 更新状态为暗色模式
  } else if (isdark === 1) { // 正确：使用严格相等比较运算符
    // 切换到亮色模式
    rootStyle.setProperty('--backgroundcolor', '#d4d4d4');
    rootStyle.setProperty('--bodycolor', '#f2f2f2');
    rootStyle.setProperty('--fontcolor', 'black');
    isdark = 0; // 更新状态为亮色模式
  }
}

登录后复制

注意： 在HTML中，onclick 属性需要调用函数，所以应该是 onclick="darkLight()"，而不是 onclick="darkLight"。原文HTML中SVG图标的 onclick 是正确的，但按钮的 onclick 没有括号，这也会导致问题（尽管不是核心的逻辑错误）。请确保所有调用都包含括号。

3. 增强与优化

为了使主题切换功能更加健壮和用户友好，可以考虑以下优化：

3.1 持久化用户偏好（LocalStorage）

用户通常希望其主题选择在下次访问时得到保留。localStorage 是一个很好的选择，用于在浏览器中存储少量数据。

var r = document.querySelector(':root');
// 尝试从 localStorage 获取用户偏好，如果没有则默认为 0 (亮色)
var isdark = localStorage.getItem('theme') === 'dark' ? 1 : 0;

// 初始化主题（根据存储的偏好）
function applyTheme() {
  if (isdark === 1) {
    r.style.setProperty('--backgroundcolor', '#1a1a1a');
    r.style.setProperty('--bodycolor', '#3b3b3b');
    r.style.setProperty('--fontcolor', 'white');
  } else {
    r.style.setProperty('--backgroundcolor', '#d4d4d4');
    r.style.setProperty('--bodycolor', '#f2f2f2');
    r.style.setProperty('--fontcolor', 'black');
  }
}

// 在页面加载时应用主题
applyTheme();

function darkLight() {
  if (isdark === 0) {
    r.style.setProperty('--backgroundcolor', '#1a1a1a');
    r.style.setProperty('--bodycolor', '#3b3b3b');
    r.style.setProperty('--fontcolor', 'white');
    isdark = 1;
    localStorage.setItem('theme', 'dark'); // 保存用户偏好
  } else {
    r.style.setProperty('--backgroundcolor', '#d4d4d4');
    r.style.setProperty('--bodycolor', '#f2f2f2');
    r.style.setProperty('--fontcolor', 'black');
    isdark = 0;
    localStorage.setItem('theme', 'light'); // 保存用户偏好
  }
}

登录后复制

3.2 响应系统主题（prefers-color-scheme）

现代浏览器支持 prefers-color-scheme 媒体查询，允许网页根据用户的操作系统主题偏好自动调整。

// 检查系统偏好，但用户手动切换的优先级更高
if (localStorage.getItem('theme') === null) {
  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    isdark = 1; // 系统偏好为暗色
  } else {
    isdark = 0; // 系统偏好为亮色
  }
}
// ... (其余代码同上，确保 applyTheme() 在初始化时被调用)

// 监听系统主题变化（可选）
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
  if (localStorage.getItem('theme') === null) { // 仅在用户未手动设置时响应系统变化
    isdark = event.matches ? 1 : 0;
    applyTheme();
  }
});

登录后复制

3.3 代码结构优化：通过添加/移除CSS类

直接通过 setProperty 修改变量是可行的，但更常见且灵活的方式是利用CSS类。定义两个主题类（例如 light-theme 和 dark-theme），然后通过JavaScript在 <body> 元素上切换这些类。

CSS 示例（新增）：

/* 默认亮色主题 */
:root {
  --backgroundcolor: #d4d4d4;
  --bodycolor: #f2f2f2;
  --fontcolor: black;
}

/* 暗色主题变量覆盖 */
body.dark-theme {
  --backgroundcolor: #1a1a1a;
  --bodycolor: #3b3b3b;
  --fontcolor: white;
}

登录后复制

JavaScript 示例（优化后）：

function darkLight() {
  const body = document.body;
  if (body.classList.contains('dark-theme')) {
    body.classList.remove('dark-theme');
    localStorage.setItem('theme', 'light');
  } else {
    body.classList.add('dark-theme');
    localStorage.setItem('theme', 'dark');
  }
}

// 页面加载时根据存储的偏好或系统偏好设置主题
(function() {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme) {
    if (savedTheme === 'dark') {
      document.body.classList.add('dark-theme');
    }
  } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    document.body.classList.add('dark-theme');
  }
})();

登录后复制

这种方法更简洁，并且将主题的具体颜色值完全保留在CSS中，使得管理更加清晰。