From c78bfbcf179305765fa403143adcea89c5e500ff Mon Sep 17 00:00:00 2001 From: Zheng Li Date: Mon, 18 May 2026 16:32:28 +0800 Subject: [PATCH] fix(skills): keep skill title input transparent in dark mode (#2710) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The skill name Input on the detail editor uses `bg-transparent px-0` to render as flush, chrome-less text. The base Input component also applies `dark:bg-input/30`, which Tailwind keeps because it lives in the `dark:` variant. In dark mode this exposes a 30% white fill that appears flush against the text — looking like missing left padding. Add `dark:bg-transparent` to the className so the override wins in both color modes. --- packages/views/skills/components/skill-detail-page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/views/skills/components/skill-detail-page.tsx b/packages/views/skills/components/skill-detail-page.tsx index 173b493c9..ba10eba7c 100644 --- a/packages/views/skills/components/skill-detail-page.tsx +++ b/packages/views/skills/components/skill-detail-page.tsx @@ -679,7 +679,7 @@ export function SkillDetailPage({ skillId }: { skillId: string }) { readOnly={!canEdit} onChange={(e) => setName(e.target.value)} placeholder={t(($) => $.detail.name_placeholder)} - className="h-9 border-0 bg-transparent px-0 text-lg font-semibold shadow-none focus-visible:ring-0 read-only:cursor-default" + className="h-9 border-0 bg-transparent px-0 text-lg font-semibold shadow-none focus-visible:ring-0 read-only:cursor-default dark:bg-transparent" aria-label={t(($) => $.detail.name_aria)} />