authors now can pick a default theme color

This commit is contained in:
Mivinci 2022-01-26 20:39:49 +08:00
parent 577b74f612
commit d4d30a0c35
3 changed files with 22 additions and 8 deletions

View file

@ -1,29 +1,28 @@
const light = '{{ index .Site.Params.switch 1 }}' const icon_light = '{{ index .Site.Params.switch 1 }}'
const dark = '{{ index .Site.Params.switch 0 }}' const icon_dark = '{{ index .Site.Params.switch 0 }}'
const comment = '{{ .Site.Params.comment }}' const comment = '{{ .Site.Params.comment }}'
const LIGHT = 'light', DARK = 'dark' const light = 'light', dark = 'dark'
const themeSwitcher = document.getElementById('theme-switcher') const themeSwitcher = document.getElementById('theme-switcher')
// set switcher // set switcher
themeSwitcher.innerHTML = localStorage.theme === LIGHT ? light : dark themeSwitcher.innerHTML = localStorage.theme === light ? icon_light : icon_dark
themeSwitcher.addEventListener('click', function () { themeSwitcher.addEventListener('click', function () {
const currentTheme = localStorage.theme const currentTheme = localStorage.theme
const newTheme = currentTheme === LIGHT ? DARK : LIGHT const newTheme = currentTheme === light ? dark : light
// switch global theme // switch global theme
switchMinimaTheme(currentTheme, newTheme) switchMinimaTheme(currentTheme, newTheme)
// switch utterance theme if necessary // switch utterance theme if necessary
if (comment === 'utterances') if (comment === 'utterances')
switchUtteranceTheme(`github-${newTheme}`) switchUtteranceTheme(`github-${newTheme}`)
}); });
function switchMinimaTheme(oldTheme, newTheme) { function switchMinimaTheme(oldTheme, newTheme) {
const { classList } = document.documentElement const { classList } = document.documentElement
const text = newTheme === LIGHT ? light : dark; const text = newTheme === light ? icon_light : icon_dark;
classList.remove(oldTheme); classList.remove(oldTheme);
classList.add(newTheme); classList.add(newTheme);

View file

@ -33,6 +33,8 @@ comment = "utterances"
timeformat = "Jan 02, 2006" timeformat = "Jan 02, 2006"
# switch for turning on/off lights. # switch for turning on/off lights.
switch = ["🌚", "🌝"] switch = ["🌚", "🌝"]
# default theme. e.g. light, dark, system
defaultTheme = "system"
# If set true, date of posts will be shown in the homepage. # If set true, date of posts will be shown in the homepage.
displayDate = true displayDate = true
# If set true, users can select text from your post. # If set true, users can select text from your post.

View file

@ -29,12 +29,25 @@
<script defer type="text/javascript" src="{{ $js.RelPermalink }}"></script> <script defer type="text/javascript" src="{{ $js.RelPermalink }}"></script>
</head> </head>
<script> <script>
// We will default to system theme color if no choice was made.
let theme_2b_used = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
try { try {
if (!('theme' in localStorage)) { if (!('theme' in localStorage)) {
localStorage.theme = window.matchMedia('(prefer-color-scheme: dark)').matches ? 'dark' : 'light'; const default_theme = '{{ .Site.Params.defaultTheme }}';
// For the first time entering this site, use the theme picked by the author.
if (default_theme === 'dark' || default_theme === 'light') {
theme_2b_used = default_theme;
}
// Remember the choice.
localStorage.theme = theme_2b_used;
} }
document.querySelector('html').classList.add(localStorage.theme); document.querySelector('html').classList.add(localStorage.theme);
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} }
</script> </script>