☰

Auto Dark Mode for Reddit

Works for desktop

// ==UserScript==
// @name         Auto Dark Mode for Reddit
// @namespace    https://bengrant.dev
// @version      0.3
// @description  Works for desktop
// @author       Avi (https://avi12.com)
// @copyright    2025 Avi (https://avi12.com)
// @license      MIT
// @match        https://www.reddit.com/*
// @icon         https://www.google.com/s2/favicons?domain=reddit.com
// @grant        none
// ==/UserScript==

(function () {
  "use strict";

  /**
   * @returns {HTMLButtonElement}
   */
  const getElButtonProfile = () => document.querySelector("button#expand-user-drawer-button");

  // noinspection CssInvalidHtmlTagReference
  /**
   * @returns {HTMLElement}
   */
  const getElDarkToggle = () => document.querySelector("#darkmode-list-item faceplate-switch-input");

  const OBSERVER_OPTIONS = {childList: true, subtree: true};

  function openProfileDrawerAndToggleTheme() {
    const {activeElement} = document;
    const elButtonProfile = getElButtonProfile();
    new MutationObserver((_, observer) => {
      const elDarkToggle = getElDarkToggle();
      if (!elDarkToggle) {
        return;
      }
      const {shadowRoot} = elDarkToggle;
      if (!shadowRoot) {
        return;
      }
      const elDarkToggleInput = shadowRoot.querySelector("input");
      if (!elDarkToggleInput) {
        return;
      }
      observer.disconnect();
      requestAnimationFrame(() => {
        elDarkToggle.click();
        elButtonProfile.click();
        activeElement.focus();
      });
    }).observe(document, OBSERVER_OPTIONS);
    elButtonProfile.click();
  }

  const darkQuery = matchMedia("(prefers-color-scheme: dark)");
  new MutationObserver((_, observer) => {
    if (!getElButtonProfile()) {
      return;
    }

    const themeNew = darkQuery.matches ? "dark" : "light";
    const themeCurrent = document.cookie.match(/theme=([12])/)[1] === "1" ? "light" : "dark";
    const isChangeTheme = themeNew !== themeCurrent;
    observer.disconnect();
    if (!isChangeTheme) {
      return;
    }

    openProfileDrawerAndToggleTheme();
  }).observe(document, OBSERVER_OPTIONS);

  darkQuery.addEventListener("change", () => {
    const elDarkToggle = getElDarkToggle();
    if (elDarkToggle) {
      const {activeElement} = document;
      elDarkToggle.click();
      activeElement.focus();
      return;
    }

    openProfileDrawerAndToggleTheme();
  });
})();