reddit-auto-dark-mode.js

// ==UserScript==
// @name         Reddit Auto Dark Mode
// @namespace    http://tampermonkey.net/
// @version      0.17
// @description  Automatically toggle built-in dark mode on reddit.com
// @author       Nathaniel Wu
// @match        *://*.reddit.com/*
// @license      Apache-2.0
// @supportURL   https://gist.github.com/Nathaniel-Wu/f638b2fee2ece92742bfbf7d4db19f18
// @grant        none
// ==/UserScript==

(function () {
    'use strict';
    const repeat_until_successful = (function_ptr, interval) => {
        if (!function_ptr())
            setTimeout(() => {
                repeat_until_successful(function_ptr, interval);
            }, interval);
    };
    const new_ui = getComputedStyle(document.getElementsByTagName("header")[0].firstElementChild).getPropertyValue('--newRedditTheme-body').trim() === '';
    const in_dark_mode = new_ui ? () => {
        return getComputedStyle(document.getElementsByTagName("header")[0].firstElementChild).getPropertyValue('--shreddit-content-background').trim() == '#0E1113'/*subject to change*/;
    } : () => {
        return getComputedStyle(document.getElementsByTagName("header")[0].firstElementChild).getPropertyValue('--newRedditTheme-body').trim() == "#1A1A1B"/*subject to change*/;
    };
    const element_hidden = (element) => {
        return element.offsetWidth === 0 && element.offsetHeight === 0;
    };
    const switch_theme = new_ui ? () => {
        let preferences_button = document.querySelector('#expand-user-drawer-button' /*subject to change*/);
        if (!Boolean(preferences_button))
            return false;
        let preferences_panel = document.querySelector('#user-drawer-content' /*subject to change*/);
        if (!Boolean(preferences_panel))
            return false;

        if (element_hidden(preferences_panel))
            preferences_button.click();
        let night_mode_button = document.querySelector('#darkmode-list-item faceplate-switch-input[name="darkmode-switch-name"]' /*subject to change*/);
        if (night_mode_button == null)
            return false;
        night_mode_button.click();
        repeat_until_successful(() => {
            if (!element_hidden(preferences_panel)) {
                preferences_button.click();
                return false;
            }
            return true;
        }, 500);
        return true;
    } : () => {
        let preferences_button = document.querySelector("#USER_DROPDOWN_ID"/*subject to change*/);
        if (preferences_button == null)
            return false;
        if (document.evaluate('/html/body/div/div[@role="menu"]'/*subject to change*/, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue == null) {
            preferences_button.click();
            return false;
        }
        let night_mode_button = document.evaluate('/html/body/div/div[@role="menu"]//button/span[.="Dark Mode"]/../button'/*subject to change*/, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
        if (night_mode_button == null) {
            night_mode_button = document.evaluate('/html/body/div/div[@role="menu"]//button/div[.="Dark Mode"]/../button'/*subject to change*/, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
            if (night_mode_button == null)
                return false;
        }
        night_mode_button.click();
        preferences_button.click();
        return true;
    };
    const setDarkMode = (on) => {
        if (in_dark_mode() != on)
            repeat_until_successful(switch_theme, 10);
    }
    const in_iframe = () => {
        try {
            return window.self !== window.top;
        } catch (e) {
            return true;
        }
    }
    if (!in_iframe()) {
        // 4/19/2025: after recent reddit update, theme switching often does not work within a short period when the website initially loads
        const theme_delay = 1500;
        if (window.matchMedia) {// if the browser/os supports system-level color scheme
            setTimeout(() => { setDarkMode(window.matchMedia('(prefers-color-scheme: dark)').matches); }, theme_delay);
            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => setDarkMode(e.matches));
        } else {// otherwise use local time to decide
            let hour = (new Date()).getHours();
            setTimeout(() => { setDarkMode(hour > 18 || hour < 8); }, theme_delay);
        }
    }
})();

@SebastianRasch Sorry, I forgot to update the public copy. It should work now.

Yes now it's working! Cheeers!

Again broken on Firefox 107 (64-bit) Windows 10.

Still working fine on Safari/macOS.

Still works on Brave/macOS.

(Notably, this works better than using extensions like dark reader, which seem to have some rendering issues with reddit.)

I used to love using this script. : https://github.com/eramdam/userscripts/blob/main/New%20Reddit%20auto%20night%20mode.user.js
Which directly hook react function, unfortunately, right now, it doesn't save my theme on reddit side, which make it change every load.
If anyone can figure out why it doesn't "save" the change, it would be awesome, since it doesn't require the browser to "click" and expand the menu ;)

I'll fallback to use your / this script now.

Thanks for your work. It work flawlessly.

Can you add support for iOS Safari/mobile website?

Can you add support for iOS Safari/mobile website?

I’d use this instead if I were you : https://apps.apple.com/fr/app/sink-it-for-reddit/id6449873635

Can you add support for iOS Safari/mobile website?

I’d use this instead if I were you : https://apps.apple.com/fr/app/sink-it-for-reddit/id6449873635

I prefer using JavaScript instead of using extensions

thanks for your suggestion