diff --git a/assets/js/theme.js b/assets/js/theme.js index 6a345f3..d6d13d9 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -1,29 +1,28 @@ -const light = '{{ index .Site.Params.switch 1 }}' -const dark = '{{ index .Site.Params.switch 0 }}' +const icon_light = '{{ index .Site.Params.switch 1 }}' +const icon_dark = '{{ index .Site.Params.switch 0 }}' const comment = '{{ .Site.Params.comment }}' -const LIGHT = 'light', DARK = 'dark' +const light = 'light', dark = 'dark' const themeSwitcher = document.getElementById('theme-switcher') // set switcher -themeSwitcher.innerHTML = localStorage.theme === LIGHT ? light : dark +themeSwitcher.innerHTML = localStorage.theme === light ? icon_light : icon_dark themeSwitcher.addEventListener('click', function () { const currentTheme = localStorage.theme - const newTheme = currentTheme === LIGHT ? DARK : LIGHT + const newTheme = currentTheme === light ? dark : light // switch global theme switchMinimaTheme(currentTheme, newTheme) // switch utterance theme if necessary - if (comment === 'utterances') switchUtteranceTheme(`github-${newTheme}`) }); function switchMinimaTheme(oldTheme, newTheme) { const { classList } = document.documentElement - const text = newTheme === LIGHT ? light : dark; + const text = newTheme === light ? icon_light : icon_dark; classList.remove(oldTheme); classList.add(newTheme); diff --git a/exampleSite/config.toml b/exampleSite/config.toml index d37e454..7b0adcc 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -33,6 +33,8 @@ comment = "utterances" timeformat = "Jan 02, 2006" # switch for turning on/off lights. switch = ["🌚", "🌝"] +# default theme. e.g. light, dark, system +defaultTheme = "system" # If set true, date of posts will be shown in the homepage. displayDate = true # If set true, users can select text from your post. diff --git a/layouts/partials/head.html b/layouts/partials/head.html index de99a58..1da50bc 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -29,12 +29,25 @@ +