Adding a dark mode toggle

The Challenge

I decided to add a dark mode toggle to my site which persists between pages and uses the browser’s default setting; all without adding external dependencies.

The Solution

I settled on using JavaScript to detect the browser’s default settings, toggle between the modes and persist it between pages using local storage. I then utilised CSS variables to define dark mode as the default and light mode to override the variables.

The code for all this can be found in the CodePen below: