Topic: custom_colors
Trying to set custom colors in _custom-colors.scss which works in a sence. However when I try to use it for a tab it doesnt see it.if I use this
<mdb-tabs
@activeTab="getActiveTabIndex"
color="red"
:active="0"
tabs
card
:links="tabs"
>
The rendered code shows "tabs-red" and it works and displays red. However if I set a new custom color say "rednew" and adjust the mdb-tabs color
$rednew-lighten-5: #ffebee !default;
$rednew-lighten-4: #ffcdd2 !default;
$rednew-lighten-3: #ef9a9a !default;
$rednew-lighten-2: #e57373 !default;
$rednew-lighten-1: #ef5350 !default;
$rednew-base: #f44336 !default;
$rednew-darken-1: #e53935 !default;
$rednew-darken-2: #d32f2f !default;
$rednew-darken-3: #c62828 !default;
$rednew-darken-4: #b71c1c !default;
$rednew-accent-1: #ff8a80 !default;
$rednew-accent-2: #ff5252 !default;
$rednew-accent-3: #ff1744 !default;
$rednew-accent-4: #d50000 !default;
$mdb-colors-1: () !default;
$mdb-colors-1: map-merge(
(
"rednew": (
"lighten-5": $rednew-lighten-5,
"lighten-4": $rednew-lighten-4,
"lighten-3": $rednew-lighten-3,
"lighten-2": $rednew-lighten-2,
"lighten-1": $rednew-lighten-1,
"base": $rednew-base,
"darken-1": $rednew-darken-1,
"darken-2": $rednew-darken-2,
"darken-3": $rednew-darken-3,
"darken-4": $rednew-darken-4,
"accent-1": $rednew-accent-1,
"accent-2": $rednew-accent-2,
"accent-3": $rednew-accent-3,
"accent-4": $rednew-accent-4
)
),
$mdb-colors-1
);
the rendered code class will show "tabs-rednew" which doesnt exist.
If I change the name to tabs-rednew then it will show the new color. but I feel that I have just targeted my custom color to just tabs at that point.
Is there a way to create this custom color and have it used like the default set colors??
Magdalena Dembna staff premium answered 5 years ago
That's because components such as tabs have their own classes which are built based on the colour prop value tabs-
prefix. If you have chosen option with scss loaded into your project (https://mdbootstrap.com/docs/vue/getting-started/quick-start/#scss) you can try changing one of the existing variables (f.e. default
) which should update the colour in all related classes.
Kind regards,
Magdalena
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 Vue
- MDB Version: 6.1.1
- Device: desktop
- Browser: All
- OS: Any
- Provided sample code: No
- Provided link: No