Dark Mode Switch for Bootstrap 4
Posted:
July 03, 2019
I’ve been looking into ‘dark-mode’ toggles recently as I’d been considering adding one to a project I’m working on. Darkmode.js is a pretty neat solution which uses the mix-blend-mode
CSS property, which unfortunately doesn’t have great browser support. I found excellent dark-theme and local storage tutorials and looked into using some of the JavaScript combined with a Bootstrap 4 custom switch.
It uses local storage to save the users preference and the JavaScript (after minifying and gzipping) is only 230 bytes!
Demo
Browser Support
Works well with all the browsers supported by Bootstrap
Future plans
It’d be good to detect if the user has the prefers ‘dark-mode’ system preference on and respect that setting (via the (prefers-color-scheme: dark
) media query).
Comments
Niclas
I hope you add the prefers-color-scheme media query to this project
Christian Oliff
Yep, it’s definitely something I’d like to add. There’s an open issue tracking it: https://github.com/coliff/dark-mode-switch/issues/2
Leave a Comment
Your email address will not be published. Required fields are marked *