update

luasrc/app.js

@@ -1,13 +1,35 @@
-
+(function () {
-(function() {
     // your page initialization code here
     // the DOM will be available here
   
-    const toggler = document.querySelector(".toggler")
+    const toggler = document.querySelector(".toggler");
-    console.log(toggler)
+    console.log(toggler);
-    toggler.addEventListener("click", function(e){
+    toggler.addEventListener(
-        var element = document.querySelector(".navbar");
+      "click",
+      function (e) {
+        const element = document.querySelector(".navbar");
         element.classList.toggle("active");
-    }, false)
+      },
+      false
+    );
+  
+    const isDark = localStorage.getItem("isDark");
+    if (isDark == 1) {
+      const element = document.querySelector("body");
+      element.classList.add("dark");
+    }
+    const themetoggler = document.querySelector(".themetoggler");
+    themetoggler.addEventListener(
+      "click",
+      function (e) {
+        e.preventDefault();
+        const element = document.querySelector("body");
+        element.classList.toggle("dark");
+  
+        const isDark = localStorage.getItem("isDark");
+        localStorage.setItem("isDark", isDark == 1 ? 0 : 1);
+      },
+      false
+    );
+  })();
   
- })();

luasrc/gaya/gaya.css

@@ -52,9 +52,6 @@
   text-align: center !important;
   background: inherit;
 }
-.td[width="33%"] {
-  padding: 1.1em;
-}
 .table[width="33%"],
 .th[width="33%"],
 .td[width="33%"] {
@@ -214,10 +211,21 @@ header > .fill > .container {
   padding: 0.5rem 1rem 0;
 }
 header > .fill > .container > #logo {
-  margin: 0 3.5rem 0 1.5rem;
+  padding: 0;
+  margin: 0 !important;
+  position: absolute; 
+  left: 0;
+  top: 50%;
+  height: 100%;
+  transform: translateY(-50%);
+  padding: 1rem;
+  display: flex;
+  justify-content: center;
+  width: calc(16rem);
 }
 header > .fill > .container > #logo > img {
-  width: calc(0% + 10rem);
+  width: auto;
+  height: 100%;
   margin-top: -0.1rem;
 }
 header > .fill > .container > .brand {
@@ -361,7 +369,7 @@ small {
     float: left;
     text-align: center;
     padding: 8px 0;
-    width: 20%;
+		width: calc(100% / 6);
     text-decoration: none;
     max-width: 100px;
   }
@@ -437,9 +445,9 @@ small {
 .main > .main-left {
   position: fixed;
   top: 3.5rem;
+  width: calc(0% + 16rem);
   float: left;
   overflow-x: auto;
-  width: calc(0% + 16rem);
   height: calc(100% - 4rem);
   background-color: var(--menu-bg-color);
   transition: visibility 400ms, width 400ms;
@@ -2165,12 +2173,12 @@ div > .table > .tr:nth-of-type(2n),
     margin-top: 0;
   }
   header > .fill > .container > #logo {
-    margin: 0 2.5rem 0 0.5rem;
+    width: calc(13rem);
   }
-  .main-left {
+  .main > .main-left{
     width: calc(0% + 13rem);
   }
-  .main-right {
+  .main > .main-right {
     width: calc(100% - 13rem);
   }
   .btn:not(button),
@@ -2219,12 +2227,12 @@ div > .table > .tr:nth-of-type(2n),
     top: 3.5rem;
     height: calc(100% - 3.5rem);
   }
-  .main-left {
+  .main > .main-left {
     top: 3.5rem;
     width: calc(0% + 13rem);
     height: calc(100% - 3.5rem);
   }
-  .main-right {
+  .main > .main-right {
     width: calc(100% - 13rem);
   }
   .tabs > li > a,
@@ -2288,12 +2296,12 @@ div > .table > .tr:nth-of-type(2n),
   .main > .loading > span {
     top: 25%;
   }
-  .main-left {
+  .main > .main-left {
     position: fixed;
     z-index: 100;
     visibility: hidden;
   }
-  .main-right {
+  .main > .main-right {
     width: 100%;
   }
   .showSide {
@@ -2449,6 +2457,19 @@ div > .table > .tr:nth-of-type(2n),
   }
 }
 @media screen and (max-width: 600px) {
+  header > .fill > .container > #logo {
+    padding: 1rem;
+    margin: 0;
+    position: absolute; 
+    left: 50%;
+    top:0;
+    width: 100px;
+    transform: translateX(-50%);
+  }
+  header > .fill > .container > #logo > img{
+    width: 100%;
+    margin-top:0;
+  }
   .cbi-progressbar::after {
     font-size: 0.95em;
     line-height: 1.5;

template/header.htm

@@ -45,6 +45,7 @@
 <meta name="application-name" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
 <meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
 <link rel="stylesheet" href="<%=media%>/gaya/gaya.css">
+<link rel="stylesheet" href="<%=media%>/gaya/gaya.dark.css">
 <link rel="shortcut icon" href="<%=media%>/favicon.ico">
 <% if node and node.css then %>
 <link rel="stylesheet" href="<%=resource%>/<%=node.css%>">
@@ -67,6 +68,7 @@
   <a href="/cgi-bin/luci/admin/nas/tinyfm"><img src="<%=media%>/images/file.png" /></a>
   <a href="/cgi-bin/luci/admin/status/vnstat2"><img src="<%=media%>/images/vnstat.png" /></a>
   <a href="/cgi-bin/luci/admin/status/about"><img src="<%=media%>/images/about.png" /></a>
+  <a href="javascript:void(0)" class="themetoggler"><img src="<%=media%>/images/reload.png" /></a>
 			</div>
         <label class="toggler">
 			<img src="<%=media%>/gaya/icons/arrow.svg" alt="">