lord3nd3r
/
aprhodite
forked from ComputerTech/aprhodite
1
0
Fork 0
Code Pull Requests Activity

Add 10 color themes to Chat settings 

Themes: Midnight Purple (default), Crimson Noir, Ocean Deep, Ember,
Neon Green, Cyberpunk, Rose Gold, Arctic, Daylight, Midnight Blue

- Convert hardcoded rgba accent colors to CSS custom properties
- Add data-theme attribute switching with CSS variable overrides
- Theme picker grid with gradient swatches in Settings > Chat tab
- Theme preference persisted in localStorage
This commit is contained in:
3nd3r 2026-04-12 14:28:06 -05:00
parent d5e942d06d
commit 064f6bf0ba
3 changed files with 234 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
index.html
View File

@ -208,6 +208,51 @@
<!-- Chat Tab -->
<div class="settings-pane" id="stab-chat">
<div class="settings-group">
<label>Theme</label>
<div class="theme-grid" id="theme-grid">
<button class="theme-swatch active" data-theme="midnight-purple" title="Midnight Purple">
<span class="swatch-fill" style="background:linear-gradient(135deg,#8a2be2,#ff00ff)"></span>
<span class="swatch-label">Midnight</span>
</button>
<button class="theme-swatch" data-theme="crimson-noir" title="Crimson Noir">
<span class="swatch-fill" style="background:linear-gradient(135deg,#b71c1c,#ff1744)"></span>
<span class="swatch-label">Crimson</span>
</button>
<button class="theme-swatch" data-theme="ocean-deep" title="Ocean Deep">
<span class="swatch-fill" style="background:linear-gradient(135deg,#0277bd,#00bcd4)"></span>
<span class="swatch-label">Ocean</span>
</button>
<button class="theme-swatch" data-theme="ember" title="Ember">
<span class="swatch-fill" style="background:linear-gradient(135deg,#e65100,#ff9800)"></span>
<span class="swatch-label">Ember</span>
</button>
<button class="theme-swatch" data-theme="neon-green" title="Neon Green">
<span class="swatch-fill" style="background:linear-gradient(135deg,#00c853,#00ff41)"></span>
<span class="swatch-label">Neon</span>
</button>
<button class="theme-swatch" data-theme="cyberpunk" title="Cyberpunk">
<span class="swatch-fill" style="background:linear-gradient(135deg,#e040fb,#f5ee28)"></span>
<span class="swatch-label">Cyber</span>
</button>
<button class="theme-swatch" data-theme="rose-gold" title="Rose Gold">
<span class="swatch-fill" style="background:linear-gradient(135deg,#c2185b,#f48fb1)"></span>
<span class="swatch-label">Rosé</span>
</button>
<button class="theme-swatch" data-theme="arctic" title="Arctic">
<span class="swatch-fill" style="background:linear-gradient(135deg,#3949ab,#f5f7fa)"></span>
<span class="swatch-label">Arctic</span>
</button>
<button class="theme-swatch" data-theme="daylight" title="Daylight">
<span class="swatch-fill" style="background:linear-gradient(135deg,#9c27b0,#fafafa)"></span>
<span class="swatch-label">Light</span>
</button>
<button class="theme-swatch" data-theme="midnight-blue" title="Midnight Blue">
<span class="swatch-fill" style="background:linear-gradient(135deg,#1a237e,#448aff)"></span>
<span class="swatch-label">Navy</span>
</button>
</div>
</div>
<div class="settings-group">
<label>Font Size</label>
<div class="settings-row">

20
static/chat.js
View File

@ -656,10 +656,13 @@ const prefs = {
timeFormat: localStorage.getItem("sc_timeformat") || "12h",
enterToSend: localStorage.getItem("sc_enter_send") !== "false",
sounds: localStorage.getItem("sc_sounds") !== "false",
theme: localStorage.getItem("sc_theme") || "midnight-purple",
};
// Apply saved font size on load
document.documentElement.style.setProperty("--chat-font-size", prefs.fontSize + "px");
// Apply saved theme on load
document.documentElement.setAttribute("data-theme", prefs.theme);
$("settings-btn").onclick = () => {
// Populate current values
@ -684,6 +687,11 @@ $("settings-btn").onclick = () => {
$("settings-sounds").textContent = prefs.sounds ? "On" : "Off";
$("settings-sounds").classList.toggle("active", prefs.sounds);
// Sync theme picker
document.querySelectorAll(".theme-swatch").forEach(s => {
s.classList.toggle("active", s.dataset.theme === prefs.theme);
});
settingsModal.classList.remove("hidden");
};
@ -711,6 +719,18 @@ $("settings-fontsize").addEventListener("input", (e) => {
document.documentElement.style.setProperty("--chat-font-size", val + "px");
});
// Theme picker
document.querySelectorAll(".theme-swatch").forEach(swatch => {
swatch.addEventListener("click", () => {
const theme = swatch.dataset.theme;
prefs.theme = theme;
localStorage.setItem("sc_theme", theme);
document.documentElement.setAttribute("data-theme", theme);
document.querySelectorAll(".theme-swatch").forEach(s => s.classList.remove("active"));
swatch.classList.add("active");
});
});
// Timestamp format toggle
document.querySelectorAll("[data-tf]").forEach(btn => {
btn.addEventListener("click", () => {

186
static/style.css
View File

@ -6,14 +6,123 @@
:root {
--bg-deep: #0a0015;
--bg-card: rgba(26, 0, 48, 0.7);
--bg-header: rgba(10, 0, 20, 0.8);
--accent-magenta: #ff00ff;
--accent-purple: #8a2be2;
--accent-glow: rgba(255, 0, 255, 0.3);
--accent-glow-strong: rgba(255, 0, 255, 0.5);
--bg-gradient-1: rgba(138, 43, 226, 0.15);
--bg-gradient-2: rgba(255, 0, 255, 0.1);
--text-main: #f0f0f0;
--text-dim: #b0b0b0;
--glass-border: rgba(255, 255, 255, 0.1);
--error-red: #ff3366;
--success-green: #00ffaa;
--ai-teal: #00f2ff;
--msg-received-bg: rgba(255, 255, 255, 0.08);
--msg-received-border: rgba(255, 255, 255, 0.05);
}
/* ── Themes ──────────────────────────────────────────────────────────────── */
[data-theme="midnight-purple"] {
--bg-deep: #0a0015; --bg-card: rgba(26, 0, 48, 0.7); --bg-header: rgba(10, 0, 20, 0.8);
--accent-magenta: #ff00ff; --accent-purple: #8a2be2;
--accent-glow: rgba(255, 0, 255, 0.3); --accent-glow-strong: rgba(255, 0, 255, 0.5);
--bg-gradient-1: rgba(138, 43, 226, 0.15); --bg-gradient-2: rgba(255, 0, 255, 0.1);
--text-main: #f0f0f0; --text-dim: #b0b0b0;
--msg-received-bg: rgba(255, 255, 255, 0.08); --msg-received-border: rgba(255, 255, 255, 0.05);
}
[data-theme="crimson-noir"] {
--bg-deep: #0d0000; --bg-card: rgba(40, 0, 0, 0.7); --bg-header: rgba(15, 0, 0, 0.85);
--accent-magenta: #ff1744; --accent-purple: #b71c1c;
--accent-glow: rgba(255, 23, 68, 0.3); --accent-glow-strong: rgba(255, 23, 68, 0.5);
--bg-gradient-1: rgba(183, 28, 28, 0.15); --bg-gradient-2: rgba(255, 23, 68, 0.1);
--text-main: #f0e8e8; --text-dim: #b09090;
--msg-received-bg: rgba(255, 200, 200, 0.06); --msg-received-border: rgba(255, 200, 200, 0.04);
--ai-teal: #ff6e6e;
}
[data-theme="ocean-deep"] {
--bg-deep: #000a14; --bg-card: rgba(0, 20, 48, 0.7); --bg-header: rgba(0, 8, 20, 0.85);
--accent-magenta: #00bcd4; --accent-purple: #0277bd;
--accent-glow: rgba(0, 188, 212, 0.3); --accent-glow-strong: rgba(0, 188, 212, 0.5);
--bg-gradient-1: rgba(2, 119, 189, 0.15); --bg-gradient-2: rgba(0, 188, 212, 0.1);
--text-main: #e0f0f0; --text-dim: #90b0b0;
--msg-received-bg: rgba(200, 255, 255, 0.06); --msg-received-border: rgba(200, 255, 255, 0.04);
--ai-teal: #4dd0e1;
}
[data-theme="ember"] {
--bg-deep: #0d0800; --bg-card: rgba(40, 20, 0, 0.7); --bg-header: rgba(15, 8, 0, 0.85);
--accent-magenta: #ff9800; --accent-purple: #e65100;
--accent-glow: rgba(255, 152, 0, 0.3); --accent-glow-strong: rgba(255, 152, 0, 0.5);
--bg-gradient-1: rgba(230, 81, 0, 0.15); --bg-gradient-2: rgba(255, 152, 0, 0.1);
--text-main: #f0e8e0; --text-dim: #b09880;
--msg-received-bg: rgba(255, 230, 200, 0.06); --msg-received-border: rgba(255, 230, 200, 0.04);
--ai-teal: #ffb74d;
}
[data-theme="neon-green"] {
--bg-deep: #000a00; --bg-card: rgba(0, 30, 0, 0.7); --bg-header: rgba(0, 10, 0, 0.85);
--accent-magenta: #00ff41; --accent-purple: #00c853;
--accent-glow: rgba(0, 255, 65, 0.3); --accent-glow-strong: rgba(0, 255, 65, 0.5);
--bg-gradient-1: rgba(0, 200, 83, 0.12); --bg-gradient-2: rgba(0, 255, 65, 0.08);
--text-main: #e0ffe0; --text-dim: #80b080;
--msg-received-bg: rgba(200, 255, 200, 0.06); --msg-received-border: rgba(200, 255, 200, 0.04);
--ai-teal: #69f0ae;
}
[data-theme="cyberpunk"] {
--bg-deep: #0a0014; --bg-card: rgba(20, 0, 40, 0.75); --bg-header: rgba(10, 0, 20, 0.85);
--accent-magenta: #f5ee28; --accent-purple: #e040fb;
--accent-glow: rgba(245, 238, 40, 0.3); --accent-glow-strong: rgba(245, 238, 40, 0.5);
--bg-gradient-1: rgba(224, 64, 251, 0.15); --bg-gradient-2: rgba(245, 238, 40, 0.08);
--text-main: #f0f0f0; --text-dim: #b0a0c0;
--msg-received-bg: rgba(245, 238, 40, 0.06); --msg-received-border: rgba(245, 238, 40, 0.04);
--ai-teal: #e040fb;
}
[data-theme="rose-gold"] {
--bg-deep: #0d0508; --bg-card: rgba(40, 15, 20, 0.7); --bg-header: rgba(15, 5, 8, 0.85);
--accent-magenta: #f48fb1; --accent-purple: #c2185b;
--accent-glow: rgba(244, 143, 177, 0.3); --accent-glow-strong: rgba(244, 143, 177, 0.5);
--bg-gradient-1: rgba(194, 24, 91, 0.12); --bg-gradient-2: rgba(244, 143, 177, 0.08);
--text-main: #f5e8ed; --text-dim: #c0a0a8;
--msg-received-bg: rgba(255, 200, 220, 0.06); --msg-received-border: rgba(255, 200, 220, 0.04);
--ai-teal: #f48fb1;
}
[data-theme="arctic"] {
--bg-deep: #f5f7fa; --bg-card: rgba(255, 255, 255, 0.85); --bg-header: rgba(240, 242, 248, 0.95);
--accent-magenta: #5c6bc0; --accent-purple: #3949ab;
--accent-glow: rgba(92, 107, 192, 0.25); --accent-glow-strong: rgba(92, 107, 192, 0.4);
--bg-gradient-1: rgba(57, 73, 171, 0.08); --bg-gradient-2: rgba(92, 107, 192, 0.06);
--text-main: #1a1a2e; --text-dim: #666680;
--glass-border: rgba(0, 0, 0, 0.1);
--msg-received-bg: rgba(0, 0, 0, 0.05); --msg-received-border: rgba(0, 0, 0, 0.08);
--ai-teal: #5c6bc0; --success-green: #43a047;
}
[data-theme="daylight"] {
--bg-deep: #fafafa; --bg-card: rgba(255, 255, 255, 0.9); --bg-header: rgba(245, 245, 245, 0.95);
--accent-magenta: #e91e63; --accent-purple: #9c27b0;
--accent-glow: rgba(233, 30, 99, 0.2); --accent-glow-strong: rgba(233, 30, 99, 0.35);
--bg-gradient-1: rgba(156, 39, 176, 0.06); --bg-gradient-2: rgba(233, 30, 99, 0.05);
--text-main: #212121; --text-dim: #757575;
--glass-border: rgba(0, 0, 0, 0.12);
--msg-received-bg: rgba(0, 0, 0, 0.04); --msg-received-border: rgba(0, 0, 0, 0.06);
--ai-teal: #e91e63; --success-green: #2e7d32;
}
[data-theme="midnight-blue"] {
--bg-deep: #0a0a1a; --bg-card: rgba(10, 10, 40, 0.75); --bg-header: rgba(5, 5, 20, 0.85);
--accent-magenta: #448aff; --accent-purple: #1a237e;
--accent-glow: rgba(68, 138, 255, 0.3); --accent-glow-strong: rgba(68, 138, 255, 0.5);
--bg-gradient-1: rgba(26, 35, 126, 0.15); --bg-gradient-2: rgba(68, 138, 255, 0.1);
--text-main: #e0e8f0; --text-dim: #8090b0;
--msg-received-bg: rgba(200, 220, 255, 0.06); --msg-received-border: rgba(200, 220, 255, 0.04);
--ai-teal: #82b1ff;
}
* {
@ -27,8 +136,8 @@ body {
font-family: 'Inter', sans-serif;
background-color: var(--bg-deep);
background-image:
radial-gradient(circle at 20% 30%, rgba(138, 43, 226, 0.15) 0%, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(255, 0, 255, 0.1) 0%, transparent 40%);
radial-gradient(circle at 20% 30%, var(--bg-gradient-1) 0%, transparent 40%),
radial-gradient(circle at 80% 70%, var(--bg-gradient-2) 0%, transparent 40%);
color: var(--text-main);
height: 100vh;
overflow: hidden;
@ -83,7 +192,7 @@ h1, h2, h3, .logo-text, .paywall-header h2 {
.logo-accent {
color: var(--accent-magenta);
text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
text-shadow: 0 0 10px var(--accent-glow-strong);
}
.logo-sub {
@ -117,7 +226,7 @@ h1, h2, h3, .logo-text, .paywall-header h2 {
.auth-tab.active {
background: var(--accent-purple);
color: white;
box-shadow: 0 4px 12px rgba(138, 43, 226, 0.3);
box-shadow: 0 4px 12px var(--accent-glow);
}
/* Form */
@ -144,7 +253,7 @@ input:focus {
.crypto-note {
font-size: 0.75rem;
color: var(--accent-magenta);
background: rgba(255, 0, 255, 0.05);
background: color-mix(in srgb, var(--accent-magenta) 5%, transparent);
padding: 10px;
border-radius: 8px;
margin: 1rem 0;
@ -161,13 +270,13 @@ input:focus {
font-size: 1rem;
font-weight: 700;
cursor: pointer;
box-shadow: 0 4px 15px rgba(255, 0, 255, 0.3);
box-shadow: 0 4px 15px var(--accent-glow);
transition: transform 0.2s, box-shadow 0.2s;
margin-top: 1rem;
}
.btn-primary:active { transform: scale(0.98); }
.btn-primary:hover { box-shadow: 0 6px 20px rgba(255, 0, 255, 0.4); }
.btn-primary:hover { box-shadow: 0 6px 20px var(--accent-glow-strong); }
.mod-login {
text-align: left;
@ -194,7 +303,7 @@ input:focus {
.glass-header {
height: 64px;
background: rgba(10, 0, 20, 0.8);
background: var(--bg-header);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--glass-border);
@ -409,16 +518,16 @@ input:focus {
.msg-received { align-self: flex-start; }
.msg-received .msg-bubble {
background: rgba(255, 255, 255, 0.08);
background: var(--msg-received-bg);
border-bottom-left-radius: 4px;
border: 1px solid rgba(255,255,255,0.05);
border: 1px solid var(--msg-received-border);
}
.msg-sent { align-self: flex-end; }
.msg-sent .msg-bubble {
background: linear-gradient(135deg, var(--accent-purple), var(--accent-magenta));
border-bottom-right-radius: 4px;
box-shadow: 0 4px 12px rgba(255, 0, 255, 0.2);
box-shadow: 0 4px 12px var(--accent-glow);
}
.msg-system {
@ -434,7 +543,7 @@ input:focus {
.msg-system strong { color: var(--accent-magenta); }
/* ── AI Area ─────────────────────────────────────────────────────────────── */
.chat-ai { background: radial-gradient(circle at top, rgba(0, 242, 255, 0.05), transparent 70%); }
.chat-ai { background: radial-gradient(circle at top, color-mix(in srgb, var(--ai-teal) 5%, transparent), transparent 70%); }
.ai-header {
padding: 1rem;
@ -475,7 +584,7 @@ input:focus {
display: flex;
align-items: flex-end;
gap: 10px;
background: rgba(10, 0, 20, 0.8);
background: var(--bg-header);
border-top: 1px solid var(--glass-border);
}
@ -504,7 +613,7 @@ textarea {
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 0 15px rgba(255, 0, 255, 0.4);
box-shadow: 0 0 15px var(--accent-glow-strong);
}
/* ── Modals ──────────────────────────────────────────────────────────────── */
@ -529,7 +638,7 @@ textarea {
.paywall-card {
border: 2px solid var(--ai-teal);
box-shadow: 0 0 40px rgba(0, 242, 255, 0.2);
box-shadow: 0 0 40px color-mix(in srgb, var(--ai-teal) 20%, transparent);
}
.ai-avatar.large { width: 80px; height: 80px; font-size: 2.5rem; margin: 0 auto 1.5rem; }
@ -556,7 +665,7 @@ textarea {
border-radius: 12px;
background: rgba(15, 0, 30, 0.95);
border: 1px solid var(--glass-border);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 10px rgba(138, 43, 226, 0.2);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 10px color-mix(in srgb, var(--accent-purple) 20%, transparent);
display: flex;
flex-direction: column;
}
@ -646,7 +755,7 @@ textarea {
.settings-tab.active {
background: var(--accent-purple);
color: white;
box-shadow: 0 2px 8px rgba(138, 43, 226, 0.3);
box-shadow: 0 2px 8px var(--accent-glow);
}
.settings-body {
@ -860,6 +969,49 @@ textarea {
}
/* ── Mobile Overrides ─────────────────────────────────────────────────────── */
/* ── Theme Picker ─────────────────────────────────────────────────────────── */
.theme-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.theme-swatch {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
background: none;
border: 2px solid transparent;
border-radius: 12px;
padding: 6px;
cursor: pointer;
transition: border-color 0.2s, transform 0.15s;
}
.theme-swatch:hover { transform: scale(1.08); }
.theme-swatch.active {
border-color: var(--accent-magenta);
box-shadow: 0 0 12px var(--accent-glow);
}
.swatch-fill {
width: 36px;
height: 36px;
border-radius: 50%;
display: block;
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.swatch-label {
font-size: 0.65rem;
color: var(--text-dim);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
}
@media (max-width: 768px) {
.nicklist-sidebar {
position: absolute;