利用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');
    }
})();

给项目添加主题换肤
利用css变量变量写法 .theme-default是挂载的类名，以切换变量的形式达到切换主题的目的使用变量 ...
iOS换肤方案
换肤方案在一些文艺App上经常见到。为新项目和老项目添加换肤方案查看原文
vue2.0-基于elementui换肤[自定义主题]
0. 直接上预览链接 vue2.0-基于elementui换肤[自定义主题] 1. 项目增加主题组件 ...
一文总结前端换肤换主题
最近项目涉及换主题/换肤的工作，查了查资料，总结出五种换肤方案：这是五种均为通用方案，可以适用于各种前端框架，...
初步了解安卓的主题更换
换肤一般分为两种：插件换肤和主题换肤插件换肤就是所谓的apk换肤，将需要更换的属性写好打成apk包放在asset...
DarkMode(2)：深色模式解决方案——css颜色变量实现D
暗黑模式实现，最初的设计，就是参考之前的主题模式。所谓多套主题/配色/皮肤，就是我们很常见的换肤功能。换肤简单的实...
主题 : 换肤框架.
转载: ximsfei的博客地址：http://blog.csdn.net/ximsfei 1 背景换肤方案原理...
iOSApp换肤(主题换肤、深浅色、自动换肤）
iOS换肤 - 主题换肤、深浅色、自动换肤各种情况下的效果，具体请看代码使用方法： 1、将Lib文件夹下的 X...
如何给Bootstrap的默认主题换肤
Bootstrap大大减少了我们花在UI上面的时间，不过标准化的界面用久了难免会有审美疲劳，其实要为Bootstr...
换肤
换肤 1. 换肤的应用场景? 2. 换肤的实现方案方案1 1. 将图片以及颜色按照主题命名,使用虚拟文件夹, 直...