目的

采用css变量来切换应用的主题。

手段

1 定义好主题需要的css变量

/* theme.css */

.light {
    --custom-background: white;
}

.dark {
    --custom-background: black;
}

2 全局引入上面定义的css变量

/* index.js */
import './theme.css';

3 实现切换主题class的逻辑

/* App.js */
document.documentElement.className = 'light';
or
document.documentElement.className = 'dark';

4 在应用中各个位置引用全局引入的css变量

/*app.css*/
body {
    background: var(--theme-background);
}

这样,当html元素的classlightdark之间切换时,css变量--custom-background的值也会在whiteblack之间切换,至此,完成css变量的主题切换。


热饭班长
3k 声望36 粉丝