Topic: Custom theme with custom colors
What is the correct approach to defining a custom theme with custom colors without having to change the source files in the node_modules folder?
I read a few other threads here and they all seemed to suggest to edit files in node_modules folder which isn't really an option for me. There must be another way, right?
I created a
scss folder in my root directory and added a file called
your-project/ ├── scss/ │ └── custom.scss └── node modules/ └── ng-uikit-pro-standard/ ├── assets/ ├── bundles/ ├── ⋮ └── public_api.d.ts
custom.scss I put the scss variables and imported the relevant files:
$primary-color: #BADDAD; $primary-color-dark: darken($primary-color, 10); $secondary-color: #ACE007; $secondary-color-dark: darken($secondary-color, 10); $default-color: #9C9C9C; $default-color-dark: darken($default-color, 10); @import "~ng-uikit-pro-standard/assets/scss/core/colors";
and finally, in the
angular.json of the root directory under
"styles": [ "scss/custom.scss", "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss", "node_modules/@fortawesome/fontawesome-free/scss/solid.scss", "node_modules/@fortawesome/fontawesome-free/scss/regular.scss", "node_modules/@fortawesome/fontawesome-free/scss/brands.scss", "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss", "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss", "src/styles.scss" ]
You can also take a look at our example on how to add custom skin:
I can't customize the colors when I use the mdbBtn directive, because this is putting an important! to scss classes