CSS 41 💻 prefers-color scheme and prefers-contrast media features

a - prefers-color-scheme media feature
prefers-color-scheme media feature detects the user's preferred color scheme  light or dark
It is useful for creating for accessible and personalized experience across different devices
values: light → user prefers light theme or has not expressed a preference
dark → user prefers a dark theme
@media (prefers-color-scheme: dark) { } → applies styles for dark preference
@media (prefers-color-scheme: light) { } → applies styles for light preference

b - prefers-contrast media feature
prefers-contrast media feature detects the user's preferred contrast level
This is useful for accessibility ensuring that content is legible regarding system's color scheme or brightness settings
values: no-preference → no user preference
more → user's preference is a higher level of contrast
less → user's preference is a lower level of contrast
custom → user uses a specific set of colors and contrast
@media (prefers-contrast: more) { } → applies styles for more contrast preference
@media (prefers-contrast: less) { } → applies styles for less contrast preference