• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

How to Add Dark Mode to Your Website Using Only CSS

CSS · September 8, 2020

If you’re a developer, chances are you have a penchant for dark mode. Staring at a screen all day and possibly part of the night, dark mode is easier on the eyes and it just looks awesome.

It might surprise some of you to know that CSS has native support for dark mode and styling specifics using a property called prefers-color-scheme.

@media (prefers-color-scheme: dark) {
    /* paint it black */
}

The best thing about prefers-color-scheme is that it is well-supported. If you do not have to support Internet Explorer, then you can use it and not have to worry about any polyfills or Javascript fallbacks.

To enable native Dark Mode if you’re using Windows 10, go to the personalization screen and choose default app mode to be dark. The latest version of macOS also supports OS-level dark mode as well.

It might surprise you to know (if you don’t already have dark mode enabled) that this blog has a dark mode theme and it is just a few lines of CSS to pull it off.

@media (prefers-color-scheme: dark) {
	body {
		background: #0D1219;
		color: #FFF;
	}
	
	.site-title a,
	.genesis-nav-menu a,
	.entry-title a {
		color: #FFF;
	}
}

That is the dark theme for this site. Simple and effective. And in case you still haven’t enabled native dark mode just yet this is what this blog post looks like with dark mode enabled.

No Javascript or fancy tricks needed, just good ol’ fashioned CSS.

Dwayne

Leave a ReplyCancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • Handling Errors with the Fetch API
  • How To Get The Hash of A File In Node.js
  • How To Make Slime
  • Wild Natural Deodorant Review
  • A review of the Neural DSP Quad Cortex: is this the future of amp-modelling?

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz