Custom theme with custom colors

Topic: Custom theme with custom colors

appbolaget pro asked 6 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 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.

Add comment

ojorge1984 free answered 4 years ago

0 0 Best answer

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 3 years ago

What is the correct way to change colors when I use mdbBtn then?

Arkadiusz Idzikowski staff commented 3 years ago

@Roman What colors exactly do you need to change?

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

You can also take a look at our example on how to add custom skin:

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

Add comment

ike353 pro answered 5 years ago

0 0 Best answer

I created a <code>scss</code> folder in my root directory and added a file called <code>custom.scss</code>

<pre class="prettyprint"><code>your-project/
├── scss/
│ └── custom.scss
└── node modules/
 └── ng-uikit-pro-standard/
 ├── assets/
 ├── bundles/
 ├── ⋮
 └── public_api.d.ts
</code></pre>

inside of <code>custom.scss</code> I put the scss variables and imported the relevant files:

<pre class="prettyprint"><code>$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";
</code></pre>

and finally, in the <code>angular.json</code> of the root directory under <code>projects</code> > <code>your-project</code> > <code>architect</code> > <code>build</code> > <code>options</code> > <code>styles</code>

<pre class="prettyprint"><code>"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"
 ]
</code></pre>

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

appbolaget

Pro User 2Support score
1Questions 0Answers 0Snippets