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