如何自动加载网站的深色模式?

时间: 2020-05-08阅读: 176标签: 模式

深色模式时代已经来临

现在有一种新的趋势 - 把东西变黑。过去,你必须决定你的网站的风格(亮或暗)或者必须保存用户自己定义的主题风格。

Safari 12.1 ( macOS 10.14.4自带) 增加了对检测系统颜色主题的支持. 它可以传递此信息,并且可以呈现网站的特定版本。当你的系统使用深色模式的时候(System Preferences -> General -> Appearance -> Dark),Safari自动会有一个黑的的ui界面,并且会去尝试加载。你的网站的CSS文件需要一些调整,以适应深色模式。


简单的网站

我们用 index.html 和main.css来创建一个简单的网站。第一个文件包含带有一个标题和一个段落的标准HTML5模板,第二个文件用来存放css样式。

index.html的内容:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
<title>Dark Website Example</title>
</head>
<body>
<h1>Website Title</h1>
<p>Some random words.</p>
</body>
</html>

main.css文件的内容:

body {
color: black;
background: white;
}

实现出来的网站效果:


尽管系统中启用了深色模式,但网站还是纯白色的(请查看浏览器顶部的黑色工具栏)。


添加对深色模式的支持

要启用网站上的深色内容,需要使用prefers-color-scheme媒体查询。只需添加它并覆盖适当的颜色值即可。

改进后的main.css 内容如下:

body {
color: black;
background: white;
}

@media (prefers-color-scheme: dark) {
body {
color: white;
background: black;
}
}

浏览器会去检查是否启用了深色模式(配色方案)并显示正确的颜色


这里是作者写的源码: Dark Website Example.

文章中的代码地址: Dark Website Example on GitHub.


这是未来的功能吗?

深色风格现在很流行,我认为可能是未来(晚上更好地浏览,更注重内容并降低设备的电池消耗)。你不需要记住用户的偏好设置等自定义内容,只需使用媒体查询就可以了!期待在其他浏览器中支持此功能(Firefox 67已经做到了),更好地在网站上采用,并且默认情况下启用了深色模式的用户将会更多。

也许仅仅是改变颜色还不够(图标也需要一些调整)所以你可以咨询你当地的 UI或者UX设计师。

阅读 prefers-color-scheme - CSS: Cascading Style Sheets 了解浏览器兼容性和更多参数。


总结

  • 在css主题中使用 prefers-color-scheme媒体查询
  • 尝试将网站设计成一种样式,而不是开发多个可选择的主题。对喜欢深色模式的用户来说会更加友好
本文翻译自:Going dark (Web Edition) 
来源:科技爱好者周刊:第 107 期 - 阮一峰


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9040

前端需要了解的9种设计模式

设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论,而不是现成的代码,当然每种设计模式都有每种语言中的具体实现方式

发布订阅和观察者模式的区别

有些人认为观察者模式就是发布订阅模式,实际上观察者模式是包含了订阅发布模式,发布订阅模式只是观察者模式中的一种。观察者模式是观察者和被观察者之间的通信,而发布订阅模式中间增加了一个中转层

前后端分离模式有什么意义

前后端分离从端口划分就是将浏览器、客户端分为前端,提供真实服务的软件就成为后端。从开发语言的角度划分后端的编程语言和前端的编程语言,例如Java是做后端真实数据服务的,JavaScript、HTML是做前端业务数据的展现与用户行为操作的

vue-router的hash 模式和 history 模式

url 中带有#的便是 hash 模式,#后面是 hash 值,它的变化会触发 hashchange 这个事件。通过这个事件我们就可以知道 hash 值发生了哪些变化。

Js设计模式之:单例模式

良好的设计模式可以显著提高代码的可读性,降低复杂度和维护成本。笔者打算通过几篇文章通俗地讲一讲常见的或者实用的设计模式

装饰者模式和TypeScript装饰器

学习的目的是对装饰者模式模式有进一步的理解,并运用在自己的项目中;对TypeScript装饰器的理解,更好的使用装饰器,例如在 nodejs web 框架中、 vue-property-decorator 中,或者是自定义装饰器,能熟练运用并掌握其基本的实现原理

JS 中的装饰器模式

使用过 mobx + mobx-react 的同学对于 ES 的新特性装饰器肯定不陌生。我在第一次使用装饰器的时候,我就对它爱不释手,书写起来简单优雅,太适合我这种爱装 X 且懒的同学了。

前端JavaScript设计模式

面向对象的三大特性:继承、封装、多态。JavaScript 没有提供传统面向对象语言中的类式继承,而是通过原型委托的方式来实现对象与对象之间的继承。JavaScript 也没有在语言层面提供对抽象类和接口的支持。

js中的策略模式

什么是策略模式,官方定义是:定义一些列算法,把他们封装起来,并且可以相互替换。说人话(⊙ˍ⊙):就是把看似毫无联系的代码提取封装、复用,使之更容易被理解和拓展。常见的用于一次if判断、switch枚举、数据字典等流程判断语句中

TypeScript设计模式之享元模式

享元模式就是运行共享技术有效地支持大量细粒度的对象,避免大量拥有相同内容的小类的开销(如耗费内存),使大家共享一个类,在享元模式中有两个重要的概念,即内部状态和外部状态:

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广