Darkmode.js

🌓 Добавьте на ваш сайт темный режим / ночной режим за несколько секунд

Эта библиотека использует css mix-blend-mode чтобы использовать Dark-режим на любом из ваших сайтов.
Просто скопируйте и вставьте фрагмент, и вы получите виджет для включения и выключения темного режима. Вы также можете использовать его без виджета программно. Плагин легкий, встроенный в VanillaJS.
Он также использует локальное хранилище по умолчанию, поэтому ваши последние настройки будут запомнены!

✨ Демо

📖 Как использовать

Darkmode.js очень прост в использовании, просто скопируйте, вставьте следующий код или используйте пакет npm.

🚀 Простой способ (с использованием CDN JSDelivr)

Просто добавьте этот код на свою HTML-страницу:

     < скрипт   источник    =   ""  /cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js "  >       </  сценарий  >  
   < сценарий  >    
   новый   Darkmode   ( )  .   showWidget   (19459011) )  ; 
     </  сценарий  >  
 

📦 Использование NPM

  npm install darkmode-js
 

Затем добавьте следующий код JavaScript:

   импорт  Darkmode  из   'darkmode-js'  ; 

 новый   Darkmode   ( )  .   showWidget   (19459011) )  ; 
 

⚙️ Опции

Вот доступные опции:

   var  options  =   {
  внизу :   '64px'  
  справа :   'unset'  
  слева :   '32px'  
  время :   «0,5 с»  
  mixColor :   '# fff'  
  backgroundColor :   '# fff'  
  buttonColorDark :   '# 100f2c'  
  buttonColorLight :   '# fff'  
  saveInCookies :   false  
  ярлык :   '🌓' 
} 

 const  darkmode  =   new   Darkmode   ( варианты ]  [1945927]; ]
darkmode    showWidget   ( )  ;. 
 

▶ ️ Методы

Если вы не хотите показывать виджет и программно включать / отключать Darkmode, вы можете использовать метод toggle () . Вы также можете проверить, активирован ли темный режим с помощью метода isActivation () . Посмотрите их в действии в следующем примере.

   const  darkmode  =   new   Darkmode   ( ]  ]; 
darkmode    переключение   ( )  ;. 
Консоль .   войти   ( darkmode .   isActivated   ( )  ) 
 

Стиль переопределения

• Класс CSS с активированной темной модой добавляется к тегу тела при активации темной моды. Вы можете воспользоваться этим, чтобы переопределить стиль и создать собственный стиль
• Используйте класс darkmode-ignore где вы не хотите применять darkmode
• Вы также можете добавить этот стиль: изоляция: изолировать; в вашем CSS также будет игнорировать темный режим.
• Также можно изменить темный режим с помощью этого стиля mix-blend-mode: Разница;

Примеры

   .darkmode - активированный p, .darkmode - активированный li   {
   color  :  # 000 ; 
} 

. Кнопка   {
   изоляция  :  изолят ; 
} 

 .darkmode - активированный .logo   {
   Смешанный режим смешивания  :  Разница ; 
} 
 

     < промежуток   класс    =  ]  ignmo  "  >   😬    < диапазона  >  
 

отладки

Если это не сработает, возможно, вам придется добавить следующий код, но это сделает недействительными классы для переопределения.

   .darkmode-layer, .darkmode-toggle   {
   z-index  :  500 ; 
} 
 

Совместимость с браузерами

Эта библиотека использует CSS mix-blend-mode: разница; для обеспечения темного режима.
Возможно, он не совместим со всеми браузерами.

Проверьте совместимость здесь: https://caniuse.com/#search=mix-blend-mode

Развитие

• сборка пряжи или npm run build — создает рабочую версию вашей библиотеки в папке lib
• yarn dev или npm run dev — создает версию вашей библиотеки для разработки и запускает наблюдателя
• тест пряжи или тест прогона npm — запускаются тесты 😃
• тест пряжи: часы или npm run test: часы — те же, что и выше, но в режиме часов

⭐️ Показать свою поддержку

Пожалуйста, ⭐️ этот репозиторий, если вам помог этот проект!