How can I change the entire color scheme of an angular app on click of a button without using any other UI library.
Basically what I want to do is – I have two files dark.scss and light.scss. Both contains variables such as the below one but with the different values.
<code>:root{
--body-bg:#fff;
--frn-bg-color:#fff;
--input-border-color:#787878;
//...
}
</code>
<code>:root{
--body-bg:#fff;
--frn-bg-color:#fff;
--input-border-color:#787878;
//...
}
</code>
:root{
--body-bg:#fff;
--frn-bg-color:#fff;
--input-border-color:#787878;
//...
}
Which is then called in the styles.scss file using @require './theme/dark.scss';. But this is very static and cannot change to @require './theme/light.scss'; without rebuilding the app.
So what can I do to switch the theme files and apply all the color scheme without rebuilding the app.