diff --git a/assets/scss/partials/base.scss b/assets/scss/partials/base.scss
index 42e460e..e7aefe6 100644
--- a/assets/scss/partials/base.scss
+++ b/assets/scss/partials/base.scss
@@ -15,3 +15,24 @@ body {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
+
+/* scrollbar styles for Firefox */
+* {
+    scrollbar-width: auto;
+    scrollbar-color: var(--scrollbar-thumb) transparent;
+}
+/**/
+
+/* scrollbar styles for Chromium */
+::-webkit-scrollbar {
+    height: auto;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb);
+}
+
+::-webkit-scrollbar-track {
+    background-color: transparent;
+}
+/**/
diff --git a/assets/scss/partials/layout/list.scss b/assets/scss/partials/layout/list.scss
index f9e7b6a..1a0e346 100644
--- a/assets/scss/partials/layout/list.scss
+++ b/assets/scss/partials/layout/list.scss
@@ -52,24 +52,6 @@
     margin-bottom: var(--section-separation);
     overflow-x: auto;
 
-    /* scrollbar styles for Firefox */
-    scrollbar-width: auto;
-    scrollbar-color: var(--scrollbar-thumb) transparent;
-
-    /* scrollbar styles for Chromium */
-    &::-webkit-scrollbar {
-        height: auto;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background-color: var(--scrollbar-thumb);
-    }
-
-    &::-webkit-scrollbar-track {
-        background-color: transparent;
-    }
-    /**/
-
     .article-list--tile {
         display: flex;
         padding-bottom: 15px;
diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss
index d1ad08d..c75eb5c 100644
--- a/assets/scss/variables.scss
+++ b/assets/scss/variables.scss
@@ -39,7 +39,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
     --scrollbar-thumb: hsl(0, 0%, 85%);
     --scrollbar-track: var(--body-background);
 
-    [data-scheme="dark"] {
+    &[data-scheme="dark"] {
         --body-background: #303030;
         --accent-color: #ecf0f1;
         --accent-color-darker: #bdc3c7;
@@ -91,7 +91,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
         --small-card-padding: 25px;
     }
 
-    [data-scheme="dark"] {
+    &[data-scheme="dark"] {
         --card-background: #424242;
         --card-background-selected: rgba(255, 255, 255, 0.16);
         --card-text-color-main: rgba(255, 255, 255, 0.9);
@@ -137,7 +137,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
     --table-border-color: #dadada;
     --tr-even-background-color: #efefee;
 
-    [data-scheme="dark"] {
+    &[data-scheme="dark"] {
         --code-background-color: #272822;
         --code-text-color: rgba(255, 255, 255, 0.9);
 
diff --git a/assets/ts/colorScheme.ts b/assets/ts/colorScheme.ts
index 7c4ff77..acb33ee 100644
--- a/assets/ts/colorScheme.ts
+++ b/assets/ts/colorScheme.ts
@@ -9,7 +9,7 @@ class StackColorScheme {
         this.bindMatchMedia();
         this.currentScheme = this.getSavedScheme();
 
-        this.dispatchEvent(document.body.dataset.scheme as colorScheme);
+        this.dispatchEvent(document.documentElement.dataset.scheme as colorScheme);
 
         if (toggleEl)
             this.bindClick(toggleEl);
@@ -56,13 +56,13 @@ class StackColorScheme {
 
     private setBodyClass() {
         if (this.isDark()) {
-            document.body.dataset.scheme = 'dark';
+            document.documentElement.dataset.scheme = 'dark';
         }
         else {
-            document.body.dataset.scheme = 'light';
+            document.documentElement.dataset.scheme = 'light';
         }
 
-        this.dispatchEvent(document.body.dataset.scheme as colorScheme);
+        this.dispatchEvent(document.documentElement.dataset.scheme as colorScheme);
     }
 
     private getSavedScheme(): colorScheme {
@@ -85,4 +85,4 @@ class StackColorScheme {
     }
 }
 
-export default StackColorScheme;
\ No newline at end of file
+export default StackColorScheme;
diff --git a/layouts/partials/comments/provider/remark42.html b/layouts/partials/comments/provider/remark42.html
index 9928825..97196c8 100644
--- a/layouts/partials/comments/provider/remark42.html
+++ b/layouts/partials/comments/provider/remark42.html
@@ -7,7 +7,7 @@
         components: ['embed'],
         url: "{{ $.Permalink }}",
         max_shown_comments: {{ default 15 .max_shown_comments }},
-        theme: document.body.dataset.scheme,
+        theme: document.documentElement.dataset.scheme,
         page_title: '{{ $.Title }}',
         locale: '{{ default "en" .locale }}',
         show_email_subscription: {{ default true .show_email_subscription }}
@@ -26,4 +26,4 @@
         window.REMARK42.changeTheme(e.detail);
     })
 </script>
-{{- end -}}
\ No newline at end of file
+{{- end -}}
diff --git a/layouts/partials/comments/provider/utterances.html b/layouts/partials/comments/provider/utterances.html
index a0c07a6..97a0a3a 100644
--- a/layouts/partials/comments/provider/utterances.html
+++ b/layouts/partials/comments/provider/utterances.html
@@ -31,10 +31,10 @@
 
     addEventListener('message', event => {
         if (event.origin !== 'https://utteranc.es') return;
-        setUtterancesTheme(document.body.dataset.scheme)
+        setUtterancesTheme(document.documentElement.dataset.scheme)
     });
 
     window.addEventListener('onColorSchemeChange', (e) => {
         setUtterancesTheme(e.detail)
     })
-</script>
\ No newline at end of file
+</script>
diff --git a/layouts/partials/comments/provider/waline.html b/layouts/partials/comments/provider/waline.html
index a983eb0..3b6eee8 100644
--- a/layouts/partials/comments/provider/waline.html
+++ b/layouts/partials/comments/provider/waline.html
@@ -13,7 +13,7 @@
 </style>
 
 {{- with .Site.Params.comments.waline -}}
-{{- $config := dict "el" "#waline" "dark" `body[data-scheme="dark"]` -}}
+{{- $config := dict "el" "#waline" "dark" `html[data-scheme="dark"]` -}}
 {{- $replaceKeys := dict "serverurl" "serverURL" "requiredmeta" "requiredMeta" "wordlimit" "wordLimit" "pagesize" "pageSize" "avatarcdn" "avatarCDN" "avatarforce" "avatarForce" -}}
 
 {{- range $key, $val := . -}}
diff --git a/layouts/partials/head/colorScheme.html b/layouts/partials/head/colorScheme.html
index 560d6c0..42f4dd8 100644
--- a/layouts/partials/head/colorScheme.html
+++ b/layouts/partials/head/colorScheme.html
@@ -31,9 +31,9 @@
              * 1. If dark mode is set already (in local storage)
              * 2. Auto mode & prefere color scheme is dark
              */
-            document.body.dataset.scheme = 'dark';
+            document.documentElement.dataset.scheme = 'dark';
         } else {
-            document.body.dataset.scheme = 'light';
+            document.documentElement.dataset.scheme = 'light';
         }
     })();
-</script>
\ No newline at end of file
+</script>