The New Way to Build! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Learn More
Light
Dark
System
Ask  Question

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


user
Tim K 3 years ago
Metronic HTML
3 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

user
Sean Author 3 years ago

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.


user
Tim K 3 years ago

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


user
Sean Author 3 years ago

Hi,

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

Regards


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(