@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/

    Install

    npm i @cxy227/dark-mode-js

    DownloadsWeekly Downloads

    1

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    59.2 kB

    Total Files

    11

    Last publish

    Collaborators

    • cxy227