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.
- How to create themes.
- The conflict between theming methods.
- Resolving the conflict.
There are three ways to create themes
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;
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.
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)
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.