Forum in dark mode

resources
1

Hi,

This forum is currently using Discourse v2.9.0, which is lacking a feature I saw in v3.1.0: dark mode support (I can’t find it anywhere).
Here’s a way to make it happen on v2.9.0 (this site).

I use the Custom Style Add-on in Firefox, which supports a few browsers (Firefox, Chrome, Opera and Edge).

  1. Open the Options page of the add-on.
  2. In III Code, in the URL-field I put the url of this forum.
  3. Then in the Style (CSS)-field I put the following CSS :arrow_down:
  4. Don’t forget to click the + button
:root {
	--pavilion-primary: #3c1c8c;
	--pavilion-secondary: #fff;
	--pavilion-warning: #f3a33d;
	--subscription-standard: #3c1c8c;
	--subscription-business: #333;
	--subscription-community: #fff;
}
:root {
	--chat-skeleton-animation-rgb: 39.78,39.78,39.78;
}
:root {
	--scheme-type: dark;
	--primary: #ddd;
	--secondary: #222;
	--tertiary: #0f82af;
	--quaternary: #c14924;
	--header_background: #111;
	--header_primary: #ddd;
	--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;
	--primary-very-low-rgb: 39.78,39.78,39.78;
	--secondary-rgb: 34,34,34;
	--header_background-rgb: 17,17,17;
	--tertiary-rgb: 15,130,175;
	--primary-very-low: #282828;
	--primary-low: #313131;
	--primary-low-mid: #7a7a7a;
	--primary-medium: #909090;
	--primary-high: #a6a6a6;
	--primary-very-high: #c7c7c7;
	--primary-50: #282828;
	--primary-100: #2c2c2c;
	--primary-200: #313131;
	--primary-300: #585858;
	--primary-400: #7a7a7a;
	--primary-500: #858585;
	--primary-600: #909090;
	--primary-700: #9b9b9b;
	--primary-800: #a6a6a6;
	--primary-900: #c7c7c7;
	--header_primary-low: #484848;
	--header_primary-low-mid: #838383;
	--header_primary-medium: #a4a4a4;
	--header_primary-high: #b9b9b9;
	--header_primary-very-high: #d2d2d2;
	--secondary-low: #bdbdbd;
	--secondary-medium: #919191;
	--secondary-high: #646464;
	--secondary-very-high: #313131;
	--tertiary-very-low: #04212c;
	--tertiary-low: #052e3d;
	--tertiary-medium: #084860;
	--tertiary-high: #0b6283;
	--tertiary-hover: #14aeea;
	--tertiary-50: #04212c;
	--tertiary-100: #042431;
	--tertiary-200: #052836;
	--tertiary-300: #052e3d;
	--tertiary-400: #06374a;
	--tertiary-500: #073e54;
	--tertiary-600: #084860;
	--tertiary-700: #09516d;
	--tertiary-800: #0a5a79;
	--tertiary-900: #0b6283;
	--quaternary-low: #3a160b;
	--highlight-low: #22170b;
	--highlight-medium: #4c3319;
	--highlight-high: #976632;
	--danger-low: #591b0c;
	--danger-low-mid: rgba(99,30,13,0.7);
	--danger-medium: #a13116;
	--danger-hover: #c63c1b;
	--success-low: #0b4220;
	--success-medium: #116331;
	--success-hover: #168441;
	--love-low: #8a0524;
	--wiki: green;
	--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-or-tertiary-low: #052e3d;
	--tertiary-low-or-tertiary-high: #0b6283;
	--tertiary-med-or-tertiary: #0f82af;
	--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;
	--hljs-builtin-name: #14aeea;
	--google: #fff;
	--google-hover: #f2f2f2;
	--instagram: #e1306c;
	--instagram-hover: #ac194b;
	--facebook: #1877f2;
	--facebook-hover: #0a54b3;
	--cas: #70ba61;
	--twitter: #1da1f2;
	--twitter-hover: #0c85d0;
	--github: #100e0f;
	--github-hover: #463e42;
	--discord: #7289da;
	--discord-hover: #4a67cf;
	--gold: #e7c300;
	--silver: silver;
	--bronze: #cd7f32;
}
html {
	color: var(--primary);
}
pre code {
	background-color: #313131;
}
#suggested-topics .topics table tbody tr{
	background-color: #313131;
}
#site-logo{
  filter: invert(0.45);
}

Most of it is copied from a Discourse forum running v3.1.0 which is set to dark mode. I’ve only copied the CSS that has to do with colors.
I’ve also added and set the last 3 classes, so it looks better.

2 Likes