Hello Team!
How can I add all indigo color variations to use globally?
Thanks in advanced!
Hi,
In esources/_keenthemes/src/metronic/demo1/sass/components/_variables.scss
you can add a new theme color accent
:
// Accent colors
$accent: #F64E60 !default;
$accent-active: #EE2D41 !default;
$accent-light: #FFE2E5 !default;
$accent-inverse: $white !default;
// Contextual colors
$theme-colors: (
"accent": $accent,
"light": $light,
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"dark": $dark
) !default;
// Contextual active state colors
$theme-active-colors: (
"accent": $accent-active,
"primary": $primary-active,
"secondary": $secondary-active,
"light": $light-active,
"success": $success-active,
"info": $info-active,
"warning": $warning-active,
"danger": $danger-active,
"dark": $dark-active
) !default;
// Contextual inverse state colors
$theme-inverse-colors: (
"accent": $accent-inverse,
"primary": $primary-inverse,
"secondary": $secondary-inverse,
"light": $light-inverse,
"success": $success-inverse,
"info": $info-inverse,
"warning": $warning-inverse,
"danger": $danger-inverse,
"dark": $dark-inverse
) !default;
// Contextual light state colors
$theme-light-colors: (
"accent": $accent-light,
"primary": $primary-light,
"secondary": $secondary-light,
"success": $success-light,
"info": $info-light,
"warning": $warning-light,
"danger": $danger-light,
"dark": $dark-light
) !default;
// Text colors
$theme-text-colors: (
"accent": $accent,
"white": $white,
"primary": $primary,
"secondary": $secondary,
"light": $light,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"dark": $dark,
"muted": $text-muted,
"gray-100": $gray-100,
"gray-200": $gray-200,
"gray-300": $gray-300,
"gray-400": $gray-400,
"gray-500": $gray-500,
"gray-600": $gray-600,
"gray-700": $gray-700,
"gray-800": $gray-800,
"gray-900": $gray-900
) !default;
btn-accent
, text-accent
.