feat: Add Dark Theme Support

src/components/novel-card.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Copy, Zap } from 'lucide-react';
+import { Copy, ArrowRight } from 'lucide-react';
 import { toast } from 'sonner';
 
 import { Button } from '@/components/ui/button';
@@ -60,7 +60,7 @@ export function NovelCard({ novel, onParse }: NovelCardProps) {
                 className="flex-1 h-8 px-2"
                 onClick={() => onParse(novel.path)}
               >
-                <Zap className="w-3.5 h-3.5" />
+                <ArrowRight className="w-3.5 h-3.5" />
               </Button>
             </TooltipTrigger>
             <TooltipContent>

src/components/parse-novel.tsx

@@ -4,7 +4,7 @@ import {
   ChevronLeft,
   ChevronRight,
   Copy,
-  Zap,
+  ArrowRight,
   Download,
 } from 'lucide-react';
 import { toast } from 'sonner';
@@ -506,11 +506,11 @@ export default function ParseNovelSection({
                                       handleParseChapter(chapter.path)
                                     }
                                   >
-                                    <Zap className="w-3.5 h-3.5" />
+                                    <ArrowRight className="w-3.5 h-3.5" />
                                   </Button>
                                 </TooltipTrigger>
                                 <TooltipContent>
-                                  <p>Parse chapter</p>
+                                  <p>Open in Parse Chapter tab</p>
                                 </TooltipContent>
                               </Tooltip>
                             </div>

src/components/plugin-header.tsx

@@ -1,14 +1,25 @@
 import React from 'react';
+import { Moon, Sun } from 'lucide-react';
 
 import { Plugin } from '@/types/plugin';
+import { Button } from '@/components/ui/button';
+import { useTheme } from '@/hooks/useTheme';
 
 type PluginHeaderProps = {
   selectedPlugin?: Plugin.PluginBase;
 };
 
 export default function PluginHeader({ selectedPlugin }: PluginHeaderProps) {
+  const { theme, setTheme } = useTheme();
+
+  const toggleTheme = () => {
+    setTheme(theme === 'dark' ? 'light' : 'dark');
+  };
+
+  const isDark = theme === 'dark';
+
   return (
-    <header className="border-b">
+    <header className="border-b border-border">
       <div className="px-8 py-4 flex items-center justify-between">
         <div className="flex items-center gap-3">
           <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-sm bg-[var(--color-accent-soft)] text-xl font-semibold text-[var(--color-accent-strong)] transition-colors">
@@ -23,6 +34,16 @@ export default function PluginHeader({ selectedPlugin }: PluginHeaderProps) {
             </p>
           </div>
         </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={toggleTheme}
+          className="h-9 w-9"
+          aria-label="Toggle theme"
+          title={`Theme: ${theme}`}
+        >
+          {isDark ? <Moon className="h-4 w-4" /> : <Sun className="h-4 w-4" />}
+        </Button>
       </div>
     </header>
   );

src/components/popular-novels.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Filter, Zap } from 'lucide-react';
+import { Filter, BookOpen } from 'lucide-react';
 
 import { FiltersSheet } from '@/components/filters/filters-sheet';
 import { NovelCard } from '@/components/novel-card';
@@ -182,7 +182,7 @@ export default function PopularNovelsSection({
         ) : novels.length === 0 ? (
           <div className="flex flex-col items-center justify-center py-16 px-4 text-center">
             <div className="rounded-full bg-muted p-4 mb-4">
-              <Zap className="w-8 h-8 text-muted-foreground" />
+              <BookOpen className="w-8 h-8 text-muted-foreground" />
             </div>
             <h3 className="text-lg font-semibold text-foreground mb-2">
               {plugin ? 'No novels to display' : 'No plugin selected'}