Skip to content

Commit

Permalink
Condition variables for dark mode to support of color-scheme
Browse files Browse the repository at this point in the history
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
  • Loading branch information
romaricpascal committed Apr 8, 2024
1 parent 775a404 commit e920075
Showing 1 changed file with 11 additions and 9 deletions.
20 changes: 11 additions & 9 deletions packages/govuk-frontend/src/govuk/core/_theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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") {
Expand Down

0 comments on commit e920075

Please sign in to comment.