CSS Variables 可以让我们在应用程序中轻松地管理和重复使用样式属性，同时在不同部分之间实现一致性。然而，有时候我们需要在运行时动态更新这些变量的值。fbjs-css-vars 是一个 NPM 包，它提供了一种简单的方式来处理这个问题。
安装
首先，我们需要安装 fbjs-css-vars：
npm install fbjs-css-vars
基本使用
要使用 fbjs-css-vars，我们需要先引入它并创建一个新的 CssVars 实例。我们可以通过传递一个包含我们想要设置的变量名和初始值的对象来实现这一点：
import CssVars from 'fbjs-css-vars';
const cssVars = new CssVars({
'--primary-color': '#007bff',
'--secondary-color': '#6c757d',
});现在，我们可以使用 set 方法来动态更新这些变量的值，并将其作为第一个参数传递：
cssVars.set('--primary-color', '#e83e8c');如果我们想要使用这些动态更新的变量，我们可以像这样在 CSS 中使用它们：
body {
background-color: var(--primary-color);
}处理异步操作
在某些情况下，我们可能需要在异步操作完成后才能动态更新 CSS 变量。fbjs-css-vars 允许我们在异步操作完成后更新变量。我们可以使用 wait 方法来指定需要等待的 Promise，并在 Promise 完成后更新变量。
const promise = fetch('/data.json')
.then((response) => response.json())
.then((data) => {
// 这里是一些修改 CSS 变量的逻辑
});
cssVars.wait(promise).set('--primary-color', '#e83e8c');实际应用示例
下面是一个实际的示例，演示如何使用 fbjs-css-vars 动态更改页面主题。假设我们有两个按钮：一个将主题设置为暗色调，另一个将主题设置为浅色调。当用户单击这些按钮时，我们将更新 CSS 变量以反映他们的选择。
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<title>Theme Switcher</title>
<style>
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s ease-in-out,
color 0.3s ease-in-out;
}
button {
padding: 10px;
margin: 10px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
.theme-dark {
background-color: #343a40;
color: #fff;
}
.theme-light {
background-color: #fff;
color: #343a40;
}
</style>
</head>
<body>
<h1>Theme Switcher</h1>
<button id="darkThemeBtn" class="theme-dark">Dark Theme</button>
<button id="lightThemeBtn" class="theme-light">Light Theme</button>
<script type="module">
import CssVars from 'fbjs-css-vars';
const cssVars = new CssVars({
'--bg-color': '#fff',
'--text-color': '#343a40',
});
function setTheme(theme) {
if (theme === 'dark') {
cssVars.set('--bg-color', '#343a40');
cssVars.set('--text-color', '#fff');
} else if (theme === 'light') {
cssVars.set('--bg-color', '#fff');
cssVars.set('--text-color', '#343a40');
}
}
document
.getElementById('darkThemeBtn')
.addEventListener('click', () => {
setTheme('dark');
});
document
.getElementById('lightThemeBtn')
.addEventListener('click', () => {
setTheme('light');
});
</script>
</
> Source: [FunTeaLearn](https://funteas.com/post/41644),Please indicate the source for reprints
[https://funteas.com/post/41644](https://funteas.com/post/41644)