Light & Dark Mode

I decided to make an alternative theme to the default Push10 site theme utilizing a light and dark mode toggle. It utilizes only a few lines of javascript and involves no alteration to the original html template (other than adding a checkbox for the toggle). All of the css changes are implemented under a wrapper that toggles a class on click. Pretty simple.

The checkbox is styled using the :before and :after pseodo-classes. You can also use the :checked pseudoclass to add additional styles to the checkbox.

The js pretty minimal. Essentially, I toggle a class (in this case ‘nightmode’) whenever the checkbox is clicked. When the class of nightmode is added, the css updates.