Topic: Custom theme with custom colors
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?
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 4 years ago
What approach did you try and which color did you want to overwrite?
ojorge1984 free commented 4 years 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 4 years 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.
Roman free commented 2 years ago
What is the correct way to change colors when I use mdbBtn then?
Arkadiusz Idzikowski staff commented 2 years ago
@Roman What colors exactly do you need to change?
You can also take a look at our example on how to add custom skin:
https://mdbootstrap.com/docs/angular/css/skins/#custom
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"
]
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
kizmar free commented 6 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.