website(docs): set color-scheme on the root element (#3721)

rome · Nov 14, 2022 · 501dbe9 · 501dbe9
1 parent de7b7a0
commit 501dbe9
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 9 deletions.
diff --git 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
@@ -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;
 		}
 	}