From 2f91b38be5ccbb8d85d2849909e5dcc42aa151e2 Mon Sep 17 00:00:00 2001 From: Tsiry Sandratraina Date: Tue, 18 Aug 2026 15:16:07 +0300 Subject: [PATCH] =?UTF-8?q?fix(ui):=20theme=20the=20portals=20=E2=80=94=20?= =?UTF-8?q?and=20give=20the=20TUI=20Night=20Rider's=20neon=20palette?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The remaining "X doesn't follow the theme" reports — modals, dropdown popups, the log popover — all had one root cause: HeroUI portals its overlays onto document.body, which sits *outside* the `
` the theme class lived on. Every overlay therefore kept the old theme however the class flipped. The ThemedRoot now stamps the class on `document.documentElement`, where portals inherit it; the
class stays for the in-tree half. Also from the review pass: - Sidebar hover text goes to full-strength `text-foreground` — the ramp step it used was not themed strongly enough to read as a highlight on purple. - The filter box shows a `f` keycap on its right, so the new shortcut is discoverable where it acts. - The TUI's five colors become Night Rider's, at its neon end: electric cyan chrome, the theme's signature neon magenta for emphasis (its most-used token color), its muted lavender, teal for good, pink for bad — the terminal dashboard and the desktop app now share one identity. Verified on aarch64-darwin: tsc in both trees, vite build in web/, TUI tests pass, release builds and signs. The overlays were not re-eyeballed; the fix is structural (where the class lives), not cosmetic. --- core/src/tui/ui.rs | 14 +++++++++----- desktop/src/components/Sidebar.tsx | 8 ++++---- desktop/src/components/ViewShell.tsx | 5 ++++- desktop/src/main.tsx | 9 +++++++++ web/src/components/Sidebar.tsx | 8 ++++---- web/src/components/ViewShell.tsx | 5 ++++- web/src/main.tsx | 9 +++++++++ 7 files changed, 43 insertions(+), 15 deletions(-) diff --git a/core/src/tui/ui.rs b/core/src/tui/ui.rs index c286428..9d2a321 100644 --- a/core/src/tui/ui.rs +++ b/core/src/tui/ui.rs @@ -12,11 +12,15 @@ use crate::api; use super::{display_name, App, Panel}; -const TEAL: Color = Color::Rgb(0, 232, 198); -const VIOLET: Color = Color::Rgb(130, 100, 255); -const MUTED: Color = Color::Rgb(140, 150, 160); -const GREEN: Color = Color::Rgb(80, 220, 120); -const RED: Color = Color::Rgb(255, 100, 100); +// The Night Rider palette (trustfall/vscode-night-rider) at its neon end, +// matching the desktop app's default theme: electric cyan for chrome, the +// theme's signature neon magenta for emphasis (its most-used token color), +// its own muted lavender, and teal/pink for good/bad. +const TEAL: Color = Color::Rgb(0x71, 0xE4, 0xFE); +const VIOLET: Color = Color::Rgb(0xE5, 0x91, 0xFF); +const MUTED: Color = Color::Rgb(0x69, 0x62, 0x92); +const GREEN: Color = Color::Rgb(0x55, 0xF0, 0xD7); +const RED: Color = Color::Rgb(0xFF, 0x70, 0x9D); const YELLOW: Color = Color::Rgb(240, 200, 80); const SPINNER: [char; 10] = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']; diff --git a/desktop/src/components/Sidebar.tsx b/desktop/src/components/Sidebar.tsx index ee5c7f9..4751a1f 100644 --- a/desktop/src/components/Sidebar.tsx +++ b/desktop/src/components/Sidebar.tsx @@ -100,7 +100,7 @@ export default function Sidebar() { className={`group flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition ${ active ? "bg-primary/15 text-foreground shadow-[inset_0_0_0_1px] shadow-primary/25" - : "text-foreground-500 hover:bg-default-100/70 hover:text-foreground-300" + : "text-foreground-500 hover:bg-default-100/70 hover:text-foreground" }`} > setTheme(theme === "night-rider" ? "dark" : "night-rider") } - className="flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-foreground-500 transition hover:bg-default-100/70 hover:text-foreground-300" + className="flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-foreground-500 transition hover:bg-default-100/70 hover:text-foreground" > Appearance @@ -148,7 +148,7 @@ export default function Sidebar() {