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