Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
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 2 years ago
Bootstrap Metronic HTML
5 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)

W
WilinkNet 2 years 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 Author 2 years ago

Hi,

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

Regards.


user
Sean Author 2 years 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 2 years 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 Author 2 years 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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(