• 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 Reply Cancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • Thoughts on the Flipper Zero
  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How To Get The Hash of A File In Node.js
  • The Most Common iPhone Passcodes (and how to guess them)
  • Wild Natural Deodorant Review
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • Improving The Coopers Australian Pale Ale Extract Tin (and other tips)
  • Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • How To Paginate An Array In Javascript

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz