From e92007530a5db8c3d1b1633cc0f26e5d8d9d8d76 Mon Sep 17 00:00:00 2001 From: Romaric Pascal Date: Fri, 5 Apr 2024 14:55:12 +0100 Subject: [PATCH] Condition variables for dark mode to support of color-scheme This ensures that native controls like file inputs will have proper text contrast, as some browsers will change the text of the button based on the colour set on the input, resulting in a white on light grey --- .../govuk-frontend/src/govuk/core/_theme.scss | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/core/_theme.scss b/packages/govuk-frontend/src/govuk/core/_theme.scss index 4be1efdf92..b3df249217 100644 --- a/packages/govuk-frontend/src/govuk/core/_theme.scss +++ b/packages/govuk-frontend/src/govuk/core/_theme.scss @@ -25,16 +25,18 @@ $govuk-theme-from-system: true !default; } @mixin _govuk-theme-dark() { - color-scheme: dark; + @supports (color-scheme: dark) { + color-scheme: dark; - --govuk-canvas-background-colour: #333333; - --govuk-body-background-colour: #222222; - --govuk-text-colour: #ffffff; - --govuk-secondary-text-colour: #cccccc; - --govuk-link-colour: #add8e6; - --govuk-link-visited-colour: #ffb6c1; - --govuk-link-hover-colour: #00ffff; - --govuk-link-active-colour: #ffffff; + --govuk-canvas-background-colour: #333333; + --govuk-body-background-colour: #222222; + --govuk-text-colour: #ffffff; + --govuk-secondary-text-colour: #cccccc; + --govuk-link-colour: #add8e6; + --govuk-link-visited-colour: #ffb6c1; + --govuk-link-hover-colour: #00ffff; + --govuk-link-active-colour: #ffffff; + } } @include govuk-exports("govuk/core/theme") {