My Dark Mode CSS

code css dark mode

Here is the CSS that powers this theme’s dark mode. First, we define some colors as CSS variables:

/* CSS Variables */
:root {
	--fainter: #f9f9f9;
	--faint: #eee;
	--medium: grey;
	--background: #fff;
	--color: #000;
	--link: #00E;
	--visited: #551A8B;
}

Then, we use a media query to detect if the client prefers dark mode, and in that case we set the colors to fit a dark scheme:

/* Define colors for dark mode */
@media (prefers-color-scheme: dark) {
	:root {
		--fainter: #111;
		--faint: #222;
		--background: #000;
		--color: snow;
		--link: #0cd;
		--visited: #c5c;
	}
	img:not([src*=".svg"]) {
		filter: brightness(90%);
	}
}

We also turn down the brightness on images (that are not SVGs) when we’re in dark mode, so they’re not eye-searing.

Finally, we set some elements of our website to use the colors defined in those variables:

:link { color: var(--link); }
:visited { color: var(--visited); }

body {
	background-color: var(--background);
	color: var(--color);
}

.menu a, header a{
	background: var(--faint);
}

a:hover {
	background: var(--fainter);
}

hr {
	color: var(--medium);
}

As a result, the colors of the webpage will change based on whether the client prefers dark mode or not.