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

- 在 tailwind.config.js 中启用 darkMode: 'class' 并扩展语义化颜色变量
- 将全项目硬编码颜色（bg-white、text-gray-*、border-gray-* 等）替换为语义化类名
- 修复 popup/index.html 硬编码浅色背景色
- 同步更新相关单元测试中的类名断言

pages/Timestamp/LiveClock.tsx

@@ -37,17 +37,17 @@ const LiveClock = React.memo(({ unit, onUseNow }: LiveClockProps) => {
   }, [now, showMessage, t]);
 
   return (
-    <div className="flex items-center gap-3 px-4 py-2 mb-4 bg-blue-50 rounded-lg border border-blue-100">
-      <span className="text-blue-700 font-bold text-[0.65rem] uppercase tracking-wider whitespace-nowrap">
+    <div className="flex items-center gap-3 px-4 py-2 mb-4 bg-primary/10 rounded-lg border border-primary/20">
+      <span className="text-primary font-bold text-[0.65rem] uppercase tracking-wider whitespace-nowrap">
         {t('timestamp:currentTs')}
       </span>
-      <span className="flex-1 font-mono font-bold text-blue-700 text-sm tracking-tight leading-tight overflow-hidden text-ellipsis">
+      <span className="flex-1 font-mono font-bold text-primary text-sm tracking-tight leading-tight overflow-hidden text-ellipsis">
         {displayVal}
       </span>
       <button
         onClick={handleUseNow}
         title={t('timestamp:useNowTooltip')}
-        className="p-1.5 rounded-md bg-white text-blue-700 shadow-sm hover:bg-blue-700 hover:text-white transition-colors"
+        className="p-1.5 rounded-md bg-background text-primary shadow-sm hover:bg-blue-700 hover:text-white transition-colors"
       >
         <Clock className="w-4 h-4" />
       </button>

pages/Timestamp/ResultView.tsx

@@ -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 && (

pages/Timestamp/index.tsx

@@ -41,7 +41,7 @@ export default function Index() {
         {/* 桌面端 md+ 左右分栏；移动端单栏堆叠 */}
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-stretch">
           {/* 左栏：转换工作台 */}
-          <div className="p-5 rounded-xl bg-white border border-gray-200 shadow-sm">
+          <div className="p-5 rounded-xl bg-background border border-border shadow-sm">
             {/* 模式切换 */}
             <SwitchButtonGroup
               value={mode}
@@ -63,8 +63,8 @@ export default function Index() {
                 value={mode === 'ts2dt' ? tsInput : dtInput}
                 onChange={(e) => setInput(e.target.value)}
                 className={`w-full px-4 py-2.5 rounded-lg border ${
-                  error ? 'border-red-500' : 'border-gray-300'
-                } bg-white text-sm font-mono font-semibold focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all`}
+                  error ? 'border-red-500' : 'border-input'
+                } bg-background text-sm font-mono font-semibold focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all`}
               />
               {error && <p className="text-red-500 text-xs mt-1">{error}</p>}
 
@@ -84,7 +84,7 @@ export default function Index() {
                 <select
                   value={zone}
                   onChange={(e) => setZone(e.target.value as typeof zone)}
-                  className="flex-1 min-w-0 px-4 py-2.5 rounded-lg border border-gray-300 bg-white text-sm font-mono font-semibold focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+                  className="flex-1 min-w-0 px-4 py-2.5 rounded-lg border border-input bg-background text-sm font-mono font-semibold focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all"
                 >
                   {ZONES.map((z) => (
                     <option key={z} value={z} className="text-sm font-semibold">
@@ -98,14 +98,14 @@ export default function Index() {
             {/* 立即转换 */}
             <button
               onClick={convert}
-              className="block mx-auto mt-4 mb-1 max-w-[240px] w-full py-2.5 text-sm font-semibold rounded-lg bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all"
+              className="block mx-auto mt-4 mb-1 max-w-[240px] w-full py-2.5 text-sm font-semibold rounded-lg bg-primary text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition-all"
             >
               {t('timestamp:convertButton')}
             </button>
           </div>
 
           {/* 右栏：结果展示卡片 */}
-          <div className="p-5 rounded-xl bg-white border border-gray-200 shadow-sm h-full flex flex-col">
+          <div className="p-5 rounded-xl bg-background border border-border shadow-sm h-full flex flex-col">
             <ResultView result={result} mode={mode} unit={unit} zone={zone} showEmptyPlaceholder />
           </div>
         </div>