Set appropriate value for `color-scheme` in dark mode

[romaricpascal]

Setting color-scheme: dark swaps the native UI elements (like the file input) to their dark styles, enabling better contrast.

We'll probably want to dig into the support of that property inside webviews. This may vary depending of the OS versions app are meant to support.

For example on the file input:

	color-scheme: normal	color-scheme: dark
Chrome
Firefox
Safari

[github-actions[bot]]

:clipboard: Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	110.52 KiB
dist/govuk-frontend-development.min.js	42.21 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	87.2 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	81.94 KiB
packages/govuk-frontend/dist/govuk/all.mjs	4.17 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	110.51 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	42.2 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.55 KiB

Modules

File	Size (bundled)	Size (minified)
all.mjs	77.67 KiB	40.18 KiB
accordion.mjs	22.71 KiB	12.85 KiB
button.mjs	5.98 KiB	2.69 KiB
character-count.mjs	22.4 KiB	9.92 KiB
checkboxes.mjs	5.83 KiB	2.83 KiB
error-summary.mjs	7.89 KiB	3.46 KiB
exit-this-page.mjs	17.1 KiB	9.26 KiB
header.mjs	4.46 KiB	2.6 KiB
notification-banner.mjs	6.26 KiB	2.62 KiB
password-input.mjs	15.15 KiB	7.25 KiB
radios.mjs	4.83 KiB	2.38 KiB
skip-link.mjs	4.39 KiB	2.18 KiB
tabs.mjs	10.13 KiB	6.11 KiB

View stats and visualisations on the review app

---

Action run for 22990d499fc98cb92b244e5a4865f80e42e09e8b

[github-actions[bot]]

Stylesheets changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index 6e3339efc..3fe827c4d 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -1024,6 +1024,7 @@

 @media screen {
     .govuk-template--dark {
+        color-scheme: dark;
         --govuk-canvas-background-colour: #333;
         --govuk-body-background-colour: #222;
         --govuk-text-colour: #fff;

---

Action run for 22990d499fc98cb92b244e5a4865f80e42e09e8b

[github-actions[bot]]

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/objects/_template.scss b/packages/govuk-frontend/dist/govuk/objects/_template.scss
index da7fcc4e7..44f2c5c75 100644
--- a/packages/govuk-frontend/dist/govuk/objects/_template.scss
+++ b/packages/govuk-frontend/dist/govuk/objects/_template.scss
@@ -52,6 +52,8 @@

   @include govuk-media-query($media-type: screen) {
     .govuk-template--dark {
+      color-scheme: dark;
+
       --govuk-canvas-background-colour: #333;
       --govuk-body-background-colour: #222;
       --govuk-text-colour: #fff;

---

Action run for 22990d499fc98cb92b244e5a4865f80e42e09e8b

[github-actions[bot]]

Uh oh! @romaricpascal, the image you shared is missing helpful alt text. Check your pull request body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.