CSS判断手机暗黑模式

手机有个功能到了晚上会自动变成深色也就是暗黑模式.这种情况下网页会自动变颜色.如果想自由控制暗黑模式下的html样式的话,可以用如下方式:

css 复制代码
        @media (prefers-color-scheme:  dark) {
            /*html, body {*/
                /*filter: invert(1) hue-rotate(180deg);*/
            /*}*/
            .maill{
                margin-left: 0;
                margin-right: 0;
                margin-top: 0px;
                margin-bottom: 0px;
                width: 100%;
                max-width: 100%;
                background: rgb(255,255,255)!important;

                padding: 0px;
                padding-bottom: 20px;
            }
            /*img, video,audio{*/
            /*@include hover-change(#4B4B4B,white);*/
            /*}*/
        }

这就只会在暗黑模式的时候才生效!

相关推荐
爱学习的小学渣几秒前
Css: flex布局+趣味Demo
css
丘耳几秒前
前端渲染方式
前端
The_cute_cat几秒前
Ajax和Axios的初步学习
前端·学习·ajax
Zz_waiting.2 分钟前
Javaweb - 10.4 ServletConfig 和 ServletContext
java·开发语言·前端·servlet·servletconfig·servletcontext·域对象
爱学习的小学渣2 分钟前
JS用法:Map,Set和异步函数
前端·javascript
Mike_jia9 分钟前
Icinga 2:开源监控领域的全能选手——从零构建企业级智能运维体系
前端
wuxuanok11 分钟前
Web前端开发-HTML、CSS
前端·css·html
Mike_jia11 分钟前
Dish:套接字监控领域的「听诊器」——轻量级网络健康守护神深度解析
前端
独立开阀者_FwtCoder20 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
慧一居士21 分钟前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js