Sync/hugo-theme-stack
1
0
Fork 1
mirror of https://github.com/CaiJimmy/hugo-theme-stack.git synced 2025-04-29 03:53:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

change document.body.dataset.scheme to document.documentElement.dataset.scheme

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
assets/ts/colorScheme.ts
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 {
@ -85,4 +85,4 @@ class StackColorScheme {
}
}
export default StackColorScheme;
export default StackColorScheme;

4
layouts/partials/comments/provider/remark42.html
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 }}
@ -26,4 +26,4 @@
window.REMARK42.changeTheme(e.detail);
})
</script>
{{- end -}}
{{- end -}}

4
layouts/partials/comments/provider/utterances.html
View File

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

6
layouts/partials/head/colorScheme.html
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>
</script>