Dark Mode Toggle

[Eminent]

Is there a working dark mode toggle for nodebb? I think that should come built-in in at least the default theme and can be turned on or off depending on your preference.

[Wilco]

Also wondering this, I found the "theme style" but that is really not industry standard. There should be a toggle, as well just listening to the OS our Browser preference. It looks like it doesn't do this currently.

[razibal]

I agree that this should be built into the default theme. In my case, I added it to my custom theme by adding a script in the header.tpl template. The scripts below should be usable as is. It's a little more complex than absolutely neccessary, but in my case I needed to be able to match the mode of the parent site. The modes are kept in sync via a watcher on local storage. The script accepts 3 modes - system, dark and light. The system mode matches the OS mode preference. It also alllows to a page to be opened in a specific mode via a search query parameter, for example ?theme=light

    <script id="setTheme" async=false>
        function getParameterByName(name, url) {
            if (!url) url = window.location.href;
            name = name.replace(/[\[\]]/g, "\\$&");
            var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                results = regex.exec(url);
            if (!results) return null;
            if (!results[2]) return '';
            return decodeURIComponent(results[2].replace(/\+/g, " "));
        }

        function getInitialColorMode() {
            let persistedColorPreference = getParameterByName('theme', window.location.url);
            if (persistedColorPreference && typeof persistedColorPreference === 'string') {
                window.localStorage.setItem('system-theme', persistedColorPreference);
            } else {
                persistedColorPreference = window.localStorage.getItem('system-theme');
            }
            const hasPersistedPreference = typeof persistedColorPreference === 'string' && persistedColorPreference != 'system';
            if (hasPersistedPreference) {
                setColors(persistedColorPreference)
                return persistedColorPreference;
            }
            const mql = window.matchMedia('(prefers-color-scheme: dark)');
            const hasMediaQueryPreference = typeof mql.matches === 'boolean';
            if (hasMediaQueryPreference) {
                setColors(mql.matches ? 'dark' : 'light')
                return mql.matches ? 'dark' : 'light';
            }
            setColors('light')
            return 'light';
        }

        function setColors(value) {
            if (value == 'dark') {
                document.documentElement.style.setProperty('--bg-color', '#191919');
                document.documentElement.style.setProperty('--color', '#ffffffcc');
                document.documentElement.style.setProperty('--nav-bg-color', '#151515');
                document.documentElement.style.setProperty('--nav-border', '#b0b0b09c');
            } else {
                document.documentElement.style.setProperty('--bg-color', '#fafafa');
                document.documentElement.style.setProperty('--color', '#444444');
                document.documentElement.style.setProperty('--nav-bg-color', '#fafafa');
                document.documentElement.style.setProperty('--nav-border', '#eeeeee');
            }
        }
        async function setStart() {
            document.documentElement.classList.toggle("dark", getInitialColorMode() == 'dark');
            document.documentElement.classList.toggle("light", getInitialColorMode() != 'dark');
            window.addEventListener('storage', (e) => {
                if (e.key != 'system-theme') {
                    return;
                } else {
                    document.documentElement.classList.toggle("dark", getInitialColorMode() == 'dark');
                    document.documentElement.classList.toggle("light", getInitialColorMode() != 'dark');
                }
            })
            const darkMode = window.matchMedia('(prefers-color-scheme: dark)');
            darkMode.addListener((event) => {
                document.documentElement.classList.toggle("dark", getInitialColorMode() == 'dark')
                document.documentElement.classList.toggle("light", getInitialColorMode() != 'dark')
            });
        }
        setStart()
    </script>

[phenomlab]

I do this slightly differently on my own form at Sudonix.org. When you visit, you'll see a swatch icon which when changed will alter the theme.

Swatch / Theme Changer

Hi all, As most of you know, there is a swatch / theme switcher on this site, which can be found here I decided to create this based on an idea from @DownPW...

Sudonix | A one-stop-shop for all your technology questions (sudonix.org)