From e8032a0c2a4aaeef27e1c311195e32c3170a9e46 Mon Sep 17 00:00:00 2001
From: Valters Jansons <sigv@users.noreply.github.com>
Date: Tue, 25 Jul 2023 02:09:32 +0300
Subject: [PATCH] Add theme variable to specify `color-scheme` for `:root`
 (#1280)

Previously, the color scheme information was not passed on to the
browser. This could result in scrollbars being light, when the dark
theme is in use.

Now, `:root { color-scheme: $color-scheme; }` is specified.
This will ensure the color theme is enforced.

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
---
 _sass/base.scss                | 4 ++++
 _sass/color_schemes/dark.scss  | 1 +
 _sass/color_schemes/light.scss | 1 +
 3 files changed, 6 insertions(+)

diff --git a/_sass/base.scss b/_sass/base.scss
index f02880c..0068d71 100644
--- a/_sass/base.scss
+++ b/_sass/base.scss
@@ -1,6 +1,10 @@
 // Base element style overrides
 // stylelint-disable selector-no-type, selector-max-type, selector-max-specificity, selector-max-id
 
+:root {
+  color-scheme: $color-scheme;
+}
+
 * {
   box-sizing: border-box;
 }
diff --git a/_sass/color_schemes/dark.scss b/_sass/color_schemes/dark.scss
index 0e444b7..6d0999b 100644
--- a/_sass/color_schemes/dark.scss
+++ b/_sass/color_schemes/dark.scss
@@ -1,3 +1,4 @@
+$color-scheme: dark;
 $body-background-color: $grey-dk-300;
 $body-heading-color: $grey-lt-000;
 $body-text-color: $grey-lt-300;
diff --git a/_sass/color_schemes/light.scss b/_sass/color_schemes/light.scss
index 64bbd3a..799e9c6 100644
--- a/_sass/color_schemes/light.scss
+++ b/_sass/color_schemes/light.scss
@@ -1,3 +1,4 @@
+$color-scheme: light !default;
 $body-background-color: $white !default;
 $body-heading-color: $grey-dk-300 !default;
 $body-text-color: $grey-dk-100 !default;