Skip to content

feat(desktop): custom accent color picker + smooth theme transitions #3115

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
HUQIANTAO wants to merge 1 commit into
base: main-v2
Choose a base branch
from
+70 −0
Open

feat(desktop): custom accent color picker + smooth theme transitions #3115

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 70 additions & 0 deletions desktop/frontend/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,6 +292,45 @@ body {
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow: hidden;
/* Theme transition: crossfade the four surfaces and the accent triplet so a
light/dark/auto switch (or an accent picker drag) doesn't snap. The list
is intentionally narrow — only the colors actually used as "theme" — so a
streaming text delta or a tool card with a transient background color
(status badges) doesn't repaint during the fade. Disabled for users with
prefers-reduced-motion (and the system color-scheme change is
instantaneous on Linux WebKitGTK, where the transition property is
occasionally honored but the OS still reschedules a white flash). */
transition:
background-color 180ms ease,
color 180ms ease,
border-color 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
body {
transition: none;
}
}

/* Theme-transition active state. We add a class to <html> for the duration of
a theme flip so the transition fires; without it the initial computed-style
change would skip the animation. The class is removed on the next rAF, which
gives the browser a paint frame to capture the from-values. */
html.theme-transitioning,
html.theme-transitioning * {
transition:
background-color 180ms ease,
color 180ms ease,
border-color 180ms ease,
--accent 180ms ease,
--accent-fg 180ms ease,
--accent-soft 180ms ease !important;
}
@media (prefers-reduced-motion: reduce) {
html.theme-transitioning,
html.theme-transitioning * {
transition: none !important;
}
}

.app {
Expand Down Expand Up @@ -5255,6 +5294,37 @@ body {
}
}

/* Accent color picker: a small swatch + hex readout, sized to match .set-row's
left label column. The native <input type="color"> renders a square
swatch in WebKitGTK and a circle in Chromium — we can't normalize the
inner shape, so we constrain the input to a 28px square and let the OS
draw whatever it likes inside. The swatch + label get the click target;
clicking the surrounding row doesn't open the picker. */
.set-accent {
width: 28px;
height: 28px;
border: 1px solid var(--border);
border-radius: 6px;
background: transparent;
padding: 0;
cursor: pointer;
flex: 0 0 auto;
}
.set-accent::-webkit-color-swatch-wrapper {
padding: 2px;
}
.set-accent::-webkit-color-swatch {
border: none;
border-radius: 4px;
}
.set-accent__hex {
font-family: var(--mono);
font-size: 11.5px;
color: var(--fg-dim);
text-transform: lowercase;
margin-left: 2px;
}

/* ── tool card extras: outcome line, nested sub-agent, multi-edit labels ───── */
.tool__summary {
padding: 1px 11px 8px 30px;
Expand Down
Loading