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

Add UI themes (Dark, Light, Midnight, Sunset)

Browse Source 
Four preset color themes, switchable from Profile settings with instant
preview and server-side persistence (User.theme, applied via a data-theme
attribute the CSS custom-property overrides in themes.css key off). Dark
stays the existing DarkSingularity palette and default. Light is a genuine
new light-mode design; Midnight is a higher-contrast OLED-friendly dark
variant; Sunset swaps in a warm amber/coral accent family.

Custom theme building (pick-your-own-colors) is out of scope for this
pass -- presets only.

Also: fixed the PATCH /api/auth/me handler to only apply fields actually
present in the request body. It previously always overwrote display_name
unconditionally, which happened to be harmless when it was the only
field on ProfileUpdate but would have silently cleared it on any
theme-only update. And switched two hardcoded hex colors
(.btn-primary:hover, .role-badge-admin) to token-derived color-mix()
values so they adapt across themes instead of staying fixed to the
original cyan/violet palette.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
ksmith
2026-08-15 22:02:38 -06:00
co-authored by Claude Sonnet 5
parent d7e777cbd8
commit afdd573182
14 changed files with 316 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Modal.css
+82
View File
@@ -94,6 +94,88 @@
margin: var(--sp-5) 0 var(--sp-4);
}
.theme-swatch-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-2);
margin-bottom: var(--sp-4);
}
.theme-swatch {
display: flex;
align-items: center;
gap: var(--sp-2);
background: var(--ds-surface-2);
border: 1px solid var(--ds-border);
border-radius: var(--radius);
padding: 8px 10px;
cursor: pointer;
text-align: left;
}
.theme-swatch:hover {
border-color: var(--ds-accent);
}
.theme-swatch-selected {
border-color: var(--ds-accent);
box-shadow: 0 0 0 1px var(--ds-accent);
}
.theme-swatch-label {
font-size: 0.82rem;
font-weight: 600;
color: var(--ds-text);
}
/* Each swatch's preview always shows its OWN theme's colors, not whatever
theme is currently active -- literal per-theme values on purpose, so a
user can see what an option looks like before picking it. */
.theme-swatch-preview {
width: 22px;
height: 22px;
border-radius: 50%;
flex: none;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(0, 0, 0, 0.15);
}
.theme-swatch-accent {
width: 10px;
height: 10px;
border-radius: 50%;
}
.theme-swatch-dark .theme-swatch-preview {
background: #101030;
}
.theme-swatch-dark .theme-swatch-accent {
background: #60d8fc;
}
.theme-swatch-light .theme-swatch-preview {
background: #ffffff;
}
.theme-swatch-light .theme-swatch-accent {
background: #0891b2;
}
.theme-swatch-midnight .theme-swatch-preview {
background: #000000;
}
.theme-swatch-midnight .theme-swatch-accent {
background: #00f0ff;
}
.theme-swatch-sunset .theme-swatch-preview {
background: #241408;
}
.theme-swatch-sunset .theme-swatch-accent {
background: #fca050;
}
.toggle-row {
display: flex;
align-items: center;