如何透過css變數實現主題切換？

目的

採用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元素的class在light和dark之間切換時，css變數--custom-background的值也會在white和black之間切換，至此，完成css變數的主題切換。