Custom theme with custom colors


Topic: Custom theme with custom colors

appbolaget pro asked 2 years ago

Hi!

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?


kizmar commented 2 years ago

I was wondering the same thing for React. We use continuous integration, and editing something inside the "node_modules" folder doesn't fly. I'm kind of surprised that's the expected way to customize this. Editing files in the "node_modules" folder is generally bad practice. I tried a couple things, but ended up creating copies of mdb.scss, core/_colors.scss and core/_variables.scss into my app and altering those so I could overwrite variables.

ike353 pro answered a year ago

I created a scss folder in my root directory and added a file called custom.scss

your-project/
├── scss/
│   └── custom.scss
└── node modules/
    └── ng-uikit-pro-standard/
        ├── assets/
        ├── bundles/
        ├── ⋮
        └── public_api.d.ts

inside of 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 projects > your-project > architect > build > options > styles

"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:

https://mdbootstrap.com/docs/angular/css/skins/#custom


ojorge1984 pro premium answered 2 weeks ago

I can't customize the colors when I use the mdbBtn directive, because this is putting an important! to scss classes


Arkadiusz Idzikowski staff commented 2 weeks ago

What approach did you try and which color did you want to overwrite?


ojorge1984 pro premium commented 2 weeks ago

I did something almost identical to the proposed solution here. WHEN I use the btn.btn-primary, btn.btn-secondary, etc ... classes if it works correctly, but when I decide to use the mdbBtn directive, the colors revert to the default ones


Arkadiusz Idzikowski staff commented 2 weeks ago

You should always use mdbBtn directive when you use MDB Angular buttons. Styles added with directive will always have higher priority than the global styles.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No