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

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.

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