From 281615253637cdcd94291710504840b17daa0e7b Mon Sep 17 00:00:00 2001 From: ryan Date: Sun, 28 Jun 2026 10:34:20 +0800 Subject: [PATCH] fix(frontend): adjust sidebar active text color and fix destructive button contrast - Update sidebar active menu button text color to use theme dynamic `sidebar-primary` variable instead of hardcoded hex value. - Add missing `destructive-foreground` variables to default theme config and styles, resolving the black-on-black text contrast issue on confirmation dialog delete buttons. - Update changelog to track these fixes. --- docs/changelog/index.md | 5 +++++ frontend/app/globals.css | 3 +++ frontend/components/ui/sidebar.tsx | 2 +- frontend/lib/theme/themes.json | 2 ++ frontend/public/style/default.css | 3 +++ 5 files changed, 14 insertions(+), 1 deletion(-) diff --git a/docs/changelog/index.md b/docs/changelog/index.md index 8e727507..366803f3 100644 --- a/docs/changelog/index.md +++ b/docs/changelog/index.md @@ -18,6 +18,11 @@ sidebar: false ## [unreleased] +### 修复 + +- 修复侧边栏一级菜单项当前页面字体颜色被硬编码为 `#6366F1` 的问题，改用 CSS 主题变量 `text-sidebar-primary`，以保证在多主题系统下的色彩一致性。 +- 修复默认（Default）主题因遗漏声明 `destructive-foreground` 变量，导致删除按钮（如确认删除证书弹窗）在某些状态下渲染为黑底黑字而无法阅读的问题。 + ## [v3.0.0] - 2026-06-27 ### 升级与迁移注意事项 diff --git a/frontend/app/globals.css b/frontend/app/globals.css index 33d51423..2bbf6733 100644 --- a/frontend/app/globals.css +++ b/frontend/app/globals.css @@ -25,6 +25,7 @@ --color-ring: var(--ring); --color-input: var(--input); --color-border: var(--border); + --color-destructive-foreground: var(--destructive-foreground); --color-destructive: var(--destructive); --color-accent-foreground: var(--accent-foreground); --color-accent: var(--accent); @@ -61,6 +62,7 @@ --accent: oklch(0.967 0.001 286.375); --accent-foreground: oklch(0.21 0.006 285.885); --destructive: oklch(0.577 0.245 27.325); + --destructive-foreground: oklch(98.5% 0% 0); --border: oklch(0.92 0.004 286.32); --input: oklch(0.92 0.004 286.32); --ring: oklch(0.705 0.015 286.067); @@ -95,6 +97,7 @@ --accent: oklch(0.274 0.006 286.033); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); + --destructive-foreground: oklch(98.5% 0% 0); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.552 0.016 285.938); diff --git a/frontend/components/ui/sidebar.tsx b/frontend/components/ui/sidebar.tsx index ad285bf0..9c8e42ea 100644 --- a/frontend/components/ui/sidebar.tsx +++ b/frontend/components/ui/sidebar.tsx @@ -473,7 +473,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) { } const sidebarMenuButtonVariants = cva( - "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-bold data-[active=true]:text-[#6366F1] data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", + "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-bold data-[active=true]:text-sidebar-primary data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", { variants: { variant: { diff --git a/frontend/lib/theme/themes.json b/frontend/lib/theme/themes.json index 150daa7e..9818de0f 100644 --- a/frontend/lib/theme/themes.json +++ b/frontend/lib/theme/themes.json @@ -20,6 +20,7 @@ "accent": "oklch(0.967 0.001 286.375)", "accent-foreground": "oklch(0.21 0.006 285.885)", "destructive": "oklch(0.577 0.245 27.325)", + "destructive-foreground": "oklch(98.5% 0% 0)", "border": "oklch(0.92 0.004 286.32)", "input": "oklch(0.92 0.004 286.32)", "ring": "oklch(0.705 0.015 286.067)", @@ -53,6 +54,7 @@ "accent": "oklch(0.274 0.006 286.033)", "accent-foreground": "oklch(0.985 0 0)", "destructive": "oklch(0.704 0.191 22.216)", + "destructive-foreground": "oklch(98.5% 0% 0)", "border": "oklch(1 0 0 / 10%)", "input": "oklch(1 0 0 / 15%)", "ring": "oklch(0.552 0.016 285.938)", diff --git a/frontend/public/style/default.css b/frontend/public/style/default.css index badcf6e4..33a77ebb 100644 --- a/frontend/public/style/default.css +++ b/frontend/public/style/default.css @@ -25,6 +25,7 @@ --color-ring: var(--ring); --color-input: var(--input); --color-border: var(--border); + --color-destructive-foreground: var(--destructive-foreground); --color-destructive: var(--destructive); --color-accent-foreground: var(--accent-foreground); --color-accent: var(--accent); @@ -61,6 +62,7 @@ --accent: oklch(0.967 0.001 286.375); --accent-foreground: oklch(0.21 0.006 285.885); --destructive: oklch(0.577 0.245 27.325); + --destructive-foreground: oklch(98.5% 0% 0); --border: oklch(0.92 0.004 286.32); --input: oklch(0.92 0.004 286.32); --ring: oklch(0.705 0.015 286.067); @@ -95,6 +97,7 @@ --accent: oklch(0.274 0.006 286.033); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); + --destructive-foreground: oklch(98.5% 0% 0); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.552 0.016 285.938);