Freecodecamp: Offline warning message is hard to read in dark mode

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

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:
https://github.com/freeCodeCamp/freeCodeCamp/blob/0c0611229e23e20000bd287736fa9dc36566f7b1/client/src/components/OfflineWarning/OfflineWarning.js#L28

and remove the background from here:
https://github.com/freeCodeCamp/freeCodeCamp/blob/05535d1e56bca7456b69510fa724493edf5fa1ca/client/src/components/OfflineWarning/offline-warning.css#L6

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/

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

@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