diff --git a/example_config.vivia.yml b/example_config.vivia.yml
index ea73ae1..d76653b 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
+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 9196fd8..9dd10af 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 # 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 1226e82..9ff9831 100644
--- a/layout/layout.ejs
+++ b/layout/layout.ejs
@@ -13,13 +13,28 @@
hasBanner = "false";
}
%>
+<%
+ // 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";
+ }
+%>
+
<% %>
-
+
+<% if (targetTheme === "auto") { %>
+
+<% } %>
<%- partial('_partial/head') %>
<% if (theme.previewMode) { %>
diff --git a/source/js/auto-theme-switch.js b/source/js/auto-theme-switch.js
new file mode 100644
index 0000000..045da74
--- /dev/null
+++ b/source/js/auto-theme-switch.js
@@ -0,0 +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