基于Css Variable的主题切换完美解决方案(推荐)

下面我将详细讲解如何使用CSS变量实现主题切换的完美解决方案。

什么是CSS变量

CSS变量（也称为自定义属性）是一种新特性，可以让开发者使用自定义的变量来定义CSS属性值。例如，定义一个颜色变量并在不同的CSS属性中使用它。

:root {
  --primary-color: #007bff;
}

a {
  color: var(--primary-color);
}

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

这样定义的变量可以被全局使用，而且可以很方便地实现样式的复用。

如何使用CSS变量实现主题切换

我们可以使用CSS变量来实现主题切换的效果，只需要定义不同的颜色变量并在需要切换主题的元素中使用这些变量即可。

步骤一：定义颜色变量

定义不同主题的颜色变量，例如：

:root {
  --primary-color: #007bff; // 默认主题颜色
  --secondary-color: #28a745; // 绿色主题颜色
  --tertiary-color: #6c757d; // 灰色主题颜色
}

步骤二：定义切换主题的按钮

定义一个切换主题的按钮，并使用JavaScript来监听按钮的点击事件。

<button onclick="toggleTheme()">切换主题</button>

<script>
function toggleTheme() {
  document.documentElement.classList.toggle('dark-mode');
}
</script>

步骤三：定义不同主题的样式

根据切换的主题，使用CSS选择器来修改当前文档中所有关于主题的样式表。例如：

// 默认主题样式
:root {
  --primary-color: #007bff;
}
body {
  background-color: white;
  color: black;
}

// 绿色主题样式
:root.dark-mode {
  --primary-color: #28a745;
}
:root.dark-mode body {
  background-color: #111;
  color: #fff;
}

// 灰色主题样式
:root.dark-mode {
  --primary-color: #6c757d;
}
:root.dark-mode body {
  background-color: #222;
  color: #fff;
}

上述代码实现了三种不同主题的切换，当点击切换主题的按钮时，通过JavaScript添加或删除dark-mode类，从而实现主题的切换。

示例说明

示例一

在以下示例中，我们定义了两种主题：

:root {
  --primary-color: #007bff;
  --secondary-color: #28a745;
}

:root.dark-mode {
  --primary-color: #28a745;
  --secondary-color: #007bff;
}

button {
  padding: 10px 16px;
  border-radius: 4px;
  color: #fff;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

button:hover {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}

运行代码并点击按钮，即可实现主题切换。

示例链接

示例二

在以下示例中，我们定义了多种主题：

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

:root.dark-mode {
  --primary-color: #28a745;
  --secondary-color: #6c757d;
  --tertiary-color: #007bff;
}

nav {
  display: flex;
  justify-content: space-between;
  background-color: var(--primary-color);
  color: #fff;
  padding: 10px;
}

nav a {
  color: inherit;
}

footer {
  text-align: center;
  background-color: var(--secondary-color);
  color: #fff;
  padding: 10px;
}

.card {
  margin: 15px;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.card.dark-mode {
  background-color: var(--tertiary-color);
  color: #fff;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

运行代码并点击按钮，即可实现多种主题的切换。

示例链接