diff --git a/forum/templates/base.html b/forum/templates/base.html
index af0c787..dbce856 100644
--- a/forum/templates/base.html
+++ b/forum/templates/base.html
@@ -8,8 +8,12 @@
     
 	<meta name="color-scheme" content="light dark">
     <script>
-        const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        document.documentElement.setAttribute('data-bs-theme', isDark ? 'dark' : 'light');
+        function getTheme() {
+            const saved = localStorage.getItem('theme');
+            if (saved === 'light' || saved === 'dark') return saved;
+            return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+        document.documentElement.setAttribute('data-bs-theme', getTheme());
     </script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.8.1/github-markdown.css" integrity="sha512-Hasfm7Iv5AG2/v5DSRXetpC33VjyPBXn5giooMag2EgSbiJ2Xp4GGvYGKSvc68SiJIflF/WrbDFdNmtlZHE5HA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
@@ -33,10 +37,8 @@
         }
 
 
-			@media (prefers-color-scheme: dark) {
-				body {
-					background-color: #0d1117;
-				}
+			[data-bs-theme="dark"] body {
+				background-color: #0d1117;
 			}
     </style>
     {% block extra_head %}{% endblock %}
@@ -72,24 +74,29 @@
                 </ul>
             </div>
 
-            {% if user.is_authenticated %}
-            <div class="nav-item dropdown ms-auto">
-                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                    <i class="bi bi-person-circle"></i> <span>{{ user.username }}</span>
+            <div class="d-flex align-items-center ms-auto">
+                <a class="nav-link px-2" href="#" id="theme-toggle" title="切换主题">
+                    <i class="bi" id="theme-icon"></i>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-end">
-                    <li>
-                        <a class="dropdown-item" href="{% url 'settings' %}">账户设置</a>
-                    </li>
-                    <li>
-                        <form action="{% url 'logout' %}" method="post" class="w-100">
-                            {% csrf_token %}
-                            <button type="submit" class="dropdown-item">登出</button>
-                        </form>
-                    </li>
-                </ul>
+                {% if user.is_authenticated %}
+                <div class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                        <i class="bi bi-person-circle"></i> <span>{{ user.username }}</span>
+                    </a>
+                    <ul class="dropdown-menu dropdown-menu-end">
+                        <li>
+                            <a class="dropdown-item" href="{% url 'settings' %}">账户设置</a>
+                        </li>
+                        <li>
+                            <form action="{% url 'logout' %}" method="post" class="w-100">
+                                {% csrf_token %}
+                                <button type="submit" class="dropdown-item">登出</button>
+                            </form>
+                        </li>
+                    </ul>
+                </div>
+                {% endif %}
             </div>
-            {% endif %}
         </div>
     </nav>
 
@@ -107,13 +114,28 @@
 
 
     <script>
-        const themeQuery = window.matchMedia('(prefers-color-scheme: dark)');
-        const setTheme = () => document.documentElement.setAttribute(
-            'data-bs-theme',
-            themeQuery.matches ? 'dark' : 'light'
-        );
+        function updateThemeIcon() {
+            const icon = document.getElementById('theme-icon');
+            const isDark = document.documentElement.getAttribute('data-bs-theme') === 'dark';
+            icon.className = 'bi ' + (isDark ? 'bi-sun' : 'bi-moon-stars');
+        }
+        updateThemeIcon();
+
+        document.getElementById('theme-toggle').addEventListener('click', (e) => {
+            e.preventDefault();
+            const isDark = document.documentElement.getAttribute('data-bs-theme') === 'dark';
+            const next = isDark ? 'light' : 'dark';
+            localStorage.setItem('theme', next);
+            document.documentElement.setAttribute('data-bs-theme', next);
+            updateThemeIcon();
+        });
 
-        themeQuery.addEventListener('change', setTheme);
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+            if (!localStorage.getItem('theme')) {
+                document.documentElement.setAttribute('data-bs-theme', getTheme());
+                updateThemeIcon();
+            }
+        });
     </script>
 </body>
 </html>