海阔以鱼跃，天高任鸟飞。好久不见了！我是MollyMaoli对于网页换肤，比如最常见的深色和浅色风格，已经是很普遍的需求了。一直以来都有很多实施方案。这里主要介绍基于CSS变量的实现方式，并简单列举一些其他的实现方式。1、在不同的类名下写不同的样式，通过切换类名实现换肤这种方法没有明显的优势，只是简单的实现了这个需求。反而增加了css样式文件的代码冗余，会造成大量的重复代码。样式代码不利于扩展和维护，开发效率低。2.实现多套主题样式文件，通过link标签动态加载不同的样式文件。大概实现了按需加载，但同时也造成了需要复制大量重复的代码单独修改，也算是实现了风格隔离。与以前的方法相比，可维护性略有提高。在多个样式文件之间切换，可能会出现加载延迟。这时候可以考虑使用alternate来解决问题。3.通过less或者sass的变量方法来实现这个方法，我们可以把所有的样式变量抽取出来，直接在样式代码中使用变量，这是比较推荐的方法。大大提高了代码的可扩展性和可维护性。CSS变量的实现如图所示。目前主流浏览器已经支持css变量。我们可以安全地使用CSS变量，它允许我们在css中声明变量。在变量之前，添加Just两条小横线(--)body{--foo:#000;--bar:#fff;}需要注意的是cssvars变量声明区分大小写--foo和--Foo是两个不同的变量var()函数使用var()函数读取变量p{color:var(--foo)}var()函数支持第二个参数，用于表示变量的默认值，如果变量值不存在，则以默认值为准。p{color:var(--fooo,#ccc)}这里我不会详细介绍var()函数。详情请参考官方文档。色彩风格，我们都可以把它看成一个主题。将每个主题的颜色值、框宽高、图片地址等提取到一个字典对象结构中。一个主题对应一个配置文件，然后通过切换配置文件来改变主题风格1.和UI设计师沟通每个主题的色阶一个主题对应一个配置文件，所以我们需要和UI设计师沟通advance主题对应的色阶、字体大小、一些通用样式规则等cssvars变量名不变，变量值随着主题的切换而变化。我UI同事用的是figma，然后发现figma右边的信息栏里有颜色编号，可以用这个作为变量名。在编码阶段，看到这个数字就知道用什么变量名了，很方便。如果你的UI同事使用的是其他设计工具，最好提前约定好变量名，方便大家使用。2.将每个主题的色标提取到一个字典对象中dark.jsexportdefault{'--grey900':'#EBEEF5','--grey600':'#A7ABC0','--grey500':'#72768D','--grey400':'#5D6177','--grey300':'#404759','--grey200':'#2C323E','--grey100':'#282B32','--grey50':'#171B22','--grey0':'#222730',...}白色。jsexportdefault{'--grey900':'#1F2429','--grey600':'#646C73','--grey500':'#8D9399','--grey400':'#C3C7CB','--grey300':'#E4E6E7','--grey200':'#EFF0F1','--grey100':'#F4F5F6','--grey50':'#F8F9FA','--grey0':'#FFFFFF',...}3.通过js设置样式变量这里需要使用document.body.styleapi//设置变量document.body.style.setProperty('--foo','#666')//读取变量document.body.style.getPropertyValue('--foo')//删除变量document.body.style.removeProperty('--foo')遍历变量字典对象，并设置对应的变量import根据不同主题的网页Cfrom'@/utils/cssVarMap'setCssVar(flag){constvarList=Object.entries(flag?C.white:C.dark)varList.forEach(([key,val])=>{文档.body.style.setProperty(key,val)})}至此，我们就完成了根据不同的主题设置不同的主题变量，我们可以愉快的在样式文件中使用cssvars了。这种方法操作简单，大大提高了代码的扩展性和可维护性之后还有其他的话题，只是一个额外的配置文件，不会增加额外的副作用。推论1.结合媒体查询通过结合媒体查询，我们可以实现更复杂的交互场景body{--foo:#fff}p{color:var(--foo)}@mediascreenand(min-width:768px){body{--foo:#000}}2.结合js业务逻辑在一些特殊的需求场景下，我们可以结合js业务逻辑动态添加或编辑cssvarsconstdocStyle=document.documentElement.style;document.addEventListener('mousemove',(e)=>{docStyle.setProperty('--foo',e.clientX);});3、存储一些信息由于是变量声明，所以具有存储信息的作用。我们可以尝试在cssvars中存储一些信息，然后通过document.body.style.getPropertyValue('--foo')来读取和使用。不过这个方法在大多数场景下应该不会用到，也算是提供了一个思路。cssvars是个潜力股，下面我们来挖掘一下它的更多巧妙用法吧。谢谢，欢迎关注我的个人公众号前端有招，每天都会给大家送上新鲜的优质文章。回复“福利”，即可获得我精心准备的前端知识大礼包。愿你眼里有光，前行！有兴趣的朋友也可以加我微信：毛利molly或者前端交流群，和众多优秀的前端攻城狮交流技术，一起玩！
