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

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!


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


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



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.



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.


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