Fretux/KrisHD_AI
3
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix dark mode styling

Browse Source
This commit is contained in:
fretuks
2026-04-15 22:11:42 +02:00
parent d9792efe34
commit bd4060e002
5 changed files with 209 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/market.js
+5
View File
@@ -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
+7
View File
@@ -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
+7
View File
@@ -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
+13
View File
@@ -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
+177 -98
View File
@@ -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;
}