feat: dark mode

src/components/AggregateCard.tsx

@@ -114,7 +114,7 @@ const AggregateCard: React.FC<AggregateCardProps> = ({
         {/* 标题 */}
         <div className='absolute top-[calc(100%+0.2rem)] left-0 right-0'>
           <div className='flex flex-col items-center justify-center'>
-            <span className='text-gray-900 font-semibold truncate w-full text-center text-xs sm:text-sm'>
+            <span className='text-gray-900 font-semibold truncate w-full text-center text-xs sm:text-sm dark:text-gray-200'>
               {first.title}
             </span>
           </div>

src/components/CapsuleSwitch.tsx

@@ -15,7 +15,7 @@ const CapsuleSwitch: React.FC<CapsuleSwitchProps> = ({
 }) => {
   return (
     <div
-      className={`inline-flex bg-gray-300/80 rounded-full p-1 ${
+      className={`inline-flex bg-gray-300/80 rounded-full p-1 dark:bg-gray-700 ${
         className || ''
       }`}
     >
@@ -25,8 +25,8 @@ const CapsuleSwitch: React.FC<CapsuleSwitchProps> = ({
           onClick={() => onChange(opt.value)}
           className={`w-16 px-3 py-1 text-xs sm:w-20 sm:py-2 sm:text-sm rounded-full font-medium transition-all duration-200 ${
             active === opt.value
-              ? 'bg-white text-gray-900 shadow-sm'
-              : 'text-gray-700 hover:text-gray-900'
+              ? 'bg-white text-gray-900 shadow-sm dark:bg-gray-500 dark:text-gray-100'
+              : 'text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100'
           }`}
         >
           {opt.label}

src/components/ContinueWatching.tsx

@@ -72,10 +72,12 @@ export default function ContinueWatching({ className }: ContinueWatchingProps) {
   return (
     <section className={`mb-8 ${className || ''}`}>
       <div className='mb-4 flex items-center justify-between'>
-        <h2 className='text-xl font-bold text-gray-800'>继续观看</h2>
+        <h2 className='text-xl font-bold text-gray-800 dark:text-gray-200'>
+          继续观看
+        </h2>
         {!loading && playRecords.length > 0 && (
           <button
-            className='text-sm text-gray-500 hover:text-gray-700'
+            className='text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
             onClick={async () => {
               await clearAllPlayRecords();
               setPlayRecords([]);
@@ -93,11 +95,11 @@ export default function ContinueWatching({ className }: ContinueWatchingProps) {
                 key={index}
                 className='min-w-[96px] w-24 sm:min-w-[180px] sm:w-44'
               >
-                <div className='relative aspect-[2/3] w-full overflow-hidden rounded-lg bg-gray-200 animate-pulse'>
-                  <div className='absolute inset-0 bg-gray-300'></div>
+                <div className='relative aspect-[2/3] w-full overflow-hidden rounded-lg bg-gray-200 animate-pulse dark:bg-gray-800'>
+                  <div className='absolute inset-0 bg-gray-300 dark:bg-gray-700'></div>
                 </div>
-                <div className='mt-2 h-4 bg-gray-200 rounded animate-pulse'></div>
-                <div className='mt-1 h-3 bg-gray-200 rounded animate-pulse'></div>
+                <div className='mt-2 h-4 bg-gray-200 rounded animate-pulse dark:bg-gray-800'></div>
+                <div className='mt-1 h-3 bg-gray-200 rounded animate-pulse dark:bg-gray-800'></div>
               </div>
             ))
           : // 显示真实数据

src/components/DemoCard.tsx

@@ -102,7 +102,7 @@ const DemoCard = ({ title, poster, rate }: DemoCardProps) => {
       {/* 信息层 */}
       <div className='absolute top-[calc(100%+0.2rem)] left-0 right-0'>
         <div className='flex flex-col items-center justify-center'>
-          <span className='text-gray-900 font-semibold truncate w-full text-center text-xs sm:text-sm'>
+          <span className='text-gray-900 font-semibold truncate w-full text-center text-xs sm:text-sm dark:text-gray-200'>
             {title}
           </span>
         </div>

src/components/DoubanCardSkeleton.tsx

@@ -3,8 +3,8 @@ const DoubanCardSkeleton = () => {
     <div className='w-full'>
       <div className='group relative w-full rounded-lg bg-transparent shadow-none flex flex-col'>
         {/* 海报骨架 - 2:3 比例 */}
-        <div className='relative aspect-[2/3] w-full overflow-hidden rounded-lg bg-gray-200 animate-pulse'>
-          <div className='absolute inset-0 bg-gray-300'></div>
+        <div className='relative aspect-[2/3] w-full overflow-hidden rounded-lg bg-gray-200 animate-pulse dark:bg-gray-800'>
+          <div className='absolute inset-0 bg-gray-300 dark:bg-gray-700'></div>
         </div>
 
         {/* 信息层骨架 */}

src/components/MobileBottomNav.tsx

@@ -79,7 +79,7 @@ const MobileBottomNav = ({ activePath }: MobileBottomNavProps) => {
 
   return (
     <nav
-      className='md:hidden fixed left-0 right-0 z-20 bg-white/90 backdrop-blur-xl border-t border-gray-200/50 overflow-x-auto overscroll-x-contain whitespace-nowrap scrollbar-hide'
+      className='md:hidden fixed left-0 right-0 z-20 bg-white/90 backdrop-blur-xl border-t border-gray-200/50 overflow-x-auto overscroll-x-contain whitespace-nowrap scrollbar-hide dark:bg-gray-900/80 dark:border-gray-700/50'
       style={{
         /* 紧贴视口底部，同时在内部留出安全区高度 */
         bottom: 0,
@@ -97,10 +97,18 @@ const MobileBottomNav = ({ activePath }: MobileBottomNavProps) => {
               >
                 <item.icon
                   className={`h-6 w-6 ${
-                    active ? 'text-green-600' : 'text-gray-500'
+                    active
+                      ? 'text-green-600 dark:text-green-400'
+                      : 'text-gray-500 dark:text-gray-400'
                   }`}
                 />
-                <span className={active ? 'text-green-600' : 'text-gray-600'}>
+                <span
+                  className={
+                    active
+                      ? 'text-green-600 dark:text-green-400'
+                      : 'text-gray-600 dark:text-gray-300'
+                  }
+                >
                   {item.label}
                 </span>
               </Link>

src/components/MobileHeader.tsx

@@ -1,8 +1,12 @@
+'use client';
+
 import Link from 'next/link';
 
+import { ThemeToggle } from './ThemeToggle';
+
 const MobileHeader = () => {
   return (
-    <header className='md:hidden w-full bg-white/70 backdrop-blur-xl border-b border-gray-200/50 shadow-sm'>
+    <header className='md:hidden relative w-full bg-white/70 backdrop-blur-xl border-b border-gray-200/50 shadow-sm dark:bg-gray-900/70 dark:border-gray-700/50'>
       <div className='h-12 flex items-center justify-center'>
         <Link
           href='/'
@@ -11,6 +15,9 @@ const MobileHeader = () => {
           MoonTV
         </Link>
       </div>
+      <div className='absolute top-1/2 right-4 -translate-y-1/2'>
+        <ThemeToggle />
+      </div>
     </header>
   );
 };

src/components/PageLayout.tsx

@@ -2,6 +2,7 @@ import MobileBottomNav from './MobileBottomNav';
 import MobileHeader from './MobileHeader';
 import { useSidebar } from './Sidebar';
 import Sidebar from './Sidebar';
+import { ThemeToggle } from './ThemeToggle';
 
 interface PageLayoutProps {
   children: React.ReactNode;
@@ -17,10 +18,13 @@ const PageLayout = ({ children, activePath = '/' }: PageLayoutProps) => {
       <div className='hidden md:grid md:grid-cols-[auto_1fr] w-full'>
         <Sidebar activePath={activePath} />
         <div
-          className={`min-w-0 transition-all duration-300 ${
+          className={`relative min-w-0 transition-all duration-300 ${
             isCollapsed ? 'col-start-2' : 'col-start-2'
           }`}
         >
+          <div className='absolute top-2 right-4 z-20 hidden md:block'>
+            <ThemeToggle />
+          </div>
           {children}
         </div>
       </div>

src/components/ScrollableRow.tsx

@@ -126,9 +126,9 @@ export default function ScrollableRow({
           >
             <button
               onClick={handleScrollLeftClick}
-              className='w-12 h-12 bg-white/95 rounded-full shadow-lg flex items-center justify-center hover:bg-white border border-gray-200 transition-transform hover:scale-105'
+              className='w-12 h-12 bg-white/95 rounded-full shadow-lg flex items-center justify-center hover:bg-white border border-gray-200 transition-transform hover:scale-105 dark:bg-gray-800/90 dark:hover:bg-gray-700 dark:border-gray-600'
             >
-              <ChevronLeft className='w-6 h-6 text-gray-600' />
+              <ChevronLeft className='w-6 h-6 text-gray-600 dark:text-gray-300' />
             </button>
           </div>
         </div>
@@ -153,9 +153,9 @@ export default function ScrollableRow({
           >
             <button
               onClick={handleScrollRightClick}
-              className='w-12 h-12 bg-white/95 rounded-full shadow-lg flex items-center justify-center hover:bg-white border border-gray-200 transition-transform hover:scale-105'
+              className='w-12 h-12 bg-white/95 rounded-full shadow-lg flex items-center justify-center hover:bg-white border border-gray-200 transition-transform hover:scale-105 dark:bg-gray-800/90 dark:hover:bg-gray-700 dark:border-gray-600'
             >
-              <ChevronRight className='w-6 h-6 text-gray-600' />
+              <ChevronRight className='w-6 h-6 text-gray-600 dark:text-gray-300' />
             </button>
           </div>
         </div>

src/components/Sidebar.tsx

@@ -164,11 +164,10 @@ const Sidebar = ({ onToggle, activePath = '/' }: SidebarProps) => {
       <div className='hidden md:flex'>
         <aside
           data-sidebar
-          className={`fixed top-0 left-0 h-screen bg-white/40 backdrop-blur-xl transition-all duration-300 border-r border-gray-200/50 z-10 shadow-lg ${
+          className={`fixed top-0 left-0 h-screen bg-white/40 backdrop-blur-xl transition-all duration-300 border-r border-gray-200/50 z-10 shadow-lg dark:bg-gray-900/70 dark:border-gray-700/50 ${
             isCollapsed ? 'w-16' : 'w-64'
           }`}
           style={{
-            backgroundColor: 'rgba(255, 255, 255, 0.3)',
             backdropFilter: 'blur(20px)',
             WebkitBackdropFilter: 'blur(20px)',
           }}
@@ -187,7 +186,7 @@ const Sidebar = ({ onToggle, activePath = '/' }: SidebarProps) => {
               </div>
               <button
                 onClick={handleToggle}
-                className={`absolute top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-lg text-gray-500 hover:text-gray-700 hover:bg-gray-100/50 transition-colors duration-200 z-10 ${
+                className={`absolute top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-lg text-gray-500 hover:text-gray-700 hover:bg-gray-100/50 transition-colors duration-200 z-10 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-700/50 ${
                   isCollapsed ? 'left-1/2 -translate-x-1/2' : 'right-2'
                 }`}
               >
@@ -201,12 +200,12 @@ const Sidebar = ({ onToggle, activePath = '/' }: SidebarProps) => {
                 href='/'
                 onClick={() => setActive('/')}
                 data-active={active === '/'}
-                className={`group flex items-center rounded-lg px-2 py-2 pl-4 text-gray-700 hover:bg-gray-100/30 hover:text-green-600 data-[active=true]:bg-green-500/20 data-[active=true]:text-green-700 font-medium transition-colors duration-200 min-h-[40px] ${
+                className={`group flex items-center rounded-lg px-2 py-2 pl-4 text-gray-700 hover:bg-gray-100/30 hover:text-green-600 data-[active=true]:bg-green-500/20 data-[active=true]:text-green-700 font-medium transition-colors duration-200 min-h-[40px] dark:text-gray-300 dark:hover:text-green-400 dark:data-[active=true]:bg-green-500/10 dark:data-[active=true]:text-green-400 ${
                   isCollapsed ? 'w-full max-w-none mx-0' : 'mx-0'
                 } gap-3 justify-start`}
               >
                 <div className='w-4 h-4 flex items-center justify-center'>
-                  <Home className='h-4 w-4 text-gray-500 group-hover:text-green-600 data-[active=true]:text-green-700' />
+                  <Home className='h-4 w-4 text-gray-500 group-hover:text-green-600 data-[active=true]:text-green-700 dark:text-gray-400 dark:group-hover:text-green-400 dark:data-[active=true]:text-green-400' />
                 </div>
                 {!isCollapsed && (
                   <span className='whitespace-nowrap transition-opacity duration-200 opacity-100'>
@@ -222,12 +221,12 @@ const Sidebar = ({ onToggle, activePath = '/' }: SidebarProps) => {
                   setActive('/search');
                 }}
                 data-active={active === '/search'}
-                className={`group flex items-center rounded-lg px-2 py-2 pl-4 text-gray-700 hover:bg-gray-100/30 hover:text-green-600 data-[active=true]:bg-green-500/20 data-[active=true]:text-green-700 font-medium transition-colors duration-200 min-h-[40px] ${
+                className={`group flex items-center rounded-lg px-2 py-2 pl-4 text-gray-700 hover:bg-gray-100/30 hover:text-green-600 data-[active=true]:bg-green-500/20 data-[active=true]:text-green-700 font-medium transition-colors duration-200 min-h-[40px] dark:text-gray-300 dark:hover:text-green-400 dark:data-[active=true]:bg-green-500/10 dark:data-[active=true]:text-green-400 ${
                   isCollapsed ? 'w-full max-w-none mx-0' : 'mx-0'
                 } gap-3 justify-start`}
               >
                 <div className='w-4 h-4 flex items-center justify-center'>
-                  <Search className='h-4 w-4 text-gray-500 group-hover:text-green-600 data-[active=true]:text-green-700' />
+                  <Search className='h-4 w-4 text-gray-500 group-hover:text-green-600 data-[active=true]:text-green-700 dark:text-gray-400 dark:group-hover:text-green-400 dark:data-[active=true]:text-green-400' />
                 </div>
                 {!isCollapsed && (
                   <span className='whitespace-nowrap transition-opacity duration-200 opacity-100'>
@@ -253,20 +252,21 @@ const Sidebar = ({ onToggle, activePath = '/' }: SidebarProps) => {
                     decodedActive === decodedItemHref ||
                     (decodedActive.startsWith('/douban') &&
                       decodedActive.includes(`type=${typeMatch}`) &&
+                      tagMatch &&
                       decodedActive.includes(`tag=${tagMatch}`));
-
+                  const Icon = item.icon;
                   return (
                     <Link
-                      key={item.href}
+                      key={item.label}
                       href={item.href}
                       onClick={() => setActive(item.href)}
                       data-active={isActive}
-                      className={`group flex items-center rounded-lg px-2 py-2 pl-4 text-gray-700 hover:bg-gray-100/30 hover:text-green-600 data-[active=true]:bg-green-500/20 data-[active=true]:text-green-700 transition-colors duration-200 min-h-[40px] ${
+                      className={`group flex items-center rounded-lg px-2 py-2 pl-4 text-sm text-gray-700 hover:bg-gray-100/30 hover:text-green-600 data-[active=true]:bg-green-500/20 data-[active=true]:text-green-700 transition-colors duration-200 min-h-[40px] dark:text-gray-300 dark:hover:text-green-400 dark:data-[active=true]:bg-green-500/10 dark:data-[active=true]:text-green-400 ${
                         isCollapsed ? 'w-full max-w-none mx-0' : 'mx-0'
                       } gap-3 justify-start`}
                     >
                       <div className='w-4 h-4 flex items-center justify-center'>
-                        <item.icon className='h-4 w-4 text-gray-500 group-hover:text-green-600 group-data-[active=true]:text-green-700' />
+                        <Icon className='h-4 w-4 text-gray-500 group-hover:text-green-600 data-[active=true]:text-green-700 dark:text-gray-400 dark:group-hover:text-green-400 dark:data-[active=true]:text-green-400' />
                       </div>
                       {!isCollapsed && (
                         <span className='whitespace-nowrap transition-opacity duration-200 opacity-100'>

src/components/ThemeProvider.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+import type { ThemeProviderProps } from 'next-themes/dist/types';
+import * as React from 'react';
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

src/components/ThemeToggle.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+
+export function ThemeToggle() {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    // 渲染一个占位符以避免布局偏移
+    return <div className='w-10 h-10' />;
+  }
+
+  const toggleTheme = () => {
+    // 检查浏览器是否支持 View Transitions API
+    if (!document.startViewTransition) {
+      setTheme(theme === 'dark' ? 'light' : 'dark');
+      return;
+    }
+
+    document.startViewTransition(() => {
+      setTheme(theme === 'dark' ? 'light' : 'dark');
+    });
+  };
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className='w-10 h-10 p-2 rounded-full flex items-center justify-center text-gray-600 hover:bg-gray-200/50 dark:text-gray-300 dark:hover:bg-gray-700/50 transition-colors'
+      aria-label='Toggle theme'
+    >
+      {theme === 'dark' ? (
+        <Sun className='w-full h-full' />
+      ) : (
+        <Moon className='w-full h-full' />
+      )}
+    </button>
+  );
+}

src/components/VideoCard.tsx

@@ -227,7 +227,7 @@ export default function VideoCard({
 
           {/* 播放进度条 */}
           {progress !== undefined && (
-            <div className='absolute bottom-0 left-0 right-0 h-1 bg-gray-300'>
+            <div className='absolute bottom-0 left-0 right-0 h-1 bg-gray-300 dark:bg-gray-600'>
               <div
                 className='h-full bg-blue-500 transition-all duration-300'
                 style={{ width: `${progress}%` }}
@@ -246,14 +246,14 @@ export default function VideoCard({
         </div>
 
         {/* 信息层 */}
-        <div className='absolute top-[calc(100%+0.2rem)] left-0 right-0'>
+        <div className='absolute top-[calc(100%+0.5rem)] left-0 right-0'>
           <div className='flex flex-col items-center justify-center'>
-            <span className='text-gray-900 font-semibold truncate w-full text-center text-xs sm:text-sm'>
+            <span className='text-gray-900 font-semibold truncate w-full text-center text-xs sm:text-sm dark:text-gray-200'>
               {title}
             </span>
             {source && (
-              <span className='text-gray-500 text-[0.5rem] sm:text-xs w-full text-center mt-1'>
-                <span className='inline-block border border-gray-500/60 rounded px-2 py-[1px]'>
+              <span className='text-gray-500 text-[0.5rem] sm:text-xs w-full text-center mt-1 dark:text-gray-400'>
+                <span className='inline-block border border-gray-500/60 rounded px-2 py-[1px] dark:border-gray-400/60'>
                   {source_name}
                 </span>
               </span>