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

Support multiple named, saved custom themes per user

Browse Source 
Replaces the single custom_theme_colors blob (one palette per user) with
a proper CustomTheme table -- users can now save, name, and switch
between as many custom palettes as they like, not just one.

Data model: users.active_custom_theme_id references whichever saved
CustomTheme (if any) is currently active; theme='custom' + that id
together determine what's rendered. The migration data-migrates any
already-saved single palette into a named CustomTheme row on upgrade,
and best-effort backfills the active one back into the old column shape
on downgrade.

New endpoints under /api/custom-themes: list, create, rename/recolor,
delete (falls back the user to a preset if the deleted theme was
active, so the two theme columns can never disagree), and activate.
UserRead.active_custom_theme is only populated when theme == 'custom'
even though the DB deliberately keeps the id set while a preset is
active, so switching to a preset and back doesn't lose the saved
palette.

ProfileModal now lists saved themes as swatches (click to activate,
pencil to edit -- active or not, trash to delete with a confirm), plus
a "+ New" button that creates, activates, and opens the editor for a
fresh theme immediately.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
ksmith
2026-08-17 07:53:05 -06:00
co-authored by Claude Sonnet 5
parent 73020fa39f
commit bd3e621e9f
21 changed files with 972 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Modal.css
+66
View File
@@ -176,6 +176,72 @@
background: #fca050;
}
.custom-theme-swatch {
display: flex;
align-items: stretch;
gap: 4px;
border-radius: var(--radius);
}
.custom-theme-swatch.theme-swatch-selected {
box-shadow: 0 0 0 1px var(--ds-accent);
border-radius: var(--radius);
}
.custom-theme-swatch-select {
flex: 1;
min-width: 0;
}
.custom-theme-swatch-select .theme-swatch-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.custom-theme-swatch-actions {
display: flex;
flex-direction: column;
gap: 2px;
flex: none;
}
.custom-theme-swatch-icon-btn {
flex: 1;
width: 24px;
background: var(--ds-surface-2);
border: 1px solid var(--ds-border);
border-radius: 5px;
color: var(--ds-muted);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}
.custom-theme-swatch-icon-btn:hover {
color: var(--ds-text);
border-color: var(--ds-accent);
}
.custom-theme-new {
justify-content: center;
color: var(--ds-muted);
}
.theme-swatch-preview-new {
background: transparent;
border-style: dashed;
font-size: 1rem;
line-height: 1;
color: var(--ds-muted);
}
.custom-theme-name-input {
margin-bottom: var(--sp-3) !important;
}
.custom-theme-editor {
background: var(--ds-surface-2);
border: 1px solid var(--ds-border);