From 1dd6a8e2e45c15cc889037726a5b812ef8bc49e4 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sun, 12 Jun 2022 20:18:31 +0200
Subject: [PATCH] Added proper color-schema to root element based on selected
 theme

---
 src/index.scss       | 1 +
 src/theme/theme.scss | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/src/index.scss b/src/index.scss
index f6f09ed3..f9cb0643 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -13,6 +13,7 @@
 
 :root {
   scroll-behavior: auto;
+  color-scheme: var(--color-scheme);
 }
 
 html,
diff --git a/src/theme/theme.scss b/src/theme/theme.scss
index aecf5243..7d797202 100644
--- a/src/theme/theme.scss
+++ b/src/theme/theme.scss
@@ -31,6 +31,7 @@ $darkBorderInputColor: $darkBorderColor;
 $darkTableHighlightColor: $darkBorderColor;
 
 html:not([data-theme='dark']) {
+  --color-scheme: initial;
   --primary-color: #{$lightPrimaryColor};
   --primary-color-alfa: #{$lightPrimaryColorAlfa};
   --secondary-color: #{$lightSecondaryColor};
@@ -48,6 +49,7 @@ html:not([data-theme='dark']) {
 }
 
 html[data-theme='dark'] {
+  --color-scheme: dark;
   --primary-color: #{$darkPrimaryColor};
   --primary-color-alfa: #{$darkPrimaryColorAlfa};
   --secondary-color: #{$darkSecondaryColor};