What would be the right approach to create a template variant that allows switching day/night mode?


I am creating a website using Semantic UI (and a slightly edited version of its default template). Right now, everything has the light, white, style. However, I want to give users the option to toggle night mode, in which the website is mostly dark, to be less strained on the eyes.

Now, Semantic of course contains many elements that have an inverted option. However, these only work when the CSS classes are set to inverted. Toggling these classes on multiple elements feels like I’m doing something dirty, i.e. wrong.

What I think is better, is to have all elements change to the light resp. dark mode when the body element’s class is altered.

What would be the proper approach to alter a Semantic UI theme to ensure that it works with day/night mode toggling?

For who wants to seen an example of what I mean, you can click on the palette of the chess website lichess and toggle day, night and in that case even a semi-transparent mode.