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!

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

You might also like

Bootstrap 4 with Responsive Font Sizes (RFS)

Easily add responsive font sizes to your site