Article directory
I. Introduction
Internet applications need to be able to make corresponding adjustments based on actual conditions, such as theme graying effects. A simpler implementation is to add filter effects to the style, for example: replace <html> with <html style="filter:grayscale(1)">. The core code is filter:grayscale(1), which means "Set the current element and its descendant elements to 100% grayscale mode" .
If you need to be compatible with lower version browsers, you can do this in the following ways:
<html class="gray">
// 现代浏览器
.gray {
filter: grayscale(1);
}
// 远古浏览器
.gray {
-webkit-filter: grayscale(1); /* Old Chrome、Old Safari、Old Opera*/
filter: grayscale(1); /* 现代浏览器标准 */
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); /* IE */
}
2. Implement custom theme colors in RN
Since RN does not supportfilter setting filter attributes. Therefore, it needs to be realized through the native level.