fix: Use system color preference

src/app/globals.css

@@ -50,6 +50,39 @@
      */
    }
 
+   [data-theme='dark'] {
+      --background: 0 0% 0%;
+      --foreground: 0 0% 98%;
+
+      --surface: rgb(23, 23, 23);
+
+      --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%;
+      --color-one: #6aa8e2;
+   }
+
    .dark {
       --background: 0 0% 0%;
       --foreground: 0 0% 98%;

src/app/layout.tsx

@@ -33,7 +33,6 @@ export default async function RootLayout({
         <NextIntlClientProvider messages={messages}>
           <ThemeProvider
             attribute="class"
-            defaultTheme="dark"
             enableSystem
             disableTransitionOnChange
           >