@cxy227/dark-mode-js

Dark Mode js

😊 项目介绍

为你的网站快速添加暗黑模式

该库使用 CSS min-blend-mode 和 :root 两种方式 将暗黑模式带入您的任何网站。您只需要复制一点代码到您的项目中， 您将获得一个用来打开和关闭暗黑模式的小工具。该工具是轻量的，还默认使用本地存储，因此您设置的状态会被浏览器记住！

我参考的项目是：https://github.com/sandoche/Darkmode.js 之所以又写了一个，是因为，我再使用 darkmode-js 进行测试的时候，无法覆盖所有的项目

🔧 功能点

• 小工具自动出现
• 保存用户选择
• 如果操作系统首选主题是深色，自动显示深色模式（如果浏览器支持prefers-color-scheme）
• 可以不引入小工具的情况下编写函数引用

✨ 演示

📖 如何使用

dark-mode-js 非常好用，复制粘贴以下代码或者使用 npm 包引入即可使用

🚀 简单方法 （使用 JSDelivr CDN）

只需要在您的 HTML 页面中嵌入以下代码

第一种方式，默认通过 css min-blend-mode

• 优点
  • 不需要任何额外配置和修改
• 缺点
  • 展现上有一定的瑕疵，尤其在某些 hover 的时候，个别地方颜色可能会没有对比度没有区分的很完善

<script src="https://cdn.jsdelivr.net/npm/@cxy227/dark-mode-js@0.1.2/dist/index.js" > </script> 
<script>
  function init() {
      console.log('darkModeJs: ', darkModeJs)
      const Widget = darkModeJs.darkMode
      const darkmode = new Widget()

      darkmode.showWidget()
      darkmode.defaultTheme()
  }

  window.addEventListener('load', init);
</script>

第二种方式，通过设置 :root 全局变量，维护一组变量集合

• 优点
  • 效果更好，可以自定义部分内容颜色
• 缺点
  • 需要添加配置，全局设置跟着 :root 的变量集走

<script src="https://cdn.jsdelivr.net/npm/@cxy227/dark-mode-js@0.1.2/dist/index.js" > </script> 
<script>
  function init() {
      console.log('darkModeJs: ', darkModeJs)
      const Widget = darkModeJs.darkMode
      const darkmode = new Widget()

      darkmode.showWidget()
      darkmode.defaultTheme()
  }

  window.addEventListener('load', init);
</script>

第三种方式，通过设置 hue-rotate

• 优点
  • 效果比一种展示上好点，尤其针对图片和链接来说
• 缺点
  • 由于全局设置 filter，为了让图片展示原来的色相，针对图片再进行一次 色相旋转。在滚动时有闪屏的情况，性能不稳定

<script src="https://cdn.jsdelivr.net/npm/@cxy227/dark-mode-js@0.1.2/dist/index.js" > </script> 
<script>
  function init() {
      console.log('darkModeJs: ', darkModeJs)
      const Widget = darkModeJs.darkHue
      const darkmode = new Widget()

      darkmode.showWidget()
      darkmode.defaultTheme()
  }

  window.addEventListener('load', init);
</script>

📦 使用 NPM

npm install dark-mode-js

然后添加一下 JavaScript 代码

import darkModeJs from '@cxy227/dark-mode-js'
const Widget = darkModeJs.darkMode
const darkmode = new Widget()

darkmode.showWidget()
darkmode.defaultTheme()

⚙️ 参数设置

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
}

🎹 浏览器兼容性

在此处检查兼容性： ● https://caniuse.com/#search=mix-blend-mode ● https://caniuse.com/#search=prefers-color-scheme（自动激活暗模式）

🧰 开发测试

● npm start

📄 证书（License）

MIT License

Copyright (c) beth

参考

查找各种 emoji 图表：https://emojipedia.org/first-quarter-moon/ 查找各种 徽章：https://shields.io/