fix dark mode styling

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