☰

Greasy Fork is available in English.

Reddit Auto Dark Mode

Change Reddit's theme based on your system theme

  1. // ==UserScript==
  2. // @name        Reddit Auto Dark Mode
  3. // @namespace   Violentmonkey Scripts
  4. // @match       https://www.reddit.com/*
  5. // @grant       none
  6. // @version     1.02
  7. // @author      Yukiteru
  8. // @description Change Reddit's theme based on your system theme
  9. // @license     MIT
  10. // ==/UserScript==
  11.  
  12. function getToggleSwitch() {
  13.   return document.querySelector('#darkmode-list-item > div > span.flex.items-center.shrink-0 > span > faceplate-switch-input');
  14. }
  15.  
  16. function isDarkMode() {
  17.   return getToggleSwitch().getAttribute('aria-checked') === 'true';
  18. }
  19.  
  20. function toggleTheme(isDark) {
  21.   if (isDark !== isDarkMode()) getToggleSwitch().click(); // only toggles when the reddit theme and system theme does not match
  22. }
  23.  
  24. const darkMedia = window.matchMedia('(prefers-color-scheme: dark)');
  25. setTimeout(() => toggleTheme(darkMedia.matches), 500)
  26.  
  27. darkMedia.addEventListener('change', e => {
  28.   toggleTheme(e.matches); // toggle theme when system theme is changed
  29. });