Enhance Font Contrast for Saffron Color Card Based on Light/Dark Mode Preference #5941 #5970
Conversation
Signed-off-by: rajasurya-rjs <[email protected]>
rajasurya-rjs
force-pushed
the
Saffron_color_#5941
branch
from
891d696
to
2beff79
Compare
|
🚀 Preview for commit 2beff79 at: https://66fec9f605f377d417f5cf8a--layer5.netlify.app |
|
is there any thing which need to change ? |
|
@rajasurya-rjs Thank you for your contribution! Please add it as an agenda item to the meeting minutes. |
|
🚀 Preview for commit 7fca3df at: https://6704e762bad915e0d9073900--layer5.netlify.app |
|
is there any thing whether i need to add? |
| @@ -88,7 +88,9 @@ const Layer5Brand = () => { | |||
| <Row className="color-code-wrapper"> | |||
| <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" /> | |||
| <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" /> | |||
| <ColorBox name="Saffron" R="235" G="192" B="23" colorCode="#EBC017" /> | |||
| <div className="blond-color-box"> | |||
There was a problem hiding this comment.
why are we using the class of next color box ?
|
@rajasurya-rjs please take a look the ask in the issue's description: Note Enhance the font color used to be a theme-based reference based on the visitor's current light or dark mode settings. currently, the text has same color in both the modes: |
Description
This PR addresses the low contrast issue with the "Saffron" color box by dynamically adjusting the font color based on the user's light or dark mode settings. The text color is now set to black for better readability when the "Saffron" background is used, regardless of the theme. The solution utilizes CSS media queries with prefers-color-scheme to ensure the appropriate font color is applied in both light and dark modes.
This PR fixes #5941
