alphagov / govuk-design-system-backlog

GOV.UK Design System Community Backlog
31 stars 2 forks source link

Dark Mode #177

Open charlesrt opened 5 years ago

charlesrt commented 5 years ago

What

GOV.UK needs a Dark Mode theme.

Why

I have written about why Dark Mode should be an inclusive design consideration. 2018: The Dark (Mode) Web Rises 2017: Apple Need a Dark Mode 2016: Molly Watt

Anything else

Some of the suggestions I've poked at in the past have always come with added complications. For example, how do we include an accessibility toolbar in a way that benefits the users who need it without getting in the way of those who don't.

The preference has always been to allow users to change website themes based on their own preferences using third-party and browser tools. This has always left a gap on mobile devices and often requires extra digital skill.

Safari Technology Preview has recently added a CSS media query prefers-color-scheme which can detect the system-level preference in MacOS Mojave of a light or dark theme. You can now easily write CSS custom to both and the user only has to declare a preference once to affect all websites (providing them adopt it).

Adoption and sharing of this by big websites (GOV.UK) will help spread awareness and prompt other platforms to add their own system-level preferences.

Check out a prototype: https://govuk-dark-mode.herokuapp.com. You'll need Safari Technology Preview and MacOS Mojave at time of raising this issue.