fix: update styles for dark mode support

app/globals.css

@@ -2,18 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
 body {
   color: var(--foreground);
   background: var(--background);

app/layout.tsx

@@ -1,17 +1,6 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
 export const metadata: Metadata = {
   title: "智能计算实验室",
 };
@@ -22,8 +11,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>{children}</body>
+    <html lang="zh-cn" className="dark">
+      <body className="antialiased min-h-screen flex flex-col bg-gray-100 dark:bg-gray-900 transition-colors ">{children}</body>
     </html>
   );
 }

app/page.tsx

@@ -5,21 +5,23 @@ import Footer from "@/components/footer";
 
 export default function Home() {
   return (
-    <div className="min-h-screen flex flex-col bg-gray-100">
+    <div className="min-h-screen flex flex-col bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
       <Header />
       <main className="container mx-auto p-4 flex-grow">
         <section className="text-center mb-12 max-w-2xl mt-8 mx-auto max-md:mt-4">
-          <h2 className="text-4xl font-extrabold text-gray-900">智能计算实验室简介</h2>
-          <p className="text-xl text-gray-600 mt-4 text-left">　　在物理的世界里，粒子有形形色色的活法，有的粒子很轻，终生不为人所注意；有的粒子会一鸣惊人，在湮灭时释放出大量的光；有的粒子狡黠善变，一辈子不停地改变身份，时时刻刻要成为别的粒子；但有的粒子一生稳定，怀揣着出发时得到的巨大能量，一生孤独而平静地飞行，只活在自己的轨道里。</p>
+          <h2 className="text-4xl font-extrabold text-gray-900 dark:text-gray-100">智能计算实验室简介</h2>
+          <p className="text-xl text-gray-600 dark:text-gray-300 mt-4 text-left indent-8">
+            在物理的世界里，粒子有形形色色的活法，有的粒子很轻，终生不为人所注意；有的粒子会一鸣惊人，在湮灭时释放出大量的光；有的粒子狡黠善变，一辈子不停地改变身份，时时刻刻要成为别的粒子；但有的粒子一生稳定，怀揣着出发时得到的巨大能量，一生孤独而平静地飞行，只活在自己的轨道里。
+          </p>
         </section>
         <section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
           {websites.map((website, index) => (
-            <a key={index} href={website.link} rel="noopener noreferrer" target="_blank">
-              <div className="list-item bg-gray-50 p-3 shadow hover:shadow-lg transition-shadow duration-300">
+            <a key={index} href={website.link} rel="noopener noreferrer" target="_blank" className="flex justify-center">
+              <div className="flex items-center bg-gray-50 dark:bg-gray-800 p-3 rounded-xl shadow hover:shadow-xl transition-all duration-300 w-full max-w-md">
                 <Image src={website.icon} alt={website.title} width={80} height={80} className="list-icon rounded-lg overflow-hidden flex-shrink-0" />
-                <div className="list-info flex-shrink pl-3 pt-2 my-1 truncate">
-                  <h3 className="list-name text-xl font-bold my-1 truncate">{website.title}</h3>
-                  <div className="text-sm text-gray-500 truncate">{website.description}</div>
+                <div className="list-info flex-shrink pl-3 pt-2 my-1 truncate w-full">
+                  <h3 className="list-name text-xl font-bold my-1 truncate text-gray-900 dark:text-gray-100">{website.title}</h3>
+                  <div className="text-sm text-gray-500 dark:text-gray-400 truncate">{website.description}</div>
                 </div>
               </div>
             </a>

components/footer.tsx

@@ -1,6 +1,6 @@
 export default function Footer() {
   return (
-    <footer className="w-full bg-white shadow p-4 text-left text-gray-500 flex flex-row gap-2">
+    <footer className="w-full bg-white dark:bg-gray-950 shadow p-4 text-left text-gray-500 dark:text-gray-400 flex flex-row gap-2">
       <div className="container mx-auto">
         <div>© {new Date().getFullYear()} 智能计算实验室 · Designed by LufsX.</div>
       </div>

components/header.tsx

@@ -2,18 +2,18 @@ import Link from "next/link";
 
 export default function Header() {
   return (
-    <header className="home-header px-4 w-full bg-white shadow flex sm:px-8">
+    <header className="home-header px-4 w-full bg-white dark:bg-gray-950 shadow flex sm:px-8">
       <nav className="container mx-auto flex justify-between items-center">
         <div className="flex items-center">
           <Link href="/">
-            <h1 className="text-2xl font-bold text-gray-900">智能计算实验室</h1>
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">智能计算实验室</h1>
           </Link>
         </div>
         <div className="flex space-x-4">
-          <Link className="nav-link py-3 px-2" href="/">
+          <Link className="nav-link py-3 px-2 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/">
             首页
           </Link>
-          {/* <Link className="nav-link py-3 px-2" href="/contacts">
+          {/* <Link className="nav-link py-3 px-2 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/">
             联系
           </Link> */}
         </div>