The Right Way for Web Apps Theming. Dark-mode, light-mode, system and many more.

Emerald RLM — Mon, 21 Jun 2021 08:46:18 +0000

Recently I experimented with creating themes for my web apps and found many ways to create themes but there was conflict in the execution due to over-rides, so I will run with you through how I solved the issue.

So we will cover:

How to create themes.
The conflict between theming methods.
Resolving the conflict.

How to create themes

There are three ways to create themes
1.Using css variables: Using both CSS and JavaScript, you define the variables in a parent element and using JavaScript call a function that changes the variable values, it can be reverted by calling a function that does the opposite of the previous function.
2.Using additional classes: Using JavaScript and CSS, you get the parent element and add a class containing the values you want to change and it can also be reverted using another function by removing the class.
3.Using media queries: Using CSS

@media (prefers-color-scheme: dark )

, you can check mozzila documents to learn more, but what it does is update the elements styles according to the user's operating systems theme;

The Theme Conflict

I was learning to use styled-components with next.js so I had both the media queries theme and was using the theme provider to update the theme, I was going for my user's having three themes to choose from i.e light, dark and system but when the user's system was in dark-mode the media query theme clashed with my themes from the theme provider.

Resolving the Conflict:

I had to create a new .css file with a .dark class containing the styles I wanted to apply, so whether in dark-mode or light mode the class added takes precedence over
the other theming methods,
To summarize the order of precedence of theming methods is :

Class method
Media query method
Themes from theme provider (using styled-components)

Extra: