☰

Change Detection 自動黑暗模式

根據瀏覽器的佈景主題設定，自動從明亮和黑暗模式間切換。

  1. // ==UserScript==
  2. // @name               Auto Dark Mode for Change Detection
  3. // @name:zh-TW         Change Detection 自動黑暗模式
  4. // @description        Automatically switch the theme between light and dark, based on the browser’s color scheme preference.
  5. // @description:zh-TW  根據瀏覽器的佈景主題設定，自動從明亮和黑暗模式間切換。
  6. // @icon               https://wsrv.nl/?url=https://changedetection.io/themes/cdio/assets/images/favicons/apple-touch-icon.png
  7. // @author             Jason Kwok
  8. // @namespace          https://jasonhk.dev/
  9. // @version            1.0.0
  10. // @license            MIT
  11. // @match              https://lemonade.changedetection.io/*
  12. // @exclude-match      https://lemonade.changedetection.io/resetpassword
  13. // @noframes
  14. // @run-at             document-end
  15. // @grant              none
  16. // @supportURL         https://greasyfork.org/scripts/493488/feedback
  17. // ==/UserScript==
  18.  
  19. const toggle = document.getElementById("toggle-light-mode");
  20. const query = matchMedia("(prefers-color-scheme: dark)");
  21.  
  22. query.addEventListener("change", updateTheme);
  23.  
  24. const interval = setInterval(() =>
  25. {
  26.     (document.documentElement.dataset.darkmode === String(query.matches))
  27.         ? clearInterval(interval)
  28.         : updateTheme(query);
  29. }, 100);
  30.  
  31. function updateTheme({ matches: isDarkMode })
  32. {
  33.     if (document.documentElement.dataset.darkmode !== String(isDarkMode))
  34.     {
  35.         toggle.click();
  36.     }
  37. }