reddit-auto-dark-mode.js

// ==UserScript==
// @name         Reddit Auto Dark Mode
// @namespace    http://tampermonkey.net/
// @version      0.13
// @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() == '#0B1416'/*subject to change*/;
    } : () => {
        return getComputedStyle(document.getElementsByTagName("header")[0].firstElementChild).getPropertyValue('--newRedditTheme-body').trim() == "#1A1A1B"/*subject to change*/;
    };
    const switch_theme = new_ui ? () => {
        let night_mode_button = document.querySelector('div#user-drawer-content shreddit-darkmode-setter faceplate-switch-input');
        if (night_mode_button == null)
            return false;
        night_mode_button.click();
        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()) {
        if (window.matchMedia) {// if the browser/os supports system-level color scheme
            setDarkMode(window.matchMedia('(prefers-color-scheme: dark)').matches);
            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => setDarkMode(e.matches));
        } else {// otherwise use local time to decide
            let hour = (new Date()).getHours();
            setDarkMode(hour > 18 || hour < 8);
        }
    }
})();

Hi, version 0.5 doesn't seem to work anymore (Safari 15.3, macOS 12.2.1). All it does is open the top right menu in which the dark mode toggle is but it doesn't activate the toggle nor does it close the menu again.

@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