@cxy227/dark-mode-js

0.2.1 • Public • Published

Dark Mode js

npm version npm downloads jsdelivr downloads License twitter-href

😊 项目介绍

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

该库使用 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-modehttps://caniuse.com/#search=prefers-color-scheme(自动激活暗模式)

🧰 开发测试

● npm start

📄 证书(License)

MIT License

Copyright (c) beth

参考

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

Dependencies (0)

    Dev Dependencies (7)

    Package Sidebar

    Install

    npm i @cxy227/dark-mode-js

    Weekly Downloads

    0

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    59.2 kB

    Total Files

    11

    Last publish

    Collaborators

    • cxy227