How to edit default Metronic SASS colors?
What is the best practice for overriding the default SASS color variables?
I am in the process of upgrading Metronic from 8.0.38 to 8.1.0. I notice that SASS uses color variables like:
--kt-primary
--kt-text-muted
Where and how are these colors defined, and how should I override them to make it easy to add future updates without overwriting my custom changes?
Replies (2)
I solved the problem by adding a new CSS file that contains:
:root {
--bs-table-bg-type: #c9c9c9bf;
--bs-text-primary: #2a8fe6;
--bs-text-primary-active: #0077d9;
/* ...etc */
}
This new CSS file should be included after the Metronic CSS files.
But why not just have a theme.css (or something similar) instead?
Hi,
Thanks for the heads-up. The CSS variables are mostly used for the light/dark mode switches and the actual colors should be customized in the SASS level under src/sass/components/_variables.custom.scss
and recompile the assets.
If you need any further clarifications please do let us know.
Regards.
