关于前端:一步到位三行CSS代码轻松实现全网站暗黑模式

本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一工夫和你分享前端行业趋势，学习路径等等。
更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi，蕴含一线大厂面试残缺考点、材料以及我的系列文章。

快来收费体验 ChatGpt plus 版本的，咱们出的钱
体验地址:https://chat.waixingyun.cn
能够退出网站底部技术群，一起找 bug.

本文由 Mads Stoumann 撰写的博文，次要介绍了如何通过简略的三行 CSS 代码实现网站的暗黑模式。该博文提到，<system-color>关键字个别反映用户、浏览器或操作系统做出的默认色彩抉择。这些关键字通常用于浏览器的默认样式表。通过这种形式，咱们能够轻松地实现网站的暗黑模式。

在另一篇博文中，Mads Stoumann 具体介绍了如何应用 SVG 和 CSS 从新创立 Apple 的暗黑模式图标。这证实了他在此畛域的深厚技术和创新能力。

总的来说，这个网站提供了许多对于应用 CSS 和 SVG 进行网站设计和开发的有用信息，特地是对于暗黑模式的实现。这对那些心愿在本人的网站上实现暗黑模式的开发者来说是十分有价值的资源。

上面是注释~~

深色模式是一种设计趋势，网站的配色计划被更改为深色背景，配以浅色文字和元素。它也被称为夜间模式或光明主题。深色模式的目标是缩小低光环境下的眼睛疲劳，节俭挪动设施的电池寿命，并发明一个时尚古代的美感。

许多热门网站和应用程序当初都提供了光明模式选项 —— 如 TailwindCSS：

如果您是开发者，您很可能曾经晓得如何在开发者工具中切换暗黑模式：

如果你想要为操作系统（以及所有反对暗黑模式的应用程序）切换暗黑模式，请转到零碎设置。在 Mac 上，能够在零碎设置 > 外观下找到它：

首先，咱们将创立一个带有题目的简略 HTML：

<body>
  <h1>Hello Darkness, My Old Friend</h1>
</body>

在样式表中，增加:

body {color-scheme: light dark;}

这会通知浏览器，document 能够承受亮色和暗色的 color-scheme。

以后如果当初指定为 dark 浏览器也不会变成彩色。

这是因为 user-agent 样式表没有设置任何默认色彩。咱们能够通过应用零碎色彩疾速解决这个问题：

body {
  background-color: Canvas;
  color: CanvasText;
  color-scheme: light dark;
}

仅用 3 行 CSS 代码就能为咱们的整个网站实现暗黑模式！

上面，咱们更深刻地理解零碎色彩，来自标准：

一般来说，<system-color>关键字反映了用户、浏览器或操作系统做出的默认色彩抉择。因为这个起因，它们通常在浏览器默认样式表中应用。

这是一个浅色模式演示，在 Safari 中展现了可用的零碎色彩：

如果咱们切换到深色模式，某些色彩会齐全扭转（就像咱们曾经遇到的 Canvas 和 CanvasText），而其余色彩只会略微扭转：

应用零碎色彩进行光明模式是一种简化的光明模式体验。是的，它会起作用 — 然而纯黑白有点无聊

咱们能够在 CSS 中应用 color-mix 来减少趣味性将 CanvasText（彩色或红色）混入 Canvas（红色或彩色）以取得 background-color，反之亦然，用于 color：

body {background-color: color-mix(in srgb, Canvas, CanvasText 2.5%);
  color: color-mix(in srgb, CanvasText, Canvas 15%);
}

这样看起来会更柔和:

从色彩中减去饱和度，是在深色模式中制作色彩变动的一种宽泛应用的办法。

在 CSS 中应用绝对色彩，咱们能够做到这一点：

background: hsl(from ActiveText h calc(s - 30%) l);

可怜的是，绝对色彩在任何浏览器中都不能与零碎色彩一起工作。

留神：零碎色彩能够被强制色彩笼罩（只管很少应用）——所以不要过分依赖这种技术。

咱们持续学习另一种技巧，这将使咱们可能精密管制咱们的暗黑模式色彩。

应用 `prefers-color-scheme` 媒体查问

要为亮色和暗色模式指定特定色彩，我倡议应用 CSS 自定义属性，而后应用 prefers-color-scheme 媒体查问更新这些属性。

以浅色模式为默认，咱们将色彩增加到 :where(body) - 局部，将它们与咱们的惯例 body - 款式离开：

/* Properties */
:where(body) {
  --background-color: #FFF;
  --text-color: #222;
}
body {background-color: var(--background-color);
  color: var(--text-color);
}

而后，对于暗黑模式，咱们将简略地更新这些色彩属性：

@media (prefers-color-scheme: dark) {:where(body) {--background-color: hsl(228, 5%, 15%);
    --text-color: hsl(228, 5%, 80%);
  }
}

然而，如果咱们心愿用户依据本人的需要抉择咱们网站的版本，而不是依据零碎设置呢？

他们可能更喜爱将零碎设置为深色模式，但咱们的网站是浅色模式。让咱们创立一个切换器！如果您拜访像 TailwindCSS 这样的网站，您会留神到当您从 color-scheme-toggler 中抉择“dark”时，会在 html - 节点上增加一个 dark - 类。这是通过 JavaScript 实现的：

如果你用过 TailwindCSS，你会留神到当你从 color-scheme-toggler 中抉择“dark”时，会在 html - 节点上增加一个 dark - 类。这是通过 JavaScript 实现的：

window.matchMedia('(prefers-color-scheme: dark)').matches)) {document.documentElement.classList.add('dark')
} else {document.documentElement.classList.remove('dark')
}

Open Props 正在应用相似的办法，然而更新 data-theme 属性，而后在两个块中定义属性：

[data-theme=light] {--nav-icon: var(--gray-7); /* etc */
}
[data-theme=dark] {--nav-icon: var(--gray-5); /* etc */
}

应用一些全新的 CSS 技术，咱们能够在不应用 JavaScript 的状况下创立一个切换器。咱们将创立一个具备 3 种状态的切换器：

Light (forced)
Auto (system default, could be either light or dark)
Dark (forced)

首先，一些根本标记：

<fieldset>
  <label>
    <input type="radio" name="color-scheme" id="color-scheme-light" value="0">
    Light
  </label>
  <label>
    <input type="radio" name="color-scheme" value="auto" checked>
    Auto
  </label>
  <label>
    <input type="radio" name="color-scheme" id="color-scheme-dark" value="1">
    Dark
  </label>
</fieldset>

在增加了一些根本款式后（请参阅上面的 Codepen 演示），它的出现成果如下：

咱们将在 html 元素中增加一个 --darkmode - 属性和 container-type：

html {
  --darkmode: 0;
  container-name: root;
  container-type: normal;
}

咱们应用 @container style() - 查问，因而咱们须要将节点设置为“container”。

既然咱们不想察看到 inline-size 变动，咱们只需增加值 normal。

如果用户抉择了一个“强制”值，咱们将更新 --darkmode :

html:has(#color-scheme-light:checked) {--darkmode: 0;}
html:has(#color-scheme-dark:checked) {--darkmode: 1;}

最初，咱们将应用容器 style() - 查问来查看，如果 --darkmode 设置为 1 :

@container root style(--darkmode: 1) {
  body {--background-color: hsl(228, 5%, 15%);
    --text-color: hsl(228, 5%, 80%);
  }
}

留神：@container style() -queries 目前仅在 Chrome 中的 behind-a-flag 下工作，这还是初期阶段，所以不要在生产环境中应用。

当初，在抉择“Dark”之后，咱们的切换器（和页面）看起来是这样的：

如果咱们想要存储用户的抉择，就须要一点 JavaScript！

首先，为 <fieldset> 增加一个标识符：

<fieldset id="colorScheme">

接下来，在 JavaScript 中：

const colorScheme = document.getElementById('colorScheme')
colorScheme.addEventListener('change', event => {localStorage.setItem('color-scheme', event.target.value)
})

当初，咱们只须要在文档加载后将属性设置为 localStorage - 值：

window.addEventListener("load", event => {const scheme = localStorage.getItem('color-scheme') || 'auto'
  if (scheme) {document.documentElement.style.setProperty('--darkmode', scheme)
  }
})

要在切换器中抉择正确的模式，请将此增加到 if - 块：

const selected = [...colorScheme.elements].filter(element => element.value === scheme)
if (selected) selected[0].checked = true;

事例：https://codepen.io/stoumann/pen/KKGNbQr

https://codepen.io/stoumann/pen/GRYNPzy

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

关于前端:一步到位三行CSS代码轻松实现全网站暗黑模式

应用零碎色彩的深色模式

应用 `prefers-color-scheme` 媒体查问

创立色彩计划切换器

应用 Css

存储状态

Toggler

System Colors

交换

应用零碎色彩的深色模式

应用 prefers-color-scheme 媒体查问

创立色彩计划切换器

应用 Css

存储状态

Toggler

System Colors

交换

应用 `prefers-color-scheme` 媒体查问