作者： Daniel_yanm
1 几种方法
-
基于css变量实现，高效快捷。
-
动态切换根元素样式名或ID。
-
element官方动态主题色 + 动态切换文件（要兼容IE低版本，最终决定使用此方法）
2 动态切换主题色实现过程
度娘上很多成功案例，参考以下解决方案：
-
先把默认主题文件中涉及到颜色的 CSS 值替换成关键词：github.com/ElementUI/t…
-
根据用户选择的主题色生成一系列对应的颜色值： github.com/ElementUI/t…
-
把关键词再换回刚刚生成的相应的颜色值：github.com/ElementUI/t…
-
直接在页面上加 style 标签，把生成的样式填进去：github.com/ElementUI/t…
3 动态背景色实现过程
准备工作
1.首先在element官网上配置好俩种需要的主题风格，
2.然后下载到本地，我这里路径为：public/download 。解压后得到文件如下所示（文件名称手动修改）
正式开始
1. 先按照element官方提示安装自定义主题工具
npm i element-theme -gnpm i element-theme-chalk -D
按照好之后先执行一次et -i 根目录下会生成一个名为element-variables.scss的文件，先放在这里待会有用。
2. 然后在publi文件下新建theme文件用于存放项目主题包。创建好文件后在项目中生成对应主题色scss文件，这里我将主题样式文件放在public文件中、vuecli2放入static中。执行：
et -i public/theme/light.scss
et -i public/theme/dark.scss
此时在public/theme文件下生成了light.scss、dark.scss 文件
然后找到刚刚从官网下载的浅色模式主题包中config.json文件，然后将文件中内容替换到浅色模式对应的light.scss文件中。
暗色模式做同样的操作。
全部替换完成后我们开始根据scss文件生成css包、执行：
et -c public/theme/light.scss -o public/theme/light
et -c public/theme/dark.scss -o public/theme/dark
完成上述操作后public/theme文件会生成名为light和dart的俩个新文件，加下图：有这些文件：
搞到这里配置文件就完成了
引用方法
之后在index.html中加入
<link rel="stylesheet" type="text/css" href="./light/index.css" id="themeLinkId" >
动态切换方法：
/** * @name 背景色切换为暗黑模式 * @param {string} val */export function changeThemeBackground (val) { document.getElementsByTagName('body')[0].className = 'dark_theme' localStorage.setItem('theme_background', val) document.getElementById('themeLinkId').href = './theme/dark/index.css'}/** * @name 背景色切换为浅色模式 * @param {string} val */export function restoreThemeBackground (val) { document.getElementsByTagName('body')[0].className = 'light_theme' localStorage.setItem('theme_background', val) document.getElementById('themeLinkId').href = './theme/light/index.css'}/** * @name 初始模式设置 */export function initThemeBackground () { let saveBackground = localStorage.getItem('theme_background') if (saveBackground === 'dark') { changeThemeBackground('dark') }}
// 切换背景 changeBackground (val) { console.log('val', val) const changeClassLoading = Loading.service({ text: '正在加载中......', fullscreen: true }) if (val === 'dark') { console.log('dark') changeThemeBackground(val) } else { console.log('light') restoreThemeBackground(val) } this.themeBackGroundState = val setTimeout(() => { changeClassLoading.close() }, 500) },
到此vue文件中 基本可以覆盖80% 以上的基本样式
完结
后边会继续写自定义主题色切换篇章
第一次发文如有不足之处望见谅！！！
