add: light theme base

This commit will add the base of light theme support in ReZygisk WebUI

module/build.gradle.kts

@@ -165,12 +165,14 @@ androidComponents.onVariants { variant ->
                     set.add(Pair(root.file("webroot/index.html").asFile, null))
                     set.add(Pair(root.file("webroot/js/main.js").asFile, null))
                     set.add(Pair(root.file("webroot/js/kernelsu.js").asFile, null))
+                    set.add(Pair(root.file("webroot/js/init_theme.js").asFile, null))
                     set.add(Pair(root.file("webroot/fonts/ProductSans-Regular.ttf").asFile, null))
                     set.add(Pair(root.file("webroot/fonts/ProductSans-Italic.ttf").asFile, null))
                     set.add(Pair(root.file("webroot/css/index.css").asFile, null))
                     set.add(Pair(root.file("webroot/css/fonts.css").asFile, null))
                     set.add(Pair(root.file("webroot/assets/mark.svg").asFile, null))
                     set.add(Pair(root.file("webroot/assets/tick.svg").asFile, null))
+                    set.add(Pair(root.file("webroot/assets/warning.svg").asFile, null))
                     sig.initSign(privKey)
                     set.forEach { it.first.sha(it.second) }
                     val signFile = root.file(name).asFile

webroot/assets/warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>

webroot/css/index.css

@@ -1,12 +1,19 @@
 :root {
+  --background: #181c20;
+  --font: #fff;
+  --desc: #c9c9c9;
+  --spliter: #283136;
   --bright: #8d1d19;
   --dim: #1d2327;
   --error: #8d1d19;
+  /* Locked Color */
+  --lock-desc: #c9c9c9;
+  --lock: #fff;
 }
 
 * {
-  background-color: #181c20;
-  color: #fff;
+  background-color: var(--background);
+  color: var(--font);
   font-family: 'ProductSans Regular', 'ProductSans Italic', sans-serif
 }
 
@@ -18,6 +25,7 @@ a {
   text-decoration: none !important;
 }
 
+/* Components */
 .header {
   position: fixed;
   left: 0;
@@ -32,7 +40,7 @@ a {
   margin-bottom: 10px;
   padding: 15px 15px;
   border-radius: 15px;
-  color: #fff;
+  color: var(--lock);
 }
 
 .content {
@@ -40,7 +48,11 @@ a {
 }
 
 .spliter {
- border-bottom: 1px solid #283136; 
+  border-bottom: 1px solid var(--spliter); 
+}
+
+.desc {
+  color: var(--desc);
 }
 
 .liste {
@@ -49,10 +61,12 @@ a {
   display: flex;
 }
 
+/* Card type */
 .bright {
   border: 5px solid var(--bright);
   background: var(--bright);
 }
+
 .brightc {
   background: var(--bright);
 }
@@ -64,4 +78,13 @@ a {
 
 .dimc {
   background: var(--dim);
+}
+
+/* Locked */
+.lock {
+  color: var(--lock);
+}
+
+.lockd {
+  color: var(--lock-desc);
 }

webroot/index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="initial-scale=1, width=device-width" />
     <meta name="viewport" content="viewport-fit=cover" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="js/init_theme.js" type="module"></script>
     <link rel="stylesheet" href="css/fonts.css">
     <link rel="stylesheet" href="css/index.css">
     <script src="js/main.js" type="module"></script>
@@ -17,25 +18,25 @@
         <div id="rezygisk_icon_state" class="brightc">
           <img class="brightc" src="assets/mark.svg">
         </div>
-        <div id="rezygisk_state" class="brightc content" style="font-size: 1.2em; padding-bottom: 4px; padding-left: 5px;">
+        <div id="rezygisk_state" class="brightc content lock" style="font-size: 1.2em; padding-bottom: 4px; padding-left: 5px;">
           ReZygisk is at an unknown state!
         </div>
       </div>
       <div class="brightc content">
-        <div class="brightc" style="font-size: 1.1em">Version</div>
-        <div class="brightc" id="version_code" style="color: #c9c9c9; font-size: 0.9em; margin-top: 3px;">Unknown</div>
+        <div class="brightc lock" style="font-size: 1.1em">Version</div>
+        <div class="brightc desc lockd" id="version_code" style="font-size: 0.9em; margin-top: 3px;">Unknown</div>
       </div>
       <div class="brightc content">
-        <div class="brightc" style="font-size: 1.1em">Root Implementation</div>
-        <div class="brightc" id="root_impl" style="color: #c9c9c9; font-size: 0.9em; margin-top: 3px;">Unknown</div>
+        <div class="brightc lock" style="font-size: 1.1em">Root Implementation</div>
+        <div class="brightc desc lockd" id="root_impl" style="font-size: 0.9em; margin-top: 3px;">Unknown</div>
       </div>
       <div class="brightc content">
-        <div class="brightc" style="font-size: 1.1em">Zygote64</div>
-        <div class="brightc" id="is_zygote64_injected" style="color: #c9c9c9; font-size: 0.9em; margin-top: 3px;">Unknown</div>
+        <div class="brightc lock" style="font-size: 1.1em">Zygote64</div>
+        <div class="brightc desc lockd" id="is_zygote64_injected" style="font-size: 0.9em; margin-top: 3px;">Unknown</div>
       </div>
-      <div class="brightc content">
-        <div class="brightc" style="font-size: 1.1em">Zygote32</div>
-        <div class="brightc" id="is_zygote32_injected" style="color: #c9c9c9; font-size: 0.9em; margin-top: 3px;">Unknown</div>
+      <div class="brightc content lock">
+        <div class="brightc lock" style="font-size: 1.1em">Zygote32</div>
+        <div class="brightc desc lockd" id="is_zygote32_injected" style="font-size: 0.9em; margin-top: 3px;">Unknown</div>
       </div>
     </div>
 

webroot/js/init_theme.js

@@ -0,0 +1,41 @@
+(() => {
+  let sys_theme = localStorage.getItem("system-theme");
+  const rootCss = document.querySelector(':root')
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+    const newColorScheme = event.matches ? "dark" : "light";
+    if (sys_theme.lock) return
+    switch (newColorScheme) {
+      case "dark": {
+        rootCss.style.setProperty('--background', '#181c20');
+        rootCss.style.setProperty('--font', '#ffffff');
+        rootCss.style.setProperty('--desc', '#c9c9c9');
+        rootCss.style.setProperty('--spliter', '#283136');
+        sys_theme = setData(false, "dark")
+        return
+      }
+      case "light": {
+        rootCss.style.setProperty('--background', '#eff1f6');
+        rootCss.style.setProperty('--font', '#2c2c2c');
+        rootCss.style.setProperty('--desc', '#444444');
+        rootCss.style.setProperty('--spliter', '#4f6069');
+        sys_theme = setData(false, "light")
+        return
+      }
+    }
+  });
+  if (!sys_theme) sys_theme = setData(false, "dark")
+  if (sys_theme.lock) return
+  if (sys_theme.mode === "dark") return
+  if (window.matchMedia && !window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    rootCss.style.setProperty('--background', '#eff1f6');
+    rootCss.style.setProperty('--font', '#2c2c2c');
+    rootCss.style.setProperty('--desc', '#444444');
+    rootCss.style.setProperty('--spliter', '#4f6069');
+    sys_theme = setData(false, "light")
+  }
+})()
+
+function setData(lock, mode) {
+  localStorage.setItem("system-theme", { lock, mode });
+  return localStorage.getItem("system-theme")
+}