WIP: feat(webui): Themes dropdown menu #2093

Draft
Animan8000 wants to merge 12 commits from Animan8000/SpaceNinjaServer:main into main
8 changed files with 35 additions and 2 deletions

View File

@ -1,6 +1,10 @@
<!doctype html>
<html lang="en" data-bs-theme="dark">
<html lang="en">
<head>
<script>
// Set theme early to prevent flash of incorrect style
document.documentElement.setAttribute("data-bs-theme", localStorage.getItem("theme") || "dark");
</script>
<title>OpenWF WebUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/webui/libs/bootstrap.min.css" />
@ -34,7 +38,14 @@
<li><a class="dropdown-item" href="#" data-lang="th" onclick="event.preventDefault();setLanguage('th');">แบบไทย</a></li>
</ul>
</li>
<li class="nav-item dropdown user-dropdown">
<li class="nav-item dropdown">
<button id="active-theme-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-theme="dark" onclick="event.preventDefault();setTheme('dark');" data-loc="navbar_darkTheme"></a></li>
<li><a class="dropdown-item" href="#" data-theme="light" onclick="event.preventDefault();setTheme('light');" data-loc="navbar_lightTheme"></a></li>
</ul>
</li>
<li 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="logout();" data-loc="navbar_logout"></a></li>

View File

@ -155,6 +155,7 @@ function setActiveLanguage(lang) {
script.src = "/translations/" + webui_lang + ".js";
script.onload = function () {
updateLocElements();
setTheme(localStorage.getItem("theme") ?? "dark");
resolve(window.dict);
};
document.documentElement.appendChild(script);
@ -172,6 +173,15 @@ function setLanguage(lang) {
}
}
function setTheme(theme) {
localStorage.setItem("theme", theme);
document.documentElement.setAttribute("data-bs-theme", theme);
const themeName = document.querySelector(`[data-theme="${theme}"]`)?.textContent;
document.getElementById("active-theme-name").textContent = themeName;
document.querySelectorAll("[data-theme].active").forEach(el => el.classList.remove("active"));
document.querySelector(`[data-theme="${theme}"]`)?.classList.add("active");
}
const webUiModularWeapons = [
"/Lotus/Weapons/Sentients/OperatorAmplifiers/OperatorAmpWeapon",
"/Lotus/Weapons/Ostron/Melee/LotusModularWeapon",

View File

@ -63,6 +63,8 @@ dict = {
navbar_logout: `Abmelden`,
navbar_renameAccount: `Account umbenennen`,
navbar_deleteAccount: `Account löschen`,
navbar_darkTheme: `Dunkles Design`,
navbar_lightTheme: `Helles Design`,
navbar_inventory: `Inventar`,
navbar_mods: `Mods`,
navbar_quests: `Quests`,

View File

@ -62,6 +62,8 @@ dict = {
navbar_logout: `Logout`,
navbar_renameAccount: `Rename Account`,
navbar_deleteAccount: `Delete Account`,
navbar_darkTheme: `Dark Theme`,
navbar_lightTheme: `Light Theme`,
navbar_inventory: `Inventory`,
navbar_mods: `Mods`,
navbar_quests: `Quests`,

View File

@ -63,6 +63,8 @@ dict = {
navbar_logout: `Cerrar sesión`,
navbar_renameAccount: `Renombrar cuenta`,
navbar_deleteAccount: `Eliminar cuenta`,
navbar_darkTheme: `[UNTRANSLATED] Dark Theme`,
navbar_lightTheme: `[UNTRANSLATED] Light Theme`,
navbar_inventory: `Inventario`,
navbar_mods: `Mods`,
navbar_quests: `Misiones`,

View File

@ -63,6 +63,8 @@ dict = {
navbar_logout: `Déconnexion`,
navbar_renameAccount: `Renommer le compte`,
navbar_deleteAccount: `Supprimer le compte`,
navbar_darkTheme: `[UNTRANSLATED] Dark Theme`,
navbar_lightTheme: `[UNTRANSLATED] Light Theme`,
navbar_inventory: `Inventaire`,
navbar_mods: `Mods`,
navbar_quests: `Quêtes`,

View File

@ -63,6 +63,8 @@ dict = {
navbar_logout: `Выйти`,
navbar_renameAccount: `Переименовать аккаунт`,
navbar_deleteAccount: `Удалить аккаунт`,
navbar_darkTheme: `[UNTRANSLATED] Dark Theme`,
navbar_lightTheme: `[UNTRANSLATED] Light Theme`,
navbar_inventory: `Инвентарь`,
navbar_mods: `Моды`,
navbar_quests: `Квесты`,

View File

@ -63,6 +63,8 @@ dict = {
navbar_logout: `退出登录`,
navbar_renameAccount: `重命名账户`,
navbar_deleteAccount: `删除账户`,
navbar_darkTheme: `[UNTRANSLATED] Dark Theme`,
navbar_lightTheme: `[UNTRANSLATED] Light Theme`,
navbar_inventory: `仓库`,
navbar_mods: `Mods`,
navbar_quests: `任务`,