Slack Web Auto Dark Mode

slack-web-auto-dark-mode.js

// ==UserScript==
// @name         Slack Web Auto Dark Mode
// @namespace    http://tampermonkey.net/
// @version      1.0.1
// @description  Automatically toggle dark mode on web version of slack.com
// @author       Danilo Azevedo
// @match        https://app.slack.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=slack.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const repeat_until_sucessful = (callback) => {
        return new Promise(function(resolve, reject) {
            const i = setInterval(function() {
                try {
                    callback()
                    resolve();
                    clearInterval(i);
                } catch (e) {
                }
            }, 100);
        })
    };

    const set_color_theme = async (is_dark) => {
        const color_scheme = is_dark ? 'dark' : 'light';
        const is_in_dark_mode = document.body.classList.contains('sk-client-theme--dark');

        if ((color_scheme === 'dark' && is_in_dark_mode) || (color_scheme === 'light' && !is_in_dark_mode))
            return;

        const tmp_css = document.createElement('style');
        document.head.appendChild(tmp_css).innerHTML='.c-sk-modal_portal { display:none }';

        document.querySelector('button[data-qa="user-button"]').click();

        await repeat_until_sucessful(() => {
            document.querySelector('.c-menu__items .c-menu_item__li:nth-child(7) button').click();
        });

        await repeat_until_sucessful(() => {
            const modal = document.querySelector('.p-prefs_dialog__modal');
            modal.querySelector('button#themes').click();
            modal.querySelector(`input[value="${color_scheme}"]`).click();
            modal.querySelector('.c-sk-modal__close_button').click();
            tmp_css.remove();
        });
    };

    window.addEventListener('load', () => {
        const color_scheme_media = window.matchMedia('(prefers-color-scheme: dark)');

        color_scheme_media.addEventListener('change', e => {
            set_color_theme(e.matches);
        });

        set_color_theme(color_scheme_media.matches);
    });
})();