学废这篇指南，主题切换从此不再成问题！

2023-05-03 09:08:52

使用 CSS 变量实现主题切换：一步一步打造美观网站

踏入 CSS 变量的神奇世界，探索它的力量，掌握主题切换的艺术，让你的网站焕发新姿！

主题切换的迷人魅力

主题切换，这项看似简单的功能，却能彻底改变网站的外观和氛围。它允许你根据不同的需求和喜好，瞬间变换网站的色彩、字体和布局。想象一下，在白天展示浅色主题，清新明亮；在夜晚切换到深色主题，神秘优雅，让你的网站始终引人注目。

CSS 变量：主题切换的秘密武器

CSS 变量如同魔法棒，让你在 CSS 中定义变量，并在其他地方轻松使用它们。你可以使用 -- 符号定义变量，例如：

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

接下来，使用 var() 函数引用变量，例如：

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

h1 {
  color: var(--secondary-color);
}

打造属于你的主题世界

首先，创建一个 theme.css 文件，定义两个主题：浅色和深色。

/* 浅色主题 */

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

/* 深色主题 */

:root {
  --primary-color: #212529;
  --secondary-color: #ffffff;
}

然后，编写一个 theme.js 文件来切换主题。

const toggleTheme = () => {
  const currentTheme = document.documentElement.getAttribute('data-theme');

  if (currentTheme === 'light') {
    document.documentElement.setAttribute('data-theme', 'dark');
  } else {
    document.documentElement.setAttribute('data-theme', 'light');
  }
};

themeToggle.addEventListener('click', toggleTheme);

最后，在 HTML 中添加一个按钮来触发主题切换：

<button id="theme-toggle">切换主题</button>

让主题切换更添魅力

为了提升主题切换的体验，不妨加入一些 CSS 过渡效果：

body {
  transition: background-color 0.5s ease-in-out;
}

h1 {
  transition: color 0.5s ease-in-out;
}

现在，主题切换将伴随着流畅的背景和文字颜色过渡，为你的网站增添一抹优雅。

常见问题解答

如何修改主题颜色？
- 编辑 theme.css 文件，修改 --primary-color 和 --secondary-color 变量的值。
主题切换按钮可以自定义吗？
- 是的，可以通过修改 theme-toggle 元素的样式来定制按钮的外观。
如何为特定页面禁用主题切换？
- 在特定页面的 <head> 标签中添加 data-theme="no-toggle" 属性即可禁用主题切换。
主题切换会影响网站性能吗？
- 不会，CSS 变量在现代浏览器中得到高度优化，不会对网站性能造成明显影响。
如何实现多套主题？
- 除了浅色和深色主题之外，你还可以创建多个主题，并在 theme.css 文件中定义它们。