Topic: Custom theme: border colors issue
Expected behavior
Using e.g. ".border-danger", ".border-success", ".border-warning" classes should appear in correct colors when using a custom theme.
Actual behavior
When using a custom theme the border colors of the default classes (like ".border-warning") seems to be overwritten internally and is displayed in grey color.
Example (with active custom theme):
<div class="p-2 border border-warning">test 123</div>
The resulting border does currently NOT appear in border-warning color, but grey.
Resources (screenshots, code snippets etc.)
In chrome console we see:
_colors-theme.scss:18
.my-skin .border-top, .my-skin .border-right, .my-skin .border-bottom,
.my-skin .border-left, .my-skin .border { border-color: #e0e0e0
!important; }
_utilities.scss:67
.border-warning {
--mdb-border-opacity: 1;
border-color: rgba(var(--mdb-warning-rgb), var(--mdb-border-opacity)) !important;
}
The style in _colors-theme.scss line 18 obviously overwrites default .border-warning class in _utilities.scss line 67.
Can you help?
You should add new classes to overwrite the custom theme styles. For border color you can create such class for example and make sure to place it beneath this line:
@include mdb-theme($my-theme);
The class:
.border-warning {
border-color: $warning !important;
}
So the styles.scss file could look like this:
$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);
.border-warning {
border-color: $warning !important;
}
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 Angular
- MDB Version: MDB5 5.1.0
- Device: Lenovo Laptop
- Browser: Chrome latest
- OS: Windows 11
- Provided sample code: No
- Provided link: No