Metronic 8.1 + Bootstrap 5.2 + CSS Variables
Hey folks! Question for you:
Now that Bootstrap 5.2 is out and has much more extensive use of CSS Variables, what is the reasoning behind having KeenThemes CSS Variables that override those values, vs just setting the Bootstrap built-in ones wherever possible?
Thanks!
Replies (5)
Hey folks! I'm seeing the new version and how it's using Bootstrap 5.3 and the new variables. For the most part, it's great.
Can you help me understand why there are places in 8.2, like in Modals, where the CSS variables are applied to a .modal class and not the root?
Thanks!
Hi,
Those CSS variables applied to .modal class are from the original Bootstrap code. Metronic tries to use the global CSS variables applied to the root to make the global theme mode switch easier.
If you are referring to something else please provide with more details.
Regards.
Hey Sean! Thanks for getting back to me so quickly.
I'm actually referring to situations like this:
.text-primary {
color: var(--kt-text-primary) !important;
}
But yes, inside the light vs dark theming, there are also a bunch of places where you've introduced your own variables and override the in later classes, where simply setting the built-in values appears as if it would have been sufficient.
It adds a significant amount of bloat to the CSS file that doesn't seem necessary.
Hi Robert,
No problem at all. Good point. We will revise that part and try to reduce such code duplications. Appreciate your suggestion.
Regards.
Hi,
Thanks for your feedback.
We did override the Bootstrap css variables to support both light/dark mode within the same css file. Bootstrap 5.3 should come with dark mode support and then we will switch back to the Bootstrap's native dark mode support. Till then, we provide our own dark mode solution.
Regards
