63 lines
1.7 KiB
Plaintext
63 lines
1.7 KiB
Plaintext
|
<script type="text/javascript">
|
||
|
|
const applyTheme = (theme) => {
|
||
|
|
if (theme === 'auto') {
|
||
|
|
document.documentElement.removeAttribute('data-theme')
|
||
|
|
} else {
|
||
|
|
document.documentElement.setAttribute('data-theme', theme)
|
||
|
|
}
|
||
|
|
|
||
|
|
applyThemeToGiscus(theme)
|
||
|
|
}
|
||
|
|
|
||
|
|
const applyThemeToGiscus = (theme) => {
|
||
|
|
theme = theme === 'auto' ? 'preferred_color_scheme' : theme
|
||
|
|
|
||
|
|
const cmt = document.getElementById('giscus')
|
||
|
|
if (cmt) {
|
||
|
|
// This works before giscus load.
|
||
|
|
cmt.setAttribute('data-theme', theme)
|
||
|
|
}
|
||
|
|
|
||
|
|
const iframe = document.querySelector('#comments > section.giscus > iframe')
|
||
|
|
if (iframe) {
|
||
|
|
// This works after giscus loaded.
|
||
|
|
const src = iframe.src
|
||
|
|
const newSrc = src.replace(/theme=[\w]+/, `theme=${theme}`)
|
||
|
|
iframe.src = newSrc
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const switchTheme = () => {
|
||
|
|
// light -> dark -> auto -> light -> ...
|
||
|
|
const currentTheme = document.documentElement.getAttribute('data-theme')
|
||
|
|
let newTheme;
|
||
|
|
switch (currentTheme) {
|
||
|
|
case 'light':
|
||
|
|
newTheme = 'dark'
|
||
|
|
break
|
||
|
|
case 'dark':
|
||
|
|
newTheme = 'auto'
|
||
|
|
break
|
||
|
|
default:
|
||
|
|
newTheme = 'light'
|
||
|
|
}
|
||
|
|
applyTheme(newTheme)
|
||
|
|
window.localStorage.setItem('Stellar.theme', newTheme)
|
||
|
|
|
||
|
|
const messages = {
|
||
|
|
light: `<%- __('message.theme_switched.light') %>`,
|
||
|
|
dark: `<%- __('message.theme_switched.dark') %>`,
|
||
|
|
auto: `<%- __('message.theme_switched.auto') %>`,
|
||
|
|
}
|
||
|
|
hud?.toast?.(messages[newTheme])
|
||
|
|
}
|
||
|
|
|
||
|
|
(() => {
|
||
|
|
// Apply user's preferred theme, if any.
|
||
|
|
const theme = window.localStorage.getItem('Stellar.theme')
|
||
|
|
if (theme !== null) {
|
||
|
|
applyTheme(theme)
|
||
|
|
}
|
||
|
|
})()
|
||
|
|
</script>
|