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:
Remember to save your client's last theme to the local storage or something to prevent bad UX and achieve consistent theme even on reloads.
Top comments (0)