Azure devops auto dark mode

Automatically switch the dark mode according to the system settings, which uses the official style

Navštíviť stránky autora skriptu pre podporu, spýtať sa otázku, uverejniť recenziu, alebo nahlásiť skript.

Zalomiť riadky

// ==UserScript==
// @name         Azure devops auto dark mode
// @version      0.1.2
// @description  Automatically switch the dark mode according to the system settings, which uses the official style
// @namespace    https://dev.azure.com/
// @match        https://dev.azure.com/*
// @icon         https://cdn.vsassets.io/content/icons/favicon.ico
// @author       bowencool
// @license      MIT
// @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";

  async function toggle(
    isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
  ) {
    /* 有两个事件会触发，而且有循环，必须加判断 */
    const bgColor = window.getComputedStyle(document.body).backgroundColor;

    const currentThemeIsDark = bgColor !== "rgb(255, 255, 255)";
    console.log({ isDarkMode, currentThemeIsDark });
    if (isDarkMode) {
      if (currentThemeIsDark) return;
      (await waitForElementToExist('[aria-label="User settings"]')).click();
      (await waitForElementToExist("#__bolt-changeThemeLink")).click();
      (
        await waitForElementToExist("#theme-ms-vss-web-vsts-theme-dark")
      ).click();
      (await waitForElementToExist('.theme-panel [aria-label="Close"]')).click();
    } else {
      if (!currentThemeIsDark) return;
      (await waitForElementToExist('[aria-label="User settings"]')).click();
      (await waitForElementToExist("#__bolt-changeThemeLink")).click();
      (
        await waitForElementToExist("#theme-ms-vss-web-vsts-theme")
      ).click();
      (await waitForElementToExist('.theme-panel [aria-label="Close"]')).click();
    }
  }
  toggle();
  window
    .matchMedia("(prefers-color-scheme: dark)")
    .addEventListener("change", (e) => {
      toggle(e.matches);
    });
})();