fix: 修复暗黑模式样式兼容性
- 在 tailwind.config.js 中启用 darkMode: 'class' 并扩展语义化颜色变量 - 将全项目硬编码颜色(bg-white、text-gray-*、border-gray-* 等)替换为语义化类名 - 修复 popup/index.html 硬编码浅色背景色 - 同步更新相关单元测试中的类名断言
This commit is contained in:
@@ -28,7 +28,7 @@ export default function SwitchButtonGroup<T extends string | number = string>({
|
||||
|
||||
return (
|
||||
<div
|
||||
className="w-full mb-4 rounded-xl border border-gray-200 bg-gray-50 p-1.5 flex gap-1"
|
||||
className="w-full mb-4 rounded-xl border border-border bg-muted p-1.5 flex gap-1"
|
||||
style={sx}
|
||||
>
|
||||
{options.map((option) => (
|
||||
@@ -40,8 +40,8 @@ export default function SwitchButtonGroup<T extends string | number = string>({
|
||||
sizeClasses[size]
|
||||
} ${
|
||||
value === option.value
|
||||
? 'bg-white text-blue-600 shadow-sm'
|
||||
: 'text-gray-500 hover:text-gray-700 hover:bg-white/50'
|
||||
? 'bg-background text-primary shadow-sm'
|
||||
: 'text-muted-foreground hover:text-foreground hover:bg-background/50'
|
||||
}`}
|
||||
style={buttonSx}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user