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 <html> tag. Allowing us to access the dark and light color
schemes from the <html> to change the vertical scrollbar styles
according to the current color scheme.
This commit is contained in:
k 2021-06-14 17:04:06 -05:00
parent 2366351c18
commit e90adc4773
4 changed files with 12 additions and 12 deletions

View File

@ -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 {

View File

@ -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 }}

View File

@ -31,7 +31,7 @@
addEventListener('message', event => {
if (event.origin !== 'https://utteranc.es') return;
setUtterancesTheme(document.body.dataset.scheme)
setUtterancesTheme(document.documentElement.dataset.scheme)
});
window.addEventListener('onColorSchemeChange', (e) => {

View File

@ -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>