几秒钟内为您的网站添加黑暗模式/夜间模式

Darkmode.Js 是一款开源项目，只需要添加一段代码，就可以为网站添加夜晚模式/黑暗模式/夜间模式/护眼模式，让你的网站跟上 UI 界的潮流。

这个库使用css混合混合模式，以便为您的任何网站带来黑暗模式。只需复制粘贴片段，你就会得到一个小部件来打开和关闭暗模式。您也可以在没有小部件的情况下以编程方式使用它。这个插件是轻量级的，内置于VanillaJS中。默认情况下，它还使用localstorage，因此您的上一个设置将被记住！

• 小部件自动出现
• 保存用户选择
• 如果OS首选主题为深色（如果浏览器支持首选配色方案），则自动显示暗模式
• 可以不使用小部件以编程方式使用

Wordpress插件

如果你正在使用Wordpress，你可能需要看看这些插件基于黑暗模式.js:

• https://wordpress.org/plugins/blackout-darkmode-widget/
• https://wordpress.org/plugins/darkmode/

如何使用

Darkmode.js 很容易使用，只需复制粘贴下面的代码或使用npm包。

简单方法（使用jsdeliver CDN）

只需将此代码添加到html页面：

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.6/lib/darkmode-js.min.js"></script>
<script>
  function addDarkmodeWidget() {
    new Darkmode().showWidget();
  }
  window.addEventListener('load', addDarkmodeWidget);
</script>

如果要使用npm就用下面的代码：

npm install darkmode-js

以下是可用的选项：

const options = {
  bottom: '64px', // default: '32px'
  right: 'unset', // default: '32px'
  left: '32px', // default: 'unset'
  time: '0.5s', // default: '0.3s'
  mixColor: '#fff', // default: '#fff'
  backgroundColor: '#fff',  // default: '#fff'
  buttonColorDark: '#100f2c',  // default: '#100f2c'
  buttonColorLight: '#fff', // default: '#fff'
  saveInCookies: false, // default: true,
  label: '', // default: ''
  autoMatchOsTheme: true // default: true
}

const darkmode = new Darkmode(options);
darkmode.showWidget();

如果不想显示小部件并以编程方式启用/禁用Darkmode，可以使用toggle（）方法。您还可以检查是否使用isActivated（）方法激活了darkmode。请在下面的示例中查看它们的实际操作。

const darkmode =  new Darkmode();
darkmode.toggle();
console.log(darkmode.isActivated())

替代样式

• 当darkmode被激活时，一个CSS类darkmode--activated被添加到body标记中。您可以利用它替代样式并拥有自定义样式
• 在不想应用暗码的地方使用darkmode-ignore类
• 您还可以添加以下样式：isolation:isolate；在css中，这也会忽略暗码。
• 它也可以恢复黑暗模式与这种风格mix-blend-mode: difference;

.darkmode--activated p, .darkmode--activated li {
  color: #000;
}

.button {
  isolation: isolate;
}

.darkmode--activated .logo {
  mix-blend-mode: difference;
}

<span class="darkmode-ignore"><span>

如果不起作用，您可能需要添加以下代码，但这将使要重写的类无效。

页自动适配操作系统/浏览器夜间模式

最近在浏览一些博主的网站，发现一个很好玩的效果，当手机浏览器切换到暗色模式后，网页也跟着切换暗色效果，切换白天模式就会切换另外的一个效果，然后用F12深入了解一下，就发现一个prefers-color-scheme这个新的css类，以前没有了解过，赶紧上网查一下。

在developer.mozilla.org中有提到，感兴趣可以了解一下。

简单了解一下，目前主流的浏览器都开始通过prefers-color-scheme这个css特征来检测操作系统的主题色设置亮色或者暗色。

使用这种方法可以在操作系统或者浏览器更改系统主题时切换到暗色或者亮色，样式实时切换无需刷新，也不同于使用JS代码的定时刷新变更切换，但是这个css特征对部分浏览器兼容不好。

语法

no-preference
表示系统未得知用户在这方面的选项。在布尔值上下文中，其执行结果为 false

light
表示用户已告知系统他们选择使用浅色主题的界面。

dark
表示用户已告知系统他们选择使用暗色主题的界面。

备注： “未得知”、“已告知”等用语，英文原文如此。 “未得知”可理解为：浏览器的宿主系统不支持设置主题色，或者支持主题色并默认为/被设为了未设置/无偏好。 “已告知”为：浏览器的宿主系统支持设置主题色，且被设置为了亮色或者暗色。
目前，若结果为 ，无法通过此媒体特性获知宿主系统是否支持设置主题色，或者用户是否主动将其设置为无偏好。出于隐私保护等方面的考虑，用户或用户代理也可能在一些情况下在浏览器内部将其设置为 。no-preferenceno-preference

关键代码

@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme   { background: white; color:  #555; }
  .night.light-scheme { background:  #eee; color: black; }
}

浏览器兼容性

这个兼容性基本兼容了主流浏览器，亲测Chrome、Edge、Firefox这些最新的浏览器都支持。

效果展示

在Chrome、Edge浏览器打开本站，手机或者Windows切换到暗色模式，效果就会实时呈现无需刷新网页。

是 Typora Markdown 编辑器的类似 Vue 文档风格的自定义主题。

简介

Typora是一款支持实时预览的 Markdown 编辑器和阅读器，支持Windows、macOS、Linux三大平台。Typora 作为一款合格的 Markdown 编辑器，支持图片、列表、表格、代码、公式、目录等功能，同时这款软件还支持（一键）动态预览功能，让一切都变得如此干净、纯粹。并且有多种主题模板。typora-vue-theme就是参考了Vue文档风格而开发的一个 Typora 自定义主题。

安装主题

0. 下载本主题中的vue.css、vue-dark.css文件和包含字体的vue文件夹；
1. 打开 Typora，点击“偏好设置” => “打开主题文件夹”按钮，将弹出 Typora 的主题文件夹；
2. 将下载好的vue.css和vue-dark.css文件和包含字体的vue文件夹放到 Typora 的主题文件夹中；
3. 关闭并重新打开 Typora，从菜单栏中选择 “主题” => “Vue” 或者 “Vue Dark” 即可。

效果图

Vue 白天模式

Vue 夜晚模式

感谢: 本主题中的vue-dark.css来自typora-vue-dark-theme.

链接见下。该模版非常漂亮！必须赞一个