Topic: Primary theme change follwing tutorial doesn't change focus colors correctly.
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/mdb.pro.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?
Unfortunately, some values do not change with theme change and must be changed with CSS variables. We are working on upgraded theming.
waterandwind pro premium priority commented 7 months ago
It would be awesome if it would be applied also to the shades.
Kamila Pieńkowska staff commented 7 months 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: https://mdbootstrap.com/docs/standard/content-styles/theme/
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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