网页自适应手机暗黑模式 - Jdeal

iPhone 和 Android 的手机目前都支持暗黑模式了，想想能不能让网站像 APP 那样自动识别并适配手机暗黑模式。

首先是我将网站的暗黑模式用了一句代码就能转为暗黑模式：

html{filter:invert(100%) hue-rotate(180deg);}

恩，你没看错，就这么一句，其意思是利用了 css 中 filter 的颜色翻转。

当然，有些小 bug，例如图片、视频等看起来会比较奇怪，于是再加一句：

html img,picture,video{filter:invert(1) hue-rotate(180deg);}

ok，基本完美。

然后查询了资料，目前手机暗黑模式调用的时候用的调用是：

@media(prefers-color-scheme:dark)

那么接下来就很简单了，在你的 css 中加入以下代码：

@media(prefers-color-scheme:dark){
html{transition:color 300ms,background-color 300ms;} //这是动画过渡
html{filter:invert(100%) hue-rotate(180deg);} //这是整体颜色翻转
html img,picture,video{filter:invert(1) hue-rotate(180deg);} //这是将图片视频等恢复正常
}

由于没有 Android 手机，目前在 iPhone 上自测一切正常，挺好，hah~

可能有些小伙伴可能会需要在页面上加个按钮，手动控制暗黑开关。

以下代码也可以实现，恩，一个 button 加一段 js 即可，无需修改其余。

<button id="test" >按钮</button>

<script>
let flag = 0;
    let styleLabel = document.createElement('style');
    document.getElementById('test').onclick = function() {
        if (!flag) {
            const style = 'html{filter:invert(100%) hue-rotate(180deg);}html img, picture, video{filter: invert(1) hue-rotate(180deg);}';
            styleLabel.appendChild(document.createTextNode(style));
            document.head.appendChild(styleLabel);
            flag = 1;
        } else {
            document.head.removeChild(styleLabel);
            flag = 0;
        }
}
</script>

好了，一句 css 里的 filter 翻转即可搞定你的网站暗黑模式，是不是挺好，哈哈。

新增：一行代码进入全站悼念模式，把<html>替换成<html style="filter:grayscale(1)">即可，简单粗暴。当然，核心代码是 filter:grayscale(1)，意思是「把当前元素及其后代元素设置成 100%的灰度模式」。