css变量 css变量主题切换

CSS变量是一种在CSS中定义的可重用的值，可以在多个元素和规则中使用，它们可以帮助我们更轻松地管理和修改样式，提高代码的可读性和可维护性。

我们需要创建一个CSS变量，在CSS中，我们可以使用:root伪类来定义一个全局变量，我们可以创建一个名为--main-color的全局变量，用于表示页面的主要颜色：

:root {
  --main-color: #3498db;
}

接下来，我们可以在其他元素和规则中使用这个变量，我们可以将--main-color应用于一个段落的背景颜色：

p {
  background-color: var(--main-color);
}

我们还可以使用CSS变量来设置元素的宽度、高度、边距等属性，我们可以创建一个名为--button-size的全局变量，用于表示按钮的宽度和高度：

:root {
  --button-size: 100px;
}

我们可以将--button-size应用于一个按钮的宽度和高度：

button {
  width: var(--button-size);
  height: var(--button-size);
}

我们可以使用JavaScript来动态更改CSS变量的值，我们可以创建一个函数来改变--main-color的值：

function changeMainColor(newColor) {
  document.documentElement.style.setProperty('--main-color', newColor);
}

通过这种方式，我们可以更方便地管理和修改CSS变量，从而提高代码的可读性和可维护性。