Dark Mode Switch for Bootstrap 4
Posted
on
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).
