海阔凭鱼跃，天高任鸟飞。好久不见！我是猫力Molly
对于网页换肤，例如最常见的深色、浅色格调曾经是很常见的一个需要了。始终以来也有很多的实现计划，这里我次要介绍一下基于 CSS variable的实现形式
简略列举下一些其它实现形式
1、把不同格调款式写到不同的类名上面，通过切换类名来实现换肤
这种形式没啥显著的长处，只是单纯的实现了此需要。反而减少了css款式文件代码冗余且会造成大量反复代码，款式代码不利于拓展保护，且开发效率低下
2、实现多套主题款式文件，通过 link 标签动静加载不同的款式文件
这种形式的长处大略是做到了按需加载吧，但同时也造成了须要拷贝大量反复代码来独自批改，也算是做到了款式隔离，相比上一种形式稍稍进步了一点可维护性吧
在多个款式文件切换的时候，可能会有加载提早。这时候能够思考应用 alternate 来解决
3、通过less或sass的变量形式实现
这种形式咱们能够将所有格调变量抽离进去，在款式代码中间接应用该变量，是一种比拟举荐的形式。极大进步了代码的拓展性和维护性
CSS variable的实现形式
如图所示，目前支流浏览器都曾经反对css variable，咱们只管放心使用
CSS variable 容许咱们在 css 外面申明变量，在变量前加上两根小横线即可（--）
body { --foo: #000; --bar: #fff;}须要留神的是css vars变量申明，辨别大小写--foo 与 --Foo 是两个不同的变量
var() 函数
应用var()函数来读取变量
p{ color:var(--foo)}var()函数反对第二个参数，用于示意变量的默认值，如果变量值不存在，则以默认值为准
p{ color:var(--fooo, #ccc)}对于var()函数此处不做过多赘述，详情请查阅官网文档
计划落地
大抵思路：不论深色或是浅色格调，咱们都能够把它视作一个个主题。把每个主题的色彩值、盒子宽高、图片地址等抽离为一个字典对象构造。一个主题对应一个配置文件，再通过切换配置文件来实现主题格调的变动
一、和UI设计师沟通好各主题的色阶
一个主题对应一份配置文件，所以咱们须要提前和UI设计师沟通好各主题对应的色阶，字号，一些通用款式规定等
css vars变量名称是不变的，变量值随着主题的切换而产生扭转
我的UI共事应用的是 figma，而后我发现 figma 右侧的信息栏外面有色彩编号，正好能够应用这个来当做变量名称。在编码阶段，看到这个编号，就晓得用什么变量名了，十分不便。
如果你的UI共事应用的是别的设计工具，最好也是提前约定好变量名，使其大家都不便
二、将各主题色阶抽离为一个字典对象
dark.js
export default { '--grey900': '#EBEEF5', '--grey600': '#A7ABC0', '--grey500': '#72768D', '--grey400': '#5D6177', '--grey300': '#404759', '--grey200': '#2C323E', '--grey100': '#282B32', '--grey50': '#171B22', '--grey0': '#222730', ...} white.js
export default { '--grey900': '#1F2429', '--grey600': '#646C73', '--grey500': '#8D9399', '--grey400': '#C3C7CB', '--grey300': '#E4E6E7', '--grey200': '#EFF0F1', '--grey100': '#F4F5F6', '--grey50': '#F8F9FA', '--grey0': '#FFFFFF', ...} 三、通过js设置style变量
这里咱们须要用到 document.body.style 的api
// 设置变量document.body.style.setProperty('--foo', '#666')// 读取变量document.body.style.getPropertyValue('--foo')// 删除变量document.body.style.removeProperty('--foo')遍历变量字典对象，依据不同主题，给网页设置对应变量
import C from '@/utils/cssVarMap'setCssVar (flag) { const varList = Object.entries(flag ? C.white : C.dark) varList.forEach(([key, val]) => { document.body.style.setProperty(key, val) })}至此，咱们曾经实现依据不同主题设置不同主题变量了，能够欢快的在款式文件外面应用css vars
这种形式操作简略，且极大的进步了代码的拓展性和维护性。之后再有别的主题，也不过是多减少一份配置文件而已，不会减少额定的副作用。
触类旁通
1、联合媒体查问
通过联合媒体查问，咱们能够实现更简单的交互场景
body { --foo: #fff}p { color: var(--foo)}@media screen and (min-width: 768px) { body { --foo: #000 }}2、联合js业务逻辑
在一些非凡需要场景下，咱们能够联合js业务逻辑，动静追加或编辑 css vars
const docStyle = document.documentElement.style;document.addEventListener('mousemove', (e) => { docStyle.setProperty('--foo', e.clientX);});3、存储一些信息
既然是申明变量，那么就有存储信息的性能。咱们能够试着将一些信息存储在 css vars 外面，再通过document.body.style.getPropertyValue('--foo')去读取应用。不过大部分场景应该应用不到这种办法，也算是提供一种思路吧。
css vars是个潜力股，一起来开掘它更多奇妙的用法吧
感激
欢送关注我的集体公众号前端有猫腻每天给你推送陈腐的优质好文。回复 “福利” 即可取得我精心筹备的前端常识大礼包。愿你一路前行，眼里有光！
感兴趣的小伙伴还能够加我微信：猫力molly或前端交换群和泛滥优良的前端攻城狮一起交换技术，一起游玩！