Azure devops auto dark mode

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

当前为 2023-09-28 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Azure devops auto dark mode
  3. // @version 0.1.1
  4. // @description Automatically switch the dark mode according to the system settings, which uses the official style
  5. // @namespace https://dev.azure.com/
  6. // @match https://dev.azure.com/*
  7. // @icon https://cdn.vsassets.io/content/icons/favicon.ico
  8. // @author bowencool
  9. // @license MIT
  10. // @supportURL https://github.com/bowencool/Tampermonkey-Scripts/issues
  11. // @grant none
  12. // ==/UserScript==
  13.  
  14. (function () {
  15. "use strict";
  16.  
  17. function waitForElementToExist(selector) {
  18. return new Promise((resolve) => {
  19. if (document.querySelector(selector)) {
  20. return resolve(document.querySelector(selector));
  21. }
  22.  
  23. const observer = new MutationObserver(() => {
  24. if (document.querySelector(selector)) {
  25. resolve(document.querySelector(selector));
  26. observer.disconnect();
  27. }
  28. });
  29.  
  30. observer.observe(document.body, {
  31. subtree: true,
  32. childList: true,
  33. });
  34. });
  35. }
  36.  
  37. async function toggle(
  38. isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
  39. ) {
  40. /* 有两个事件会触发,而且有循环,必须加判断 */
  41. const bgColor = window.getComputedStyle(document.body).backgroundColor;
  42.  
  43. const currentThemeIsDark = bgColor !== "rgb(255, 255, 255)";
  44. console.log({ isDarkMode, currentThemeIsDark });
  45. if (isDarkMode) {
  46. if (currentThemeIsDark) return;
  47. (await waitForElementToExist('[aria-label="User settings"]')).click();
  48. (await waitForElementToExist("#__bolt-changeThemeLink")).click();
  49. (
  50. await waitForElementToExist("#theme-ms-vss-web-vsts-theme-dark")
  51. ).click();
  52. (await waitForElementToExist('.theme-panel [aria-label="Close"]')).click();
  53. } else {
  54. if (!currentThemeIsDark) return;
  55. (await waitForElementToExist('[aria-label="User settings"]')).click();
  56. (await waitForElementToExist("#__bolt-changeThemeLink")).click();
  57. (
  58. await waitForElementToExist("#theme-ms-vss-web-vsts-theme")
  59. ).click();
  60. (await waitForElementToExist('.theme-panel [aria-label="Close"]')).click();
  61. }
  62. }
  63. toggle();
  64. window
  65. .matchMedia("(prefers-color-scheme: dark)")
  66. .addEventListener("change", (e) => {
  67. toggle(e.matches);
  68. });
  69. })();