Skip to content
A Complete Guide to the Dark Mode Toggle: A Demo
CSS HTML JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
.stylelintrc.json
DarkMode.jpg
LICENSE
README.md
index.html
main.css
main.js
main.scss
package-lock.json
package.json

README.md

The Complete Guide to the Dark Mode Toggle

You may have noticed that Dark Mode is becoming more and more a thing. In this article, I provide a complete guide to adding Dark Mode to your website.

Best Practices to Unlock the Dark Side

Recently, Chris Coyier at CSS-Tricks threw down the gauntlet for anyone who was about "to write a blog post about dark mode." He listed 10 points that would need to be covered.

  • Explain Dark Mode
  • Provide a demo
  • Explain that Dark Mode can happen at the operating system level itself
  • Show how JavaScript can know about the OS-level choice
  • Let the user have ultimate say over color preference
  • Build a theme switcher, including gotchas
  • See who else is building Dark Mode toggles
  • See who else is writing about it
  • Discuss what is and isn't supported
  • Make accessibility a main concern

In my post, "The Complete Guide to the Dark Mode Toggle," I aim to cover all 10 points (covering some better than others). I offer what I've found to be the best practices for implementing a dark mode toggle, and this repo serves a demo for those best practices.

Check out the Dark Mode Toggle demo.

You can’t perform that action at this time.