update mobile dark mode

rzy0901 · Apr 9, 2023 · 1c4874d · 1c4874d
1 parent 3d18df9
commit 1c4874d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/themes/even/layouts/partials/scripts.html b/themes/even/layouts/partials/scripts.html
@@ -179,6 +179,8 @@
   _darkTheme:null,  //dark.css标签
   _modeToggle:null, //手动切换按钮块
   _modeToggleParent:null, //手动切换按钮wrap
+  _modeToggleMobile:null, //手动切换按钮块
+  _modeToggleParentMobile:null, //手动切换按钮wrap
   _currentHour:0, //当前小时
   _storageKey:"dark-mode-storage",
   _storageByHandLastTIme:0, //上次手动设置模式时间 毫秒
@@ -187,7 +189,9 @@
   init:function(){
     //夜间模式切换配置
     this._modeToggleParent = document.getElementById("dark-mode-toggle");
-    this._modeToggle = document.getElementById("dark-mode-toggle-i");    
+    this._modeToggle = document.getElementById("dark-mode-toggle-i");
+    this._modeToggleParentMobile = document.getElementById("dark-mode-toggle-mobile");
+    this._modeToggleMobile = document.getElementById("dark-mode-toggle-mobile-i");         
     this._darkTheme = document.getElementById("dark-mode-theme");  
     this._currentHour = new Date().getHours();  
 
@@ -196,7 +200,7 @@
   },
   initMode:function(){
     //初始化模式，来源本地持久化或自动检测模式    
-    let initMode = this.getModeFromStorage() || this.autoMode();
+    let initMode = this.getModeFromStorage(); //|| this.autoMode();
     this.setMode(initMode);
   },
   toggleListen:function(){
@@ -210,6 +214,14 @@
         }
     });
 
+    this._modeToggleParentMobile.addEventListener("click", () => {
+        if (this._modeToggleMobile.className === "fa fa-moon-o") {
+            _this.setModeByHand("dark");
+        } else if (this._modeToggleMobile.className === "fa fa-sun-o") {
+            _this.setModeByHand("light");
+        }
+    });
+
   },  
   autoMode:function(){
     let _currentHour = this._currentHour;
@@ -222,9 +234,11 @@
     if (mode === "dark") {
         this._darkTheme.disabled = false;
         this._modeToggle.className = "fa fa-sun-o";
+        this._modeToggleMobile.className = "fa fa-sun-o";
     } else if (mode === "light") {
         this._darkTheme.disabled = true;
         this._modeToggle.className = "fa fa-moon-o";
+        this._modeToggleMobile.className = "fa fa-moon-o";
     }          
   },
   setModeByHand:function(mode){

diff --git a/themes/even/layouts/partials/slideout.html b/themes/even/layouts/partials/slideout.html
@@ -21,7 +21,9 @@
         <li class="mobile-menu-item">{{ .Name }}</li>
       </a>
     {{- end }}
+    <li id="dark-mode-toggle-mobile" class="mobile-menu-item">
+      <i id="dark-mode-toggle-mobile-i" class="fa fa-moon-o"></i>
+    </li>
   </ul>
-
   {{ partial "header/language-selector.html" . }}
 </nav>