custom_colors


Topic: custom_colors

Devinec premium asked 2 years ago

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 2 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


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • 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
Tags