I'm trying to implement dark mode into my project without using material or other css frameworks. My project has a centralized resource when it comes to colors. All colors used in the project are stored in a common base file and is used across multiple components.
I've a predefined color palette for light mode. Now I need to implement dark mode into this project and I'm looking for a way in which I can do it in a least minimalist way. somehow toggling the color-palette, or using different scss file when theme is changed. I'm not sure whether it possible or not
https://stackblitz.com/edit/angular-dark-mode-test
this is the minimalist version of my project.
I know scss is a css preprocessor and toggling theme happens in run time from the angular side. If the color palette switch is not possible, then what are the alternative approaches that I could follow for implementing dark mode for such a project with very large code base.
nb: I don't intent to use any external packages or material themes etc.
For your case, I would say the simplest solution to implement a dark/light theme would be to use CSS variables.
You can attach an attribute or a class to the body element, and then based on that attribute/class you can set values for your CSS variables.
Later on, if you want to switch from the dark to the light theme(or the other way around) you can just update the attribute/class with javascript