From c552a69483c8648f33ad063f608d8c9a16ccde09 Mon Sep 17 00:00:00 2001 From: AlexsandrSnytkin Date: Fri, 18 Sep 2026 18:15:51 +0700 Subject: [PATCH] fix(ui): improve theme swatch contrast --- ui_server.py | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/ui_server.py b/ui_server.py index 6f3e278..8a9923b 100644 --- a/ui_server.py +++ b/ui_server.py @@ -1412,12 +1412,12 @@ HTML = """ .appearance-group { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--ui-border); } .appearance-group-head span { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .appearance-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 6px; } - .appearance-options button { min-width: 0; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 6px; height: 34px; padding: 0 7px; border: 1px solid color-mix(in srgb, var(--ui-border) 88%, var(--ui-text)); border-radius: 8px; background: color-mix(in srgb, var(--ui-input) 88%, var(--ui-surface)); color: color-mix(in srgb, var(--ui-text) 76%, var(--ui-muted)); font: 10px/1.05 ui-sans-serif, system-ui, sans-serif; text-align: left; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; } + .appearance-options button { min-width: 0; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 6px; height: 34px; padding: 0 7px; border: 1px solid color-mix(in srgb, var(--appearance-option-accent, var(--ui-border)) 26%, var(--ui-border)); border-radius: 8px; background: color-mix(in srgb, var(--ui-input) 88%, var(--ui-surface)); color: color-mix(in srgb, var(--ui-text) 76%, var(--ui-muted)); font: 10px/1.05 ui-sans-serif, system-ui, sans-serif; text-align: left; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; } .appearance-options button:hover { color: var(--ui-text); border-color: color-mix(in srgb, var(--ui-accent) 62%, var(--ui-border)); transform: translateY(-1px); } .appearance-options button.is-active { color: var(--ui-text); border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 10%, var(--ui-input)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-accent) 22%, transparent); } .appearance-options button.is-active .appearance-swatch { box-shadow: 0 0 0 2px var(--ui-accent), inset 0 0 0 4px var(--appearance-swatch-2, transparent); } .appearance-options button > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - .appearance-swatch { width: 18px; height: 18px; border: 1px solid color-mix(in srgb, var(--ui-text) 18%, transparent); border-radius: 6px; background: var(--appearance-swatch); box-shadow: inset 0 0 0 4px var(--appearance-swatch-2, transparent); } + .appearance-swatch { width: 18px; height: 18px; border: 1px solid color-mix(in srgb, var(--appearance-option-accent, var(--ui-text)) 32%, var(--ui-text)); border-radius: 6px; background: linear-gradient(135deg, var(--appearance-option-accent, var(--appearance-swatch)) 0 28%, var(--appearance-swatch) 28% 100%); box-shadow: inset 0 0 0 4px var(--appearance-swatch-2, transparent); } .accent-options button { grid-template-columns: 14px minmax(0, 1fr); } .accent-options .appearance-swatch { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--appearance-swatch); box-shadow: 0 0 0 3px color-mix(in srgb, var(--appearance-swatch) 17%, transparent); } .appearance-custom { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; color: var(--ui-muted) !important; font-size: 10px !important; } @@ -2982,6 +2982,9 @@ HTML = """ const ACCENTS = { blue: '#8fb8ff', cyan: '#67e8f9', green: '#7ee787', violet: '#c4b5fd', orange: '#ffb86b', red: '#ff8e9e', pink: '#f9a8d4', lime: '#b7f36b', indigo: '#818cf8', teal: '#2dd4bf', gold: '#facc15', sky: '#38bdf8', coral: '#fb7185' }; + const THEME_ACCENTS = { + dark: '#8fb8ff', light: '#4778b8', amber: '#f2b84b', midnight: '#5aa7ff', forest: '#56c788', rose: '#ef78ad', graphite: '#9bbcff', solarized: '#b58900', ocean: '#38c6df', neon: '#d38cff', copper: '#e08a5b', mono: '#d2d7dd' + }; const FONT_STACKS = { system: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif', inter: 'Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif', @@ -3116,6 +3119,7 @@ HTML = """ button.dataset[`${kind}Value`] = value; button.setAttribute('role', 'option'); button.setAttribute('aria-label', label); + if (colors[2]) button.style.setProperty('--appearance-option-accent', colors[2]); const swatch = document.createElement('span'); swatch.className = 'appearance-swatch'; swatch.style.setProperty('--appearance-swatch', colors[0]); @@ -3134,9 +3138,9 @@ HTML = """ if (!themeOptions || !accentOptions) return; themeOptions.replaceChildren(...[...$('themeSelect').options].map(option => { const palette = THEMES[option.value] || THEMES.dark; - return makeOption(option.value, option.textContent, 'theme', [palette.surface, palette.bg]); + return makeOption(option.value, option.textContent, 'theme', [palette.surface, palette.bg, THEME_ACCENTS[option.value] || ACCENTS.blue]); })); - accentOptions.replaceChildren(...[...$('accentSelect').options].filter(option => option.value !== 'custom').map(option => makeOption(option.value, option.textContent, 'accent', [ACCENTS[option.value] || ACCENTS.blue]))); + accentOptions.replaceChildren(...[...$('accentSelect').options].filter(option => option.value !== 'custom').map(option => makeOption(option.value, option.textContent, 'accent', [ACCENTS[option.value] || ACCENTS.blue, '', ACCENTS[option.value] || ACCENTS.blue]))); syncAppearanceModule(); } async function loadModels() {