fix: settings: dark mode

fuyufjh · Jan 12, 2025 · ccd3f8b · ccd3f8b
1 parent b2f25b5
commit ccd3f8b
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 33 deletions.
diff --git a/src/components/settings.tsx b/src/components/settings.tsx
@@ -264,7 +264,7 @@ export default function Settings() {
           <h2 className="text-lg font-semibold mb-3">系统</h2>
           <div className="space-y-2">
             <div className="flex items-center justify-between">
-              <p className="text-sm text-gray-500">
+              <p className="text-sm text-muted-foreground">
                 资源更新于:<br/> {new Date(lastUpdated).toLocaleString('zh-Hans-CN')}
               </p>
               <Button variant="outline" size="sm" onClick={onUpdateResources} aria-label="更新">
@@ -288,7 +288,7 @@ export default function Settings() {
               href="https://github.com/fuyufjh/ArkPets-Chrome" 
               target="_blank" 
               rel="noopener noreferrer"
-              className="flex items-center justify-center text-sm text-gray-600 hover:text-gray-800"
+              className="flex items-center justify-center text-sm text-muted-foreground hover:text-foreground"
             >
               项目主页
               <SquareArrowUpRightIcon className="ml-1 w-4 h-4" />

diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
@@ -17,7 +17,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
       )}
     />
   </SwitchPrimitives.Root>

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -5,8 +5,8 @@
 body {
   margin: 0;
   padding: 0;
-  color: var(--foreground);
-  background: var(--background);
+  color: hsl(var(--foreground));
+  background: hsl(var(--background));
   font-family: Arial, Helvetica, sans-serif;
 }
 
@@ -46,34 +46,37 @@ body {
     --switch-foreground: 0 0% 3.9%;
     --switch-thumb: 0 0% 100%;
   }
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-    --switch-background: 0 0% 14.9%;
-    --switch-foreground: 0 0% 98%;
-    --switch-thumb: 0 0% 100%;
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --background: 0 0% 3.9%;
+      --foreground: 0 0% 98%;
+      --card: 0 0% 3.9%;
+      --card-foreground: 0 0% 98%;
+      --popover: 0 0% 3.9%;
+      --popover-foreground: 0 0% 98%;
+      --primary: 0 0% 98%;
+      --primary-foreground: 0 0% 9%;
+      --secondary: 0 0% 14.9%;
+      --secondary-foreground: 0 0% 98%;
+      --muted: 0 0% 14.9%;
+      --muted-foreground: 0 0% 63.9%;
+      --accent: 0 0% 14.9%;
+      --accent-foreground: 0 0% 98%;
+      --destructive: 0 62.8% 30.6%;
+      --destructive-foreground: 0 0% 98%;
+      --border: 0 0% 14.9%;
+      --input: 0 0% 14.9%;
+      --ring: 0 0% 83.1%;
+      --chart-1: 220 70% 50%;
+      --chart-2: 160 60% 45%;
+      --chart-3: 30 80% 55%;
+      --chart-4: 280 65% 60%;
+      --chart-5: 340 75% 55%;
+      --switch-background: 0 0% 14.9%;
+      --switch-foreground: 0 0% 98%;
+      --switch-thumb: 0 0% 100%;
+    }
   }
 }