利用css变量

变量写法

.theme-default{
--font-color:#ffffff;
}
.theme-night{
--font-color:#aaaaaa;
}

.theme-default是挂载的类名，以切换变量的形式达到切换主题的目的

使用变量

.home{
color:var(--font-color)
}

切换方法

setTheme(themeName){
document.documentElement.className=themeName
}
(function () {
    if (localStorage.getItem('theme') === 'theme-default') {
        setTheme('theme-default');
    }
    if (localStorage.getItem('theme') === 'theme-second') {
        setTheme('theme-second');
    }
    if (localStorage.getItem('theme') === 'theme-third') {
        setTheme('theme-third');
    }
})();