diff --git a/.github/workflows/friend_circle_lite.yml b/.github/workflows/friend_circle_lite.yml
index 82da3e2..3aa083d 100644
--- a/.github/workflows/friend_circle_lite.yml
+++ b/.github/workflows/friend_circle_lite.yml
@@ -64,7 +64,7 @@ jobs:
     - name: Commit changes
       run: |
         mkdir pages
-        cp -r main ./static/index.html ./static/readme.md ./static/favicon.ico ./static/bg-light.webp all.json errors.json pages/
+        cp -r main ./static/index.html ./static/readme.md ./static/favicon.ico ./static/bg-light.webp ./static/bg-dark.webp all.json errors.json pages/
         cd pages
         git init
         git add .
diff --git a/static/bg-dark.webp b/static/bg-dark.webp
new file mode 100644
index 0000000..cbe5865
Binary files /dev/null and b/static/bg-dark.webp differ
diff --git a/static/index.html b/static/index.html
index c071988..c650004 100644
--- a/static/index.html
+++ b/static/index.html
@@ -27,6 +27,24 @@
         overflow-x: hidden;
         height: fit-content;
     }
+    #theme-toggle {
+        z-index: 1000;
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        width: 90px;
+        height: 30px;
+        background-color: #007BFF;
+        color: white;
+        border: none;
+        border-radius: 20px;
+        font-size: 16px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    }
     .container {
         background: rgba(255, 255, 255, 0.8);
         display: flex;
@@ -122,6 +140,35 @@
             opacity: 1;
         }
     }
+
+    /* 暗色模式样式 */
+[data-theme="dark"] body {
+    background-image: url('./bg-dark.webp');
+    color: #ffffff;
+}
+
+[data-theme="dark"] .container {
+    background: rgba(30, 30, 30, 0.8);
+}
+
+[data-theme="dark"] p {
+    color: #cccccc;
+}
+
+[data-theme="dark"] .button {
+    background-color: #333333;
+    border: 2px solid #007BFF;
+    color: #007BFF;
+}
+
+[data-theme="dark"] .button:hover {
+    background-color: #007BFF;
+    color: white;
+}
+
+[data-theme="dark"] .scroll-down-icon {
+    color: #007BFF;
+}
 </style>
 
 <body>
@@ -137,6 +184,7 @@
     <div class="root-container">
         <div id="friend-circle-lite-root"></div>
     </div>
+    <button id="theme-toggle">暗色模式</button>
 <script>
     if (typeof UserConfig === 'undefined') {
         var UserConfig = {
@@ -156,6 +204,14 @@
         event.preventDefault();
         targetElement.scrollIntoView({ behavior: 'smooth' });
     });
+
+    const button = document.getElementById('theme-toggle');
+    button.addEventListener('click', () => {
+        const currentTheme = document.documentElement.getAttribute('data-theme');
+        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+        document.documentElement.setAttribute('data-theme', newTheme);
+        button.textContent = newTheme === 'light' ? '暗色模式' : '亮色模式';
+    });
 </script>
 <link rel="stylesheet" href="./main/fclite.css">
 <script src="./main/fclite.js"></script>
