JavaScript CSS优雅实现网页多主题风格换肤功能详解

引言

对于网页换肤,例如最常见的深色、浅色风格已经是很常见的一个需求了。一直以来也有很多的实现方案,这里我主要介绍一下基于 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

%s 个评论

要回复文章请先登录注册