feat(webui): light/dark theme selection (#2343)

Closes #2093

Reviewed-on: #2343
Co-authored-by: Sainan <63328889+Sainan@users.noreply.github.com>
Co-committed-by: Sainan <63328889+Sainan@users.noreply.github.com>

static/webui/index.html

@@ -13,8 +13,7 @@
                 <span class="navbar-toggler-icon"></span>
             </button>
             <a class="navbar-brand">OpenWF WebUI</a>
-            <ul class="navbar-nav ms-auto mb-0">
-                <li class="nav-item dropdown">
+            <div class="ms-auto nav-item dropdown">
                 <button id="active-lang-name" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"></button>
                 <ul class="dropdown-menu dropdown-menu-end">
                     <li><a class="dropdown-item active" href="#" data-lang="en" onclick="event.preventDefault();setLanguage('en');">English</a></li>
@@ -32,9 +31,12 @@
                     <li><a class="dropdown-item" href="#" data-lang="zh" onclick="event.preventDefault();setLanguage('zh');">简体中文</a></li>
                     <li><a class="dropdown-item" href="#" data-lang="tc" onclick="event.preventDefault();setLanguage('tc');">繁體中文</a></li>
                     <li><a class="dropdown-item" href="#" data-lang="th" onclick="event.preventDefault();setLanguage('th');">แบบไทย</a></li>
+                    <li><hr class="dropdown-divider"></li>
+                    <li><a class="dropdown-item active" href="#" data-loc="theme_dark" data-theme="dark" onclick="event.preventDefault();setTheme('dark');"></a></li>
+                    <li><a class="dropdown-item" href="#" data-loc="theme_light" data-theme="light" onclick="event.preventDefault();setTheme('light');"></a></li>
                 </ul>
-                </li>
-                <li class="nav-item dropdown user-dropdown">
+            </div>
+            <div class="nav-item dropdown user-dropdown">
                 <button class="nav-link dropdown-toggle displayname" data-bs-toggle="dropdown" aria-expanded="false"></button>
                 <ul class="dropdown-menu dropdown-menu-end">
                     <li><a class="dropdown-item" href="/webui/" onclick="doLogout();" data-loc="navbar_logout"></a></li>
@@ -42,8 +44,7 @@
                     <li><a class="dropdown-item" href="#" onclick="event.preventDefault();renameAccount();" data-loc="navbar_renameAccount"></a></li>
                     <li><a class="dropdown-item" href="#" onclick="event.preventDefault();deleteAccount();" data-loc="navbar_deleteAccount"></a></li>
                 </ul>
-                </li>
-            </ul>
+            </div>
         </div>
     </nav>
     <div class="container pt-3 pb-3" id="main-view">

static/webui/script.js

@@ -230,6 +230,18 @@ function setLanguage(lang) {
     }
 }
 
+function setActiveTheme(theme) {
+    document.documentElement.setAttribute("data-bs-theme", theme);
+    document.querySelector("[data-theme].active").classList.remove("active");
+    document.querySelector("[data-theme=" + theme + "]").classList.add("active");
+}
+setActiveTheme(localStorage.getItem("theme") ?? "dark");
+
+function setTheme(theme) {
+    setActiveTheme(theme);
+    localStorage.setItem("theme", theme);
+}
+
 const webUiModularWeapons = [
     "/Lotus/Weapons/Sentients/OperatorAmplifiers/OperatorAmpWeapon",
     "/Lotus/Weapons/Ostron/Melee/LotusModularWeapon",

static/webui/translations/de.js

@@ -291,5 +291,8 @@ dict = {
     upgrade_SwiftExecute: `[UNTRANSLATED] Speed of Mercy Kills increased by 50%`,
     upgrade_OnHackInvis: `[UNTRANSLATED] Invisible for 15 seconds after hacking`,
 
+    theme_dark: `[UNTRANSLATED] Dark Theme`,
+    theme_light: `[UNTRANSLATED] Light Theme`,
+
     prettier_sucks_ass: ``
 };

static/webui/translations/en.js

@@ -290,5 +290,8 @@ dict = {
     upgrade_SwiftExecute: `Speed of Mercy Kills increased by 50%`,
     upgrade_OnHackInvis: `Invisible for 15 seconds after hacking`,
 
+    theme_dark: `Dark Theme`,
+    theme_light: `Light Theme`,
+
     prettier_sucks_ass: ``
 };

static/webui/translations/es.js

@@ -291,5 +291,8 @@ dict = {
     upgrade_SwiftExecute: `Velocidad de ejecuciones aumentada en un 50%`,
     upgrade_OnHackInvis: `Invisible durante 15 segundos después de hackear`,
 
+    theme_dark: `[UNTRANSLATED] Dark Theme`,
+    theme_light: `[UNTRANSLATED] Light Theme`,
+
     prettier_sucks_ass: ``
 };

static/webui/translations/fr.js

@@ -291,5 +291,8 @@ dict = {
     upgrade_SwiftExecute: `Vitesse des miséricordes augmentée de 50%`,
     upgrade_OnHackInvis: `Invisible pendant 15 secondes après un piratage`,
 
+    theme_dark: `[UNTRANSLATED] Dark Theme`,
+    theme_light: `[UNTRANSLATED] Light Theme`,
+
     prettier_sucks_ass: ``
 };

static/webui/translations/ru.js

@@ -291,5 +291,8 @@ dict = {
     upgrade_SwiftExecute: `[UNTRANSLATED] Speed of Mercy Kills increased by 50%`,
     upgrade_OnHackInvis: `[UNTRANSLATED] Invisible for 15 seconds after hacking`,
 
+    theme_dark: `[UNTRANSLATED] Dark Theme`,
+    theme_light: `[UNTRANSLATED] Light Theme`,
+
     prettier_sucks_ass: ``
 };

static/webui/translations/zh.js

@@ -291,5 +291,8 @@ dict = {
     upgrade_SwiftExecute: `怜悯之击速度提升50%`,
     upgrade_OnHackInvis: `入侵后隐身15秒`,
 
+    theme_dark: `[UNTRANSLATED] Dark Theme`,
+    theme_light: `[UNTRANSLATED] Light Theme`,
+
     prettier_sucks_ass: ``
 };