From 501dbe9086ae63ea75cb0af593b0094b7170d6f3 Mon Sep 17 00:00:00 2001
From: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
Date: Mon, 14 Nov 2022 14:24:27 +0000
Subject: [PATCH] website(docs): set `color-scheme` on the root element (#3721)

---
 website/src/styles/_global.scss | 11 ++++-------
 website/src/styles/_mixins.scss |  4 ++--
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/website/src/styles/_global.scss b/website/src/styles/_global.scss
index 4588e5f74c7..6a933d8a330 100644
--- a/website/src/styles/_global.scss
+++ b/website/src/styles/_global.scss
@@ -138,18 +138,15 @@ a, .link {
 	}
 }
 
-html {
+:root {
 	scroll-padding-top: 80px;
+	color-scheme: light only;
 
 	@include mobile-only {
 		scroll-padding-top: 64px;
 	}
 }
 
-input {
-	color-scheme: light;
-
-	@include dark-mode {
-		color-scheme: dark;
-	}
+@include dark-mode {
+	color-scheme: dark only;
 }
diff --git a/website/src/styles/_mixins.scss b/website/src/styles/_mixins.scss
index d2018f5edb6..acfdffc1958 100644
--- a/website/src/styles/_mixins.scss
+++ b/website/src/styles/_mixins.scss
@@ -57,12 +57,12 @@
 }
 
 @mixin dark-mode {
-	@at-root html[data-theme='dark'] #{if(&, "&", "")} {
+	@at-root :root[data-theme='dark'] #{if(&, "&", "")} {
 		@content;
 	}
 
 	@media (prefers-color-scheme: dark) {
-		@at-root html[data-theme='auto'] #{if(&, "&", "")} {
+		@at-root :root[data-theme='auto'] #{if(&, "&", "")} {
 			@content;
 		}
 	}