DarkSingularity/ds-chat
Private
Public Access
3
0
Fork 0
Code Releases 4 Activity

Add custom theme colors, full per-token control (#30)

Browse Source 
Adds a 5th "Custom" option to the theme swatch grid alongside the
existing 4 presets, opening a picker for all ~12 CSS custom properties
(backgrounds, borders, text, three accent tiers, highlight, danger) plus
a light/dark toggle for native control rendering.

Persisted as a new users.custom_theme_colors JSONB column, validated
server-side against exactly what a native <input type="color"> can ever
produce. Colors survive switching to a preset and back, since there's no
reason picking a preset for a moment should force redoing every color
pick. Applied at runtime as inline custom properties on :root (presets
stay static CSS) via a shared applyTheme() helper, which is also
responsible for clearing those inline overrides when switching away --
otherwise they'd silently keep winning over whatever preset's own
stylesheet values should apply next.

Live preview on every color change; persists only on explicit "Save
colors" (not per keystroke, since a color input fires continuously while
dragging), and closing the modal without saving reverts the preview back
to whatever's actually persisted.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
ksmith
2026-08-17 06:15:49 -06:00
co-authored by Claude Sonnet 5
parent 68e487e5ec
commit 53d16973fb
11 changed files with 443 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Modal.css
+54
View File
@@ -176,6 +176,60 @@
background: #fca050;
}
.custom-theme-editor {
background: var(--ds-surface-2);
border: 1px solid var(--ds-border);
border-radius: var(--radius);
padding: var(--sp-3);
margin-bottom: var(--sp-4);
}
.custom-theme-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: var(--sp-3);
}
.custom-theme-field {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: 0.8rem;
color: var(--ds-text);
cursor: pointer;
}
.custom-theme-field input[type='color'] {
flex: none;
width: 28px;
height: 28px;
padding: 0;
border: 1px solid var(--ds-border);
border-radius: 6px;
background: none;
cursor: pointer;
}
.custom-theme-scheme {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
margin-top: var(--sp-4);
font-size: 0.8rem;
color: var(--ds-muted);
}
.custom-theme-scheme-toggle {
display: flex;
gap: var(--sp-2);
}
.custom-theme-scheme-active {
border-color: var(--ds-accent);
color: var(--ds-accent);
}
.toggle-row {
display: flex;
align-items: center;