Let’s start with manual controls. It’s one of the more common approaches to themes. All we need to do to get this to work is to toggle a class. Your styling could look something like: body.theme--dark { color: #ffffff } and body.theme--light { color: #222222 } . Using CSS custom properties we can make this even more powerful.

For our experiment, we created two buttons, one sets theme--dark on the <body> and the other theme--light . We can now write our styling using these selectors and re-assign different values to our CSS custom properties.