网站都变成灰色的了，代码是怎么实现的呢？

 

今天来聊一聊页面的滤镜，或者说换肤更合适些。根据技术栈不同，页面换肤可以分为 web 端和 app 端，因此本文通过以下两部分介绍

• PC 端

• APP 端

一、PC 端

有关 PC 端的一键换肤，这个操作常用，所以大概率是有某个全局字段或者属性来控制的。接下来看我是如何一步步分析

1、初步定位

一开始找这个滤镜，没有在根节点下，而是在各个图片的子节点查看是否有单独的滤镜。

但找了一圈之后发现，元素上并没有新增的样式，而且属性也没有修改。突破点在下图

1）表象，按钮颜色是灰色 

2）元素上没有新增 class 

3）样式中背景色还是绿色

因此，推测，滤镜或者颜色并不在单个元素上，肯定在外层，查看 根节点 #app，就发现了对应的滤镜属性

2、找到关键属性

经过十几分钟，终于找到了关键属性： filter: grayscale(100%);

并且是在根节点下，以 QQ 音乐举例，一键换肤，只需给根节点 #app 加上 上面的代码即可。具体效果如下图：

再来看去掉的效果，页面的色彩也都恢复了

尝试修改滤镜值，看看效果

filter: blur(5px);filter: contrast(200%);filter: grayscale(80%);filter: hue-rotate(90deg);filter: drop-shadow(16px 16px 20px red) invert(75%);

感兴趣的朋友可在浏览器中进行尝试，对滤镜感兴趣的小伙伴，也可以参考文档

 https://developer.mozilla.org/en-US/docs/Web/CSS/filter

二、APP 端

1、React Native

由于我负责的页面，没有涉及这方面的改动，所以对于这块不是很了解，根据搜索的资料，本地进行了尝试。但效果都不太理想。而且查看到的也只有对图片的颜色设置，没有看到关于整个页面的换肤方案。

1）方式一

<Image style={[styles.Icon, {tintColor: 'rgba(255,0,0,0.1)' }]} source={Source}>

使用 tintColor 属性，但是本地尝试添加该属性后，发现图片都不见了，取而代之都是设置的颜色值。

2）方式二

需要引入一个 npm 包，参考链接：

https://github.com/iyegoroff/react-native-color-matrix-image-filters#supported-filters

大致使用方式如下：

但是晨光本地装了这个包之后，视图渲染时会有个报错

但是本地包的版本都是符合使用该组件的条件的。所以感觉这个方式也不是很靠谱，至于这个报错，晨光也没有过多的去解决。

2、Flutter

当然晨光没有进行尝试，但是大概率是可以整个也没实现 filter 滤镜的。

总结

整个换肤或者说给页面加滤镜的流程大致是这样，在根结点套上一层滤镜即可，但是看下来，pc端或者web端实现简单。而 app 端由于技术栈不同，且对 css 的支持也没有那么友好，所以实现起来可能略复杂。

所以这也就是为什么有点 app 是整个页面都加了滤镜，而有的只换了首屏，技术栈不同，导致有不同的换肤方案，做出的效果也参差不齐。