User:Babr/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.

The following documentation is located at User:Babr/Palette.css/documentation. ^[edit]

Useful links: root page • root page’s subpages • links • redirects • your own

Examples of palette variables in light and dark mode
Variable name	Light mode	Dark mode
`--wikt-palette-black`	#202122	#eaecf0
`--wikt-palette-beige`	#fffbf2	#2b2722
`--wikt-palette-grey`	#9e9e9e	#161618
`--wikt-palette-lightgrey`	#cccccc	#212124
`--wikt-palette-lightergrey`	#eeeeee	#3d3d3d
`--wikt-palette-cyan`	#eaffff	#184e4e
`--wikt-palette-pink`	#ffe0f0	#43162e
`--wikt-palette-blue`	#F8F8FF	#15202b
`--wikt-palette-paleblue`	#f8f9fa	#1c2229

/* for testing color palettes for [[MediaWiki:Gadget-Palette.css]] */

:root, .skin-invert, .notheme {
	--wikt-palette-black: #202122;
	--wikt-palette-beige: #fffbf2;
	--wikt-palette-grey: #9e9e9e;
	--wikt-palette-lightgrey: #cccccc;
	--wikt-palette-lightergrey: #eeeeee;
	--wikt-palette-cyan: #eaffff;
	--wikt-palette-pink: #ffe0f0;
	--wikt-palette-blue: #F8F8FF;
	--wikt-palette-paleblue: #f8f9fa;
	/* only for numberboxes */
	--wikt-numbox-white: #ffffff;
	--wikt-numbox-grey: #dddddd;
}

/* Styles need to be duplicated exactly between these two selectors. */
@media screen {
	.skin-theme-clientpref-night {
		--wikt-palette-black: #eaecf0;
		--wikt-palette-beige: #2b2722 ;
		--wikt-palette-grey: #161618;
		--wikt-palette-lightgrey: #212124;
		--wikt-palette-lightergrey: #3d3d3d;
		--wikt-palette-cyan: #184e4e;
		--wikt-palette-pink: #43162e; /* #612042;*/
		--wikt-palette-blue: #15202b;
		--wikt-palette-paleblue: #1c2229;
		/* only for numberboxes */
		--wikt-numbox-white: #192734;
		--wikt-numbox-grey: #15202b;
	}
}

@media (prefers-color-scheme: dark) {
	.skin-theme-clientpref-os {
		--wikt-palette-black: #eaecf0;
		--wikt-palette-beige: #2b2722 ;
		--wikt-palette-grey: #161618;
		--wikt-palette-lightgrey: #212124;
		--wikt-palette-lightergrey: #3d3d3d;
		--wikt-palette-cyan: #184e4e;
		--wikt-palette-pink: #43162e; /* #612042;*/
		--wikt-palette-blue: #15202b;
		--wikt-palette-paleblue: #1c2229;
		/* only for numberboxes */
		--wikt-numbox-white: #192734;
		--wikt-numbox-grey: #15202b;
	}
}