C

CSS 快速入门：CSS 变量 - 如何轻松创建🌞白色/🌑深色主题

2025-05-25

CSS 快速入门：CSS 变量 - 如何轻松创建🌞白色/🌑深色主题

什么是 CSS Quickes？

我开始在 Instagram 上询问我喜爱的社区：“哪些 CSS 属性让您感到困惑？”

在“CSS Quickies”中，我将深入讲解一个 CSS 属性。这些属性是社区请求的。如果您也对某个 CSS 属性感到困惑，请在Instagram、Twitter或下方评论区留言！我会解答所有问题。

如果您想度过一段愉快的时光或者可以问我任何问题，我还会在twitch.tv上进行编码时的直播！

让我们讨论一下Custom propertiesaka CSS Variables。

最后！您是否曾经使用过 CSS，并希望保持设计的一致性？或者您的网站在某些页面上是否使用了不同的 padding、margin 或颜色？

也许你想实现一个黑暗主题？这曾经是可能的，但现在变得更加简单了！

当然，如果你使用过 LESS 或 SASS，那么你就会知道变量，现在它们终于得到了原生支持。😁

我们来看看吧！

定义 CSS 变量

通过在 CSS 属性前添加 前缀来定义 CSS 变量--。我们来看一些例子。

:root{
  --example-color: #ccc;
  --example-align: left;
  --example-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

你的第一个问题是：“那个 :root 伪类是什么？”
好问题！:root伪类的作用类似于html选择器，只不过它的优先级比 :root 伪类更高。这意味着，如果你在伪类中设置属性，:root它会优先于html选择器。

好的，剩下的就很简单了。自定义属性--example-color的值为#ccc。当我们使用自定义属性时，例如在 属性上background-color，该元素的背景就会变成浅灰色。是不是很酷？

left你可以赋予自定义属性（又称 CSS 变量）所有 CSS 中其他属性对应的值。例如，可以使用或10px等等。

使用 CSS 变量

现在我们知道了如何设置 CSS 变量，我们需要学习如何使用它们！

为此，我们需要学习var()函数。
该函数var()可以有两个参数。第一个参数需要是自定义属性。如果自定义属性无效，则需要设置一个后备值。为此，您只需设置var()函数的第二个参数即可。我们来看一个例子。

:root{
  --example-color: #ccc;
}

.someElement {
  background-color: var(--example-color, #d1d1d1);
}

现在你应该很容易理解了。我们将 设置为 ，--example-color然后#ccc在 中使用它.someElement来设置背景颜色。如果出现问题，导致--example-color无效，我们有一个备用值#d1d1d1。

如果您未设置后备值并且自定义变量无效，会发生什么情况？浏览器将像未指定此属性一样，执行其常规工作。

技巧和窍门

多个后备值

如果你想要多个后备值怎么办？你可能会想到可以这样做：

.someElement {
  background-color: var(--first-color, --second-color, white);
}

这行不通。第一个逗号之后的var()所有内容，甚至逗号，都被视为值。浏览器会将其更改为background-color: --second-color, white;。这不是我们想要的。

如果需要多个值，我们可以简单地var()在 a 内部调用var()。以下是一个例子：

.someElement {
  background-color: var(--first-color, var(--second-color, white));
}

现在这将产生我们想要的结果。当 和 都--first-color无效--second-color时，浏览器将把背景设置为white。

如果我的后备值需要逗号怎么办？

例如，如果你想font-family在 fallback 值中设置一个 in，并且需要指定多种字体，该怎么办？回顾之前的提示，现在应该很简单。我们只需用逗号分隔即可。示例时间：

.someElement {
    font-family: var(--main-font, "lucida grande" , tahoma, Arial);
}

在这里我们可以看到，在第一个逗号之后，var()函数将所有内容视为一个值。

在 Javascript 中设置和获取自定义属性

在更复杂的应用和网站中，你会使用 JavaScript 进行状态管理和渲染。你还可以使用 JavaScript 获取和设置自定义属性。具体操作如下：

    const element = document.querySelector('.someElement');
   // Get the custom propety
    element.style.getPropertyValue("--first-color");
   // Set a custom propety
   element.style.setProperty("--my-color", "#ccc");

我们可以像其他属性一样获取和设置自定义属性。是不是很酷？

使用自定义变量制作主题切换器

首先让我们看看我们将在这里做什么：

HTML 标记
<div class="grid theme-container">
  <div class="content">
    <div class="demo">
      <label class="switch">
        <input type="checkbox" class="theme-switcher">
        <span class="slider round"></span>
      </label>
    </div>
  </div>
</div>

这里其实没什么特别的。
我们会用 CSSgrid来让内容居中，所以.grid第一个元素上有个 class.content和。class.demo只是用来设置样式的。这里最重要的两个 class 是.theme-container和.theme.switcher。

Javascript代码
const checkbox = document.querySelector(".theme-switcher");

checkbox.addEventListener("change", function() {
  const themeContainer = document.querySelector(".theme-container");
  if (themeContainer && this.checked) {
    themeContainer.classList.add("light");
  } else {
    themeContainer.classList.remove("light");
  }
});

首先，我们选择.theme-switcher输入框和.theme-container元素。
然后，我们添加一个事件监听器，用于监听是否发生更改。这意味着每次点击输入框时，该事件监听器的回调都会运行。
在if子句中，我们检查是否存在复选框.themeContainer，以及复选框输入框是否被选中。
如果检查结果为真，我们将该.light类添加到复选框中.themeContainer；如果检查结果为假，我们将该类移除。

为什么要删除并添加这个.light类？我们现在来回答这个问题。

CSS代码

由于此代码很长，我将一步一步地向您展示！

.grid {
  display: grid;
  justify-items: center;
  align-content: center;
  height: 100vh;
  width: 100vw;
}

首先让我们将内容居中。我们使用 css 来实现grid。我们将grid在另一个 CSS 快速教程中介绍这个功能！

:root {
  /* light */
  --c-light-background: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);
  --c-light-checkbox: #fce100;
  /* dark */
  --c-dark-background:linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898; 
  --c-dark-checkbox: #757575;
}

代码和数字很多，但实际上我们做的不多。我们正在准备用于主题的自定义属性。我选择将--c-dark-and--c-light-作为自定义属性的前缀。我们在这里定义了一个亮色主题和一个暗色主题。在我们的示例中，我们只需要checkbox颜色和background属性（在演示中为渐变色）。

.theme-container {
  --c-background: var(--c-dark-background);
  --c-checkbox: var(--c-dark-checkbox);
  background: var(--c-background);
  background-blend-mode: multiply,multiply;
  transition: 0.4s;
}
.theme-container.light {
  --c-background: var(--c-light-background);
  --c-checkbox: var(--c-light-checkbox);
  background: var(--c-background);
}

这是代码的组成部分。现在我们明白了为什么我们将 命名为.theme-container。它是我们获取全局自定义变量的入口。我们不想使用特定的自定义变量。我们想要的是使用全局自定义变量。这就是我们设置 的原因--c-background。从现在开始，我们将只使用我们的全局自定义变量。然后我们设置background。

.demo {
  font-size: 32px;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch .theme-switcher {
  opacity: 0;
  width: 0;
  height: 0;
}

这只是一些用于设置样式的样板代码。在.demo选择器中，我们设置了font-size。这是切换符号的大小。在.switch选择器中height， 和width表示切换符号后面元素的长度和宽度。

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--c-checkbox);
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "🌑";
  height: 0px;
  width: 0px;
  left: -10px;
  top: 16px;
  line-height: 0px;
  transition: 0.4s;
}

.theme-switcher:checked + .slider:before {
  left: 4px;
  content: "🌞";
  transform: translateX(26px);
}

在这里，我们终于可以看到自定义属性的实际作用，除了直接在.theme.container和 中使用这些属性之外，还有大量的样板代码。如您所见，切换符号是简单的 Unicode 符号。这就是为什么切换符号在不同操作系统和手机厂商上的外观会有所不同。您必须记住这一点。这里需要注意的是，在选择器中，我们使用和属性.slider:before来移动符号。在 中也是如此，但仅限于属性。lefttop.theme-switcher:checked + .slider:beforeleft

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

这只是为了造型。让我们的开关在角上呈圆角。

就是这样！我们现在有一个可扩展的主题切换器了。✌😀

如果你能帮我做以下事情，那就太有帮助了！
去Twitch关注我！只要有几个人能这么做，这对我来说就意味着一切！❤❤❤😊

👋问好！ Instagram | Twitter | LinkedIn | Medium | Twitch | YouTube

文章来源：https://dev.to/lampewebdev/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily-1i0i
Devto 翻译
PREV
是时候抛弃 ReactJS 或 Angular 并使用更好的 Web 标准（例如 Web 组件）了😍 第 1 部分
NEXT
仅使用 HTML 和 CSS 即可实现出色悬停效果的按钮 | Valorant CSS 按钮