From 193be10bdd3b9f7b281a78b907ede1514ac63b10 Mon Sep 17 00:00:00 2001 From: Joey Chen <65982q70@duck.com> Date: Tue, 13 Feb 2024 14:33:37 +0800 Subject: [PATCH 1/5] Add option to set default theme in _config.vivia.yml --- example_config.vivia.yml | 1 + layout/layout.ejs | 12 +++++++++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/example_config.vivia.yml b/example_config.vivia.yml index ea73ae1..7e1606f 100644 --- a/example_config.vivia.yml +++ b/example_config.vivia.yml @@ -18,6 +18,7 @@ banner: onAllPages: true # Display banner on all pages instead of only the home page # Appearance +theme: dark # light, dark (default: dark) hue: 250 # The hue of the theme color (e.g. red: 0, orange: 60, blue: 260, purple: 300, pink: 345) # Visit `saicaca.github.io/vivia-preview` to preview the theme color diff --git a/layout/layout.ejs b/layout/layout.ejs index 1226e82..6af76e2 100644 --- a/layout/layout.ejs +++ b/layout/layout.ejs @@ -13,8 +13,18 @@ hasBanner = "false"; } %> +<% + // targetTheme: set theme to dark if not being configured to light + let targetTheme; + if (theme.theme === "light") { + targetTheme = "light"; + } else { + targetTheme = "dark"; + } +%> + <% %> - + From f66c0c9a8cf01dcad85c4290ce8dab0a25f57bb4 Mon Sep 17 00:00:00 2001 From: Joey Chen <65982q70@duck.com> Date: Tue, 13 Feb 2024 15:26:26 +0800 Subject: [PATCH 2/5] Use accurate term for theme color --- example_config.vivia.yml | 2 +- layout/layout.ejs | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/example_config.vivia.yml b/example_config.vivia.yml index 7e1606f..9ec8922 100644 --- a/example_config.vivia.yml +++ b/example_config.vivia.yml @@ -18,7 +18,7 @@ banner: onAllPages: true # Display banner on all pages instead of only the home page # Appearance -theme: dark # light, dark (default: dark) +color_scheme: dark # light, dark (default: dark) hue: 250 # The hue of the theme color (e.g. red: 0, orange: 60, blue: 260, purple: 300, pink: 345) # Visit `saicaca.github.io/vivia-preview` to preview the theme color diff --git a/layout/layout.ejs b/layout/layout.ejs index 6af76e2..0427611 100644 --- a/layout/layout.ejs +++ b/layout/layout.ejs @@ -16,7 +16,7 @@ <% // targetTheme: set theme to dark if not being configured to light let targetTheme; - if (theme.theme === "light") { + if (theme.color_scheme === "light") { targetTheme = "light"; } else { targetTheme = "dark"; From da9006fd78ff5a45668e7534ce2ec8cff195bfc2 Mon Sep 17 00:00:00 2001 From: Joey Chen <142381267+JoeyC-Dev@users.noreply.github.com> Date: Tue, 13 Feb 2024 15:41:26 +0800 Subject: [PATCH 3/5] Add missing color_scheme in example_zh_CN_config.vivia.yml --- example_zh_CN_config.vivia.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/example_zh_CN_config.vivia.yml b/example_zh_CN_config.vivia.yml index 9196fd8..32896fe 100644 --- a/example_zh_CN_config.vivia.yml +++ b/example_zh_CN_config.vivia.yml @@ -18,6 +18,7 @@ banner: onAllPages: true # 在所有页面上显示横幅，而不是只在首页显示 # 外观 +color_scheme: dark # light, dark hue: 250 # 主题色调 (例如：红: 0，橙: 60，蓝：260，紫：300，粉：345) # 可访问 `saicaca.github.io/vivia-preview` 预览颜色设置 From b5fb41468192471eeaa60bb3befb38923ab9b51e Mon Sep 17 00:00:00 2001 From: Joey Chen <142381267+JoeyC-Dev@users.noreply.github.com> Date: Wed, 14 Feb 2024 01:15:10 +0800 Subject: [PATCH 4/5] Feature: auto-switch theme based on system theme --- example_config.vivia.yml | 2 +- example_zh_CN_config.vivia.yml | 2 +- layout/layout.ejs | 7 ++++++- source/js/auto-theme-switch.js | 5 +++++ 4 files changed, 13 insertions(+), 3 deletions(-) create mode 100644 source/js/auto-theme-switch.js diff --git a/example_config.vivia.yml b/example_config.vivia.yml index 9ec8922..d76653b 100644 --- a/example_config.vivia.yml +++ b/example_config.vivia.yml @@ -18,7 +18,7 @@ banner: onAllPages: true # Display banner on all pages instead of only the home page # Appearance -color_scheme: dark # light, dark (default: dark) +color_scheme: dark # dark, light, auto hue: 250 # The hue of the theme color (e.g. red: 0, orange: 60, blue: 260, purple: 300, pink: 345) # Visit `saicaca.github.io/vivia-preview` to preview the theme color diff --git a/example_zh_CN_config.vivia.yml b/example_zh_CN_config.vivia.yml index 32896fe..9dd10af 100644 --- a/example_zh_CN_config.vivia.yml +++ b/example_zh_CN_config.vivia.yml @@ -18,7 +18,7 @@ banner: onAllPages: true # 在所有页面上显示横幅，而不是只在首页显示 # 外观 -color_scheme: dark # light, dark +color_scheme: dark # dark, light, auto hue: 250 # 主题色调 (例如：红: 0，橙: 60，蓝：260，紫：300，粉：345) # 可访问 `saicaca.github.io/vivia-preview` 预览颜色设置 diff --git a/layout/layout.ejs b/layout/layout.ejs index 0427611..41d9628 100644 --- a/layout/layout.ejs +++ b/layout/layout.ejs @@ -14,10 +14,12 @@ } %> <% - // targetTheme: set theme to dark if not being configured to light + // targetTheme: set theme to dark if not being configured to light or auto let targetTheme; if (theme.color_scheme === "light") { targetTheme = "light"; + } else if (theme.color_scheme === "auto") { + targetTheme = "auto"; } else { targetTheme = "dark"; } @@ -35,6 +37,9 @@ <% if (theme.previewMode) { %> <%- partial('_widget/color') %> <% } %> + <% if (targetTheme === "auto") { %> + + <% } %> <% if (hasBanner != "false") { %> <%- partial('_partial/banner') %> <% } %> diff --git a/source/js/auto-theme-switch.js b/source/js/auto-theme-switch.js new file mode 100644 index 0000000..16b04e0 --- /dev/null +++ b/source/js/auto-theme-switch.js @@ -0,0 +1,5 @@ +function autoTheme() { + let root = document.documentElement; + window.matchMedia('(prefers-color-scheme: light)').matches ? root.setAttribute('theme', 'light') : root.setAttribute('theme', 'dark'); +}; +autoTheme(); \ No newline at end of file From af44407abdf122fc4e9665e874a3a3fdcd6d2ff8 Mon Sep 17 00:00:00 2001 From: Joey Chen <142381267+JoeyC-Dev@users.noreply.github.com> Date: Wed, 14 Feb 2024 13:52:24 +0800 Subject: [PATCH 5/5] Add behavior to fix the theme settings once user visit the website in auto mode --- layout/layout.ejs | 6 +++--- source/js/auto-theme-switch.js | 5 +++++ 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/layout/layout.ejs b/layout/layout.ejs index 41d9628..9ff9831 100644 --- a/layout/layout.ejs +++ b/layout/layout.ejs @@ -32,14 +32,14 @@ +<% if (targetTheme === "auto") { %> + +<% } %> <%- partial('_partial/head') %> <% if (theme.previewMode) { %> <%- partial('_widget/color') %> <% } %> - <% if (targetTheme === "auto") { %> - - <% } %> <% if (hasBanner != "false") { %> <%- partial('_partial/banner') %> <% } %> diff --git a/source/js/auto-theme-switch.js b/source/js/auto-theme-switch.js index 16b04e0..045da74 100644 --- a/source/js/auto-theme-switch.js +++ b/source/js/auto-theme-switch.js @@ -1,5 +1,10 @@ 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(); \ No newline at end of file