Azure devops auto dark mode

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

Visit the author's site for support, ask a question, post a review, or report the script.

Wrap lines

// ==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);
    });
})();