menu Web-Worker 归档 留言 朋友 致谢 关于
devices rss_feed color_lens more_vert
[教程]如何让网站跟随系统的深色模式
作者 | 时间

此教程只教如何跟随系统的深色模式,并不教如何配色。


适配情况 (部分数据可能不准确,仅供参考)
信息来源:MDN

  • 桌面端
ChromeEdgeFirefoxInternet ExplorerOperaSafari
76+79+67+不支持62+12.1+
  • 移动端
平台Android webviewChromeEdgeFirefoxOperaSafari
Android76+76+不支持不支持54+不支持
IOS----12.1+

教程方法

CSS适配 判断当前是否处于深色模式

其他可选参数:no-preference,light,dark

@media (prefers-color-scheme: dark) {
    // css适配代码
}

JS适配 判断当前是否处于深色模式

其他可选参数:no-preference,light,dark

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // Js 适配代码
}

下面放出来MDUI站点的适配方法

依赖: JQ,MDUI

<script>
function Follow_System() {
    if (window.matchMedia('(prefers-color-scheme: light)').matches) {
        $('#brightness i').html('brightness_2');
        $('body').removeClass('mdui-theme-layout-dark');
        mdui.snackbar({
            message: '已为您跟随系统到浅色模式',
            position: 'right-bottom',
            timeout: 1000
        })
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        $('#brightness i').html('brightness_5');
        $('body').addClass('mdui-theme-layout-dark');
        mdui.snackbar({
            message: '已为您跟随系统到深色模式',
            position: 'right-bottom',
            timeout: 1000
        })
    } else if (window.matchMedia('(prefers-color-scheme: no-preference)').matches) {
        mdui.snackbar({
            message: '浏览器支持跟随,但是系统并不支持跟随',
            position: 'right-bottom',
            timeout: 1000
        })
    } else if (window.matchMedia('(prefers-color-scheme)').media === 'not all') {
        mdui.snackbar({
            message: '浏览器不支持跟随,无法判断系统是否支持',
            position: 'right-bottom',
            timeout: 1000
        })
    } else if (window.matchMedia('(prefers-color-scheme)').media === '(prefers-color-scheme)') {
        /**    此判断针对Android Edge的某一个版本写的,点名批评   **/
        mdui.snackbar({
            message: '浏览器声称自己支持跟随,<br />但实际浏览器并不支持跟随。<br />这种骗人的浏览器建议打死。',
            position: 'right-bottom',
            timeout: 1000
        })
    } else {
        mdui.snackbar({
            message: '其他未知因素导致无法跟随',
            position: 'right-bottom',
            timeout: 1000
        })
    }
}
Follow_System();
</script>
已有 4 条评论
  1. xr xr

    可以可以

    1. 大吃一惊,我的博客居然有人回复了!

  2. 太强力!!!!!

添加新评论