滴答清单自动深色模式

根据系统设置自动切换深色模式，深色用的是官方的样式

// ==UserScript==
// @name         滴答清单自动深色模式
// @version      1.0.7
// @description  根据系统设置自动切换深色模式，深色用的是官方的样式
// @namespace    https://dida365.com/
// @match        https://dida365.com/webapp*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=dida365.com
// @author       bowencool
// @license      MIT
// @homepageURL  https://greasyfork.org/scripts/447649
// @supportURL   https://github.com/bowencool/Tampermonkey-Scripts/issues
// @require      https://cdn.jsdelivr.net/gh/bowencool/Tampermonkey-Scripts@f59cc91442dd34eb28e0d270486da5c7ac8d2d50/shared/waitForElementToExist.js
// @grant        none
// ==/UserScript==

(function () {
  "use strict";

  function sleep(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms));
  }

  async function toggle(
    isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
  ) {
    /* 有两个事件会触发，而且有循环，必须加判断 */
    const currentTheme = document.body.getAttribute("data-theme");
    console.log({ isDarkMode, currentTheme });
    if (isDarkMode) {
      if (currentTheme === "night-dark-theme") return;
      (await waitForElementToExist("#tl-bar-user")).click();
      (
        await waitForElementToExist(
          '.dropdown-menu [role="menuitem"] :has(.icon-setting-sidebar)'
        )
      ).click();
      (await waitForElementToExist('[data-tab="appearance"] a')).click();
      await sleep(200);
      (
        await waitForElementToExist('[data-id="night"]:not(:has(.select-tip))')
      ).click();
      await sleep(200);
      (
        await waitForElementToExist(
          "#settings-view div:has(> .icon-panel-close)"
        )
      ).click();
      localStorage.setItem("appTheme", "night");
      await sleep(200);
      document.querySelector(".icon-sidebar-sync")?.parentElement.click();
      // document.body.setAttribute("data-theme", "night-dark-theme");
      // document.body.classList.add("dark");
    } else {
      if (currentTheme !== "night-dark-theme") return;
      (await waitForElementToExist("#tl-bar-user")).click();
      (
        await waitForElementToExist(
          '.dropdown-menu [role="menuitem"] :has(.icon-setting-sidebar)'
        )
      ).click();
      (await waitForElementToExist('[data-tab="appearance"] a')).click();
      await sleep(200);
      (
        await waitForElementToExist('[data-id="grey"]:not(:has(.select-tip))')
      ).click();
      await sleep(200);
      (
        await waitForElementToExist(
          "#settings-view div:has(> .icon-panel-close)"
        )
      ).click();
      localStorage.setItem("appTheme", "grey");
      await sleep(200);
      document.querySelector(".icon-sidebar-sync")?.parentElement.click();
      // document.body.setAttribute("data-theme", "white-theme");
      // document.body.classList.remove("dark");
    }
  }

  window
    .matchMedia("(prefers-color-scheme: dark)")
    .addEventListener("change", (e) => {
      toggle(e.matches);
    });

  const observer = new MutationObserver(() => {
    /* 页面半身是异步设置的，太傻逼了 */
    // if (!document.body.getAttribute("data-input-type")) return;
    const dataTheme = document.body.getAttribute("data-theme");
    if (!dataTheme) return;
    console.log(
      "attr changed",
      {
        dataTheme,
      },
      document.body.getAttribute("data-input-type")
    );
    observer.disconnect();
    console.log("disconnected.");
    // setTimeout(() => {
    toggle();
    // }, 100);
  });
  observer.observe(document.body, {
    attributes: true,
    childList: false,
    subtree: false,
  });
})();