Night and Day

Toggling Your Colour Scheme

This demo shows how a simple hidden <input type="checkbox"> combined with a <label> can be combined to toggle the entire colour scheme of your layout via CSS3 variables.

In the main menu above (or in the mobile modal) click on "day mode" or "night mode" to switch between the two states.


The only major disadvantage being that IE doesn't know what CSS variables are, and that Chakra based Edge can't handle full properties -- like "1px solid #0003" -- as variables. Since Chakra Edge is now dead replaced by a Blink based (aka "chrome-like") version, and IE users really should expect a degraded experience, I think it's time to tell them where to stick it on full 100% support.

I'm not saying not to support said browsers, simply feed them a degraded experience. As any good site should use semantic markup, I say just stop feeding them CSS and JS altogether. Easiest way to do that? Use X-UA to tell IE to pretend to be IE9/earlier, which turns on conditional comments.


Most of the heavy lifting is CSS driven, with only the state change of the checkbox being tracked in localstorage by JavaScript.

As it is almost entirely CSS driven, you do not need to play with the JavaScript or the markup to make any changes.


This page includes the modal dialog function for hamburger menus and a sub-menu/search/login to demonstrate how the colour inherits to those as well. See my Medium article about modal driven pages for more information about that part of the code.