diff --git a/apps/frontend/app/(with-header-footer)/layout.tsx b/apps/frontend/app/(with-header-footer)/layout.tsx
index 89883f4..0cba270 100644
--- a/apps/frontend/app/(with-header-footer)/layout.tsx
+++ b/apps/frontend/app/(with-header-footer)/layout.tsx
@@ -9,7 +9,7 @@ export default function LayoutWithHeaderFooter({
     return (
         <>
             <Header />
-            <main className="flex-1 flex flex-col bg-zinc-50">
+            <main className="flex-1 flex flex-col bg-zinc-50 dark:bg-zinc-950">
                 {children}
             </main>
             <Footer />
diff --git a/apps/frontend/app/(with-header-footer)/page.tsx b/apps/frontend/app/(with-header-footer)/page.tsx
index be4f916..8098814 100644
--- a/apps/frontend/app/(with-header-footer)/page.tsx
+++ b/apps/frontend/app/(with-header-footer)/page.tsx
@@ -15,7 +15,7 @@ export default function Home() {
         />
       </figure>
       <h1 className='text-4xl md:text-5xl font-bold mt-5 md:mt-8 gradient-title duration-400 select-none'>特恩(TONE)</h1>
-      <p className='text-lg sm:text-xl md:text-2xl mt-3 font-medium text-zinc-400 duration-400 select-none'>一名在各个领域反复横跳的程序员</p>
+      <p className='text-lg sm:text-xl md:text-2xl mt-3 font-medium text-zinc-400 dark:text-zinc-200 duration-400 select-none'>一名在各个领域反复横跳的程序员</p>
       <nav className='flex sm:flex-row flex-col gap-2 sm:gap-10 mt-5 md:mt-8 duration-400' aria-label="社交媒体链接">
         <a href='https://space.bilibili.com/474156211'
           target='_black'
diff --git a/apps/frontend/components/Footer.tsx b/apps/frontend/components/Footer.tsx
index c670e9d..0979028 100644
--- a/apps/frontend/components/Footer.tsx
+++ b/apps/frontend/components/Footer.tsx
@@ -11,18 +11,18 @@ const EMAIL = "tonesc.cn@gmail.com";
 export default function Footer() {
     return (
         <footer className="border-t border-zinc-300">
-            <div className="bg-zinc-50 px-4 py-3 md:py-5 sm:px-10 md:px-20 flex flex-col sm:flex-row justify-between items-center gap-4 transition-all">
+            <div className="bg-zinc-50 dark:bg-zinc-950 px-4 py-3 md:py-5 sm:px-10 md:px-20 flex flex-col sm:flex-row justify-between items-center gap-4 transition-all">
                 {/* 版权与备案信息 */}
                 <div className="text-center sm:text-left">
                     <a
                         href="https://beian.miit.gov.cn/"
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="block text-sm text-zinc-500 hover:text-zinc-700 hover:underline focus:outline-none focus:underline"
+                        className="block text-sm text-zinc-500 dark:text-zinc-300 hover:text-zinc-700 dark:hover:text-zinc-100 hover:underline focus:outline-none focus:underline"
                     >
                         备案号：渝ICP备2023009516号-1
                     </a>
-                    <p className="mt-1 text-sm text-zinc-500">
+                    <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-300">
                         © {new Date().getFullYear()} TONE Page. All rights reserved.
                     </p>
                 </div>
@@ -32,13 +32,13 @@ export default function Footer() {
                     <Popover>
                         <PopoverTrigger asChild>
                             <Button variant='outline' size='sm' >
-                                <Mail className="text-zinc-600" />
+                                <Mail className="text-zinc-600 dark:text-zinc-300" />
                             </Button>
                         </PopoverTrigger>
                         <PopoverContent className="w-fit">
                             <a
                                 href={`mailto:${EMAIL}`}
-                                className="text-sm text-zinc-800 hover:underline focus:outline-none focus:underline"
+                                className="text-sm text-zinc-800 dark:text-zinc-200 hover:underline focus:outline-none focus:underline"
                             >
                                 {EMAIL}
                             </a>
diff --git a/apps/frontend/components/Header.tsx b/apps/frontend/components/Header.tsx
index 2bee6af..a98a94d 100644
--- a/apps/frontend/components/Header.tsx
+++ b/apps/frontend/components/Header.tsx
@@ -48,13 +48,13 @@ export default function Header() {
 
     return (
         <>
-            <header className="sticky top-0 z-50 backdrop-blur-sm bg-white/40 shadow" role="banner" aria-label="网站顶部导航栏">
+            <header className="sticky top-0 z-50 backdrop-blur-sm bg-white/40 dark:bg-black/40 shadow dark:shadow-zinc-500" role="banner" aria-label="网站顶部导航栏">
                 <div className="flex items-center justify-between px-10 md:h-18 md:px-20 h-14 duration-300" aria-label="主菜单">
                     <Link
                         href="/"
                         className={cn(
-                            "cursor-pointer font-medium text-zinc-500 hover:text-zinc-800 border-b-4 border-transparent duration-200",
-                            pathname === "/" && "text-zinc-800"
+                            "cursor-pointer font-medium text-zinc-500 dark:text-zinc-300 hover:text-zinc-800 dark:hover:text-zinc-100 border-b-4 border-transparent duration-200",
+                            pathname === "/" && "text-zinc-800 dark:text-zinc-100"
                         )}
                         aria-current={pathname === "/" ? "page" : undefined}
                     >
@@ -72,8 +72,8 @@ export default function Header() {
                                 key={item.name}
                                 href={item.path}
                                 className={cn(
-                                    "cursor-pointer md:text-lg font-medium text-zinc-500 hover:text-zinc-800 border-b-4 border-transparent duration-200",
-                                    pathname.startsWith(item.path) && "text-zinc-800 border-b-pink-500"
+                                    "cursor-pointer md:text-lg font-medium text-zinc-500 dark:text-zinc-300 hover:text-zinc-800 dark:hover:text-zinc-100 border-b-4 border-transparent duration-200",
+                                    pathname.startsWith(item.path) && "text-zinc-800 dark:text-zinc-100 border-b-pink-500"
                                 )}
                                 onClick={e => handleClick(e, item.path)}
                                 aria-current={pathname === item.path ? "page" : undefined}