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

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