diff --git a/package.json b/package.json
index ff290d6..b4afdc2 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "react-dom": "^18.2.0",
     "sass": "^1.70.0",
     "tailwindcss": "^3.4.1",
+    "theme-change": "^2.5.0",
     "typescript": "^5.3.3"
   },
   "devDependencies": {
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 9ba70eb..5b447d7 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -83,9 +83,7 @@ const items: MenuItem[] = [
     </ul>
   </div>
   <div class="navbar-end">
-    <label class="swap swap-rotate px-[16px]">
-      <input type="checkbox" class="theme-controller" value="light" checked />
-
+    <label class="swap swap-rotate px-[16px]" data-toggle-theme="dark,light" data-act-class="swap-active">
       <svg
         class="swap-on fill-current w-8 h-8"
         xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/posts/Media.tsx b/src/components/posts/Media.tsx
index 02e3209..3826a9b 100644
--- a/src/components/posts/Media.tsx
+++ b/src/components/posts/Media.tsx
@@ -14,9 +14,16 @@ function Video({ url, ...rest }: { url: string, className?: string }) {
       url: url,
       setting: true,
       flip: true,
+      loop: true,
       playbackRate: true,
       aspectRatio: true,
-      subtitleOffset: true
+      subtitleOffset: true,
+      fullscreen: true,
+      fullscreenWeb: true,
+      screenshot: true,
+      autoPlayback: true,
+      airplay: true,
+      theme: "#49509e",
     });
   });
 
diff --git a/src/layouts/RootLayout.astro b/src/layouts/RootLayout.astro
index 9fa8c57..1543c74 100644
--- a/src/layouts/RootLayout.astro
+++ b/src/layouts/RootLayout.astro
@@ -16,6 +16,17 @@ const { title } = Astro.props;
     {title && (<title>山羊寒舍 | {title}</title>)}
     {!title && (<title>山羊寒舍</title>)}
 
+    <script is:inline>
+      if (localStorage.getItem("theme") === null) {
+        document.documentElement.setAttribute("data-theme", "light");
+      } else {
+        document.documentElement.setAttribute(
+          "data-theme",
+          localStorage.getItem("theme")
+        );
+      }
+    </script>
+
     <ViewTransitions />
   </head>
   <body>
@@ -53,6 +64,11 @@ const { title } = Astro.props;
       }
     </style>
 
+    <script>
+      import { themeChange } from "theme-change";
+      themeChange();
+    </script>
+
     <script
       async
       src="https://analytics.smartsheep.studio/script.js"
diff --git a/yarn.lock b/yarn.lock
index 9c5556d..0cfdefa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3813,6 +3813,11 @@ tar-stream@^3.1.5:
     fast-fifo "^1.2.0"
     streamx "^2.15.0"
 
+theme-change@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/theme-change/-/theme-change-2.5.0.tgz#d3b064af9c4cd01ab16ce0a4ecb251c827a50e68"
+  integrity sha512-B/UdsgdHAGhSKHTAQnxg/etN0RaMDpehuJmZIjLMDVJ6DGIliRHGD6pODi1CXLQAN9GV0GSyB3G6yCuK05PkPQ==
+
 thenify-all@^1.0.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
