fix dark mode styling

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});

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();

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">

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";

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,8 +2379,89 @@ select:focus {
     border: 1px dashed var(--line-strong);
 }
 
-@media (prefers-color-scheme: dark) {
+body[data-theme-mode="light"] {
-    body[data-theme="fakegpt"] {
+    color-scheme: light;
+}
+
+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-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-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-mode="dark"][data-theme="fakegpt"] {
     --bg: #0b0f0d;
     --bg-soft: #111715;
     --surface: rgba(18, 24, 21, 0.88);
@@ -2430,56 +2511,54 @@ select:focus {
     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="fakegpt"] .card,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .chat-sidebar,
-    body[data-theme="fakegpt"] .chat-sidebar,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .messages-panel,
-    body[data-theme="fakegpt"] .messages-panel,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .input-shell,
-    body[data-theme="fakegpt"] .input-shell,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .market-shell,
-    body[data-theme="fakegpt"] .market-shell,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .settings-panel,
-    body[data-theme="fakegpt"] .settings-panel,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .modal-card,
-    body[data-theme="fakegpt"] .modal-card,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .persona-popover {
-    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="fakegpt"] .auth-panel,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .auth-panel,
-    body[data-theme="fakegpt"] .auth-hero,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .auth-hero,
-    body[data-theme="fakegpt"] .workspace-overview,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .workspace-overview,
-    body[data-theme="fakegpt"] .hero-stat,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .hero-stat,
-    body[data-theme="fakegpt"] .summary-card,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .summary-card,
-    body[data-theme="fakegpt"] .context-pill,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .context-pill,
-    body[data-theme="fakegpt"] .prompt-chip,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .prompt-chip,
-    body[data-theme="fakegpt"] .status,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .status,
-    body[data-theme="fakegpt"] .model-popover,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .model-popover,
-    body[data-theme="fakegpt"] .model-select,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .model-select,
-    body[data-theme="fakegpt"] .model-help {
+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="fakegpt"] .chat-item,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .chat-item,
-    body[data-theme="fakegpt"] .persona-item,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .persona-item,
-    body[data-theme="fakegpt"] .hero-panel {
+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="fakegpt"] .msg.user {
+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="fakegpt"] .msg.bot,
+body[data-theme-mode="dark"][data-theme="fakegpt"] .msg.bot,
-    body[data-theme="fakegpt"] .msg.loading {
+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;
 }