From bd4060e002e85448b3c9f7e3ed55c656fa67fec7 Mon Sep 17 00:00:00 2001
From: fretuks <frederik@spirgi.com>
Date: Wed, 15 Apr 2026 22:11:42 +0200
Subject: [PATCH] fix dark mode styling

---
 public/market.js     |   5 +
 public/script.js     |   7 ++
 public/settings.html |   7 ++
 public/settings.js   |  13 ++
 public/style.css     | 275 ++++++++++++++++++++++++++++---------------
 5 files changed, 209 insertions(+), 98 deletions(-)

diff --git a/public/market.js b/public/market.js
index 7657758..286c9ba 100644
--- a/public/market.js
+++ b/public/market.js
@@ -104,6 +104,10 @@ function applyTheme(themeKey) {
     });
 }
 
+function applyThemeMode(modeKey) {
+    document.body.dataset.themeMode = modeKey === "dark" ? "dark" : "light";
+}
+
 function setMarketStatus(message, state = "") {
     marketStatus.textContent = message;
     marketStatus.className = state ? `status persona-status ${state}` : "status persona-status";
@@ -701,6 +705,7 @@ marketPersonaForm.addEventListener("submit", (event) => {
 
 window.addEventListener("load", async () => {
     applyTheme(localStorage.getItem("krishd-theme") || "fakegpt");
+    applyThemeMode(localStorage.getItem("krishd-theme-mode") || "light");
     const params = new URLSearchParams(window.location.search);
     setMarketSort("assistant", params.get("assistantSort") || "best", {reload: false});
     setMarketSort("user", params.get("userSort") || "best", {reload: false});
diff --git a/public/script.js b/public/script.js
index bac4e1b..615a27c 100644
--- a/public/script.js
+++ b/public/script.js
@@ -858,6 +858,12 @@ function applyTheme(themeKey, persist = true) {
     renderModelSection();
 }
 
+function applyThemeMode(modeKey, persist = true) {
+    const nextMode = modeKey === "dark" ? "dark" : "light";
+    document.body.dataset.themeMode = nextMode;
+    if (persist) localStorage.setItem("krishd-theme-mode", nextMode);
+}
+
 function updateChatActionState() {
     const activeChat = getChatById(activeChatId);
     const hasChat = Boolean(activeChat);
@@ -1742,6 +1748,7 @@ document.addEventListener("keydown", (event) => {
 });
 window.addEventListener("load", async () => {
     applyTheme(localStorage.getItem("krishd-theme") || "fakegpt", false);
+    applyThemeMode(localStorage.getItem("krishd-theme-mode") || "light", false);
     applyWorkspaceMode(localStorage.getItem("krishd-workspace-mode") || "basic", false);
     setNotice("Ready.");
     updateChatActionState();
diff --git a/public/settings.html b/public/settings.html
index 0686dd7..4b22d23 100644
--- a/public/settings.html
+++ b/public/settings.html
@@ -122,6 +122,13 @@
                                 <option value="confusity">Confusity</option>
                             </select>
                         </label>
+                        <label class="field">
+                            <span>Theme mode</span>
+                            <select id="themeModeSelect">
+                                <option value="light">Light</option>
+                                <option value="dark">Dark</option>
+                            </select>
+                        </label>
                         <label class="field">
                             <span>Workspace mode</span>
                             <select id="workspaceModeSelect">
diff --git a/public/settings.js b/public/settings.js
index e24f63d..756e296 100644
--- a/public/settings.js
+++ b/public/settings.js
@@ -1,6 +1,7 @@
 const $ = (id) => document.getElementById(id);
 const settingsNotice = $("settingsNotice");
 const settingsThemeSelect = $("settingsThemeSelect");
+const themeModeSelect = $("themeModeSelect");
 const workspaceModeSelect = $("workspaceModeSelect");
 const currentUsernameInput = $("currentUsername");
 const newUsernameInput = $("newUsername");
@@ -130,6 +131,13 @@ function applyTheme(themeKey, persist = true) {
     if (persist) localStorage.setItem("krishd-theme", nextTheme);
 }
 
+function applyThemeMode(modeKey, persist = true) {
+    const nextMode = modeKey === "dark" ? "dark" : "light";
+    document.body.dataset.themeMode = nextMode;
+    if (themeModeSelect) themeModeSelect.value = nextMode;
+    if (persist) localStorage.setItem("krishd-theme-mode", nextMode);
+}
+
 function setSettingsView(view) {
     const normalizedView = ["my-ai-characters", "my-personas"].includes(view) ? "my-roleplay-companions" : view;
     settingsNavItems.forEach((item) => item.classList.toggle("active", item.dataset.settingsView === normalizedView));
@@ -418,6 +426,10 @@ settingsThemeSelect.addEventListener("change", (event) => {
     applyTheme(event.target.value);
     setNotice("Theme updated.", "success");
 });
+themeModeSelect.addEventListener("change", (event) => {
+    applyThemeMode(event.target.value);
+    setNotice(`Theme mode set to ${document.body.dataset.themeMode}.`, "success");
+});
 workspaceModeSelect.addEventListener("change", (event) => {
     const mode = event.target.value === "advanced" ? "advanced" : "basic";
     localStorage.setItem("krishd-workspace-mode", mode);
@@ -455,6 +467,7 @@ settingsPopupInput.addEventListener("keydown", (event) => {
 
 window.addEventListener("load", async () => {
     applyTheme(localStorage.getItem("krishd-theme") || "fakegpt", false);
+    applyThemeMode(localStorage.getItem("krishd-theme-mode") || "light", false);
     workspaceModeSelect.value = localStorage.getItem("krishd-workspace-mode") || "basic";
     const params = new URLSearchParams(window.location.search);
     const view = params.get("view") || "personal";
diff --git a/public/style.css b/public/style.css
index ec8a6f7..4c40a86 100644
--- a/public/style.css
+++ b/public/style.css
@@ -2346,7 +2346,7 @@ select:focus {
 
 .settings-theme-row {
     display: grid;
-    grid-template-columns: minmax(0, 1fr) 180px;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 14px;
     align-items: end;
 }
@@ -2379,107 +2379,186 @@ select:focus {
     border: 1px dashed var(--line-strong);
 }
 
-@media (prefers-color-scheme: dark) {
-    body[data-theme="fakegpt"] {
-        --bg: #0b0f0d;
-        --bg-soft: #111715;
-        --surface: rgba(18, 24, 21, 0.88);
-        --surface-strong: rgba(18, 24, 21, 0.96);
-        --text: #e8fff7;
-        --text-soft: #b7d8ce;
-        --text-muted: #87aea3;
-        --line: rgba(36, 255, 180, 0.12);
-        --line-strong: rgba(36, 255, 180, 0.2);
-        --shadow: 0 0 0 1px rgba(36, 255, 180, 0.05), 0 0 26px rgba(16, 163, 127, 0.12);
-        --bg-gradient: linear-gradient(180deg, #0b0f0d 0%, #111715 100%);
-        --hero-gradient: linear-gradient(180deg, rgba(10, 15, 13, 0.96), rgba(18, 24, 21, 0.92));
-        --overview-gradient: linear-gradient(180deg, rgba(10, 15, 13, 0.96), rgba(18, 24, 21, 0.92));
-        --panel-subtle: rgba(10, 15, 13, 0.92);
-        --panel-soft: rgba(18, 24, 21, 0.9);
-        --panel-soft-strong: rgba(18, 24, 21, 0.92);
-        --chip-surface: rgba(10, 15, 13, 0.92);
-        --chip-muted: rgba(36, 255, 180, 0.08);
-        --field-surface: rgba(10, 15, 13, 0.96);
-        --field-surface-strong: rgba(10, 15, 13, 0.96);
-        --field-focus-surface: rgba(12, 19, 16, 0.98);
-        --field-focus-border: rgba(36, 255, 180, 0.26);
-        --field-focus-ring: 0 0 0 4px rgba(16, 163, 127, 0.14);
-        --status-surface: rgba(18, 24, 21, 0.9);
-        --status-border: rgba(36, 255, 180, 0.12);
-        --status-error-surface: rgba(181, 71, 61, 0.16);
-        --status-error-border: rgba(181, 71, 61, 0.28);
-        --status-success-surface: rgba(16, 163, 127, 0.14);
-        --status-success-border: rgba(36, 255, 180, 0.24);
-        --secondary-surface: rgba(18, 24, 21, 0.96);
-        --secondary-surface-strong: rgba(16, 163, 127, 0.16);
-        --secondary-border: rgba(36, 255, 180, 0.16);
-        --secondary-border-strong: rgba(36, 255, 180, 0.26);
-        --item-hover-border: rgba(36, 255, 180, 0.22);
-        --item-active-border: rgba(36, 255, 180, 0.34);
-        --overlay-surface: linear-gradient(180deg, rgba(9, 14, 12, 0.82), rgba(15, 22, 19, 0.9));
-        --overlay-card-surface: linear-gradient(155deg, rgba(14, 20, 18, 0.96), rgba(18, 24, 21, 0.94));
-        --overlay-card-border: rgba(36, 255, 180, 0.16);
-        --overlay-card-shadow: 0 24px 70px rgba(3, 10, 8, 0.5);
-        --prompt-chip-surface: rgba(18, 24, 21, 0.9);
-        --messages-surface: rgba(18, 24, 21, 0.88);
-        --pill-surface: rgba(18, 24, 21, 0.9);
-        --pill-border: rgba(36, 255, 180, 0.14);
-        --tag-surface: rgba(36, 255, 180, 0.08);
-        --tag-ai-surface: rgba(16, 163, 127, 0.16);
-        --tag-user-surface: rgba(36, 255, 180, 0.12);
-        background: radial-gradient(circle at top left, rgba(16, 163, 127, 0.15), transparent 26%), linear-gradient(180deg, #0b0f0d 0%, #111715 100%);
-        color: #e8fff7;
-        color-scheme: dark;
-    }
+body[data-theme-mode="light"] {
+    color-scheme: light;
+}
 
-    body[data-theme="fakegpt"] .card,
-    body[data-theme="fakegpt"] .chat-sidebar,
-    body[data-theme="fakegpt"] .messages-panel,
-    body[data-theme="fakegpt"] .input-shell,
-    body[data-theme="fakegpt"] .market-shell,
-    body[data-theme="fakegpt"] .settings-panel,
-    body[data-theme="fakegpt"] .modal-card,
-    body[data-theme="fakegpt"] .persona-popover {
-        background: rgba(18, 24, 21, 0.88);
-        border-color: rgba(36, 255, 180, 0.14);
-        box-shadow: 0 0 0 1px rgba(36, 255, 180, 0.05), 0 0 26px rgba(16, 163, 127, 0.12);
-    }
+body[data-theme-mode="dark"] {
+    --bg: #10131a;
+    --bg-soft: #171c26;
+    --surface: rgba(24, 28, 38, 0.84);
+    --surface-strong: rgba(28, 33, 44, 0.94);
+    --surface-accent: rgba(255, 255, 255, 0.08);
+    --text: #eef3ff;
+    --text-soft: #c1cbdf;
+    --text-muted: #94a1ba;
+    --line: rgba(255, 255, 255, 0.09);
+    --line-strong: rgba(255, 255, 255, 0.16);
+    --shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
+    --bg-gradient: linear-gradient(180deg, #11141b 0%, #191e28 100%);
+    --bg-overlay: linear-gradient(rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02));
+    --hero-gradient: linear-gradient(180deg, rgba(20, 24, 33, 0.96), rgba(28, 34, 45, 0.92));
+    --overview-gradient: linear-gradient(180deg, rgba(20, 24, 33, 0.96), rgba(28, 34, 45, 0.92));
+    --assistant-message: #111723;
+    --assistant-message-text: #eef3ff;
+    --button-text: #f7fbff;
+    --panel-subtle: rgba(24, 28, 38, 0.74);
+    --panel-soft: rgba(30, 35, 47, 0.82);
+    --panel-soft-strong: rgba(34, 40, 54, 0.92);
+    --chip-surface: rgba(30, 35, 47, 0.82);
+    --chip-muted: rgba(255, 255, 255, 0.06);
+    --field-surface: rgba(19, 23, 32, 0.94);
+    --field-surface-strong: rgba(19, 23, 32, 0.98);
+    --field-focus-surface: rgba(24, 29, 39, 0.98);
+    --field-focus-ring: 0 0 0 4px color-mix(in srgb, var(--brand) 20%, transparent);
+    --status-surface: rgba(24, 28, 38, 0.92);
+    --status-border: rgba(255, 255, 255, 0.08);
+    --status-error-surface: rgba(181, 71, 61, 0.18);
+    --status-error-border: rgba(181, 71, 61, 0.3);
+    --status-success-surface: rgba(37, 115, 93, 0.18);
+    --status-success-border: rgba(37, 115, 93, 0.28);
+    --secondary-surface: color-mix(in srgb, var(--brand) 14%, rgba(21, 25, 34, 0.9));
+    --secondary-surface-strong: color-mix(in srgb, var(--brand) 24%, rgba(21, 25, 34, 0.94));
+    --secondary-border: color-mix(in srgb, var(--brand) 38%, rgba(255, 255, 255, 0.12));
+    --secondary-border-strong: color-mix(in srgb, var(--brand) 52%, rgba(255, 255, 255, 0.16));
+    --item-hover-border: color-mix(in srgb, var(--brand) 34%, rgba(255, 255, 255, 0.12));
+    --item-active-border: color-mix(in srgb, var(--brand) 46%, rgba(255, 255, 255, 0.16));
+    --overlay-surface: linear-gradient(180deg, rgba(10, 13, 19, 0.82), rgba(19, 24, 34, 0.92));
+    --overlay-card-surface: linear-gradient(155deg, rgba(24, 28, 38, 0.97), rgba(30, 35, 47, 0.95));
+    --overlay-card-border: rgba(255, 255, 255, 0.12);
+    --overlay-card-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
+    --prompt-chip-surface: rgba(28, 33, 44, 0.88);
+    --messages-surface: rgba(22, 27, 37, 0.76);
+    --pill-surface: rgba(28, 33, 44, 0.88);
+    --pill-border: rgba(255, 255, 255, 0.1);
+    --tag-surface: rgba(255, 255, 255, 0.06);
+    --tag-ai-surface: color-mix(in srgb, var(--brand) 16%, rgba(255, 255, 255, 0.04));
+    --tag-user-surface: color-mix(in srgb, var(--success) 18%, rgba(255, 255, 255, 0.04));
+    --panel-elevated: rgba(27, 32, 43, 0.98);
+    --sidebar-bg: rgba(22, 27, 37, 0.88);
+    --sidebar-border: rgba(255, 255, 255, 0.08);
+    --message-user-bg: linear-gradient(145deg, var(--brand), var(--brand-strong));
+    --message-user-text: #f7fbff;
+    --message-bot-bg: rgba(27, 32, 43, 0.98);
+    --message-bot-text: #eef3ff;
+    --composer-bg: rgba(19, 23, 32, 0.98);
+    --composer-shadow: 0 -16px 36px rgba(0, 0, 0, 0.18);
+    --nav-surface: rgba(20, 24, 33, 0.9);
+    --nav-item-surface: rgba(29, 34, 45, 0.9);
+    --editorial-surface: linear-gradient(180deg, rgba(24, 28, 38, 0.96), rgba(31, 37, 49, 0.94));
+    background: var(--bg-gradient);
+    color: var(--text);
+    color-scheme: dark;
+}
 
-    body[data-theme="fakegpt"] .auth-panel,
-    body[data-theme="fakegpt"] .auth-hero,
-    body[data-theme="fakegpt"] .workspace-overview,
-    body[data-theme="fakegpt"] .hero-stat,
-    body[data-theme="fakegpt"] .summary-card,
-    body[data-theme="fakegpt"] .context-pill,
-    body[data-theme="fakegpt"] .prompt-chip,
-    body[data-theme="fakegpt"] .status,
-    body[data-theme="fakegpt"] .model-popover,
-    body[data-theme="fakegpt"] .model-select,
-    body[data-theme="fakegpt"] .model-help {
-        background: rgba(18, 24, 21, 0.9);
-        color: #e8fff7;
-        border-color: rgba(36, 255, 180, 0.12);
-    }
+body[data-theme-mode="dark"] .settings-nav,
+body[data-theme-mode="dark"] .chat-sidebar {
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
+}
 
-    body[data-theme="fakegpt"] .chat-item,
-    body[data-theme="fakegpt"] .persona-item,
-    body[data-theme="fakegpt"] .hero-panel {
-        background: rgba(10, 15, 13, 0.92);
-        border-color: rgba(36, 255, 180, 0.12);
-    }
+body[data-theme-mode="dark"] .msg.bot,
+body[data-theme-mode="dark"] .msg.loading {
+    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
+}
 
-    body[data-theme="fakegpt"] .msg.user {
-        border-radius: 24px 24px 8px 24px;
-        box-shadow: 0 0 24px rgba(16, 163, 127, 0.22);
-    }
+body[data-theme-mode="dark"][data-theme="fakegpt"] {
+    --bg: #0b0f0d;
+    --bg-soft: #111715;
+    --surface: rgba(18, 24, 21, 0.88);
+    --surface-strong: rgba(18, 24, 21, 0.96);
+    --text: #e8fff7;
+    --text-soft: #b7d8ce;
+    --text-muted: #87aea3;
+    --line: rgba(36, 255, 180, 0.12);
+    --line-strong: rgba(36, 255, 180, 0.2);
+    --shadow: 0 0 0 1px rgba(36, 255, 180, 0.05), 0 0 26px rgba(16, 163, 127, 0.12);
+    --bg-gradient: linear-gradient(180deg, #0b0f0d 0%, #111715 100%);
+    --hero-gradient: linear-gradient(180deg, rgba(10, 15, 13, 0.96), rgba(18, 24, 21, 0.92));
+    --overview-gradient: linear-gradient(180deg, rgba(10, 15, 13, 0.96), rgba(18, 24, 21, 0.92));
+    --panel-subtle: rgba(10, 15, 13, 0.92);
+    --panel-soft: rgba(18, 24, 21, 0.9);
+    --panel-soft-strong: rgba(18, 24, 21, 0.92);
+    --chip-surface: rgba(10, 15, 13, 0.92);
+    --chip-muted: rgba(36, 255, 180, 0.08);
+    --field-surface: rgba(10, 15, 13, 0.96);
+    --field-surface-strong: rgba(10, 15, 13, 0.96);
+    --field-focus-surface: rgba(12, 19, 16, 0.98);
+    --field-focus-border: rgba(36, 255, 180, 0.26);
+    --field-focus-ring: 0 0 0 4px rgba(16, 163, 127, 0.14);
+    --status-surface: rgba(18, 24, 21, 0.9);
+    --status-border: rgba(36, 255, 180, 0.12);
+    --status-error-surface: rgba(181, 71, 61, 0.16);
+    --status-error-border: rgba(181, 71, 61, 0.28);
+    --status-success-surface: rgba(16, 163, 127, 0.14);
+    --status-success-border: rgba(36, 255, 180, 0.24);
+    --secondary-surface: rgba(18, 24, 21, 0.96);
+    --secondary-surface-strong: rgba(16, 163, 127, 0.16);
+    --secondary-border: rgba(36, 255, 180, 0.16);
+    --secondary-border-strong: rgba(36, 255, 180, 0.26);
+    --item-hover-border: rgba(36, 255, 180, 0.22);
+    --item-active-border: rgba(36, 255, 180, 0.34);
+    --overlay-surface: linear-gradient(180deg, rgba(9, 14, 12, 0.82), rgba(15, 22, 19, 0.9));
+    --overlay-card-surface: linear-gradient(155deg, rgba(14, 20, 18, 0.96), rgba(18, 24, 21, 0.94));
+    --overlay-card-border: rgba(36, 255, 180, 0.16);
+    --overlay-card-shadow: 0 24px 70px rgba(3, 10, 8, 0.5);
+    --prompt-chip-surface: rgba(18, 24, 21, 0.9);
+    --messages-surface: rgba(18, 24, 21, 0.88);
+    --pill-surface: rgba(18, 24, 21, 0.9);
+    --pill-border: rgba(36, 255, 180, 0.14);
+    --tag-surface: rgba(36, 255, 180, 0.08);
+    --tag-ai-surface: rgba(16, 163, 127, 0.16);
+    --tag-user-surface: rgba(36, 255, 180, 0.12);
+    background: radial-gradient(circle at top left, rgba(16, 163, 127, 0.15), transparent 26%), linear-gradient(180deg, #0b0f0d 0%, #111715 100%);
+    color: #e8fff7;
+    color-scheme: dark;
+}
+body[data-theme-mode="dark"][data-theme="fakegpt"] .card,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .chat-sidebar,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .messages-panel,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .input-shell,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .market-shell,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .settings-panel,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .modal-card,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .persona-popover {
+    background: rgba(18, 24, 21, 0.88);
+    border-color: rgba(36, 255, 180, 0.14);
+    box-shadow: 0 0 0 1px rgba(36, 255, 180, 0.05), 0 0 26px rgba(16, 163, 127, 0.12);
+}
 
-    body[data-theme="fakegpt"] .msg.bot,
-    body[data-theme="fakegpt"] .msg.loading {
-        background: #141917;
-        border: 1px solid rgba(36, 255, 180, 0.08);
-        border-radius: 24px 24px 24px 8px;
-        box-shadow: 0 0 18px rgba(16, 163, 127, 0.08);
-    }
+body[data-theme-mode="dark"][data-theme="fakegpt"] .auth-panel,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .auth-hero,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .workspace-overview,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .hero-stat,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .summary-card,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .context-pill,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .prompt-chip,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .status,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .model-popover,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .model-select,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .model-help {
+    background: rgba(18, 24, 21, 0.9);
+    color: #e8fff7;
+    border-color: rgba(36, 255, 180, 0.12);
+}
+
+body[data-theme-mode="dark"][data-theme="fakegpt"] .chat-item,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .persona-item,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .hero-panel {
+    background: rgba(10, 15, 13, 0.92);
+    border-color: rgba(36, 255, 180, 0.12);
+}
+
+body[data-theme-mode="dark"][data-theme="fakegpt"] .msg.user {
+    border-radius: 24px 24px 8px 24px;
+    box-shadow: 0 0 24px rgba(16, 163, 127, 0.22);
+}
+
+body[data-theme-mode="dark"][data-theme="fakegpt"] .msg.bot,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .msg.loading {
+    background: #141917;
+    border: 1px solid rgba(36, 255, 180, 0.08);
+    border-radius: 24px 24px 24px 8px;
+    box-shadow: 0 0 18px rgba(16, 163, 127, 0.08);
 }
 
 body[data-theme="fakegpt"] .typing-dot {
@@ -3711,7 +3790,7 @@ body[data-theme="beta-ai"] .persona-form .field {
 }
 
 .settings-theme-row {
-    grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
+    grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 16px;
 }