整个B站都变绿了？聊聊前端换肤的css变量方案

自我介绍

前言

今天打开B站一看，好家伙，整个B站都变绿了？这到底是怎么实现的呢？（这里仅讨论web端）

粗略看了一下，变绿的群体主要是啊b的 年度小会员,这是一场每年都蓄谋已久的愚人节整蛊。

解析

变绿的区域主要是 视频页的阿婆主名称

不难发现这种就比较粗暴，强行上行内样式，分析一下原本起作用的是color: var(--text1);

这系列的css变量，它是挂在在:root 伪类 下的，这也是非常常见的css代码组织了。

可以看到这里还是一层套娃？咋回事呢？

原来在light.css里面才真正定义颜色呀。这就让我的脑海里有一个大胆的猜测，B站的css设计 首先使用map.css来构建基础的css颜色变量，然后这些css变量再通过 主题样式比方说这里的light.css. 里面去再具体定义这些css变量真正的颜色。 那么到底是不是这样的呢？ 检查元素看看html里面吧

根据资源路径，再切到源代码面板

所以这就解释了为什么要强行给上行内样式，估计是这个变量影响范围太大，不符合业务需求了。

还有就是这个userCard.vue 这个组件

这里也是强行行内样式覆盖，因为这个组件抽离出来了，要改也容易，合起来就是小版本更新啦，上线就行，优雅什么的无所谓(这得根据需求来)。

总结

b站的样式代码组织是采用的css变量的方式，通过引入定义了对应变量颜色的【主题.css】,来优雅的实现主题切换。但愚人节这种因为涉及面比较小，因此采用简单粗暴的解决方式了。还有就是哀悼的时候，是采用filter全局上滤镜的方式。这种都是比较简单粗暴且实用的方式。