Topic: Custom skins - split 'skin-text' into different use cases
Expected behavior
To be able to differentiate the text color based on where the text is used. On the default background vs on skinned elements.
Use case:
I am developing a dark theme. In general, I want a white(ish) text color. However, on the elements primary and secondary color background(already set in the skin), I want black(ish) color to pass WCAG AA(A) contrast requirements. Right now it is all or nothing.
Actual behavior
There is only one variable that changes the text color pretty much everywhere.
Hi,
If you want to change the color of all elements inside your skinned elements you can always use custom style inside _custom-styles.scss and compile it into your project with either gulp or webpack. Inside your custom styles you can use e.g.:
.black-skin .btn-primary {
color: black !important;
}
If you want to change the color for specific elements only you can use one of text color classes on those elements: https://mdbootstrap.com/docs/jquery/css/text-color/.
Regards, Marcin
patrickkusebauch commented 4 years ago
And this is what I had to do to accomplish it. But it means that I have to go through the whole MDB SCSS files and look for all the places where you are skinning the background. It would be great if MDB just added the 'color' inside the SCSS files and allowed to change the color dynamically.
Marcin Luczak staff commented 4 years ago
Thank you for your statement. Unfortunately creating only one selector e.g. for color would have an impact on all elements, whether they use skins or not. Thanks to CSS specificity the solution I gave above allows you to customize your skins without having an impact on other elements. You can also create your own custom skin https://mdbootstrap.com/docs/jquery/css/skins/#custom for which you can change the color of every part of the skin.
Regards, Marcin
patrickkusebauch commented 4 years ago
Your comment does not make sense. It is actually pointing out the problem I am describing. Custom skins have 10 variables for setting the background color, but only one variable for setting text color on that background. This is extremely disproportionate. All I am looking for is adding at least one more variable. Because on 99.9% of the cases, you only have pretty much 3 background colors
- Default color (maybe different shades like on this page about 3 different shades of white)
- Primary color
- Secondary color
The skin should be able to provide different text colors for at least all of those. At worst differenciate between Default and Primary/Secondary.
Marcin Luczak staff commented 4 years ago
Unfortunately, there is no such solution at the moment. We provide the possibility to customize the most common elements which have an impact on the overall view of the layout. All other elements can be customized in a way I've shown in my previous comment or by using our classes changing colors, e.g.: https://mdbootstrap.com/docs/jquery/css/text-color/ https://mdbootstrap.com/docs/jquery/css/colors/.
However, as it seems valuable functionality to have I've done a proper feature request for creating variables you mentioned. The team shall decide when to add that feature.
Regards, Marcin
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.19.2
- Device: Any
- Browser: Any
- OS: Any
- Provided sample code: No
- Provided link: No