Automatically switch the dark mode according to the system settings, which uses the official style
// ==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); }); })();