feat: add config option for night mode

2 files changed, 25 insertions, 8 deletions

diff --git a/_config.yml b/_config.yml
index f8d98f7..5833722 100644
--- a/_config.yml
+++ b/_config.yml
@@ -78,6 +78,10 @@ yat:
 # Custom color as below:
 # theme_color: "#882250"
 
+# Night mode, default is "auto", "auto" is for auto nightshift (19:00 - 07:00),
+# "mannual" is for mannual toggle, and "on/off" is for always on/off.
+# night_mode: "auto"
+
 # If you want to link only specific pages in your header, uncomment
 # this and add the path to the pages in order as they should show up
 # header_pages:
diff --git a/_includes/extensions/theme-toggle.html b/_includes/extensions/theme-toggle.html
index 7976e21..d426f65 100644
--- a/_includes/extensions/theme-toggle.html
+++ b/_includes/extensions/theme-toggle.html
@@ -9,6 +9,10 @@
   </label>
 </div>
 
+{%- assign name = 'night_mode' -%}
+{%- include functions.html func='get_value' default='auto' -%}
+{%- assign night_mode = return -%}
+
 <script>
   (function() {
     var sw = document.getElementById('theme-switch');
@@ -24,7 +28,7 @@
       try {
         data = JSON.parse(data ? data : '');
       } catch(e) {
-        data = { nightShift: null, autoToggleAt: 0 };
+        data = { nightShift: false, autoToggleAt: 0 };
         saveThemeData(data);
       }
       return data;
@@ -72,19 +76,28 @@
       };
     }
 
-    var data = autoThemeToggle();
-
     // Listen the theme toggle event
     sw.addEventListener('change', function(event) {
       handleThemeToggle(event.target.checked);
     });
 
-    // Toggle theme by local setting
-    if (data.toggleAt > themeData.autoToggleAt) {
-      themeData.autoToggleAt = data.toggleAt;
-      handleThemeToggle(data.nightShift);
-    } else {
+    var nightModeOption = '{{ night_mode }}';
+    nightModeOption = nightModeOption.toLowerCase();
+
+    if (nightModeOption == 'auto') {
+      var data = autoThemeToggle();
+
+      // Toggle theme by local setting
+      if (data.toggleAt > themeData.autoToggleAt) {
+        themeData.autoToggleAt = data.toggleAt;
+        handleThemeToggle(data.nightShift);
+      } else {
+        handleThemeToggle(themeData.nightShift);
+      }
+    } else if (nightModeOption == 'mannual') {
       handleThemeToggle(themeData.nightShift);
+    } else {
+      handleThemeToggle(nightModeOption == 'on');
     }
   })();
 </script>