网页自适应手机暗黑模式

2021年08月29日57

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 翻转即可搞定你的网站暗黑模式,是不是挺好,哈哈。

暗黑Javascript1 

网页自适应手机暗黑模式 - Jdeal | Life is like a Design.