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

针对你提出的问题，我给出以下完整攻略：

1. 简介

CSS Variables，又称为CSS变量，是CSS3中的新增特性之一，能够让你在样式表中定义一些可复用的值，这些值可以在页面内任何地方被使用，而且是可动态修改的。同时也能够通过JavaScript来动态修改这些变量的值，因此可以用它来实现一些强大的效果，例如主题切换，动态计算属性等。

2. CSS变量的应用场景

主题切换无疑是CSS Variables的一个非常好的实践案例，它能够让用户动态切换样式，在一个页面内改变页面的配色方案，这种用户交互能够让网站变得更加吸引人。

3. CSS变量的语法

CSS变量使用 -- 前缀来定义，例如：

:root {
  --color-primary: #333;
}

这里，我们利用属性选择器 :root 来为整个页面定义一个根变量。变量的名称为 --color-primary，变量的值为 #333。在定义好变量之后，我们可以在样式表的其它地方引用这个变量，例如：

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

在这里，我们利用了 var()函数来引用变量，在这个例子里实现了 color 属性的值与变量 --color-primary 的值保持一致。

4. 主题切换的实现

下面，我们来看一个完整的主题切换的实现方案。

首先，在CSS文件中定义两套主题的渲染变量，如：

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --body-bg-color: #f8f9fa;
  --body-color: #495057;
  --link-color: #007bff;
  --link-hover-color: #0056b3;
  --dark-color: #212529;
  --border-color: #ddd;
}

/* dark theme */
[data-theme="dark"] {
  --primary-color: #ffc107;
  --secondary-color: #6c757d;
  --body-bg-color: #212529;
  --body-color: #f8f9fa;
  --link-color: #ffc107;
  --link-hover-color: #dbbb09;
  --dark-color: #f8f9fa;
  --border-color: #aaa;
}

在这里我们定义了两个主题的变量：

• light theme：变量名称以 -- 开头
• dark theme：在 data-theme="dark" 的情况下，重新定义了相应的变量

接下来我们需要在HTML文件里增加一个按钮元素，用于切换主题：

<button type="button" onclick="toggleTheme()">Toggle theme</button>

点击按钮时将调用 toggleTheme() 方法：

function toggleTheme() {
  const body = document.body;
  const currentTheme = body.getAttribute('data-theme');
  const targetTheme = currentTheme === 'dark' ? 'light' : 'dark';
  body.setAttribute('data-theme', targetTheme);
}

这里，我们通过 getAttribute 和 setAttribute 方法来处理 data-theme 属性，将这个值从'light'切换到'dark'，或者从'dark'切换到'light'。

最后，在CSS样式表中使用 var() 函数来引用CSS变量，例如：

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

这里，我们使用了 --button-color 和 --button-bg-color 这两个变量来定义按钮的颜色和背景。

5. 示例说明

以下是两个关于主题切换的示例代码。

示例1：点击按钮切换主题

代码演示地址：https://codepen.io/kiddo-kiddo/pen/oNNbWGv

示例2：根据系统模式切换主题

代码演示地址：https://codepen.io/kiddo-kiddo/pen/xxrGjro

以上就是关于基于CSS Variable的主题切换的完整攻略，希望对你有所帮助。