MediaWiki:Gadget-Palette.css

Note: You may have to bypass your browser’s cache to see the changes. In addition, after saving a sitewide CSS file such as MediaWiki:Common.css, it will take 5-10 minutes before the changes take effect, even if you clear your cache.

Mozilla / Firefox / Safari: hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (Command-R on a Macintosh);
Konqueror and Chrome: click Reload or press F5;
Opera: clear the cache in Tools → Preferences;
Internet Explorer: hold Ctrl while clicking Refresh, or press Ctrl-F5.

This style sheet lacks a documentation subpage. Please create it.

This script is a part of the Palette gadget (edit definitions)

Description (edit): Dark mode-compatible CSS variables for colours that be used in templates. on by default, disable at your own risk

Useful links: subpage list • links • redirects

/* Experimental dark mode gadget. */
/* Inspired by [[:ru:w:MediaWiki:Gadget-common-site.css]] */

:root, .skin-invert, .notheme {
	--wikt-palette-white: #ffffff;
	--wikt-palette-black: #202122;
	--wikt-palette-beige: #fffbf2;
	--wikt-palette-grey: #9e9e9e;
	--wikt-palette-lightgrey: #cccccc;
	--wikt-palette-lightergrey: #eeeeee;
	--wikt-palette-pink: #ffe0f0;
	--wikt-palette-peach: #e4d4c0;
	--wikt-palette-gold: #b88d00;
	--wikt-palette-dullgold: #826f34;
	--wikt-palette-yellow: #ebe8b9;
	--wikt-palette-dullyellow: #dedbc1;
	--wikt-palette-palegreen: #e2f6e2;
	--wikt-palette-palergreen: #f8fffa;
	--wikt-palette-mint: #c0e4c0;
	--wikt-palette-forestgreen: #235923;
	--wikt-palette-paleblue: #f8f9fa;
	--wikt-palette-cyan: #eaffff;
	--wikt-palette-lightblue: #d9ebff;
	--wikt-palette-dullblue: #49555f;
	--wikt-palette-dullcyan: #eaecf0;
	--wikt-palette-deepblue: #2f445c;
	--wikt-palette-lavender: #f8f8ff;
	--wikt-palette-lightyellow: #ffffe0;
}

/* Styles need to be duplicated exactly between these two selectors. */
@media screen {
	html.skin-theme-clientpref-night {
		--wikt-palette-white: #101418;
		--wikt-palette-black: #eaecf0;
		--wikt-palette-beige: #2f1f10;
		--wikt-palette-grey: #4e4e4e;
		--wikt-palette-lightgrey: #3d3d3d;
		--wikt-palette-lightergrey: #242424;
		--wikt-palette-pink: #612042;
		--wikt-palette-peach: #58230a;
		--wikt-palette-gold: #edd174;
		--wikt-palette-dullgold: #c9b165;
		--wikt-palette-yellow: #52421c;
		--wikt-palette-dullyellow: #3a3520;
		--wikt-palette-palegreen: #112511;
		--wikt-palette-palergreen: #051f0c;
		--wikt-palette-mint: #194819;
		--wikt-palette-forestgreen: #499149;
		--wikt-palette-paleblue: #1c2229;
		--wikt-palette-cyan: #184e4e;
		--wikt-palette-lightblue: #0e4887;
		--wikt-palette-dullblue: #b8c0c5;
		--wikt-palette-dullcyan: #27292d;
		--wikt-palette-deepblue: #a5c3e1;
		--wikt-palette-lavender: #1a1a2a;
		--wikt-palette-lightyellow: #24241a;
	}
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os {
		--wikt-palette-white: #101418;
		--wikt-palette-black: #eaecf0;
		--wikt-palette-beige: #2f1f10;
		--wikt-palette-grey: #4e4e4e;
		--wikt-palette-lightgrey: #3d3d3d;
		--wikt-palette-lightergrey: #242424;
		--wikt-palette-pink: #612042;
		--wikt-palette-peach: #58230a;
		--wikt-palette-gold: #edd174;
		--wikt-palette-dullgold: #c9b165;
		--wikt-palette-yellow: #52421c;
		--wikt-palette-dullyellow: #3a3520;
		--wikt-palette-palegreen: #112511;
		--wikt-palette-palergreen: #051f0c;
		--wikt-palette-mint: #194819;
		--wikt-palette-forestgreen: #499149;
		--wikt-palette-paleblue: #1c2229;
		--wikt-palette-cyan: #184e4e;
		--wikt-palette-lightblue: #0e4887;
		--wikt-palette-dullblue: #b8c0c5;
		--wikt-palette-dullcyan: #27292d;
		--wikt-palette-deepblue: #a5c3e1;
		--wikt-palette-lavender: #15202b;
		--wikt-palette-lightyellow: #24241a;
	}
}