2 行代码搞定给你的网页加黑暗模式(夜间模式)开关

作者: Chuwen

时间: 2020-02-15

# Darkmode.Js
> ?黑暗模式/夜间模式，只需要几秒钟就可以给你的网站添加这个功能

> 本站已经添加，你可以看到网站左下方有个小按钮，你点击 Ta 预览以下效果吧！

该库使用 CSS `mix-blend-mode` 来将暗模式带入您的任何网站。只需复制粘贴该片段，您将获得一个小部件以打开和关闭暗模式。您也可以不使用窗口小部件而以编程方式使用它。该插件是轻量级的，内置于 `VanillaJS` 中。默认情况下，它也使用 `localstorage`，因此您的上一次设置将被记住！

## 特点
- 窗口小部件自动显示
- 保存用户选择
- 如果操作系统偏好的主题为深色，则自动显示Darkmode（如果浏览器支持prefers-color-scheme）
- 可以以编程方式使用而无需小部件

## WordPress 插件
> **如果您使用的是 `Wordpress`，则可能需要看看基于 `Darkmode.js` 的这些插件：**

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

# 简单方法（使用JSDelivr CDN）
只需将此代码添加到您的 `html` 页面：

```
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js"></script>
<script>new Darkmode().showWidget();</script>
```

# 高级调用参数：

```
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js"></script>

const darkmode = new Darkmode(options);
    darkmode.showWidget();
</script>
```

### 更多高级使用方法，请访问 https://darkmodejs.learn.uno/ 查看

2 行代码搞定给你的网页加黑暗模式(夜间模式)开关

添加新评论

最新文章

最近回复

分类

归档

其它

2 行代码搞定给你的网页加 黑暗模式(夜间模式)开关

添加新评论

最新文章

最近回复

分类

归档

其它

2 行代码搞定给你的网页加黑暗模式(夜间模式)开关