代码小白也能轻松实现任意主题切换，用45行css变量代码开启主题定制

2024-01-05 12:18:07

个性化UI，让用户自定义界面
随着前端技术的发展，用户对前端ui的个性化体验要求也越来越高。国外google、Twitter、Facebook等大厂早早已经开始支持白天/黑夜模式，主题定制。国内现在越来越多的系统也开始注重用户个性化。

CSS变量，主题定制的神器
CSS变量的出现，使得主题定制变得更加容易。本文将手把手教你如何使用CSS变量实现白天/黑夜模式切换，并提供详细的实例代码。

一、CSS变量简介
CSS变量是一种存储和引用变量的机制，可以用来存储颜色、字体和其他元素，以便轻松地实现主题切换。
例如，我们可以使用以下代码来定义一个CSS变量名为primary-color，并将其设置为红色：

:root {
  --primary-color: red;
}

然后，我们就可以在任何地方使用这个变量，例如：

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

这样，当我们更改primary-color的值时，所有使用这个变量的地方都会自动更新。

二、使用CSS变量实现主题切换
下面，我们将使用CSS变量来实现白天/黑夜模式切换。

1、定义CSS变量
首先，我们需要定义两个CSS变量，一个用于存储白天模式的颜色，一个用于存储黑夜模式的颜色。

:root {
  --primary-color-day: #ffffff;
  --primary-color-night: #000000;
}

2、切换主题
接下来，我们需要创建一个函数来切换主题。这个函数将根据当前的主题，来设置primary-color的值。

function toggleTheme() {
  if (document.documentElement.classList.contains('dark')) {
    document.documentElement.classList.remove('dark');
  } else {
    document.documentElement.classList.add('dark');
  }
}

3、绑定事件
最后，我们需要将toggleTheme函数绑定到一个事件上。例如，我们可以将其绑定到一个按钮的点击事件上。

document.getElementById('theme-toggle').addEventListener('click', toggleTheme);

三、实例代码
下面是完整的实例代码：

:root {
  --primary-color-day: #ffffff;
  --primary-color-night: #000000;
}

function toggleTheme() {
  if (document.documentElement.classList.contains('dark')) {
    document.documentElement.classList.remove('dark');
  } else {
    document.documentElement.classList.add('dark');
  }
}

document.getElementById('theme-toggle').addEventListener('click', toggleTheme);