📚 Documentation: respect user preferences for colour scheme.

[GrahamTheDevRel]

Issue

Light mode does not honour system settings. It should automatically switch the site to light mode on first visit if the person has expressed a preference for light mode.

Note: It is important that if they set a preference within the application itself that this is honoured over the preference set at system level.

For clarity:

• first land on site, check system preference and adjust accordingly
• If theme switcher dropdown is used to change theme, honour this instead (store preference in cookie / localhost etc.)

Why it matters

Some people find dark themes distracting / harder to read. It is also a good User Experience (UX) for those who have set a user preference to have it honoured.

Suggested fix

Use JavaScript to check for the prefers-color-scheme: light media query on first load and assuming no cookie / local storage value has been set to indicate a local preference, set the colour scheme appropriately.

If someone sets the colour scheme manually using the theme picker drop down then set preference cookie / local storage.

If cookie / local storage is set then honour that instead.

Additional Notes

Found on stream on 2023-10-25

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

[adityaoberai]

@TGlide a way to achieve this could also be to set the System preference as default instead of Dark or Light modes in the Docs, since the theme picker anyway features that option.

[TGlide]

@TGlide a way to achieve this could also be to set the System preference as default instead of Dark or Light modes in the Docs, since the theme picker anyway features that option.

Agreed, this should be a relatively simple issue to tackle.