cdn0x12/hugo-theme-minima
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add two more themes

Browse source
This commit is contained in:
mivinci 2023-04-10 21:37:53 +08:00
parent 144b197c31
commit d8d9a04b4f
8 changed files with 93 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

63
assets/js/theme.js
View file

@ -1,7 +1,8 @@
const comment = '{{ .Site.Params.comment.provider }}'
const default_theme_config = '{{ .Site.Params.defaultTheme }}'
const icon_light = '{{ index .Site.Params.switch 1 }}'
const icon_dark = '{{ index .Site.Params.switch 0 }}'
const THEME_LIGHT = 'light'
const THEME_LIGHT = default_theme_config === 'system' ? 'light' : default_theme_config
const THEME_DARK = 'dark'
/** @type {HTMLElement} */
@ -13,28 +14,28 @@ 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);
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
const current = localStorage.getItem('theme')
const next = current === THEME_LIGHT ? THEME_DARK : THEME_LIGHT
switch_minima_theme(current, next)
switch_minima_theme(current, next)
switch (comment) {
case 'utterances':
switch_utterances_theme(`github-${next}`)
break
switch (comment) {
case 'utterances':
switch_utterances_theme(`github-${next}`)
break
case 'giscus':
switch_giscus_theme(next)
break
switch_giscus_theme(next)
break
default:
}
}
}
/**
@ -42,25 +43,31 @@ function switch_theme() {
* @param {string} next
*/
function switch_minima_theme(current, next) {
const { classList } = document.documentElement
const icon = next === THEME_LIGHT ? icon_light : icon_dark;
const { classList } = document.documentElement
const icon = next === THEME_LIGHT ? icon_light : icon_dark;
classList.remove(current);
classList.add(next);
localStorage.setItem('theme', next);
toggler.innerHTML = icon;
classList.remove(current);
classList.add(next);
localStorage.setItem('theme', next);
toggler.innerHTML = icon;
}
/** @param {string} theme */
function switch_utterances_theme(theme) {
utterances =utterances || document.querySelector('iframe.utterances-frame')
if (!utterances) return
utterances.contentWindow.postMessage({ type: 'set-theme', theme }, 'https://utteranc.es')
if (theme !== 'dark') {
theme = 'light'
}
utterances = utterances || document.querySelector('iframe.utterances-frame')
if (!utterances) return
utterances.contentWindow.postMessage({ type: 'set-theme', theme }, 'https://utteranc.es')
}
/** @param {string} theme */
function switch_giscus_theme(theme) {
giscus = giscus || document.querySelector('iframe.giscus-frame')
if (!giscus) return
giscus.contentWindow.postMessage({giscus: {setConfig: {theme}}}, 'https://giscus.app')
if (theme !== 'dark') {
theme = 'light_protanopia'
}
giscus = giscus || document.querySelector('iframe.giscus-frame')
if (!giscus) return
giscus.contentWindow.postMessage({ giscus: { setConfig: { theme } } }, 'https://giscus.app')
}