☰

Oracle Live SQL 自動黑暗模式

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

  1. // ==UserScript==
  2. // @name               Auto Dark Mode for Oracle Live SQL
  3. // @name:zh-TW         Oracle Live SQL 自動黑暗模式
  4. // @description        Automatically switch the theme between light and dark, based on the browser’s color scheme preference.
  5. // @description:zh-TW  根據瀏覽器的佈景主題設定，自動從明亮和黑暗模式間切換。
  6. // @icon               data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAMAAABlApw1AAAA1VBMVEUAAADaz8/X08/a1NDZ09DGRTPXz8/GRjPX0s/a1M/Z09DKRTXZ1NDHRjPZ1NDGRDPZ09DX08/Y1NDGRTP8+/rHRjTHRzXGRTTZ09DHRTTHRTTFRjTY1M/ERTXHSDDIRjTY1NDHRjTHRjPZ09DHRTPY08/HRjTERTDZ1NDHRjTNXUz8+/rUc2Xbin715OHioZfhoJfOXU3ot6/KUUD48O3y2dX8+vnHRzXot7DvzsjlrKP58O7uzcjrw7zelorsw7zLUUHRaFn8+vjx2NTUc2brwrzQaFg7/KO7AAAAKHRSTlMAMH+/75Agr58w3jD+3+6groC+7/7+/u/uv76AjzAgrp7u3u2fj38w7RYQTQAAAlZJREFUeNrt2llv00AUxfGbQg20pi1JCkkBQ9nHY2dp0qZLukCB7/+RQGG5UsY8VAjCQf/z5jxY9yf5jCeZ2Lc8fdPvBKF0+uuFeYo7QTCvfhLedoJkXmx+nz+oZnchKO4H2ewXZrYdhPPMrPArzYdoPUjnsfW1AXv2SBuwb0E7uwAAAAAAAAAAHcBlKQ6I8aAUB8Q4LMUBcVArA5ygC1gQ3osDvM2CACeIA+JgKAcYxCVCLQaYjGJCkAB4xsfLhJNSA+AEf468zQoAT50QTksJgGd0llRBBeBVSAgaACdcJ4SPEgBP3dBmCYBn1EDQATRX4WyoAXDCp2WCDMCrIAtwgirAqyAOCJ8PpQGTU+lHaDKcSpf4Yiq9jFbJu3iuBKhOkvGroAMoD5L9aCWzmfPueqa1yna6efzRVdABpF8FfHwBQNrd87HQl/qycekRAfi2wXNYCf2w1bz0CAGalh4pQMP4woDjsegBhy89woB5xTHrSgDeXVGAjy8K8KVHFDCv+MMTAAAA/jvAbDn/FGAWb5wjAAAAKACOfpkPvAcAAAAAAAAAAAAAAPiR2Z/MQ3v3G4kx+sVqbpIDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABFQNROF8CqAZQYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABwwMEBBwcclBgAAAAAAAAAAAAAAAAAAKgAbmsDtuyWNqBtD7QBT6wlDcgzsx1hQP7czLKeLmAjs69p5aqAly1bpLWhCPD5zbK7uR4g38nMk71u9/Ibp9vtJp/9nZv02mv3bJEvnM+9fClwaoYAAAAASUVORK5CYII=
  7. // @author             Jason Kwok
  8. // @namespace          https://jasonhk.dev/
  9. // @version            1.0.0
  10. // @license            MIT
  11. // @match              https://livesql.oracle.com/apex/*
  12. // @run-at             document-idle
  13. // @grant              none
  14. // @supportURL         https://greasyfork.org/scripts/507985/feedback
  15. // ==/UserScript==
  16.  
  17. const toggle = document.getElementById("P0_DARKMODE");
  18. const query = matchMedia("(prefers-color-scheme: dark)");
  19.  
  20. query.addEventListener("change", updateTheme);
  21.  
  22.  
  23. const interval = setInterval(() =>
  24. {
  25.     if (document.body.classList.contains("is-darkmode") === query.matches)
  26.     {
  27.         clearInterval(interval);
  28.     }
  29.     else
  30.     {
  31.         toggle.checked = !query.matches;
  32.         updateTheme(query);
  33.     }
  34. }, 100);
  35.  
  36. function updateTheme({ matches: isDarkMode })
  37. {
  38.     if (toggle.checked !== isDarkMode)
  39.     {
  40.         toggle.click();
  41.     }
  42. }