Set color theme outsite of CSS file?

HI there,

would it be possible that primary and secondary color theme for the template is "pulled" from an outside source or config file instead of the css file?

The idea is that a user can pick and choose some colors programmatically in the application to adjust a certain page more to their CI needs.

In general I am wondering how I can change the secondary and primary colors quickly to check certain color schemes for myself....

Best regards

Tim

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 (3)

Hi,

You can override the primary and secondary color options via CSS variables as shown below:

<body style ="--kt-primary: #000000; --kt-primary-active: #000000; --kt-primary-light: #000000; --kt-primary-inverse: #000000;">
...
</body>

Thus you can dynamically change the entire CSS for all components globally. The same u can apply to the secondary theme color. Please note each color requires 4 variants(default, active, light, and inverse) in order to style the components properly.

Regards.

That is exactly what I was looking for. Thank you.

I tried it just now, and added the CSS variables to my body tag, but it seems the colors are not picked up. The design stays the same.

Is it possible that I am missing a piece of JS, that is responsible for getting the colors from the body tag?

Thanks a lot

Tim

Hi,

Are you using latest Metronic v8.1.1 version ? This feature is supported only in the latest version.

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  :(