hugo-theme-minima/assets/js/theme.js

69 lines
1.8 KiB
JavaScript
Raw Normal View History

2022-11-09 09:03:19 +01:00
const comment = '{{ .Site.Params.comment.provider }}'
const icon_light = '{{ index .Site.Params.switch 1 }}'
const icon_dark = '{{ index .Site.Params.switch 0 }}'
2022-11-09 09:03:19 +01:00
const THEME_LIGHT = 'light'
const THEME_DARK = 'dark'
/** @type {HTMLElement} */
let toggler
/** @type {HTMLIFrameElement} */
let utterances
/** @type {HTMLIFrameElement} */
let giscus
/** @param {string} id */
export function setup_theme_switch(id) {
if (!toggler) {
toggler = document.getElementById(id)
}
toggler.innerHTML = localStorage.theme === THEME_LIGHT ? icon_light : icon_dark
toggler.addEventListener('click', switch_theme);
}
function switch_theme() {
const current = localStorage.getItem('theme')
const next = current === THEME_LIGHT ? THEME_DARK : THEME_LIGHT
switch_minima_theme(current, next)
switch (comment) {
case 'utterances':
switch_utterances_theme(`github-${next}`)
break
case 'giscus':
switch_giscus_theme(next)
break
default:
}
2021-11-12 08:47:28 +01:00
}
2022-11-09 09:03:19 +01:00
/**
* @param {string} current
* @param {string} next
*/
function switch_minima_theme(current, next) {
const { classList } = document.documentElement
const icon = next === THEME_LIGHT ? icon_light : icon_dark;
2021-11-12 08:47:28 +01:00
2022-11-09 09:03:19 +01:00
classList.remove(current);
classList.add(next);
localStorage.setItem('theme', next);
toggler.innerHTML = icon;
}
/** @param {string} theme */
function switch_utterances_theme(theme) {
if (!utterances) {
utterances = document.querySelector('iframe.utterances-frame')
}
utterances.contentWindow.postMessage({ type: 'set-theme', theme }, 'https://utteranc.es')
}
/** @param {string} theme */
function switch_giscus_theme(theme) {
if (!giscus) {
giscus = document.querySelector('iframe.giscus-frame')
}
giscus.contentWindow.postMessage({giscus: {setConfig: {theme}}}, 'https://giscus.app')
}