自19年开始，Android和IOS平台，都开始玩暗黑模式。当然这没什么不好，但是当我们的页面被用户在暗黑模式打开之后，会被那传统大白色瞬间闪瞎双眼。

下面会简单的说一下如何让页面支持暗黑模式。

准备

其实，我们只是需要使用到css中的 prefers-color-scheme 媒体查询。

no-preference 表示用户未制定操作系统主题。作为布尔值时，为 false 输出。

light 表示用户的操作系统是浅色主题。

dark 表示用户的操作系统是深色主题。

说明

这篇文章发布的时候，微信还无法拿到 prefers-color-scheme 参数，所以当我们在微信中打开页面目前不支持暗黑模式。

此方法只是一个简单demo，可以使用该方法拓展出其他实现方式。

HTML

页面适应黑暗模式

测试文字

CSS

.back {background: white; color: #555;text-align: center}

@media (prefers-color-scheme: dark) {

.back {background: #333; color: white;}

.models {border:solid 1px #00ff00}

}

@media (prefers-color-scheme: light) {

.back {background: white; color: #555;}

.models {border:solid 1px #2b85e4}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

藏青色在html页面怎么写,Html页面支持暗黑模式的实现相关推荐

html 页面模式,html如何实现暗黑模式
下面会为大家简单的说一下如何让页面支持暗黑模式. 准备其实,我们只是需要使用到css中的 prefers-color-scheme 媒体查询. no-preference 表示用户未制定操作系统主题 ...
像数据分析一样写 Web 页面，这个 Python 库做到了！
作者|刘早起来源|早起Python 提起用 Python 写一个 web 页面,总是会想起Django/Flask等这样的大家伙. 他们确实好用,但就是流程繁琐,比如有时就想写一个简单的页面,比如问 ...
分分钟教会你使用HTML写Web页面
在学习怎样使用HTML编写网页之前,我们必须先搞清楚什么是HTML?当然了不是系统的给大家介绍HTML的前世今生,假设对其身世感兴趣的小伙伴能够去问度娘,她会给你想要的答案. 所谓HTML,就是我们常 ...
[html] 你写一个页面需要多长时间？
[html] 你写一个页面需要多长时间? 和页面结构,样式,交互设计正相关个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端 ...
[html] 对于写一个页面布局，html/css/js这三者你是先写哪个后写哪个？
[html] 对于写一个页面布局,html/css/js这三者你是先写哪个后写哪个? 快捷键创建模板html+css写出结构写js做交互个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
php渲染nodejs api,nodejs通过响应回写渲染页面步骤详解
这次给大家带来nodejs通过响应回写渲染页面步骤详解,nodejs通过响应回写渲染页面的注意事项有哪些,下面就是实战案例,一起来看一下. 我们一般通过node框架提供的api操作页面渲染,如何利用原 ...
springmvc返回值、数据写到页面、表单提交、ajax、重定向
实验是在前一篇文章的项目上做的: 数据写到页面后台往前台传数据 TestController添加 /*** 方法的返回值采用ModelAndView, new ModelAndView(" ...
今天加班做了昨天晚上要写的页面，用到了一些之前用过但还不熟悉需要上网搜索才能用的知识点：...
今天加班做了昨天晚上要写的页面,用到了一些之前用过但还不熟悉需要上网搜索才能用的知识点: 1.Action中取请求参数的几种方法总结方法一:当把参数作为Action的类属性,且提供属性的getter ...
通过用jQuery写一个页面，我学到了什么
概述前几天面试,hr发来一个测试文件,让我做做看.我一看,其实就是根据PSD需求写一个页面,再加上一些互动效果即可. 刚好我之前学了切图,jquery等知识还没练手过,于是高兴的答应了. 最后花了3 ...

藏青色在html页面怎么写,Html页面支持暗黑模式的实现

测试文字

藏青色在html页面怎么写,Html页面支持暗黑模式的实现相关推荐

最新文章

热门文章