Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Bootstrap theme map not overwritten

informatica@fwo.be free asked 4 years ago


Expected behavior
We overwrite default theme colors of MDB to customize to our needs. Since MDB uses another way of defining the colors we adapted to this standard. We only implement three colors at this moment:

$primary-color: #00b1b0;
$primary-color-dark: #10677C;
$secondary-color: #717976;
$secondary-color-dark: #3F4A46;
$default-color: #337ab7;
$default-color-dark: #165387;

We expect this to effect all MDB and Bootstrap components to use these colors as primary, secondary and so on.

Actual behavior
Bootstrap component are build using the $theme-colors sass map. The problem is that MDB doesn't seem to overwrite these colors by default. This results in some bootstrap components (those who MDB doesn't implement) like alert's to not use our configured primary color.

Sugested change
At this moment we overwrite the bootstrap $theme-colors map in our custom variables file. We think this shout already be done in your _colors.scss.

$theme-colors: ( 
"primary": $primary-color,
"secondary": $secondary-color);

Krzysztof Wilk staff answered 4 years ago


Hi!

We mentioned about customizing styles for your needs here: https://mdbootstrap.com/docs/jquery/getting-started/styles-customization/#scss-styles

The way you did it is 100% properly. You can use _custom-variables.scss, _custom-skin.scss and _custom-styles.scss to overwrite default styles.


informatica@fwo.be free commented 4 years ago

We know this is the way to customize the framework but we expected different behavior.

When we overwrite the colors from your framework like $primary-color we expect this to also effect standard bootstrap components. This is not the case, meaning we have to overwrite your colors and bootstraps color map as well.

Do you see the problem here? It is working right now but we expect the overwriting of bootstrap colors to happen in you _colors.scss.


Krzysztof Wilk staff commented 4 years ago

Ok now I see. I added task for it to our ToDo board. But for now I'm afraid you have to continue overwriting files I mentioned above until we fix it. I apologize for inconvenience.


IT_Santini priority commented 2 years ago

Agree with informatica@fwo.be, do you have any update for this?


Marcin Luczak staff commented 2 years ago

@IT_Santini Currently, we are developing theming for MDB5. Please, give it a try: https://mdbootstrap.com/docs/standard/content-styles/theme/

Keep coding, Marcin



Please insert min. 20 characters.

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: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.18.0
  • Device: Web
  • Browser: Chrome, Firefox
  • OS: Windows
  • Provided sample code: No
  • Provided link: No