smallcloudai · oxyplay · Jun 12, 2024 · Jun 13, 2024 · Jun 13, 2024 · Jun 13, 2024
diff --git a/refact_webgui/webgui/static/admin-style.css b/refact_webgui/webgui/static/admin-style.css
@@ -30,3 +30,54 @@ html {
   width: 340px;
   height: auto;
 }
+.login-mode {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: 0;
+  cursor: pointer;
+  outline: 0 !important;
+  margin-right: 10px;
+  margin-bottom: 2px;
+  background: none;
+  padding: 20px;
+  position: absolute;
+  right: 20px;
+  top: 20px;
+}
+.login-mode svg {
+  width: 22px;
+  height: 22px;
+}
+.nav-moon,
+.nav-sun {
+  display: none;
+}
+html[data-bs-theme='dark'] .nav-sun {
+  display: block;
+}
+html[data-bs-theme='light'] .nav-moon {
+  display: block;
+}
+html[data-bs-theme='dark'] .login-mode svg path {
+  fill: #adb5bd;
+}
+html[data-bs-theme='dark'] .admin-logo path:not(.k) {
+  fill: rgba(255,255,255,0.65);
+}
+:root {
+  --dark-blue: #144289;
+  --dark-blue-hover: #2d62b3;
+}
+html[data-bs-theme='dark'] .btn-primary {
+  --bs-btn-bg: var(--dark-blue);
+  --bs-btn-border-color: var(--dark-blue);
+  --bs-btn-hover-bg: var(--dark-blue-hover);
+  --bs-btn-hover-border-color: var(--dark-blue-hover);
+  --bs-btn-active-bg: var(--dark-blue-hover);
+  --bs-btn-active-border-color: var(--dark-blue-hover);
+  --bs-btn-disabled-bg: var(--dark-disabled);
+  --bs-btn-disabled-border-color: var(--dark-disabled);
+}
diff --git a/refact_webgui/webgui/static/admin.html b/refact_webgui/webgui/static/admin.html
@@ -11,14 +11,15 @@
     <title>Refact Server Login</title>
 </head>
 <body>
+<button class="login-mode"><span class="nav-moon"><svg height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><title/><path d="M264,480A232,232,0,0,1,32,248C32,154,86,69.72,169.61,33.33a16,16,0,0,1,21.06,21.06C181.07,76.43,176,104.66,176,136c0,110.28,89.72,200,200,200,31.34,0,59.57-5.07,81.61-14.67a16,16,0,0,1,21.06,21.06C442.28,426,358,480,264,480Z"/></svg></span><span class="nav-sun"><svg height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><title/><path d="M256,118a22,22,0,0,1-22-22V48a22,22,0,0,1,44,0V96A22,22,0,0,1,256,118Z"/><path d="M256,486a22,22,0,0,1-22-22V416a22,22,0,0,1,44,0v48A22,22,0,0,1,256,486Z"/><path d="M369.14,164.86a22,22,0,0,1-15.56-37.55l33.94-33.94a22,22,0,0,1,31.11,31.11l-33.94,33.94A21.93,21.93,0,0,1,369.14,164.86Z"/><path d="M108.92,425.08a22,22,0,0,1-15.55-37.56l33.94-33.94a22,22,0,1,1,31.11,31.11l-33.94,33.94A21.94,21.94,0,0,1,108.92,425.08Z"/><path d="M464,278H416a22,22,0,0,1,0-44h48a22,22,0,0,1,0,44Z"/><path d="M96,278H48a22,22,0,0,1,0-44H96a22,22,0,0,1,0,44Z"/><path d="M403.08,425.08a21.94,21.94,0,0,1-15.56-6.45l-33.94-33.94a22,22,0,0,1,31.11-31.11l33.94,33.94a22,22,0,0,1-15.55,37.56Z"/><path d="M142.86,164.86a21.89,21.89,0,0,1-15.55-6.44L93.37,124.48a22,22,0,0,1,31.11-31.11l33.94,33.94a22,22,0,0,1-15.56,37.55Z"/><path d="M256,358A102,102,0,1,1,358,256,102.12,102.12,0,0,1,256,358Z"/></svg></span></button>
 <div class="container">
   <div class="row justify-content-center">
     <div class="col-md-6">
       <form id="login-form">
         <div class="text-center">      
           <svg class="admin-logo mb-5" width="701" height="115" viewBox="0 0 701 115" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M79.282 114.261C74.418 114.261 70.066 113.323 66.226 111.445C62.4713 109.653 59.5273 106.965 57.394 103.381C55.2607 99.7973 54.194 95.4026 54.194 90.1973V78.0373C54.194 75.4773 53.3407 73.3866 51.634 71.7653C49.9273 70.0586 47.666 69.0773 44.85 68.8213V58.0693C47.666 57.8133 49.9273 56.7893 51.634 54.9973C53.3407 53.12 54.194 50.9866 54.194 48.5973V36.6933C54.194 31.5733 55.2607 27.2213 57.394 23.6373C59.6127 20.0533 62.5993 17.3226 66.354 15.4453C70.194 13.4826 74.5033 12.5013 79.282 12.5013H84.914V24.5333H81.074C77.5753 24.5333 74.7167 25.728 72.498 28.1173C70.3647 30.4213 69.298 33.6213 69.298 37.7173V46.9333C69.298 51.968 67.9753 56.0213 65.33 59.0933C62.6847 62.08 59.2713 64.128 55.09 65.2373L55.218 61.3973C59.3993 62.592 62.77 64.7253 65.33 67.7973C67.9753 70.8693 69.298 74.8373 69.298 79.7013V89.1733C69.298 93.44 70.3647 96.7253 72.498 99.0293C74.7167 101.248 77.5753 102.357 81.074 102.357H84.914V114.261H79.282Z" fill="#E7150D"/>
-            <path d="M0 114.261L0 12.3733H15.232V114.261H0ZM4.992 114.261V102.357H33.152V114.261H4.992ZM4.992 24.2773V12.3733L33.152 12.3733V24.2773H4.992Z" fill="#E7150D"/>
+            <path class="k" d="M79.282 114.261C74.418 114.261 70.066 113.323 66.226 111.445C62.4713 109.653 59.5273 106.965 57.394 103.381C55.2607 99.7973 54.194 95.4026 54.194 90.1973V78.0373C54.194 75.4773 53.3407 73.3866 51.634 71.7653C49.9273 70.0586 47.666 69.0773 44.85 68.8213V58.0693C47.666 57.8133 49.9273 56.7893 51.634 54.9973C53.3407 53.12 54.194 50.9866 54.194 48.5973V36.6933C54.194 31.5733 55.2607 27.2213 57.394 23.6373C59.6127 20.0533 62.5993 17.3226 66.354 15.4453C70.194 13.4826 74.5033 12.5013 79.282 12.5013H84.914V24.5333H81.074C77.5753 24.5333 74.7167 25.728 72.498 28.1173C70.3647 30.4213 69.298 33.6213 69.298 37.7173V46.9333C69.298 51.968 67.9753 56.0213 65.33 59.0933C62.6847 62.08 59.2713 64.128 55.09 65.2373L55.218 61.3973C59.3993 62.592 62.77 64.7253 65.33 67.7973C67.9753 70.8693 69.298 74.8373 69.298 79.7013V89.1733C69.298 93.44 70.3647 96.7253 72.498 99.0293C74.7167 101.248 77.5753 102.357 81.074 102.357H84.914V114.261H79.282Z" fill="#E7150D"/>
+            <path class="k" d="M0 114.261L0 12.3733H15.232V114.261H0ZM4.992 114.261V102.357H33.152V114.261H4.992ZM4.992 24.2773V12.3733L33.152 12.3733V24.2773H4.992Z" fill="#E7150D"/>
             <path d="M668.441 98.944L668.441 28.8L679.065 28.8L679.065 98.944H668.441ZM644.561 98.944V90.368L700.641 90.368V98.944L644.561 98.944ZM655.033 37.376V28.8L673.817 28.8V37.376L655.033 37.376ZM667.545 15.872V3.58399L679.833 3.58398V15.872L667.545 15.872Z" fill="#0E0E10"/>
             <path fill-rule="evenodd" clip-rule="evenodd" d="M624.371 90.0572L624.638 98.9437L634.622 98.9437L634.622 53.8877C634.622 36.9793 621.615 27.2637 605.414 27.2637C595.192 27.2637 583.522 30.7966 577.676 39.5689L585.729 45.4302C589.07 38.3592 597.642 35.5837 605.158 35.5837C615.991 35.5837 624.126 42.0529 624.126 53.5037V57.3437L606.846 57.3437C596.777 57.3437 588.969 59.349 583.422 63.3597C577.876 67.3704 575.102 73.0023 575.102 80.2557C575.102 84.437 576.041 88.0637 577.918 91.1357C579.881 94.1223 582.612 96.4263 586.11 98.0477C589.609 99.669 594.82 100.48 599.428 100.48C608.951 100.48 619.591 96.7002 624.371 90.0572ZM624.126 78.0556V65.5357L606.334 65.5357C599.849 65.5357 594.772 66.773 591.102 69.2477C587.433 71.7223 585.598 75.221 585.598 79.7437C585.598 83.4983 586.921 86.4423 589.566 88.5757C592.212 90.6237 595.668 91.6477 599.934 91.6477C610.6 91.6477 619.285 87.1941 624.126 78.0556Z" fill="#0E0E10"/>
             <path d="M541.639 98.9441L541.639 85.2481L555.207 85.248L555.207 98.944L541.639 98.9441Z" fill="#0E0E10"/>

diff --git a/refact_webgui/webgui/static/admin.js b/refact_webgui/webgui/static/admin.js
@@ -1,3 +1,8 @@
+let stored_theme = localStorage.getItem('theme') || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+if (stored_theme) {
+    document.documentElement.setAttribute('data-bs-theme', stored_theme)
+}
+
 document.getElementById("login-form").addEventListener('submit', (event) => {
     event.preventDefault();
     const token = document.getElementById("token").value;
@@ -30,3 +35,18 @@ document.getElementById("login-form").addEventListener('submit', (event) => {
         login_failed.classList.add("d-none");
     });
 });
+
+const site_mode = document.querySelector('.login-mode');
+
+
+ site_mode.addEventListener('click', () => {
+     var current_theme = document.documentElement.getAttribute("data-bs-theme");
+     var target_theme = "light";
+
+     if (current_theme === "light") {
+         target_theme = "dark";
+     }
+
+     document.documentElement.setAttribute('data-bs-theme', target_theme)
+     localStorage.setItem('theme', target_theme);
+ });
diff --git a/refact_webgui/webgui/static/index.html b/refact_webgui/webgui/static/index.html
@@ -25,8 +25,8 @@
     <div class="container-xxl">
       <a class="navbar-brand">
         <svg width="701" height="115" viewBox="0 0 701 115" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M79.282 114.261C74.418 114.261 70.066 113.323 66.226 111.445C62.4713 109.653 59.5273 106.965 57.394 103.381C55.2607 99.7973 54.194 95.4026 54.194 90.1973V78.0373C54.194 75.4773 53.3407 73.3866 51.634 71.7653C49.9273 70.0586 47.666 69.0773 44.85 68.8213V58.0693C47.666 57.8133 49.9273 56.7893 51.634 54.9973C53.3407 53.12 54.194 50.9866 54.194 48.5973V36.6933C54.194 31.5733 55.2607 27.2213 57.394 23.6373C59.6127 20.0533 62.5993 17.3226 66.354 15.4453C70.194 13.4826 74.5033 12.5013 79.282 12.5013H84.914V24.5333H81.074C77.5753 24.5333 74.7167 25.728 72.498 28.1173C70.3647 30.4213 69.298 33.6213 69.298 37.7173V46.9333C69.298 51.968 67.9753 56.0213 65.33 59.0933C62.6847 62.08 59.2713 64.128 55.09 65.2373L55.218 61.3973C59.3993 62.592 62.77 64.7253 65.33 67.7973C67.9753 70.8693 69.298 74.8373 69.298 79.7013V89.1733C69.298 93.44 70.3647 96.7253 72.498 99.0293C74.7167 101.248 77.5753 102.357 81.074 102.357H84.914V114.261H79.282Z" fill="#E7150D"/>
-          <path d="M0 114.261L0 12.3733H15.232V114.261H0ZM4.992 114.261V102.357H33.152V114.261H4.992ZM4.992 24.2773V12.3733L33.152 12.3733V24.2773H4.992Z" fill="#E7150D"/>
+          <path class="k" d="M79.282 114.261C74.418 114.261 70.066 113.323 66.226 111.445C62.4713 109.653 59.5273 106.965 57.394 103.381C55.2607 99.7973 54.194 95.4026 54.194 90.1973V78.0373C54.194 75.4773 53.3407 73.3866 51.634 71.7653C49.9273 70.0586 47.666 69.0773 44.85 68.8213V58.0693C47.666 57.8133 49.9273 56.7893 51.634 54.9973C53.3407 53.12 54.194 50.9866 54.194 48.5973V36.6933C54.194 31.5733 55.2607 27.2213 57.394 23.6373C59.6127 20.0533 62.5993 17.3226 66.354 15.4453C70.194 13.4826 74.5033 12.5013 79.282 12.5013H84.914V24.5333H81.074C77.5753 24.5333 74.7167 25.728 72.498 28.1173C70.3647 30.4213 69.298 33.6213 69.298 37.7173V46.9333C69.298 51.968 67.9753 56.0213 65.33 59.0933C62.6847 62.08 59.2713 64.128 55.09 65.2373L55.218 61.3973C59.3993 62.592 62.77 64.7253 65.33 67.7973C67.9753 70.8693 69.298 74.8373 69.298 79.7013V89.1733C69.298 93.44 70.3647 96.7253 72.498 99.0293C74.7167 101.248 77.5753 102.357 81.074 102.357H84.914V114.261H79.282Z" fill="#E7150D"/>
+          <path class="k" d="M0 114.261L0 12.3733H15.232V114.261H0ZM4.992 114.261V102.357H33.152V114.261H4.992ZM4.992 24.2773V12.3733L33.152 12.3733V24.2773H4.992Z" fill="#E7150D"/>
           <path d="M668.441 98.944L668.441 28.8L679.065 28.8L679.065 98.944H668.441ZM644.561 98.944V90.368L700.641 90.368V98.944L644.561 98.944ZM655.033 37.376V28.8L673.817 28.8V37.376L655.033 37.376ZM667.545 15.872V3.58399L679.833 3.58398V15.872L667.545 15.872Z" fill="#0E0E10"/>
           <path fill-rule="evenodd" clip-rule="evenodd" d="M624.371 90.0572L624.638 98.9437L634.622 98.9437L634.622 53.8877C634.622 36.9793 621.615 27.2637 605.414 27.2637C595.192 27.2637 583.522 30.7966 577.676 39.5689L585.729 45.4302C589.07 38.3592 597.642 35.5837 605.158 35.5837C615.991 35.5837 624.126 42.0529 624.126 53.5037V57.3437L606.846 57.3437C596.777 57.3437 588.969 59.349 583.422 63.3597C577.876 67.3704 575.102 73.0023 575.102 80.2557C575.102 84.437 576.041 88.0637 577.918 91.1357C579.881 94.1223 582.612 96.4263 586.11 98.0477C589.609 99.669 594.82 100.48 599.428 100.48C608.951 100.48 619.591 96.7002 624.371 90.0572ZM624.126 78.0556V65.5357L606.334 65.5357C599.849 65.5357 594.772 66.773 591.102 69.2477C587.433 71.7223 585.598 75.221 585.598 79.7437C585.598 83.4983 586.921 86.4423 589.566 88.5757C592.212 90.6237 595.668 91.6477 599.934 91.6477C610.6 91.6477 619.285 87.1941 624.126 78.0556Z" fill="#0E0E10"/>
           <path d="M541.639 98.9441L541.639 85.2481L555.207 85.248L555.207 98.944L541.639 98.9441Z" fill="#0E0E10"/>
@@ -59,6 +59,9 @@
       {{/unless}}
       {{/each}}
       <div class="d-flex ms-auto">
+        <li class="nav-item nav-modewrap">
+          <button class="nav-mode"><span class="nav-moon"><svg height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><title/><path d="M264,480A232,232,0,0,1,32,248C32,154,86,69.72,169.61,33.33a16,16,0,0,1,21.06,21.06C181.07,76.43,176,104.66,176,136c0,110.28,89.72,200,200,200,31.34,0,59.57-5.07,81.61-14.67a16,16,0,0,1,21.06,21.06C442.28,426,358,480,264,480Z"/></svg></span><span class="nav-sun"><svg height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><title/><path d="M256,118a22,22,0,0,1-22-22V48a22,22,0,0,1,44,0V96A22,22,0,0,1,256,118Z"/><path d="M256,486a22,22,0,0,1-22-22V416a22,22,0,0,1,44,0v48A22,22,0,0,1,256,486Z"/><path d="M369.14,164.86a22,22,0,0,1-15.56-37.55l33.94-33.94a22,22,0,0,1,31.11,31.11l-33.94,33.94A21.93,21.93,0,0,1,369.14,164.86Z"/><path d="M108.92,425.08a22,22,0,0,1-15.55-37.56l33.94-33.94a22,22,0,1,1,31.11,31.11l-33.94,33.94A21.94,21.94,0,0,1,108.92,425.08Z"/><path d="M464,278H416a22,22,0,0,1,0-44h48a22,22,0,0,1,0,44Z"/><path d="M96,278H48a22,22,0,0,1,0-44H96a22,22,0,0,1,0,44Z"/><path d="M403.08,425.08a21.94,21.94,0,0,1-15.56-6.45l-33.94-33.94a22,22,0,0,1,31.11-31.11l33.94,33.94a22,22,0,0,1-15.55,37.56Z"/><path d="M142.86,164.86a21.89,21.89,0,0,1-15.55-6.44L93.37,124.48a22,22,0,0,1,31.11-31.11l33.94,33.94a22,22,0,0,1-15.56,37.55Z"/><path d="M256,358A102,102,0,1,1,358,256,102.12,102.12,0,0,1,256,358Z"/></svg></span></button>
+        </li>
         <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button"
             aria-expanded="false">Resources</a>

diff --git a/refact_webgui/webgui/static/index.js b/refact_webgui/webgui/static/index.js
@@ -4,6 +4,14 @@ const req = await fetch('list-plugins');
 const plugins = await req.json();
 let history_state = [];
 let create_h_state = true;
+
+
+let stored_theme = localStorage.getItem('theme') || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+if (stored_theme) {
+    document.documentElement.setAttribute('data-bs-theme', stored_theme)
+}
+
+
 // show navigation bar immediately, import later
 plugins_to_top_nav_bar(plugins);
 
@@ -279,3 +287,16 @@ function logout_button_init() {
 }
 
 logout_button_init()
+
+const site_mode = document.querySelector('.nav-mode');
+site_mode.addEventListener('click', () => {
+    var current_theme = document.documentElement.getAttribute("data-bs-theme");
+    var target_theme = "light";
+
+    if (current_theme === "light") {
+        target_theme = "dark";
+    }
+
+    document.documentElement.setAttribute('data-bs-theme', target_theme)
+    localStorage.setItem('theme', target_theme);
+});