[分享]CSS全局变量实现更换主题

CSS全局变量是CSS3中新增的一项功能，可以在文档内定义一些全局的变量，然后在样式表中引用这些变量，实现在不同场景下灵活地改变页面的样式效果。其中最为常见的应用场景就是实现网页主题的更换。我们可以定...

CSS全局变量是CSS3中新增的一项功能，可以在文档内定义一些全局的变量，然后在样式表中引用这些变量，实现在不同场景下灵活地改变页面的样式效果。

其中最为常见的应用场景就是实现网页主题的更换。我们可以定义一些颜色、尺寸等全局变量，在应用样式时引用这些变量，从而达到更换主题的目的。

:root {
  --main-color: #007bff; // 定义主色调变量
  --secondary-color: #6c757d; // 定义辅色调变量
  --font-size: 16px; // 定义字体大小变量
}
 
.navbar {
  background-color: var(--main-color); // 使用主色调变量
  font-size: var(--font-size); // 使用字体大小变量
}
 
.btn-primary {
  background-color: var(--main-color); // 使用主色调变量
  color: #fff;
}
 
.btn-secondary {
  background-color: var(--secondary-color); // 使用辅色调变量
  color: #fff;
} 

如上所示，我们在:root伪类中定义了三个全局变量：主色调变量、辅色调变量和字体大小变量。在不同的样式规则中，我们可以使用var()函数来引用这些变量，从而达到实现网页主题切换的目的。

通过这种方式，我们可以在不同的场景下灵活地改变页面的样式效果，极大地提升开发效率。