Reddit Auto Dark Mode

Change Reddit's theme based on your system theme

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name        Reddit Auto Dark Mode
// @namespace   Violentmonkey Scripts
// @match       https://www.reddit.com/*
// @grant       none
// @version     1.02
// @author      Yukiteru
// @description Change Reddit's theme based on your system theme
// @license     MIT
// ==/UserScript==

function getToggleSwitch() {
  return document.querySelector('#darkmode-list-item > div > span.flex.items-center.shrink-0 > span > faceplate-switch-input');
}

function isDarkMode() {
  return getToggleSwitch().getAttribute('aria-checked') === 'true';
}

function toggleTheme(isDark) {
  if (isDark !== isDarkMode()) getToggleSwitch().click(); // only toggles when the reddit theme and system theme does not match
}

const darkMedia = window.matchMedia('(prefers-color-scheme: dark)');
setTimeout(() => toggleTheme(darkMedia.matches), 500)

darkMedia.addEventListener('change', e => {
  toggleTheme(e.matches); // toggle theme when system theme is changed
});