forked from reuixiy/hugo-theme-meme
-
Notifications
You must be signed in to change notification settings - Fork 0
/
dark-mode.js
150 lines (130 loc) · 4.78 KB
/
dark-mode.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
// Reactive Dark Mode
// https://web.dev/prefers-color-scheme/#reacting-on-dark-mode-changes
// https://twitter.com/ChromeDevTools/status/1197175265643745282
const userPrefers = localStorage.getItem('theme');
if (userPrefers === 'dark') {
changeModeMeta('dark');
} else if (userPrefers === 'light') {
changeModeMeta('light');
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
changeMode();
});
window.addEventListener("DOMContentLoaded", () => {
// Update meta tags and code highlighting
changeMode();
// Theme Switcher
// https://derekkedziora.com/blog/dark-mode
const themeSwitcher = document.getElementById('theme-switcher');
if (themeSwitcher) {
themeSwitcher.addEventListener('click', (e) => {
e.preventDefault();
if (getCurrentTheme() == "dark") {
changeModeMeta('light');
} else {
changeModeMeta('dark');
}
changeMode();
storePrefers();
});
}
}, {once: true});
// Sync Across Tabs
// https://codepen.io/tevko/pen/GgWYpg
window.addEventListener('storage', function (event) {
if (event.key !== 'theme') {
return;
}
if (event.newValue === 'dark') {
changeModeMeta('dark');
} else {
changeModeMeta('light');
}
changeMode();
});
// Functions
function getCurrentTheme() {
return JSON.parse(window.getComputedStyle(document.documentElement, null).getPropertyValue("--theme-name"));
}
function changeModeMeta(theme) {
document.documentElement.setAttribute('data-theme', theme);
}
function changeMode() {
const isDark = getCurrentTheme() === 'dark';
if (isDark) {
this.document.body.classList.add("dark");
} else {
this.document.body.classList.remove("dark");
}
// Change theme color meta
const themeColor = isDark ? '{{ .Site.Params.themeColorDark }}' : '{{ .Site.Params.themeColor }}';
document.querySelector('meta[name="theme-color"]').setAttribute('content', themeColor);
{{ if and .Site.Params.enableUtterances (eq hugo.Environment "production") }}
// Change Utterances Comments Theme
// https://github.com/utterance/utterances/issues/229
if (isDark) {
changeUtterancesTheme('{{ .Site.Params.utterancesThemeDark | default "photon-dark" }}');
} else {
changeUtterancesTheme('{{ .Site.Params.utterancesTheme | default "github-light" }}');
}
function changeUtterancesTheme(theme) {
const iframe = document.querySelector('.utterances-frame');
if (iframe !== null) {
const message = {
type: 'set-theme',
theme: theme
};
iframe.contentWindow.postMessage(message, 'https://utteranc.es');
}
}
{{ end }}
{{ if and .Site.Params.enableGiscus (eq hugo.Environment "production") }}
// Change Giscus Comments Theme
if (isDark) {
changeGiscusTheme('{{ .Site.Params.giscusThemeDark | default "dark" }}');
} else {
changeGiscusTheme('{{ .Site.Params.giscusTheme | default "light" }}');
}
function changeGiscusTheme(theme) {
function sendMessage(message) {
const iframe = document.querySelector('iframe.giscus-frame');
if (iframe !== null) {
iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
}
}
sendMessage({
setConfig: {
theme: theme,
},
});
}
{{ end }}
// Mermaid
// https://github.com/reuixiy/hugo-theme-meme/issues/205
if (typeof mermaidConfig !== 'undefined') {
const mermaids = document.querySelectorAll('.mermaid');
mermaids.forEach(e => {
if (e.getAttribute('data-processed')) {
// Already rendered, clean the processed attributes
e.removeAttribute('data-processed');
// Replace the rendered HTML with the stored text
e.innerHTML = e.getAttribute('data-graph');
} else {
// First time, store the text
e.setAttribute('data-graph', e.textContent);
}
});
if (isDark) {
mermaidConfig.theme = '{{ .Site.Params.mermaidThemeDark | default "dark" }}';
mermaid.initialize(mermaidConfig);
mermaid.init();
} else {
mermaidConfig.theme = '{{ .Site.Params.mermaidTheme | default "default" }}';
mermaid.initialize(mermaidConfig);
mermaid.init();
}
}
}
function storePrefers() {
window.localStorage.setItem('theme', getCurrentTheme());
}