Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Metronic 8.2.0 Laravel


Hello Team!

How can I add all indigo color variations to use globally?


Thanks in advanced!


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


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;


Then you can use this color for components such as button, texts, etc following the bootstrap standards such as btn-accent, text-accent.

Regards.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(