Hello, we are using Metronic React theme in our project and I wanted to know if there is a guide to customize the whole bootstrap theme. I understand that we can override sass variables like "$primary" in - /src/_metronic/assets/sass/components/_variables.custom.scss
But where can I include functions, mixins to do map-merges and add a custom color to the theme or additional break points, so that it does not break the project?
I also wanted to know what map merges I need to do to add an additional color to the theme and get all utility classes for the new color. Guidance would be much appreciated.
Hi,
You can customize the Bootstrap SASS as it allows in:src/_metronic/assets/sass/core/components/_variables.scss
src/_metronic/assets/sass/core/components/_variables-dark.scss
Override the above variables via the below ones:src/_metronic/assets/sass/components/_variables.override.scss
src/_metronic/assets/sass/components/_variables.custom.scss
You can add new utility options:src/_metronic/assets/sass/core/components/_utilities.scss
Regards.