Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$
Light
Dark
System
Ask  Question

Light secondary text is invisible in the respective background


Hi,

In Metronic HTML v8.2.1, the LIGHT SECONDARY text is invisible in some cases below

- Badge: Light style
<span class="badge badge-light-secondary">New</span>
https://preview.keenthemes.com/html/metronic/docs/base/badges#light-style

- Badge: Outline style
<span class="badge badge-circle badge-outline badge-secondary">5</span>
https://preview.keenthemes.com/html/metronic/docs/base/badges#outline-badge

- Background: Light background colors
<div class="bg-light-secondary text-secondary"></div>
https://preview.keenthemes.com/html/metronic/docs/base/helpers/background#light-bg-colors

In fact, I can change to use DARK color instead. However, it is absolutely an issue to fix. Besides, I am using badges as state indicators so it is really helpful if I can use SECONDARY as an option which gives me more choices.

Regards.


W
WilinkNet 10 months ago
HTML Metronic Bootstrap
5 Answers
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)

W
WilinkNet 10 months ago

Hi Sean,
I want to complement this issue. It seems like a few of corresponding text colors go wrong in v8.2.1. Please take a look before the next update goes live. In my opinion, they should be reflective colors compared to the background colors

text-active-inverse-...
https://preview.keenthemes.com/html/metronic/docs/base/helpers/background#active-bg-colors

text-hover-inverse-
https://preview.keenthemes.com/html/metronic/docs/base/helpers/background#hover-bg-colors

Thanks


user
Sean Author10 months ago

Hi,

Thanks for the feedback. Sure, we will double check those parts as well.

Regards.


user
Sean Author10 months ago

Hi,

Thank you for your feedback on this.

Please note that in the downloaded Metronic package this issue should be encountered. We will redeploy the Metronic docs pages and fix these issues.

Regards.


W
WilinkNet 10 months ago

Hi,

Thanks Sean. I see you updated the document and fixed 2/3 bugs I mentioned. However, the last one is still there.

- Background: Light background colors
https://preview.keenthemes.com/html/metronic/docs/base/helpers/background#light-bg-colors

The root cause is the color of bg-light-secondary and that in text-secondary are the same. Sorry for bothering you but I have to make sure that everything is ok before deciding to upgrade to the new version.

Regards.


user
Sean Author10 months ago

Hi,

Thank you for the feedback. Noted, we will fully fix it in the next update.
If you need a fix urgently please let us know and we will provide you a quick solution for the time being.

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