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