hexo-theme-vivia icon indicating copy to clipboard operation
hexo-theme-vivia copied to clipboard

Feat: add option to set default theme in _config.vivia.yml

Open JoeyC-Dev opened this issue 1 year ago • 0 comments

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();

JoeyC-Dev avatar Feb 13 '24 06:02 JoeyC-Dev