Topic: Primary theme change follwing tutorial doesn't change focus colors correctly.

DaZu priority asked 8 months ago

When following themeing docs, notice that clicking on a primary button ripple effect is blue not the purple expected by setting primary color.

@import 'mdb-ui-kit/src/mdb/scss/';

$my-theme-primary: #9c27b0; // theme primary color, change this value to customize theme
$my-theme-secondary: #69f0ae; // theme secondary color, change this value to customize theme

$my-theme: mdb-light-theme($my-theme-primary, $my-theme-secondary); // create the new theme using primary and secondary colors

// include theme styles
@include mdb-theme($my-theme);

Now add 2 buttons to page:

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-outline-primary">Primary Button</button>

NOTE: primary button is purple, but click on it and the ripple effect is blue. Also the outline button is purple but click on it and the outline changes to blue.

How to properly apply primary and secondary colors so that all shades are applied as per material ui spec?

Kamila Pieńkowska staff answered 8 months ago

Unfortunately, some values do not change with theme change and must be changed with CSS variables. We are working on upgraded theming.

waterandwind priority commented 1 month ago

It would be awesome if it would be applied also to the shades.

Kamila Pieńkowska staff commented 1 month ago

We introduced more developed theming system in version 7.0.0 A lot of previous request were taken into consideration. I advice you to look into that.

Here is documentation page about new theming:

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.4.2
  • Device: Windows
  • Browser: Chrome
  • OS: Win 11
  • Provided sample code: No
  • Provided link: No