海阔凭鱼跃，天高任鸟飞。好久不见！我是莫莉莫莉。

对网页换肤是非常普遍的需求，比如最常见的深色和浅色样式。已经有很多实现方案，这里我主要介绍基于CSS变量的实现。

:

简单列举下一些其它实现方式

1.在不同的类名下写不同的风格，通过切换类名实现换肤。

这种方法没有明显的优势，只是简单的实现了这个需求。反而增加了css样式文件的代码冗余，会造成大量的重复代码。样式代码不利于扩展和维护，开发效率低

2.实现多套主题样式文件，通过link标签动态加载不同的样式文件。

这种方法的好处大概就是可以按需加载，但同时也造成了需要复制大量重复代码来单独修改，可以看作是风格隔离，相比之前的方法稍微提高了可维护性。

当切换多个样式文件时，可能会有加载延迟。这时候可以考虑用alternate来解决。

3.它是通过less或sass的可变模式实现的。

这样我们就可以提取所有的样式变量，直接在样式代码中使用，这是比较推荐的方式。大大提高了代码的扩展性和可维护性。

CSS variable的实现方式

如图，目前主流浏览器已经支持css变量，我们可以放心使用。

Css变量允许我们在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

导出默认值{ ' - grey900' '#EBEEF5 ''- grey600' '#A7ABC0 ''- grey500' '#72768D ''- grey400' '#5D6177 ''- grey300' '#404759 ''-grey 200 '# 2c 323 e ''- grey100' '#282B32 ''- grey50' '#171B22 '} white.js

导出默认值{ ' - grey900' '#1F2429 ''- grey600' '#646C73 ''- grey500' '#8D9399 ''- grey400' '#C3C7CB ''- grey300' '#E4E6E7 '-grey 200'' # eff0f1 ''-grey 100'' # f4f5f6 ''-grey 50'' # f8f9ffa.}010-1000.

//设置变量document . body . style . Set property('-foo '' # 666 ')//读取变量document . body . style . getpropertyvalue('-foo ')//删除变量document . body . style . remove property('-foo ')遍历变量dictionary对象。

从“@/utils/CSS varmap”setcss var(flag){ const varList=object . entries(flag？c . white:c . dark)varlist . foreach([key，val])={ document . body . style . set property(key，val)}至此，我们已经完成了根据不同的主题设置不同的主题变量，可以在样式文件中愉快地使用css变量了。

该方法操作简单，大大提高了代码的可扩展性和可维护性。之后还会有其他话题，只会多加一个配置文件，不会增加额外的副作用。

三、通过js设置style变量

举一反三

通过结合媒体查询，可以实现更复杂的交互场景。

body {-foo:# fff } p { color:var(-foo)} @ mediascreenand(min-width:768 px){ body {-foo:# 000 } }

1、结合媒体查询

在一些特殊的需求场景下，我们可以结合js业务逻辑动态添加或编辑CSS。

const doc style=document . document element . style；document . addevent listener(' mousemove '(e)={ docStyle.setProperty(' - foo 'e . clientx)；});

2、结合js业务逻辑

既然是声明变量，就有存储信息的功能。我们可以尝试在css变量中存储一些信息，然后通过文档读取和使用。body.style.getProperty值('-foo ')。不过这种方法在大多数场景下应该不会用到，也算是提供了一个思路。

Css vars是潜力股。让我们探索它更巧妙的用法。

3、存储一些信息

欢迎关注我的个人微信官方账号。前端有猫腻，每天给你推送新鲜好文。回复“福利”获取我精心准备的前端知识大礼包。愿你一路走好，眼里有光！

有兴趣的朋友也可以加我微信：molly Molly或者前端交流群和很多优秀的前端攻城狮交流技术，一起玩！