fix: 修复暗黑模式样式兼容性

- 在 tailwind.config.js 中启用 darkMode: 'class' 并扩展语义化颜色变量
- 将全项目硬编码颜色(bg-white、text-gray-*、border-gray-* 等)替换为语义化类名
- 修复 popup/index.html 硬编码浅色背景色
- 同步更新相关单元测试中的类名断言
This commit is contained in:
雨霖铃
2026-05-22 16:04:50 +08:00
parent 5b9a0f59d3
commit de7da9f1db
42 changed files with 274 additions and 261 deletions
+7 -7
View File
@@ -37,7 +37,7 @@ const ResultView = React.memo(
if (!result) {
if (!showEmptyPlaceholder) return null;
return (
<div className="flex-1 flex items-center justify-center text-gray-400 text-sm font-semibold py-12 text-center">
<div className="flex-1 flex items-center justify-center text-muted-foreground text-sm font-semibold py-12 text-center">
{t('timestamp:resultEmpty')}
</div>
);
@@ -45,12 +45,12 @@ const ResultView = React.memo(
return (
<div className="animate-in fade-in duration-300">
<span className="block text-gray-500 mb-3 text-xs font-bold">
<span className="block text-muted-foreground mb-3 text-xs font-bold">
{t('timestamp:resultLabel')}
</span>
<div className="bg-blue-50 p-5 rounded-xl relative mb-4 border border-blue-200 flex justify-between items-center">
<span className="font-mono font-bold text-blue-700 break-all pr-4 text-xl tracking-tight leading-tight">
<div className="bg-primary/10 p-5 rounded-xl relative mb-4 border border-primary/30 flex justify-between items-center">
<span className="font-mono font-bold text-primary break-all pr-4 text-xl tracking-tight leading-tight">
{result}
</span>
<CopyButton
@@ -61,18 +61,18 @@ const ResultView = React.memo(
/>
</div>
<div className="bg-blue-50/50 p-4 rounded-xl border border-blue-100 flex flex-col gap-3">
<div className="bg-primary/5 p-4 rounded-xl border border-primary/20 flex flex-col gap-3">
{[
{ label: t('timestamp:relativeTime'), value: extraInfo?.relative },
{ label: t('timestamp:iso8601'), value: extraInfo?.iso },
{ label: t('timestamp:utcTime'), value: extraInfo?.utc },
].map((item) => (
<div key={item.label} className="flex justify-between items-center">
<span className="text-gray-400 font-bold text-xs pr-2 whitespace-nowrap">
<span className="text-muted-foreground font-bold text-xs pr-2 whitespace-nowrap">
{item.label}
</span>
<div className="flex items-center gap-2 min-w-0">
<span className="font-mono text-blue-700 font-semibold text-xs break-all text-right">
<span className="font-mono text-primary font-semibold text-xs break-all text-right">
{item.value}
</span>
{item.value && (