☰

Auto Dark Mode for Shlink Web Client

Automatically switch the theme between light and dark, based on the browser’s color scheme preference.

  1. // ==UserScript==
  2. // @name               Auto Dark Mode for Shlink Web Client
  3. // @name:zh-TW         Shlink 網頁客戶端自動黑暗模式
  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://icons.duckduckgo.com/ip3/app.shlink.io.ico
  7. // @author             Jason Kwok
  8. // @namespace          https://jasonhk.dev/
  9. // @version            1.0.0
  10. // @license            MIT
  11. // @match              https://app.shlink.io/*
  12. // @run-at             document-end
  13. // @grant              none
  14. // @supportURL         https://greasyfork.org/scripts/491886/feedback
  15. // ==/UserScript==
  16.  
  17. const settings = JSON.parse(localStorage.getItem("shlink.settings") ?? "null");
  18. if (settings)
  19. {
  20.     delete settings.ui.theme;
  21.     localStorage.setItem("shlink.settings", JSON.stringify(settings));
  22. }
  23.  
  24. const query = matchMedia("(prefers-color-scheme: dark)");
  25. query.addEventListener("change", updateTheme);
  26.  
  27. function isDarkTheme()
  28. {
  29.     return (document.documentElement.dataset.theme === "dark");
  30. }
  31.  
  32. function updateTheme({ matches: isDarkMode })
  33. {
  34.     if (isDarkTheme() !== isDarkMode)
  35.     {
  36.         document.documentElement.dataset.theme = isDarkMode ? "dark" : "light";
  37.     }
  38. }