feat: 明暗切换按钮功能增强

README.md

@@ -223,13 +223,13 @@
    - 添加“跟随系统”配色方案
    - 添加蓝色系列配色方案
 2. <a id="theme-switch-button-anchor"></a>可在大标题旁添加浅色/深色模式切换按钮（切换顺序 浅色模式 -> 深色模式 -> 自动模式 -> 浅色模式）
-   - 点击图标后，将存储当前状态到本地（localStorage）
-   - 优先读取本地 localStorage，如果没有保存过，就根据浏览器主题设置自动选择浅色模式/深色模式
    - 注：“自动模式配色方案”选择一种浅色方案即可禁用自动模式。
-3. （启用“浅色/深色模式切换按钮”后显示）“自动模式配色方案”指定“浅色/深色模式切换按钮”切换到自动模式时的配色方案
-4. （启用“浅色/深色模式切换按钮”后显示）“浅色模式配色方案”指定“浅色/深色模式切换按钮”切换到浅色模式时的配色方案
-5. （启用“浅色/深色模式切换按钮”后显示）“深色模式配色方案”指定“浅色/深色模式切换按钮”切换到深色模式时的配色方案
-6. 对于内容区域宽度给予更大的配置自由度
+   - 自动模式配色方案：指定“浅色/深色模式切换按钮”切换到自动模式时的配色方案
+   - 浅色模式配色方案：指定“浅色/深色模式切换按钮”切换到浅色模式时的配色方案
+   - 深色模式配色方案：指定“浅色/深色模式切换按钮”切换到深色模式时的配色方案
+   - 根据浏览器设置自动切换配色：如果启用这项，首先会读取浏览器中已保存的配色选择，如果没有保存的选择，则会根据浏览器主题设置自动切换为浅/深色配色。
+   - 保存配色设置到浏览器中：如果启用这项，按下配色切换按钮后，将会保存当前的配色选择到浏览器存储中。
+3. 对于内容区域宽度给予更大的配置自由度
    （说明：原主题在之后的更新里更新了自适应最大宽度设置，内容区域最大宽度将随着屏幕宽度的变化而变化。但是在文字内容较少时（如主页），会显得内容显示位置偏左，因此“可自定义内容区域最大宽度”默认开启。
    如果你想使用上游的最大宽度设置模式，请关闭“总体样式 - 自定义内容区域最大宽度”这一项设置，并且推荐同时开启“内容区域最小宽度”，“自定义内容区域宽度属性”并保持默认值，可有效解决文字较少时内容显示偏左的问题）
    1. 可自定义内容区域最大宽度
@@ -240,16 +240,16 @@
         （强制使内容显示区域不小于设定的最小宽度，即使出现横向滚动条。）
    3. 可自定义内容区域宽度属性
       （默认值为 fit-content。默认值效果为：使内容区域宽度=最宽的内容的宽度。（此项实际是在设置内容区域的 width 属性对应的样式值））
-7. 允许关闭页眉头像
-8. 允许关闭页眉菜单
-9. 允许关闭页码
-10. 允许关闭页面底部主题信息
-11. 允许关闭页面底部版权信息
-12. 允许设定是否强制页脚在页面最底部
-13. 允许关闭页面底部菜单
-14. 允许添加内容到页脚最底部
-15. 允许在引用块前添加引号（引用块在 Markdown 中使用 > 表示）
-16. 允许在引用块后添加引号（引用块在 Markdown 中使用 > 表示）
+4. 允许关闭页眉头像
+5. 允许关闭页眉菜单
+6. 允许关闭页码
+7. 允许关闭页面底部主题信息
+8. 允许关闭页面底部版权信息
+9. 允许设定是否强制页脚在页面最底部
+10. 允许关闭页面底部菜单
+11. 允许添加内容到页脚最底部
+12. 允许在引用块前添加引号（引用块在 Markdown 中使用 > 表示）
+13. 允许在引用块后添加引号（引用块在 Markdown 中使用 > 表示）
 
 #### 增加于“首页样式”
 

i18n-settings/settings.en.yaml

@@ -117,9 +117,8 @@ spec:
       formSchema:
         - $formkit: select
           name: color_schema
-          if: "$is_show_color_scheme_toggle_button===false"
           label: Color scheme
-          help: "It is normal for the selected option not to be displayed; it will still take effect properly."
+          help: "It is normal for the selected option not to be displayed; it will still take effect properly. (For the case where the 'Color Scheme Toggle Button' is enabled, this determines the color scheme when the website is first loaded.)"
           value: { theme: "auto", color-scheme: "auto" }
           options:
             - label: "Follow System - Green"
@@ -206,6 +205,28 @@ spec:
               value: "dark-blue"
             - label: "Light - Gray"
               value: "gray"
+        - $formkit: radio
+          name: is_auto_switch_color_scheme_based_on_browser_settings
+          if: "$is_show_color_scheme_toggle_button===true"
+          label: Automatically switch color scheme based on browser settings
+          value: true
+          help: "If enabled, it will first read the saved color scheme selection from the browser. If there is no saved selection, it will automatically switch to light/dark mode based on the browser theme settings."
+          options:
+            - label: Enable
+              value: true
+            - label: Disable
+              value: false
+        - $formkit: radio
+          name: is_save_color_scheme_settings_to_browser
+          if: "$is_show_color_scheme_toggle_button===true"
+          label: Save color scheme settings to browser
+          value: true
+          help: "If enabled, the current color scheme selection will be saved to the browser storage after pressing the color scheme toggle button."
+          options:
+            - label: Enable
+              value: true
+            - label: Disable
+              value: false
         - $formkit: select
           name: text_size
           label: Text size

settings.yaml

@@ -117,9 +117,8 @@ spec:
       formSchema:
         - $formkit: select
           name: color_schema
-          if: "$is_show_color_scheme_toggle_button===false"
           label: 配色方案
-          help: 此项无法显示所选项是正常现象，实际会正常生效
+          help: 此项无法显示所选项是正常现象，实际会正常生效。（对于启用”浅色/深色模式切换按钮”的情况来说，这项决定了网站刚加载完成时的配色方案。）
           value: { theme: "auto", color-scheme: "auto" }
           options:
             - label: "跟随系统 - 绿"
@@ -206,6 +205,28 @@ spec:
               value: "dark-blue"
             - label: "浅色 - 灰粉"
               value: "gray"
+        - $formkit: radio
+          name: is_auto_switch_color_scheme_based_on_browser_settings
+          if: "$is_show_color_scheme_toggle_button===true"
+          label: 根据浏览器设置自动切换配色
+          value: true
+          help: 如果启用这项，首先会读取浏览器中已保存的配色选择，如果没有保存的选择，则会根据浏览器主题设置自动切换为浅/深色配色。
+          options:
+            - label: 开启
+              value: true
+            - label: 关闭
+              value: false
+        - $formkit: radio
+          name: is_save_color_scheme_settings_to_browser
+          if: "$is_show_color_scheme_toggle_button===true"
+          label: 保存配色设置到浏览器中
+          value: true
+          help: 如果启用这项，按下配色切换按钮后，将会保存当前的配色选择到浏览器存储中。
+          options:
+            - label: 开启
+              value: true
+            - label: 关闭
+              value: false
         - $formkit: select
           name: text_size
           label: 字体大小

templates/fragments/layout.html

@@ -176,6 +176,8 @@
       const THEME_DARK = /*[[${theme.config?.styles?.theme_dark}]]*/ "dark";
       const THEME_LIGHT = /*[[${theme.config?.styles?.theme_light}]]*/ "light";
       const THEME_AUTO = /*[[${theme.config?.styles?.theme_auto}]]*/ "auto";
+      const is_save_color_scheme_settings_to_browser =
+        /*[[${theme.config?.styles?.is_save_color_scheme_settings_to_browser}]]*/ "true";
 
       const themeColorSchemeMap = {
         auto: "auto",
@@ -209,9 +211,9 @@
       }
 
       function applyTheme(theme) {
-        if (typeof Storage !== "undefined") {
+        if (is_save_color_scheme_settings_to_browser === true && typeof Storage !== "undefined") {
           localStorage.setItem("pref-theme", themeColorSchemeMap[theme]);
-        } else {
+        } else if (typeof Storage === "undefined") {
           console.log("Sorry, your browser does not support web storage...");
         }
         applyThemeNoSave(theme);
@@ -229,6 +231,14 @@
       }
 
       (function () {
+        if (is_save_color_scheme_settings_to_browser !== true && typeof Storage !== "undefined") {
+          localStorage.removeItem("pref-theme");
+        }
+        const is_auto_switch_color_scheme_based_on_browser_settings =
+          /*[[${theme.config?.styles?.is_auto_switch_color_scheme_based_on_browser_settings}]]*/ "true";
+        if (!is_auto_switch_color_scheme_based_on_browser_settings) {
+          return;
+        }
         switch (getPreferredTheme()) {
           case "dark":
             updateTagAttribute(THEME_DARK);