sever2012做网站,wordpress 不能更新,深圳网站关键词排名推广,广州市用工备案在哪个网站做方案一使用css的var属性#xff0c;当然此时不考虑低版本浏览器。1#xff0c;在default.css主题根元素定义颜色变量:root {--main_color: #03a9f4; // 主题色--main_light: #33baf7; // 二级主题色 常用背景为主题色下的hover--main_lighter: #65caf5; // 三级主题色 常用bo…方案一使用css的var属性当然此时不考虑低版本浏览器。1在default.css主题根元素定义颜色变量:root {--main_color: #03a9f4; // 主题色--main_light: #33baf7; // 二级主题色 常用背景为主题色下的hover--main_lighter: #65caf5; // 三级主题色 常用border--main_extra_light: #e6f7ff; // 四级主题色 常用background}2使用时参考css var属性。.test{color: var(--main_color);}3在dark.css主题根元素定义替换变量:root[themedark] {--main_color: #2F4554; // 主题色--main_light: #686a6b; // 二级主题色--main_lighter: #9a9b9c; // 三级主题色--main_extra_light: #d7d8d8; // 四级主题色}4点击切换成dark主题时引入dark.css控制根节点html加themdark属性省去js的实现代码此时页面应有...切换成dark主题document.getElementById(btn).οnclick(e){document.documentElement.setAttribute(theme, dark)}可以看出dark的主题颜色变量覆盖了default的主题颜色变量颜色变量覆盖5扩展用js控制css 的变量可动态的改变颜色实现不需要在配置一份主题颜色引入。let btn document.getElementById(btn)let html document.documentElementbtn.οnclick(e){html.style.setProperty(--main_color, red)}方案二引入scss配置webpack生成多份的主题css使用时引入对应的主题。1新建主题目录image.png2 配置webpack.config.js打包成多份的cssconst globby require(globby);const getCssEntry (() {const paths globby.sync(*.scss, {cwd: path.join(__dirname, ./style/themes)});const rs {}paths.forEach(h {if (!h.includes(_)) { // 过滤打包_的命名文件let name path.basename(h, .scss)let p path.join(./style/themes, h);if (!p.startsWith(.)) { // 转成相对地址p ./ p;}rs[name] p;}})return rs});const options [{mode: mode,entry: {app: ./src/index.js,...getCssEntry() // 引入多主题},......}]module.exports options;启动后可以看到生成的主题image.png3默认主题app.css定义变量和引入样式$main_color: #03a9f4; // 主题色$main_light: #33baf7; // 二级主题色 常用背景为主题色下的hover$main_lighter: #72cef7; // 三级主题色 常用border$main_extra_light: #e6f7ff; // 四级主题色 常用backgroundimport ./_common.scss;4深色主题dark.css定义变量和引入样式$main_color: #2F4554; // 主题色$main_light: #686a6b; // 二级主题色$main_lighter: #9a9b9c; // 三级主题色$main_extra_light: #d7d8d8; // 四级主题色import ./_common.scss;_common.scss下可以是.test{font-size: $main_color;}5使用js控制link标签的引入href app.css 和hrefdark.css的切换就可以了省去js代码...。
