feat(ui): terminal, charts and low-contrast text follow the selected theme
- The lane terminal (xterm) takes its palette from the selected DARK theme — it stays dark in light mode, as a terminal should — and repaints live when the theme changes (`client/src/lib/terminalTheme.ts`). - Charts on the Dashboard and Workflows pages draw their grid, axes, labels and tooltips from theme tokens instead of hardcoded near-black/white, and the activity heatmap ramps from the page surface to the accent, so it reads on every theme instead of going near-black on light ones. - Status/brand text that only worked on dark backgrounds (`text-*-300/400`) gets a darker light-mode shade (`text-*-700 dark:text-*-300`) across sessions, conversations, workflows, config and settings. Categorical chart colours are kept.
This commit is contained in:
@@ -970,7 +970,7 @@ type Tone =
|
||||
const TONES: Record<Tone, { iconBg: string; iconText: string; bar: string; ring: string }> = {
|
||||
sky: {
|
||||
iconBg: "bg-sky-500/10",
|
||||
iconText: "text-sky-300",
|
||||
iconText: "text-sky-700 dark:text-sky-300",
|
||||
bar: "bg-sky-500/40",
|
||||
ring: "ring-sky-500/20",
|
||||
},
|
||||
@@ -982,7 +982,7 @@ const TONES: Record<Tone, { iconBg: string; iconText: string; bar: string; ring:
|
||||
},
|
||||
violet: {
|
||||
iconBg: "bg-violet-500/10",
|
||||
iconText: "text-violet-300",
|
||||
iconText: "text-violet-700 dark:text-violet-300",
|
||||
bar: "bg-violet-500/40",
|
||||
ring: "ring-violet-500/20",
|
||||
},
|
||||
@@ -994,37 +994,37 @@ const TONES: Record<Tone, { iconBg: string; iconText: string; bar: string; ring:
|
||||
},
|
||||
fuchsia: {
|
||||
iconBg: "bg-fuchsia-500/10",
|
||||
iconText: "text-fuchsia-300",
|
||||
iconText: "text-fuchsia-700 dark:text-fuchsia-300",
|
||||
bar: "bg-fuchsia-500/40",
|
||||
ring: "ring-fuchsia-500/20",
|
||||
},
|
||||
cyan: {
|
||||
iconBg: "bg-cyan-500/10",
|
||||
iconText: "text-cyan-300",
|
||||
iconText: "text-cyan-700 dark:text-cyan-300",
|
||||
bar: "bg-cyan-500/40",
|
||||
ring: "ring-cyan-500/20",
|
||||
},
|
||||
pink: {
|
||||
iconBg: "bg-pink-500/10",
|
||||
iconText: "text-pink-300",
|
||||
iconText: "text-pink-700 dark:text-pink-300",
|
||||
bar: "bg-pink-500/40",
|
||||
ring: "ring-pink-500/20",
|
||||
},
|
||||
indigo: {
|
||||
iconBg: "bg-indigo-500/10",
|
||||
iconText: "text-indigo-300",
|
||||
iconText: "text-indigo-700 dark:text-indigo-300",
|
||||
bar: "bg-indigo-500/40",
|
||||
ring: "ring-indigo-500/20",
|
||||
},
|
||||
orange: {
|
||||
iconBg: "bg-orange-500/10",
|
||||
iconText: "text-orange-300",
|
||||
iconText: "text-orange-700 dark:text-orange-300",
|
||||
bar: "bg-orange-500/40",
|
||||
ring: "ring-orange-500/20",
|
||||
},
|
||||
teal: {
|
||||
iconBg: "bg-teal-500/10",
|
||||
iconText: "text-teal-300",
|
||||
iconText: "text-teal-700 dark:text-teal-300",
|
||||
bar: "bg-teal-500/40",
|
||||
ring: "ring-teal-500/20",
|
||||
},
|
||||
@@ -1036,7 +1036,7 @@ const TONES: Record<Tone, { iconBg: string; iconText: string; bar: string; ring:
|
||||
},
|
||||
rose: {
|
||||
iconBg: "bg-rose-500/10",
|
||||
iconText: "text-rose-300",
|
||||
iconText: "text-rose-700 dark:text-rose-300",
|
||||
bar: "bg-rose-500/40",
|
||||
ring: "ring-rose-500/20",
|
||||
},
|
||||
@@ -2721,7 +2721,7 @@ function CurrentConfigPanel({ sources }: { sources: CcSettingsSource[] }) {
|
||||
return (
|
||||
<div className="rounded-lg border border-border bg-surface-2">
|
||||
<div className="border-b border-border px-4 py-2.5 flex items-center gap-2">
|
||||
<SettingsIcon className="w-3.5 h-3.5 text-violet-300/80" />
|
||||
<SettingsIcon className="w-3.5 h-3.5 text-violet-700/80 dark:text-violet-300/80" />
|
||||
<span className="text-sm font-medium text-fg-primary">Current configuration</span>
|
||||
<span className="text-[11px] text-fg-muted ml-auto">
|
||||
{setCount} option{setCount !== 1 ? "s" : ""} set · the rest use defaults
|
||||
@@ -3233,7 +3233,7 @@ function renderMemoryIndex(
|
||||
type="button"
|
||||
onClick={() => onJump(capturedTarget)}
|
||||
title={`${jumpTitle}: ${normalizeMemoryTarget(capturedTarget)}`}
|
||||
className="text-teal-300 hover:text-teal-200 underline decoration-dotted underline-offset-2 hover:decoration-solid focus:outline-none focus:ring-1 focus:ring-teal-400/60 rounded-sm"
|
||||
className="text-teal-700 dark:text-teal-300 hover:text-teal-800 dark:hover:text-teal-200 underline decoration-dotted underline-offset-2 hover:decoration-solid focus:outline-none focus:ring-1 focus:ring-teal-400/60 rounded-sm"
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
@@ -3386,7 +3386,7 @@ function MemoryPanel({
|
||||
{totalAuto > 0 && (
|
||||
<section className="pt-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<BookOpen className="w-3.5 h-3.5 text-teal-300" />
|
||||
<BookOpen className="w-3.5 h-3.5 text-teal-700 dark:text-teal-300" />
|
||||
<h3 className="text-[11px] font-semibold uppercase tracking-wider text-fg-secondary">
|
||||
{t("memory.autoTitle")}
|
||||
</h3>
|
||||
@@ -3499,7 +3499,7 @@ function MemoryProjectGroup({
|
||||
open ? "" : "-rotate-90"
|
||||
}`}
|
||||
/>
|
||||
<FolderTree className="w-3.5 h-3.5 text-teal-300 flex-shrink-0" />
|
||||
<FolderTree className="w-3.5 h-3.5 text-teal-700 dark:text-teal-300 flex-shrink-0" />
|
||||
<span className="font-mono text-xs text-fg-secondary truncate flex-1 min-w-0">
|
||||
{project}
|
||||
</span>
|
||||
@@ -3618,7 +3618,7 @@ function MemoryIndexCard({
|
||||
return (
|
||||
<div className="rounded-md border border-teal-500/20 bg-teal-500/5">
|
||||
<div className="flex items-center gap-2 px-3 py-1.5 border-b border-teal-500/15">
|
||||
<BookOpen className="w-3 h-3 text-teal-300 flex-shrink-0" />
|
||||
<BookOpen className="w-3 h-3 text-teal-700 dark:text-teal-300 flex-shrink-0" />
|
||||
<span className="font-mono text-[11px] text-fg-secondary truncate flex-1 min-w-0">
|
||||
{item.name}
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user