在您的网页内容中支持深色模式

大家好 我是 Tim Hatcher WebKit 团队的工程师 我将要介绍的是 网页内容支持深色模式

macOS Mojave 引入深色模式时 用户和开发者 都自然而然地关注网页内容

几十年来 网页内容一直都是浅色的 在和新的 支持深色模式的 App 一起使用时 显得特别亮

WebKit 团队一直都在努力 为开发者提供一个 规范的方法来设计 支持深色模式的网页内容 我很开心地宣布 它在 macOS Mojave 的 Safari 浏览器 12.1 上可用了

通过 iOS 13 的全系统深色外观 你可以看到 在 iOS Safari 浏览器中 网页内容同样可用深色样式

在这个视频里 我会用 Safari 浏览器做例子 但是不仅 Safari 浏览器 支持深色模式 邮件和 App 在网页视图里 展示网页内容时 也支持深色模式

在这个视频里 我想介绍三个方面 一 对网页深色模式的 整体样式支持 二 一些应用到邮件信息的 具体情况 三 调试深色模式下 网页内容的工具

我们开始吧 我开了一个新博客 记录我最近 在加州的旅行

在设计网站 让它响应手机和电脑端用户时 正好可以 添加深色模式支持 深色模式可以看作是 响应式网页设计的一个进步 是适应设备环境的 另一种方式 要注意 Safari 浏览器和 WebKit 不会 自动加深网页内容 作为一名网页开发者 是由你决定 深色系统外观下 网页内容的样子 现在我们来看一下 如何将这个浅色页面设计 转换为可用深色模式的网站

表明内容支持深色模式的 主要方式是 采用新的配色方案属性 现在它被指定 包含在 CSS 标准中 在根节点 指定值 浅色和深色 让渲染引擎知道 这两种模式都被文件支持 这改变了默认文本 和网页的背景色 让它和系统外观一致 标准表单控件 滚动条 和其他命名系统色 也会自动改变

我们现在来看一下 把这个属性添加到我的博客 会有什么变化

可以看到 白色背景色变成了黑色 大部分文本 完全消失在黑色背景中 我想要的不是这种效果 我们来看一下 这个页面的样式规则 看看发生了什么

这就是页面变化部分的 主要样式规则

文本之所以会消失 是因为在 body 上 黑色被设置为文本颜色 一级标题 被设置为深灰文本色 颜色不够浅 不能和黑色背景区分开 默认 body 的文本颜色 是深色和浅色模式

因为这是我想要的效果 我可以从样式表上 直接删除颜色属性覆盖 因为我现在用的是 配色方案属性 默认文本和背景色 会自动变成 深色模式值 我要是想保存 样式表上的其他颜色 我可以用 CSS 自定义属性 也被叫做 CSS 变量 集中定义它们 以便在整个网站样式表中 使用这些颜色 使用 CSS 变量会让以后 样式表适应深色模式 变得非常简单 我们来看一下怎么做

我们只需要把这些颜色值 移动到一个中心位置 比如之前添加到 配色方案的根节点规则

我们为这些颜色 定义一个变量名 用双连字符前缀标记

现在我们返回 原本的样式规则 将还在使用的静态色值 改为我们定义了的变量 通过 var 函数引用它们 就像这样 现在这个样式表 就支持深色方案了

就像不同设备宽度的 响应式设计断点 我们可以用媒体查询 条件化深色模式 具体来说 如果用户目前喜欢深色方案

我们可以用 适合深色模式的颜色值 重写刚才为浅色模式 定义的变量 现在我们来看一下 应用了这些的 页面是什么样子的

我们从这儿开始 目前只添加了配色方案属性

文本和标题颜色 适应了深色外观 但是图片呢 比如这里的 Mojave 沙漠图片

Mojave 沙漠图片 包含在一个图片节点内 这个节点从服务器上获得 JPEG 我们可以用另一个响应式设计技术 简单地改变这个代码

具体来说 图片节点 是一个很好的方法 可以基于不同的设备特性 用同样的媒体查询 获得一张图片的多个版本 这里我指定了 Mojave 沙漠夜晚的图片 用的是媒体查询 之前深色模式颜色也用过 这样就可以 为喜欢深色方案的用户 有条件地加载一张夜晚的图片

一开始是两种配色方案 用同一张图片 现在沙漠图片 会适应深色外观 网站可以是深色和浅色两种外观

概括一下 你应该用 color-scheme 属性 声明对浅色和深色模式的支持 这会告知渲染引擎 你想将内容设计成什么颜色 它可以改变默认颜色和控件 使颜色相配

默认颜色对比度不够高时 用 prefers-color-scheme 进行媒体查询 设置自定义值

你可以在 元素里 对适用深色模式的源 使用相同的媒体查询 和其他响应式图片 在采用配色方案时 可以考虑使用 CSS 变量 这样会使在内容中 保持两种外观模式变得更简单

接下来我将介绍 深色模式和邮件信息

正如 macOS Mojave 里的邮件 直接在 iOS 13 邮件里写的 普通邮件信息 既可以是浅色外观 也可以是深色 即便它们像这样 包括内嵌式图片附件 之所以会这样 是因为邮件 将自动变暗 应用到普通邮件信息

但是 如果你是 一名模板设计者 要设计一个广告 里面包含远程加载图片 你需要采用我刚才介绍的 关于网页内容的设计技术 如果没有采用配色方案属性 邮件就会用浅色外观 展示邮件信息 而不会自动 把自动变深应用到 普通邮件信息

这是相同的邮件信息 采用的是深色模式设计 包括配色方案声明 现在它可以完美适应 深色系统外观

概括一下 普通邮件信息 颜色会自动变深 即便它包括 内嵌式图片附件 包含许多远程图片的邮件信息 比如定制邮件营销广告 会默认使用浅色模式

你可以在营销电邮里 声明支持深色配色方案 用媒体查询处理 自定义颜色和图片自定义

现在为大家介绍一下 调试深色模式内容的工具 着重介绍 Web Inspector

当系统是深色模式时 我们在 macOS 中为 Web Inspector 添加了深色外观 这是许多网页开发者的请求 很开心 现在有了深色模式

不仅是添加了深色外观 还有许多工具 帮你调试深色模式下的 你自己的内容 首先是元素选项卡上 新的配色方案切换键 它会改变页面外观 而你不需要 每次都切换整个系统外观 所以如果你喜欢用深色模式 你可以用这个键快速查看 你的页面在浅色外观下 是什么样子的

和之前一样 样式侧边栏 展示任何 适合所选元素的样式规则 和任何媒体查询 在这个例子中 你可以看到 WebKit.org 网站上颜色变量的 偏好配色方案 媒体查询定义 这就是深色模式和 Web Inspector 你可以查看其他 关于 Safari 浏览器和 WebKit 的讲演 获取更多关于 Safari 浏览器 13 上 Web Inspector 的信息

总之 要记住网页 和内容丰富的邮件信息 需要选择变成深色模式 Safari 浏览器和 WebKit 不会自动 让内容变深 对于普通的邮件信息 就不需要担心了 邮件会自动加深它们的颜色 使其与系统外观相配 现在你可以用 Web Inspector 测试浅色模式下你的内容 还可以用元素选项卡中的 新配色方案切换键 测试深色模式 期待看到大家 如何使用这个支持 期待看到在 Mac 和 iOS 上 你们 App 和网站的深色模式是什么样子的