Offline warning message is hard to read in dark mode

[huyenltnguyen]

To Reproduce
Steps to reproduce the behavior:

1. Go to /learn or /settings with the theme set to dark
2. Turn off internet connection and wait

Actual behavior
The offline warning message shows up, but the text is quite hard to read.

Screenshots

[ShaunSHamilton]

WCAG does say the contrast is only 1.41: https://contrastchecker.com/?c=f5f6f7&b=add8e6

[ahmaxed]

The notification background is hardcoded and the font color is being handled based on theme.

We have let bootstrap handle the styling for the notifications since they handle the font color and the background and look well on both themes.

So doing the followings should do the trick.

Add alert-info as a class here:

freeCodeCamp/client/src/components/OfflineWarning/OfflineWarning.js

Line 28 in 0c06112

<div className='offline-warning'>

and remove the background from here:

freeCodeCamp/client/src/components/OfflineWarning/offline-warning.css

Line 6 in 05535d1

background: lightblue;

[rammazzoti2000]

I think the best way is to implement luma-corrected calculations.
The first obvious implication of going with a luma-corrected approach is that the notification background color needs to switch to an RBG declaration for the backgrounds, calculate the luma from whatever method we choose, and use it on the foreground color declaration, which can (and will) still be HSL color.

I am saying this because this would allow the font color to switch based on the contrast of the notification background contrast from white to black and vice versa.

Source: https://css-tricks.com/switch-font-color-for-different-backgrounds-with-css/

[redshark25]

@ahmadabdolsaheb can I work on this? I might need help. please guide me.

[ahmaxed]

@rammazzoti2000, that is a cool trick. Thanks for sharing the link.

Since are planning to move off of bootstrap, we should consider luma-corrected calculations in how we implement our dark/light themes during the rewrite process.

Meanwhile, I think we could move forward with making the simple change that resolves this issue.

@redshark25, sure. Make sure you read this: https://contribute.freecodecamp.org/#/index?id=our-open-source-codebase