Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI 
Hi, I want to work on customizing Metronic greatly, and I want to modify the sass files
Hello,
I want to work on a big modification to Metronik, and I modified the defaults through variables and it was done very easily.
But when I add new elements or delete existing elements in $theme-colors, I did not get correct results.
For example, I want to delete the elements info, light & dark through the following code:
$theme-colors: map-remove($theme-colors, "info", "light", "dark");But no change occurred.
Also another example:
$alhalabi-colors: (
"primary2": $primary2-100,
// secondary 1 is overwritten by $secondary
"secondary2": $secondary2-100,
"secondary3": $secondary3-100,
"secondary4": $secondary4-100,
"help": $help,
"help2": $help2
);
$theme-colors: map-remove($theme-colors, "info", "light", "dark");I also don't get any new changes.
Finally I can't figure out where to put this code in any file, knowing that I put it in _variables.custom.scss and _variables.demo.scss and I also didn't get any changes.
Note: I'm working on Metronic 7
Replies (1)
Hi Mohammed Alhalabi
Have you rebuild the assets using gulp or webpack?
Metronic processes variables in a specific order. Make sure your custom modifications are executed after the core _variables.scss has been imported.
Instead of modifying directly, create an updated version of $theme-colors like this:
// Custom Theme Colors
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// Add Custom Colors
$theme-colors: map-merge($theme-colors, (
"primary2": $primary2-100,
"secondary2": $secondary2-100,
"secondary3": $secondary3-100,
"secondary4": $secondary4-100,
"help": $help,
"help2": $help2
));Make sure _variables.custom.scss is imported after _variables.scss in your main style.scss or main.scss file.
Thanks
