website(docs): set `color-scheme` on the root element
MODIFY
website/src/styles/_global.scss
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;
- }
+ color-scheme: dark only;
}

MODIFY
website/src/styles/_mixins.scss
website/src/styles/_mixins.scss
}
@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;
}
}

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