黑暗模式 - 一目了然！🐱‍👤

免责声明！
这篇文章会很长。我会尽力整合我掌握的所有资源和信息，以便在您的网站上正确实现暗黑模式。

CSS 过滤器黑客！

一行代码 - 使用 CSS 的暗黑模式

Akhil Arjun ・ 2020年8月3日

#beginners #css #webdev #tutorial

我在之前的文章里解释过这个设置。再说一遍，这只是个小技巧，并非完美无缺的暗黑主题实现。

JS 实现

现在我们知道了如何使用 CSS 来实现一个很棒的暗黑模式。对于上面提到的实现，JavaScript 的思路非常简单。



const html = document.getElementsByTagName('html')[0];
const toggleTheme = (theme) => {
    html.dataset.theme = theme;
}

现在您要做的就是分别使用和值toggleTheme()从 UI 调用方法。darklight

原生暗/亮模式？

我是否告诉过您，您可以从 CSS 或 js 检测系统对亮/暗模式的偏好？

我绝对是！

向时髦的新媒体查询问好！



<script>
  // If `prefers-color-scheme` is not supported, fall back to light mode.
  // In this case, light.css will be downloaded with `highest` priority.
  if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
    document.documentElement.style.display = 'none';
    document.head.insertAdjacentHTML(
        'beforeend',
        '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">'
    );
  }
</script>
<!--
  Conditionally either load the light or the dark stylesheet. The matching file
  will be downloaded with `highest`, the non-matching file with `lowest`
  priority. If the browser doesn't support `prefers-color-scheme`, the media
  query is unknown and the files are downloaded with `lowest` priority (but
  above I already force `highest` priority for my default light experience).
-->
<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="/light.css" media="(prefers-color-scheme: light)">
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css">

上述代码的作用是，检查用户是否设置了亮模式/暗模式的偏好设置。然后，浏览器会根据用户偏好设置下载相应的 CSS 文件。

需要注意的一点是，即使系统偏好暗模式，浏览器也会下载其他 CSS，但优先级最低。

现在，如果我们想用 javascript 完成所有这些操作该怎么办？

动态检查首选的配色方案
如果用户想要覆盖应用程序中的主题
记住用户使用的决定localStorage

我想说完全可行！

输入 JavaScript 魔法！

自我广告警告滚滚而来😎😁

这是我用 vanilla js 构建的一个库，它的功能正是我们讨论过的功能。而且它还能将你的工作量减少到只需两行代码。

包含 js 文件



<script src="https://cdn.jsdelivr.net/gh/akhilarjun/tinylibs@latest/themejs/theme.min.js" onload="setupThemeIcon()"></script>

theme-selector并且具有 id和 onclick 函数的图像switchTheme(this)



<img src="./sun.svg" 
    data-light-src="./sun.svg" 
    data-dark-src="./moon.svg"
    alt="light theme" 
    id="theme-selector"
    onclick="switchTheme(this)">

data-light-src如果data-dark-src提供，将用于在更改Html标签的主题属性时在图标之间切换。

麦克风放下时间🎤

该库甚至会自动检测系统偏好设置的变化并在暗色和亮色之间切换主题。

我们将尝试使用 chrome dev tools 来执行此操作。

今天就到这里啦，伙计们。干杯！咖啡时间到了。
我每天都靠咖啡提神。所以我知道，你们知道我们大家都应该做什么🤞

参考

文章来源：https://dev.to/akhilarjun/dark-mode-unmistified-1ji6