diff --git a/src/options/index.tsx b/src/options/index.tsx
index 3cf2af2f..17e73709 100644
--- a/src/options/index.tsx
+++ b/src/options/index.tsx
@@ -3,11 +3,13 @@ import "~/lib/style.css"
 import { Toaster } from "react-hot-toast"
 import { MemoryRouter } from "react-router-dom"
 
+import { useDark } from "~/lib/hooks/use-dark"
 import { Routing } from "~/options/routes"
 
 import Siderbar from "./Siderbar"
 
 function Options() {
+  useDark()
   return (
     <div className="max-w-screen-lg mx-auto text-base py-10 px-4">
       <Toaster
diff --git a/src/tabs/preview.tsx b/src/tabs/preview.tsx
index 124b311d..0b774d35 100644
--- a/src/tabs/preview.tsx
+++ b/src/tabs/preview.tsx
@@ -14,12 +14,15 @@ import {
   CardHeader,
   CardTitle,
 } from "~/lib/components/Card"
+import { useDark } from "~/lib/hooks/use-dark"
 import { fetchRSSContent } from "~/lib/utils"
 import RSSItem from "~/popup/RSSItem"
 
 const parser = new Parser()
 
 function PreviewPage() {
+  useDark()
+
   const url = new URLSearchParams(window.location.search).get("url")
 
   const [parsed, setParsed] = useState<