☰

Microsoft Teams auto dark mode

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

  1. // ==UserScript==
  2. // @name         Microsoft Teams auto dark mode
  3. // @version      0.1.4
  4. // @description  Automatically switch the dark mode according to the system settings, which uses the official style
  5. // @namespace    https://teams.microsoft.com/
  6. // @match        https://teams.microsoft.com/_*
  7. // @icon         https://statics.teams.cdn.office.net/hashed/favicon/prod/favicon-32x32-4102f07.png
  8. // @author       bowencool
  9. // @license      MIT
  10. // @supportURL   https://github.com/bowencool/Tampermonkey-Scripts/issues
  11. // @require      https://cdn.jsdelivr.net/gh/bowencool/Tampermonkey-Scripts@f59cc91442dd34eb28e0d270486da5c7ac8d2d50/shared/waitForElementToExist.js
  12. // @grant        none
  13. // ==/UserScript==
  14.  
  15. (function () {
  16.   "use strict";
  17.  
  18.   async function toggle(
  19.     isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
  20.   ) {
  21.     const link = document.querySelector('#themed-stylesheet[rel="stylesheet"]');
  22.     const url = link.href;
  23.     const currentThemeIsDark = url.includes("dark");
  24.     console.log({ isDarkMode, currentThemeIsDark });
  25.     if (isDarkMode) {
  26.       if (currentThemeIsDark) return;
  27.       (await waitForElementToExist("#settings-menu-button")).click();
  28.       (
  29.         await waitForElementToExist(
  30.           '[data-tid="settingsDropdownOptionsButton"]'
  31.         )
  32.       ).click();
  33.       (
  34.         await waitForElementToExist(
  35.           '[data-tid="optionsSettingsDialog-General"]'
  36.         )
  37.       ).click();
  38.       (await waitForElementToExist('[data-tid="dark-theme"]')).click();
  39.       (await waitForElementToExist('[data-tid="closeModelDialogBtn"]')).click();
  40.     } else {
  41.       if (!currentThemeIsDark) return;
  42.       (await waitForElementToExist("#settings-menu-button")).click();
  43.       (
  44.         await waitForElementToExist(
  45.           '[data-tid="settingsDropdownOptionsButton"]'
  46.         )
  47.       ).click();
  48.       (
  49.         await waitForElementToExist(
  50.           '[data-tid="optionsSettingsDialog-General"]'
  51.         )
  52.       ).click();
  53.       (await waitForElementToExist('[data-tid="default-theme"]')).click();
  54.       (await waitForElementToExist('[data-tid="closeModelDialogBtn"]')).click();
  55.     }
  56.   }
  57.   toggle();
  58.   window
  59.     .matchMedia("(prefers-color-scheme: dark)")
  60.     .addEventListener("change", (e) => {
  61.       toggle(e.matches);
  62.     });
  63. })();