手把手教你用JS实现3种方式搞定深浅色模式切换

还在为网站的深浅色模式切换发愁吗？本文将手把手教你用JS实现主题切换，轻松搞定用户个性化需求！文章深入讲解三种核心方法：**修改CSS类名**、**切换CSS文件**以及**利用CSS变量**。通过为body元素添加/移除类名，动态修改``标签的`href`属性，或在JS中修改CSS变量值，都能实现主题样式的即时更新。更重要的是，结合`localStorage`，让用户的选择在页面刷新后依然有效。无论是简单的深浅色切换，还是更复杂的颜色定制，本文都将提供详细的示例代码和实用技巧，助你打造更友好的用户体验。快来学习JS主题切换，提升你的网站品质吧！

实现主题切换的核心方法有三种：1.修改CSS类名，通过为body元素添加或移除类如.dark-theme实现样式变化；2.切换CSS文件，动态修改标签的href属性加载不同主题文件；3.使用CSS变量，在JavaScript中修改变量值以更新主题。以上方法均可结合localStorage保存用户选择，使主题设置在页面刷新后仍可保留。对于更复杂的定制，可通过保存用户选择的颜色等信息到localStorage并动态设置CSS变量实现。过渡效果则可通过CSS的transition属性或JavaScript控制opacity等方式优化。

实现主题切换，核心在于改变CSS样式。通常可以通过修改CSS类名、切换CSS文件或使用CSS变量来实现。以下提供三种常用的JavaScript实现深色/浅色主题切换的方案。

解决方案

方案一：修改CSS类名

这是最常见也最简单的方法。我们为body元素添加一个类名，例如dark-theme，当切换到深色主题时，就添加这个类名；切换到浅色主题时，移除这个类名。CSS中针对.dark-theme定义深色主题的样式。

HTML:

  切换主题

  

CSS (style.css):

body {
  background-color: #fff;
  color: #000;
}

.dark-theme {
  background-color: #333;
  color: #fff;
}

.dark-theme h1 {
  color: lightblue; /* 深色主题下，h1 颜色 */
}

JavaScript (script.js):

const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

themeToggle.addEventListener('click', () => {
  body.classList.toggle('dark-theme');

  // 保存主题到 localStorage
  if (body.classList.contains('dark-theme')) {
    localStorage.setItem('theme', 'dark');
  } else {
    localStorage.setItem('theme', 'light');
  }
});

// 页面加载时检查 localStorage
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
  body.classList.add('dark-theme');
}

方案二：切换CSS文件

这种方法需要准备两套CSS文件，分别对应浅色和深色主题。通过JavaScript动态修改标签的href属性来切换CSS文件。

HTML:

  切换主题

  

light.css (浅色主题):

body {
  background-color: #fff;
  color: #000;
}

dark.css (深色主题):

body {
  background-color: #333;
  color: #fff;
}

JavaScript (script.js):

const themeToggle = document.getElementById('theme-toggle');
const themeStylesheet = document.getElementById('theme-stylesheet');

themeToggle.addEventListener('click', () => {
  if (themeStylesheet.getAttribute('href') === 'light.css') {
    themeStylesheet.setAttribute('href', 'dark.css');
    localStorage.setItem('theme', 'dark');
  } else {
    themeStylesheet.setAttribute('href', 'light.css');
    localStorage.setItem('theme', 'light');
  }
});

// 页面加载时检查 localStorage
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
  themeStylesheet.setAttribute('href', 'dark.css');
}

方案三：使用CSS变量 (Custom Properties)

CSS变量允许我们在CSS中定义变量，并在JavaScript中修改这些变量的值。这是一种更灵活的方法，可以实现更细粒度的控制。

HTML:

  切换主题

  

CSS (style.css):

:root {
  --bg-color: #fff;
  --text-color: #000;
}

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

/* 深色主题变量 */
.dark-theme {
  --bg-color: #333;
  --text-color: #fff;
}

JavaScript (script.js):

const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

themeToggle.addEventListener('click', () => {
  body.classList.toggle('dark-theme');

  if (body.classList.contains('dark-theme')) {
    localStorage.setItem('theme', 'dark');
  } else {
    localStorage.setItem('theme', 'light');
  }
});

// 页面加载时检查 localStorage
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
  body.classList.add('dark-theme');
}

如何持久化主题选择？

用户切换主题后，刷新页面会丢失主题设置。可以使用localStorage或cookies来保存用户的选择。在页面加载时，从localStorage或cookies中读取主题设置，并应用到页面上。 上面的示例代码中，已经包含了使用 localStorage 持久化主题的实现。

如何实现更复杂的主题定制？

对于更复杂的主题定制，例如允许用户自定义颜色、字体等，可以使用CSS变量。将用户选择的颜色值保存到localStorage中，并在页面加载时，动态设置CSS变量的值。 也可以考虑使用CSS-in-JS库，例如styled-components或Emotion，它们提供了更强大的主题管理功能。

如何优雅地处理主题切换时的过渡效果？

直接切换主题可能会显得生硬。可以使用CSS的transition属性来添加过渡效果。例如，在body元素上添加transition: background-color 0.3s ease;，可以使背景颜色切换更加平滑。 或者使用JavaScript来控制过渡效果，例如在切换主题前，先将元素的opacity设置为0，然后切换主题，再将opacity设置为1。 这种方法可以实现更复杂的过渡效果。

好了，本文到此结束，带大家了解了《手把手教你用JS实现3种方式搞定深浅色模式切换》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！