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>