CSS,黑暗模式介绍在2018～2019年两年中推出

来源：爱酷猪责编：网络时间：2024-01-26 05:01:08

深色模式介绍

2018年至2019年的两年里，黑暗模式分别在桌面系统、MacOS和移动系统上推出。过去，无论是微软还是苹果的MacOS，界面都以鲜艳的色彩为主。为了防止夜间眩光，我们通常会调暗屏幕亮度。虽然调光会改善，但还是避免不了有点刺眼。。有些APP还提供深色模式。该功能通常需要在设置中手动开启。开启后，白天APP仍处于深色模式。虽然有些APP提供了根据时间间隔控制深色模式开启和关闭的功能，但每个支持的APP都需要重新设置一遍，非常麻烦，而且大多不支持时间调节功能。就算一切都设置好了，当你回到系统主页时安卓微信暗黑模式怎么设置，系统等级依然会耀眼夺目。系统目前提供的深色模式可以让APP跟随系统，从而保证无论进入系统界面还是APP页面都保持统一的明暗模式。

以下分别是Apple和的介绍。

Apple 解释道：引人注目的新外观可帮助您专注于工作并营造一个无干扰的环境。

谷歌介绍：

可以显着降低功耗（取决于设备屏幕，例如OLED屏幕）。提高弱视用户和对强光敏感的用户的可见度。让大家在弱光环境下也能更轻松的使用设备。时间系统支持软件支持各平台深色模式支持

从上述时间点可以看出：系统方面，目前各大系统均支持深色模式；在软件适配方面，目前只有少数软件具备深色模式适配。 2018-2019年各大系统都实现了适配支持，可以预测2020-2021年主流APP将适配深色模式。

CSS使主题能够跟随系统自动切换语法规则

使用媒体查询的-color-属性来检测用户是否将系统的主题颜色设置为浅色或深色。

1
2
3

@media (prefers-color-scheme: {mode}) {
  /* CSS Rules */
}

mode的可选值为：dark、light、no-。

例子

例如，下面的示例展示了当系统主题为深色时如何覆盖正文样式的字体颜色和背景颜色。

html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
  <style>
  body {
    color: #333;
    background-color: #eee;
  }
  @media (prefers-color-scheme: dark) {
    body {
      color: #ccc;
      background-color: #1f1f1f;
    }
  }
  style>
head>
<body>
  Hello Theme!
body>
html>

同理，使用灯光模式也可以实现上述效果。

body {
  color: #ccc;
  background-color: #1f1f1f;
}
@media (prefers-color-scheme: light) {
  body {
    color: #333;
    background-color: #eee;
  }
}

与 CSS 变量一起使用

首先，在 :root 下定义亮主题颜色变量，然后使用主题媒体查询功能来确定系统何时为暗主题并覆盖 :root 下的亮主题颜色变量。只要需要变量来引用变量值，就调用 var()。

:root {
  --color: #333;
  --bg-color: #eee;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color: #ccc;
    --bg-color: #1f1f1f;
  }
}

body {
  color: var(--color);
  background-color: var(--bg-color);
}

显示结果

这个 gif 动画捕捉了运行上面代码的效果。你也可以在这里点击运行实时运行（如果看不到效果，请检查你的浏览器是否支持）

JS主题相关操作获取当前系统主题

使用 () 媒体查询方法检测当前主题状态并返回一个新对象，表示指定媒体查询字符串的解析结果。

const mediaQueryListDark = window.matchMedia('(prefers-color-scheme: dark)');
if (mediaQueryListDark.matches) {
  // 系统当前是暗色(dark)主题
}

const mediaQueryListLight = window.matchMedia('(prefers-color-scheme: light)');
if (mediaQueryListLight.matches) {
  // 系统当前是亮色(light)主题
}

监控系统主题变化

您可以使用媒体查询来获取对象。该对象有方法，您可以使用该方法来绑定事件。当主题动态变化时，会触发绑定的事件，例如：

function handleChange (mediaQueryListEvent) {
  if (mediaQueryListEvent.matches) {
    // 用户切换到了暗色(dark)主题
  } else {
    // 用户切换到了亮色(light)主题
  }
}

const mediaQueryListDark = window.matchMedia('(prefers-color-scheme: dark)');

// 添加主题变动监控事件
mediaQueryListDark.addListener(handleChange);

// 移除主题变动监控事件
mediaQueryListDark.removeListener(handleChange);