添加第三个主题的手动切换白黑

resource/template/theme-hotaru/home.html

@@ -15,10 +15,11 @@
 
     <!-- Styles -->
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
+    <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.min.css">
     <link rel="stylesheet" type="text/css" href="/static/semantic-ui-alerts.min.css">
     <link rel="stylesheet" href="/static/theme-hotaru/css/core.css?v202012121912" type="text/css">
     <link rel="stylesheet" href="/static/theme-hotaru/css/main.css?v202101171153" type="text/css">
-    <link rel="stylesheet" href="/static/theme-hotaru/css/darkmode.css?v202012121912" type="text/css">
+    <link rel="stylesheet" href="/static/theme-hotaru/css/darkmode.css?v202103021121" type="text/css">
     {{if ts .CustomCode}}
     {{.CustomCode|safe}}
     {{end}}
@@ -132,6 +133,12 @@
             </div>
         </div>
     </div>
+    <div class="sidebar-container">
+        <ul>
+            <li id='sun'><i class="fas fa-sun" title="白昼模式"></i><span>白昼模式</span></li>
+            <li id='moon'><i class="fas fa-moon" title="暗黑模式"></i><span>暗黑模式</span></li>
+        </ul>
+    </div>
     <footer>
         <p style="text-align:center;padding: 15px;">Powered by <a href="https://github.com/naiba/nezha">哪吒监控</a> build ·
             {{.Version}}
@@ -226,6 +233,17 @@
                 }
             }
         })
+
+
+        $(function(){
+            $('#sun').click(function(){
+                $('body').removeClass('dark');
+            });
+            $('#moon').click(function(){
+                $('body').addClass('dark');
+            })
+        })
+
         const wsProtocol = window.location.protocol == "https:" ? "wss" : "ws"
         const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
         ws.onopen = function (evt) {