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

resource/static/theme-hotaru/css/darkmode.css

@@ -33,3 +33,206 @@ body.dark .panel span {
 body.dark .page-section {
     border-bottom: 1px solid #212f36;
 }
+
+@media (max-width: 500px) {
+    .sidebar-container {
+        display: none
+    }
+}
+
+.sidebar-container ul {
+    position: fixed;
+    top: 50%;
+    list-style: none;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-transform: translateY(-50%);
+    transform: translateY(-50%);
+    z-index: 10;
+    -webkit-box-align: end;
+    -ms-flex-align: end;
+    align-items: flex-end;
+    right: 0
+}
+
+.sidebar-container ul li + li {
+    margin-top: 1.5em
+}
+
+.sidebar-container ul li {
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    padding: 0.4em 0 0.4em 0;
+    color: #f2f2f2;
+    cursor: pointer;
+    height: 2em;
+    -webkit-box-shadow: 0 2px 3px -1px rgba(47, 47, 47, 0.2);
+    box-shadow: 0 2px 3px -1px rgba(47, 47, 47, 0.2);
+    width: 35px;
+    border-radius: 0.5em 0 0 0.5em;
+    border: 1px solid rgba(255, 255, 255, 0.2)
+}
+
+@media (min-width: 1400px) {
+    .sidebar-container ul li {
+        height: 2.6em;
+        width: 45px
+    }
+}
+
+.sidebar-container ul li:first-child {
+    background-color: #fbb142
+}
+
+.sidebar-container ul li:nth-child(2) {
+    background-color: #124b8c
+}
+
+.sidebar-container ul li:last-child {
+    background-color: #555
+}
+
+.sidebar-container ul li i.fas {
+    font-size: 1em;
+    width: 36px;
+    text-align: center;
+    position: relative;
+    top: 0.04em
+}
+
+.sidebar-container ul li .fas.fa-sun {
+    font-size: 1.3em
+}
+
+@media (min-width: 1400px) {
+    .sidebar-container ul li .fas.fa-sun {
+        font-size: 1.6em
+    }
+}
+
+.sidebar-container ul li .fas.fa-moon {
+    font-size: 1.2em
+}
+
+@media (min-width: 1400px) {
+    .sidebar-container ul li .fas.fa-moon {
+        font-size: 1.5em
+    }
+}
+
+.sidebar-container ul li span {
+    font-size: 1em;
+    left: 36px;
+    position: absolute;
+    opacity: 0;
+    visibility: hidden;
+    font-weight: bold
+}
+
+.sidebar-container ul li:hover {
+    width: 110px !important;
+    -webkit-box-shadow: 0 2px 10px -1px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 10px -1px rgba(0, 0, 0, 0.1)
+}
+
+.sidebar-container ul li:hover span {
+    visibility: visible;
+    opacity: 1;
+    -webkit-transition-delay: 90ms;
+    transition-delay: 90ms
+}
+
+.sidebar-container ul li:hover i {
+    opacity: 1
+}
+
+.sidebar-container ul li:hover i.fa-sun {
+    -webkit-animation: rotateSun 3s linear infinite;
+    animation: rotateSun 3s linear infinite
+}
+
+@-webkit-keyframes rotateSun {
+    to {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg)
+    }
+}
+@keyframes rotateSun {
+    to {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg)
+    }
+}
+
+.sidebar-container ul li:hover i.fa-moon {
+    -webkit-animation: rotateMoon 2s linear infinite;
+    animation: rotateMoon 2s linear infinite
+}
+
+@-webkit-keyframes rotateMoon {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg)
+    }
+    50% {
+        -webkit-transform: rotate(-45deg);
+        transform: rotate(-45deg)
+    }
+    100% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg)
+    }
+}
+
+@keyframes rotateMoon {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg)
+    }
+    50% {
+        -webkit-transform: rotate(-45deg);
+        transform: rotate(-45deg)
+    }
+    100% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg)
+    }
+}
+
+.sidebar-container ul li:hover i.fa-th {
+    -webkit-animation: rotateTh 1s linear infinite;
+    animation: rotateTh 1s linear infinite
+}
+
+@-webkit-keyframes rotateTh {
+    0% {
+        -webkit-transform: perspective(400px) rotateY(0);
+        transform: perspective(400px) rotateY(0)
+    }
+    100% {
+        -webkit-transform: perspective(400px) rotateY(180deg);
+        transform: perspective(400px) rotateY(180deg)
+    }
+}
+
+@keyframes rotateTh {
+    0% {
+        -webkit-transform: perspective(400px) rotateY(0);
+        transform: perspective(400px) rotateY(0)
+    }
+    100% {
+        -webkit-transform: perspective(400px) rotateY(180deg);
+        transform: perspective(400px) rotateY(180deg)
+    }
+}
+

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) {