Dark Theme for Discourse - Auto-change

I it possible to let change the Theme based on the OS setting? (Auto-change on sunset?)

No.

I guessed it - is it difficult to implement?

Not difficult to implement, no. But difficult to maintain for sure.

We’re not using a completely custom theme for Discourse, but instead just use their official theme with customized colors, which is possible to do in a admin panel that looks like this:

Ultimately, the colors end up as CSS variables on the :root pseudoelement:

:root {
    --scheme-type: dark;
    --primary: #ddd;
    --secondary: #222;
    --tertiary: #4183c4;
    --quaternary: #c14924;
    --header_background: #0F0F0F;
    --header_primary: #fff;
    --highlight: #a87137;
    --danger: #e45735;
    --success: #1ca551;
    --love: #fa6c8d;
    --always-black-rgb: 0, 0, 0;
    --primary-rgb: 221,221,221;
    --primary-low-rgb: 48.62,48.62,48.62;
    --secondary-rgb: 34,34,34;
    --header_background-rgb: 15,15,15;
    --tertiary-rgb: 65,131,196;
    --primary-very-low: #282828;
    --primary-low: #313131;
    --primary-low-mid: #7a7a7a;
    --primary-medium: #909090;
    --primary-high: #a6a6a6;
    --primary-very-high: #c7c7c7;
    --header_primary-low: #383838;
    --header_primary-low-mid: #8c8c8c;
    --header_primary-medium: #a6a6a6;
    --header_primary-high: #bfbfbf;
    --header_primary-very-high: #e6e6e6;
    --secondary-low: #bdbdbd;
    --secondary-medium: #919191;
    --secondary-high: #646464;
    --secondary-very-high: #313131;
    --tertiary-low: #162e46;
    --tertiary-medium: #22486e;
    --tertiary-high: #2e6295;
    --tertiary-hover: #2e6295;
    --quaternary-low: #3a160b;
    --highlight-low: #22170b;
    --highlight-medium: #4c3319;
    --highlight-high: #976632;
    --danger-low: #591b0c;
    --danger-low-mid: #631e0db3;
    --danger-medium: #a13116;
    --danger-hover: #c63c1b;
    --success-low: #0b4220;
    --success-medium: #116331;
    --success-hover: #168441;
    --love-low: #8a0524;
    --wiki: #008000;
    --blend-primary-secondary-5: #3c3c3c;
    --primary-med-or-secondary-med: #919191;
    --primary-med-or-secondary-high: #646464;
    --primary-high-or-secondary-low: #bdbdbd;
    --primary-low-mid-or-secondary-high: #646464;
    --primary-low-mid-or-secondary-low: #bdbdbd;
    --primary-or-primary-low-mid: #7a7a7a;
    --highlight-low-or-medium: #4c3319;
    --tertiary-low-or-tertiary-high: #2e6295;
    --tertiary-med-or-tertiary: #4183c4;
    --secondary-or-primary: #ddd;
    --tertiary-or-white: #fff;
    --facebook-or-white: #fff;
    --twitter-or-white: #fff;
    --hljs-comment: #bba;
    --hljs-number: #aff;
    --hljs-string: #f99;
    --hljs-literal: #9ae;
    --hljs-tag: #99f;
    --hljs-attribute: #0ee;
    --hljs-symbol: #fbe;
    --hljs-bg: #333;
    --google: #fff;
    --google-hover: #f2f2f2;
    --instagram: #e1306c;
    --instagram-hover: #ac194b;
    --facebook: #4267b2;
    --facebook-hover: #2d477a;
    --cas: #70ba61;
    --twitter: #1da1f2;
    --twitter-hover: #0c85d0;
    --github: #100e0f;
    --github-hover: #463e42;
    --discord: #7289da;
    --discord-hover: #4a67cf;
    --gold: #e7c300;
    --silver: #c0c0c0;
    --bronze: #cd7f32;
}

You will notice that there are a lot more variables in the CSS than there are in the admin panel, and that’s the problem. Some of those variables in the CSS are created by running the admin-panel settings through a series of custom preprocessors like SCSS. A lot of those variables are dependent on their admin-panel “parent”, but with math added (like “30% darker”, “30% lighter”) and whatnot. So we can’t just copy-paste a couple of variables into a custom CSS snippet and but that behind a prefers-color-scheme media query, we’d somehow would have to customize the preprocessing pipeline as well.

Doing that is certainly possible, but with the super fast speed that Discourse is moving at, that would be a bit of a pain to maintain. I don’t want to get in the business of having to check for style changes every time I apply an update. Having a toggling UI theme would be “nice, I guess”, but certainly not a needed feature, and the gains do not justify the effort needed.

If you want to build something for yourself, you could use one of those browser extension that allow you to inject custom CSS/JS, copy-paste the light theme variables, and add the dark theme variables as an override in a system-theme dependent media query (or whatever other method you choose). You could even share a link to your userstyle/userscript here, so others can discover it.

That way, if something breaks, it’s your fault and your responsibility to fix it, not mine. :wink:

Tanks for the detailed answer (as usual).
It might be cool to have it switched automatically when its dark outside.

After I started this thread I found that discourse has had the same Idea, but I think this is exactly what you told me.