From cfb74933848faa37da8a8736b93d6db78c14e0b9 Mon Sep 17 00:00:00 2001 From: Federico Jaramillo Martinez Date: Sat, 13 Jun 2026 21:26:08 +0200 Subject: [PATCH] Improve dark theme user/assistant message distinction Add per-role left accent stripes and color-coded header labels across all themes. Lighten the dark theme user-message background, decouple it from the generic hover color, and brighten the user border so user and assistant turns are clearly distinguishable. --- .changeset/dark-theme-message-distinction.md | 5 +++++ src/client/src/components/shared.ts | 7 +++++-- src/client/src/plugins/themes/index.ts | 4 ++-- 3 files changed, 12 insertions(+), 4 deletions(-) create mode 100644 .changeset/dark-theme-message-distinction.md diff --git a/.changeset/dark-theme-message-distinction.md b/.changeset/dark-theme-message-distinction.md new file mode 100644 index 0000000..6f85567 --- /dev/null +++ b/.changeset/dark-theme-message-distinction.md @@ -0,0 +1,5 @@ +--- +"@jmfederico/pi-web": patch +--- + +Improve user/assistant message distinction in the dark theme. Previously the user and assistant message backgrounds were nearly identical (contrast ratio ~1.06), making it hard to tell speakers apart. Each message now has a colored left accent stripe by role (brand accent for user, neutral for assistant) with matching header labels, applied across all themes. The dark theme's user-message background was also lightened and decoupled from the generic hover color, and the user border brightened, so user turns stand out clearly. diff --git a/src/client/src/components/shared.ts b/src/client/src/components/shared.ts index e540958..aaad8cf 100644 --- a/src/client/src/components/shared.ts +++ b/src/client/src/components/shared.ts @@ -280,8 +280,9 @@ export const chatStyles = css` .activity-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .45; flex: 0 0 auto; } .activity-dock.active .dot { animation: pulse 1s ease-in-out infinite; opacity: 1; } - .msg { max-width: 100%; min-width: 0; box-sizing: border-box; margin: 0 0 14px; padding: 12px; border: 1px solid var(--pi-border); border-radius: 10px; background: var(--pi-surface); overflow: visible; } - .msg.user { border-color: var(--pi-accent-border); background: var(--pi-selection-bg); } + .msg { max-width: 100%; min-width: 0; box-sizing: border-box; margin: 0 0 14px; padding: 12px; border: 1px solid var(--pi-border); border-left: 3px solid var(--pi-border); border-radius: 10px; background: var(--pi-surface); overflow: visible; } + .msg.assistant { border-left-color: var(--pi-text-secondary); background: var(--pi-surface); } + .msg.user { border-color: var(--pi-accent-border); border-left: 3px solid var(--pi-accent); background: var(--pi-selection-bg); } .msg.tool { border-color: var(--pi-warning-border); background: var(--pi-warning-surface); color: var(--pi-warning); } .msg.tool-execution-shell { padding: 0; border: 0; background: transparent; color: var(--pi-text); } .msg.system { color: var(--pi-danger); } @@ -320,6 +321,8 @@ export const chatStyles = css` .msg-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 22px; margin-bottom: 8px; } .msg > .msg-header { position: sticky; top: -26px; z-index: 4; margin: -12px -12px 8px; padding: 7px 10px 6px; border-radius: 9px 9px 0 0; border-bottom: 1px solid color-mix(in srgb, var(--pi-border-muted) 35%, transparent); background: var(--pi-surface); box-shadow: 0 8px 18px var(--pi-shadow-soft); } .msg.user > .msg-header { border-bottom-color: color-mix(in srgb, var(--pi-accent-border) 35%, transparent); background: var(--pi-selection-bg); } + .msg.assistant > .msg-header .label { color: var(--pi-text-secondary); } + .msg.user > .msg-header .label { color: var(--pi-accent); } .msg.tool > .msg-header { border-bottom-color: color-mix(in srgb, var(--pi-warning-border) 35%, transparent); background: var(--pi-warning-surface); } .msg.bash > .msg-header { border-bottom-color: color-mix(in srgb, var(--pi-success) 35%, transparent); background: var(--pi-success-bg); } .msg.skill > .msg-header { border-bottom-color: color-mix(in srgb, var(--pi-purple-border) 35%, transparent); background: var(--pi-purple-surface); } diff --git a/src/client/src/plugins/themes/index.ts b/src/client/src/plugins/themes/index.ts index 9eee8bc..da010fa 100644 --- a/src/client/src/plugins/themes/index.ts +++ b/src/client/src/plugins/themes/index.ts @@ -52,8 +52,8 @@ const piWebDarkTokens = { "--pi-muted": "#aaa4bd", "--pi-dim": "#817a99", "--pi-accent": "#7c3cff", - "--pi-accent-border": "#3d4a78", - "--pi-selection-bg": "#151b31", + "--pi-accent-border": "#5a47b0", + "--pi-selection-bg": "#1d2547", "--pi-success": "#00f0d8", "--pi-success-border": "#00f0d8", "--pi-success-bg": "#071e22",