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.bindMatchMedia();
this.currentScheme = this.getSavedScheme(); this.currentScheme = this.getSavedScheme();
this.dispatchEvent(document.body.dataset.scheme as colorScheme); this.dispatchEvent(document.documentElement.dataset.scheme as colorScheme);
if (toggleEl) if (toggleEl)
this.bindClick(toggleEl); this.bindClick(toggleEl);
@ -56,13 +56,13 @@ class StackColorScheme {
private setBodyClass() { private setBodyClass() {
if (this.isDark()) { if (this.isDark()) {
document.body.dataset.scheme = 'dark'; document.documentElement.dataset.scheme = 'dark';
} }
else { 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 { 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'], components: ['embed'],
url: "{{ $.Permalink }}", url: "{{ $.Permalink }}",
max_shown_comments: {{ default 15 .max_shown_comments }}, max_shown_comments: {{ default 15 .max_shown_comments }},
theme: document.body.dataset.scheme, theme: document.documentElement.dataset.scheme,
page_title: '{{ $.Title }}', page_title: '{{ $.Title }}',
locale: '{{ default "en" .locale }}', locale: '{{ default "en" .locale }}',
show_email_subscription: {{ default true .show_email_subscription }} show_email_subscription: {{ default true .show_email_subscription }}
@ -26,4 +26,4 @@
window.REMARK42.changeTheme(e.detail); window.REMARK42.changeTheme(e.detail);
}) })
</script> </script>
{{- end -}} {{- end -}}

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

@ -31,10 +31,10 @@
addEventListener('message', event => { addEventListener('message', event => {
if (event.origin !== 'https://utteranc.es') return; if (event.origin !== 'https://utteranc.es') return;
setUtterancesTheme(document.body.dataset.scheme) setUtterancesTheme(document.documentElement.dataset.scheme)
}); });
window.addEventListener('onColorSchemeChange', (e) => { window.addEventListener('onColorSchemeChange', (e) => {
setUtterancesTheme(e.detail) 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) * 1. If dark mode is set already (in local storage)
* 2. Auto mode & prefere color scheme is dark * 2. Auto mode & prefere color scheme is dark
*/ */
document.body.dataset.scheme = 'dark'; document.documentElement.dataset.scheme = 'dark';
} else { } else {
document.body.dataset.scheme = 'light'; document.documentElement.dataset.scheme = 'light';
} }
})(); })();
</script> </script>