CSS小妙招：CSS变量——轻松创建白色/暗色主题

2023-10-10 09:26:25

前言：

无论是开发人员还是设计师，大家都知道，现代网站离不开灵活性，尤其是在设计时。一个用户今天访问你的网站可能用着27寸的iMac，明天就可能换成了5寸的手机。如何做到当屏幕尺寸、设备和浏览器发生改变时，网站都能正常显示？这可以通过灵活、动态的CSS样式表来实现，使你的网站适应任何大小的屏幕和任何设备。在本文中，我们将重点关注CSS变量，这是一种强大的工具，允许你轻松创建白色和暗色主题，实现网站外观的无缝切换。

变量，变量，CSS变量：

CSS变量就像数学中的变量，是一个容器，允许你在整个网站中存储和使用值。这使得改变网站的整体外观变得轻而易举，因为你只需要改变变量的值，而不用在整个网站中查找并修改每个单独的属性。CSS变量可以用在任何地方，包括颜色、字体、大小和间距。

白色和暗色主题：

白色主题和暗色主题是当今许多网站的热门选择，它们可以提供不同的视觉体验，更适合不同的环境或用户的喜好。白色主题通常给人一种明亮、通风的感觉，而暗色主题则给人一种更亲密、更私密的感觉。通过使用CSS变量，你可以轻松地创建这两个主题，并在用户之间切换。

实现白色和暗色主题的步骤：

现在，我们将一步一步地介绍如何使用CSS变量创建白色和暗色主题：

定义CSS变量：
首先，你需要定义两个CSS变量，一个用于白色主题，一个用于暗色主题。例如：

:root {
  --white-theme-background-color: #ffffff;
  --dark-theme-background-color: #000000;
}

使用CSS变量：
接下来，在你的样式表中，你可以使用这些变量来设置元素的背景颜色。例如：

body {
  background-color: var(--white-theme-background-color);
}

创建切换按钮：
为了让用户可以在白色主题和暗色主题之间切换，你需要创建一个切换按钮。这个按钮可以是一个简单的复选框或一个按钮。当用户点击这个按钮时，它将触发一个JavaScript函数来切换变量的值。

function toggleTheme() {
  const bodyElement = document.body;
  if (bodyElement.classList.contains('dark-theme')) {
    bodyElement.classList.remove('dark-theme');
    bodyElement.classList.add('white-theme');
  } else {
    bodyElement.classList.remove('white-theme');
    bodyElement.classList.add('dark-theme');
  }
}