govuk-design-system-backlog
govuk-design-system-backlog copied to clipboard
alphagov
Dark Mode
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.
Thanks for putting this together it's pretty exciting to see the progress 👍
We currently have the following documented for what we do to try and help users who need to change their colours:
We aim to support users who adjust or override the colours of websites they visit. We test this by changing colours in Firefox, by enabling 'High Contrast' mode in Windows and by using the High Contrast plugin for Chrome.
We have also blogged about this here:
https://accessibility.blog.gov.uk/2018/08/01/supporting-users-who-change-colours-on-gov-uk/
It'd be also worth considering the dark mode for Windows which my assumption is has a much higher use than this, at the same time. There's a related bug for that here: https://github.com/alphagov/govuk-frontend/issues/937
The biggest risk I see from Apple's approach is that if we implement this feature it'll be inconsistently applied across GOV.UK (as most of GOV.UK will not have an up-to-date version of the GOV.UK Design System). Since other dark modes force interfaces to be dark, even if the website has not 'opted-in'
We need to decide if having Apple's dark mode work inconsistently, out weighs that con.
Thanks, Nick. The work done to make GOV.UK accessible to users who change their colours, contrast, etc is great 👍
I’m excited about ‘prefers-color-scheme’ as it lets us control the way this affects the content on GOV.UK, and because the changes would be made through CSS there shouldn’t be any issues like when colours are overridden by plugins, etc (to be clear: I don’t intend that we stop work to make it work for users who override in this way at that might always be a thing).
It’s worth saying that this isn’t an Apple dark mode thing. At the moment this only works in Safari Tech Preview if you are running MacOS Mojave but it’s part of a suite of ‘prefers-‘ media queries that we should expect to come to all browsers soon. I assume that once implemented in a browser available on Windows it will automatically honour a system-level Dark Mode preference set on Windows.
It’s my assumption that this be a wildly implemented on all major platforms and we can be dark-mode-ready, if you like.
I reckon this is an interesting piece of work because we’re talking about setting a preference for an appearance theme rather than overridden and declare precise colours. It’ll involve collaborative work in the community to create a Dark theme and decide what should and shouldn’t change along with adjustments to our colour palette and perhaps even typography as reading experience on dark backgrounds is slightly different.
All of GOV.UK not running the latest version of the Design System is a problem (some satire: a few years ago we spent a lot of effort to replace hundreds of different government websites with one, (feels) more like maintaining hundreds of different government websites on one domain that all look the same but under the hood are individual).
Embedding this as part of the Design System as a considered theme is definitely a must. For older parts of the website they may need manual adjustment. It only took me an hour to hack the prototype kit style sheet to achieve an indicative appearance. It shouldn’t take more than that for a team to do the same for their service. Getting them to do so and release it however may be a policatal challenge.
Lots to think about 🤔
Code used to hack the Prototype Kit for http://govuk-dark-mode.herokuapp.com
@media screen and (prefers-color-scheme: dark) {
body.govuk-template__body {
background-color: govuk-colour("black");
color: govuk-colour("white");
}
header.govuk-header, div.govuk-header__container {
border-bottom: 10px solid #1d70b8;
}
.app-related-items {
border-top: 10px solid #1d70b8;
}
h1, h2, h3, h4, h5, h6, .govuk-heading-xl, .govuk-heading-l, .govuk-heading-m, .govuk-heading-s, .govuk-heading-xs, p, .govuk-list {
color: govuk-colour("white") !important;
}
a:link {
color: #5694CA;
}
a:visited {
color: #DA3984;
}
a:hover {
color: lighten(#5694CA, 10%);
}
a:active {
color: $govuk-link-active-colour;
}
.govuk-back-link, .govuk-breadcrumbs__link {
color: govuk-colour("white") !important;
&:link,
&:visited,
&:hover,
&:active,
&:focus {
color: govuk-colour("white") !important;
}
}
.govuk-caption-xl {
color: govuk-colour("grey-2");
}
div.govuk-panel--confirmation {
background-color: #008F4C;
}
button.govuk-button {
background-color: #008F4C;
}
.js-step-title-text {
color: govuk-colour("white");
}
.app-step-nav-header {
background-color: govuk-colour("black");
}
}
Related Twitter UI dark mode: https://twitter.com/paulmsmith/status/1071454138301595649
The twitter thread commented above shows a screenshot where the Chrome app UI is still Light (presumably as it hasn’t been updated with the functionality) and that this could be confusing.
There is also the suggestion that people might want a Dark UI but Light content. It’s hard to know for sure what people say vs what they’d do. Presently, this isn’t even an option as the preference is declared singularly at system-level. Maybe Apple (and others) will include this sort of choice in the future and ‘prefers-color-scheme’ will take its value from the preference set for content. We need to focus on what’s within our gift.
When considering the implementation of this, we should prioritise the preference set by a user who needs to view content in Dark vs aesthetic preference.
Microsoft are planning on bringing dark mode support to Google Chrome.
https://www.theverge.com/2019/2/7/18215473/google-chrome-dark-mode-windows-macos-support
It would be interesting to consider an implementation of dark mode with CSS custom properties as it'd also allow easy dynamic theming for anyone for example people who use their own user-styles.
Could also make 'inverse' styles easier to implement.
:root {
--background-color: white;
--text-color: black;
}
@media screen and (prefers-color-scheme: dark) {
:root {
--background-color: black;
--text-color: white;
}
}
/* Inverse panel like seen in 'interruption cards' (https://github.com/alphagov/govuk-design-system-backlog/issues/27) */
.inverse {
--background-color: blue;
--text-color: white;
}
@media screen and (prefers-color-scheme: dark) {
.inverse {
--background-color: initial;
--text-color: initial;
}
}
https://jsbin.com/palafej/edit?html,css,output
We've seen in research people requesting a similar feature:
the (GOV.UK) background is very bright.. all that white… it’s quite a contrast
sometimes I want to have a black background and white text, especially when you read a lot of text
Wow, stat from (or at least via) Microsoft: High contrast themes are active on 4% of Windows machines. https://lists.w3.org/Archives/Public/www-archive/2019Feb/att-0000/CSSWG_F2F_High_Contrast.pdf … Seems to be some momentum building in the CSS Working Group.
/HT laura_carlson
https://twitter.com/alastc/status/1101113196079919104?s=17
I’m collecting developer feedback on 🌑Dark Mode☀️ on operating systems and potentially the web (
@media (prefers-color-scheme: dark) {…}anyone?) for the @GoogleChrome team.Your quick anonymous input on this form would be very appreciated: > https://goo.gl/forms/Qf0wNnc9CVSILq1k2 … 🙏
https://twitter.com/tomayac/status/1105598210750537728?s=17
System-Level Dark Mode coming to iOS13 — meaning a much greater user base with raised expectations using Safari on iPhone.
Chrome 76 release now provides support for dark mode https://developers.google.com/web/updates/2019/07/nic76#dark-mode
Would love to see this feature in the design system, especially now iOS and MacOS have dark mode available natively. I've also noticed an increasing number of websites starting to support this as well.
I think one of the less understood aspects of dark modes for me right now is defaults.
Do users that enable this system level want the website to be dark automatically?
If they don't should there be a way to turn this off and on?
If we need to allow people to turn it off and on, how would that interaction work?
If dark mode only works in some parts of GOV.UK is that a problem?
I think questions like this may need some prototyping and user testing to understand how it could work.
Yeah, 100% needs to be prototyped and user researched.
For me, there should be two levels, system-level and then app level. So macOS than the browser inherits the system preference unless the browser overrides it. Twitter does this well for there iOS app, but this is just Twitter and not everything.
This is still a fairly new feature but with the release of iOS 13 today I can see it being a user want more and more.
The OS-level setting is one thing. The much harder implementation is the site-level (with in-page toggle). How you'd implement that across gov.uk and maintain it as users switch between services, and even departments, in the course of a single journey is key.
We've heard from people with dyslexia that reading black text from a white background (on a page that uses GOV.UK template) is too painful for them. Some compared it to snow-blindness. They found reading the footer - grey text on grey background much easier.
User ticket received on 12/11/19: https://govuk.zendesk.com/agent/tickets/3850591
I am a work coach and have a customer who is dyslexic and struggles to see black on white. The website should be available in alternative/ high contrast format to assist customers like this.
At Companies House we've started looking at dark mode and are about to do some user research around it hopefully. We've adjusted the colours to meet tripple A contrast standards and have adjusted the letter spacing and line height to improve readability in dark mode. This is turned on through the system settings but we'll be looking at a toggle at the application level as well.
Copied from a message I posted to Slack:
We've been doing usability sessions this and last week with users with access needs. These are recruited uses we're calling surrogates - they're office workers, but not direct users of our service. Today's user really really wanted an accessibility widget on the service so she could adjust the service to her liking - specifically wanting to manually control changing to dark mode.
When Alistair was at GDS I know he and I talked about doing something like that on gov.uk - but I've not heard anything since. Anyone know if anything ever happened on it? It's all very well saying people can customise their browsers, but many won't know how to.
Accessibility widget aside, it feels like it would be good to support dark mode where users have expressed a preference for it.
Is there any movement on this? This issue has been raised by a user whilst we were doing research in to accessibility and I think, given how ubiquitous dark mode now is, it should be a standard feature in govuk-frontend.
Auto Dark Mode (Chrome)
The Google Chrome team are currently working on a new browser feature in Desktop and Android Chrome called "Auto Dark Mode".
Links
Context
It is currently only being rolled out as an origin trial, meaning it will only be available on websites who have opted in to test the feature.
Issue
On Wednesday 26th Jan 2022 the GOV.UK team received a report that GOV.UK looked "broken" when this feature was enabled and a discussion was had in the day's Frontend Community meeting. The user must have 'forced' Chrome into this mode using the chrome://flags settings and searching for "darken websites", so it is currently highly unlikely that any user will run into these issues.
But it does raise a number of questions:
- Whose job is it to "fix" these issues?
- Is this lead by the GOV.UK team or the Design System team?
- Should we even need (or try) to fix these issues, or should it be left up to the Chrome team and specification body to resolve?
- What accessibility issues will be raised if the colours are changed?
- How are these going to be "fixed" and then tested?
It also raises usability issues that are almost impossible to fix when a user moves across services. For example, if a user has "Dark Mode" auto enabled for "www.gov.uk" this setting won't be persistent across services (since cookies can't be shared between www.gov.uk and *.service.gov.uk). This also brings up the issue that since its application is algorithmic and decided via the browser, what happens if different services use different versions of GOV.UK Frontend (or even not use it at all)? It could be that the browser chooses different colours per service.
It's also worth mentioning that the feature comes with lots of options (see screenshot below). It is still unclear as to how (or if) this will be presented to a user, and will they be able to choose each of these options individually.
Options
Options we have at the moment:
Do nothing
Here we don't change anything for the moment and wait to see the results from the Origin trial. It could be that it simply isn't a feature that users want or need, and Chrome pulls the plug on the feature all together. So any work will be wasted time and effort.
Opt-out of Auto Dark Theme using a meta tag, CSS or per-element CSS
The Chrome team allows developers to opt out of the application of the Auto Dark Theme using the following meta tag added to a page <head>:
<meta name="color-scheme" content="only light">
It is also possible to do this via CSS, for everything, or per-element:
:root {
color-scheme: only light;
}
#my-element {
color-scheme: only light;
}
This gives a team the time to decide on the best option to select, and maybe even time to develop our own dark theme (which will override this feature entirely). The blog post even recommends writing your own dark theme:
We strongly recommend implementing your own curated dark theme instead, in order to respect the user's preference and keep those benefits
Recommendation
At the moment, I feel we should do nothing with "Auto Dark Mode" and wait to see if it is accepted by users. This is backed up by the fact that a small Twitter poll I ran show users don't even know it exists at the moment.
If it is that we start getting more reports of pages looking "broken" I'd recommend we consider using the meta tag or CSS to temporarily disable the browser algorithm and then get involved in providing this user feedback to the Google Chrome team via the link they have provided.
Ultimately, I think time would be better spent on developing our own "dark theme" than chasing bugs in a single browser's "auto implementation".
I did some digging into Chrome's Auto Dark Mode feature after we received a bug report from an end user that certain inputs were not visible with Auto Dark Mode enabled.
Interestingly, the way that it works on the desktop version of Chrome seems to have some significant differences to the Android version—in particular, there is no way for a website to opt out of it. https://github.com/alphagov/govuk-frontend/issues/2582
We're in the process of upgrading an internal service, including switching its UI from a bespoke design to the Design System. The old design supported a dark mode which was very popular with users, so we've been obliged to continue to support it in our new design too.
I think we started with charlesrt's comment above, and you can see our current SCSS. I wouldn't really advise anyone else use this: it only covers the components that we actually use, isn't suitably tested for public use, and uses extra customisation to integrate with our old UI.
Screenshot
I mostly wanted to highlight that:
- there's demand from our users
- some services are already creating rough implementations, so a centralised solution would be awesome
Thanks for your contribution / feedback @gregtyler, I'm curious about how you are measuring demand from users? Do you have user-testing results for example or a feedback component across pages? Any information on how you have captured this data would be fascinating to know. Thanks!
Both! It was something we heard about in user testing, but we rolled out some changes before we'd added our dark mode changes and so also were told through our feedback component (this makes it sound like we ignored the user testing, but I've oversimplified and we weren't that naughty!)
Hi, we've recently just completed a Firebreak project here at the Department for Business & Trade 'Investigating Dark Mode' and hoped the initial findings we'd discovered can be expanded upon and implemented in some form within the GOV.UK Design System?
In particular, some of the learnings could be used to create a dark theme for GOV.UK Design System akin to: https://m2.material.io/design/color/dark-theme.html
Additionally, as part of the project my colleague, Ieuan developed a simple yet powerful prototype which potentially would be worth demonstrating.
@Gramatter-DIT that prototype sounds interesting but I can't access it, I get this error:
You are not allowed to access this page You do not appear to be on a trusted network.
See the Digital Workspace page gain access to a trusted network for more information.
