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!

dark mode switch screenshot

Demo

Demo page

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).