Dark Mode

This site now has dark mode! Toggle the switch for dark mode on your device and watch as the colors/images change!

History

Ever since macOS Catalina came out, dark mode has gaining popularity on apps and websites. From google chrome, to twitter’s homepage, developers have been updating their user interfaces to support dark mode. It’s all a part of a new trend in UIUX - a return the simple, the elegent. A departure from convoluted and crowded web pages to minimalist web design, and with the newest web and most current web standards it’s easier to incorporate than ever

Implementation

Now more than ever, web developers have a lot of easy ways to design responsive, sleek, minimal websites. JQuery leverages Javacsript’s DOM model with a minimal amount of typing. Media queries allow adaptive CSS to render nicely on all devices regardless of display size. And with the newest standard of media query level 5, developers can specify dark mode vs light mode.

	/* Light mode */
	@media (prefers-color-scheme: light) {
		body {
			background-color: #FFF;
			color: black;
		}
	}

	/* Dark mode */
	@media (prefers-color-scheme: dark) {
		body {
			/*background-color: hsl(100, 2%, 9%);*/
			background-color: #2d2e2d;
			color: white;
			opacity: .87;
		}
		hr {
			border-color: #525252;
			opacity: .93;
		}
	}

CSS for DateTrix

Styles

One of the golden rules of dark mode design is never choose black. A black background tends to be too harsh for users (especially with modern OLED true black screens) and most people will agree that a gray or a softer color is preferable to ease the strain on the eyes. Another important rule is true white is usually also too harsh. An easy way to mellow out the white is change it to a shade of gray, or modify the opacity (see snipet above).

How I did it

I’m sure as you can tell, the CSS that drives this sight is very long. My strategy for developing a dark mode meant just overriding certain aspects of classes in a separate file. For the most part CSS addresses things that stay the same across dark mode, namely: font, font size, element location, etc. The only thing I have a desire to change are the colors. Using Chrome’s debugging tool, I was able to find exactly what classes I needed to modify and simply override them in a separate file, taking care to not touch anything that needed to stay the same, and then wrapping the modified classes in a single media query of @media (prefers-color-scheme: dark) this way, light mode is just whatever CSS I had before.

@media (prefers-color-scheme: dark) {
	body {
		background-color: #2d2e2d;
	}
	.post-preview * , .darkenize, #projects {
		color: white ;
	}
	h1, h2, h3, h4, h5, p, tr, code span{
		opacity: 85;
		color: white;
	}
	.text-muted {
		color: #a3ada3 !important
	}
	hr {
		border-color: #525252;
		opacity: .93;
	}
	footer a {
		color: black;
	}
	a {
		color: #64afff;
	}

This is also immensely helpful since the CSS isn’t written in one huge file. Some of it is imported from bootstrap and other different libraries and then compiled together from scss partials. You obviously can’t change directly change classes that are imported from a cloudflare server so this is the best way to get a dark mode without re-writing all your CSS (which can be thousands of lines long)

Dark/Light mode juxtaposed

Interested in the full CSS? Check it out here!