hexo-theme-vivia
hexo-theme-vivia copied to clipboard
Feat: add option to set default theme in _config.vivia.yml
Feature: Allow user to set the default theme to light
/dark
, or use auto
to auto switch theme based on user's system theme, when user visiting the blog for the first time.
Note: If user never clicked on theme-switch button in auto
mode, then it will always follow system theme.
Tested option: light
, dark
, auto
, random_string
, and commented it out.
Justification:
Instead of reading values from _config.vivia.yml
and directly apply it in the ejs, this will prevent code injection from yml file.
Additional:
After consideration, I add "fix the theme to light/dark once being set" behavior in auto
mode, which I believe is better for user experience. Or the light/dark switch button will be useless since user needs to switch pages.
Code difference:
function autoTheme() {
let root = document.documentElement;
let theme = localStorage.getItem('theme');
if (theme) {
root.setAttribute('theme', theme);
} else {
window.matchMedia('(prefers-color-scheme: light)').matches ? root.setAttribute('theme', 'light') : root.setAttribute('theme', 'dark');
}
};
autoTheme();
function autoTheme() {
let root = document.documentElement;
window.matchMedia('(prefers-color-scheme: light)').matches ? root.setAttribute('theme', 'light') : root.setAttribute('theme', 'dark');
};
autoTheme();