From e90adc47735b7d4515440d4fda628bc90e021818 Mon Sep 17 00:00:00 2001 From: k Date: Mon, 14 Jun 2021 17:04:06 -0500 Subject: [PATCH] change document.body.dataset.scheme to document.documentElement.dataset.scheme When the dark mode is on or when the light mode is on, the [data-scheme="light"] or [data-scheme="dark"], respectively, will be placed in the tag. Allowing us to access the dark and light color schemes from the to change the vertical scrollbar styles according to the current color scheme. --- assets/ts/colorScheme.ts | 10 +++++----- layouts/partials/comments/provider/remark42.html | 4 ++-- layouts/partials/comments/provider/utterances.html | 4 ++-- layouts/partials/head/colorScheme.html | 6 +++--- 4 files changed, 12 insertions(+), 12 deletions(-) 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); }) -{{- 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) }) - \ No newline at end of file + 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'; } })(); - \ No newline at end of file +