From fb19872ab582a44b67dde22ca2144f402db3a75d Mon Sep 17 00:00:00 2001
From: xiokuai <liwu_python@outlook.com>
Date: Fri, 20 Feb 2026 22:15:48 +0800
Subject: [PATCH 1/2] feat: add theme toggle to settings page

Allow users to switch between light/dark/auto themes via localStorage,
instead of relying solely on OS prefers-color-scheme.
---
 forum/templates/base.html                | 26 ++++++++++++------------
 forum/templates/forum/user_settings.html | 25 +++++++++++++++++++++++
 2 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/forum/templates/base.html b/forum/templates/base.html
index af0c787..190fef9 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 %}
@@ -107,13 +109,11 @@
 
 
     <script>
-        const themeQuery = window.matchMedia('(prefers-color-scheme: dark)');
-        const setTheme = () => document.documentElement.setAttribute(
-            'data-bs-theme',
-            themeQuery.matches ? 'dark' : 'light'
-        );
-
-        themeQuery.addEventListener('change', setTheme);
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+            if (!localStorage.getItem('theme')) {
+                document.documentElement.setAttribute('data-bs-theme', getTheme());
+            }
+        });
     </script>
 </body>
 </html>
diff --git a/forum/templates/forum/user_settings.html b/forum/templates/forum/user_settings.html
index 3f4c9fb..0d448f9 100644
--- a/forum/templates/forum/user_settings.html
+++ b/forum/templates/forum/user_settings.html
@@ -10,6 +10,21 @@
 
 {% block content %}
 <div class="container mt-5">
+    <div class="mb-4">
+        <h6 class="fw-bold mb-2">
+            <i class="bi bi-palette"></i> 主题设置
+        </h6>
+        <p class="text-muted small mb-3">选择论坛的显示主题</p>
+        <div class="btn-group" role="group">
+            <input type="radio" class="btn-check" name="theme" id="theme-auto" value="auto">
+            <label class="btn btn-outline-secondary" for="theme-auto"><i class="bi bi-circle-half"></i> 跟随系统</label>
+            <input type="radio" class="btn-check" name="theme" id="theme-light" value="light">
+            <label class="btn btn-outline-secondary" for="theme-light"><i class="bi bi-sun"></i> 浅色</label>
+            <input type="radio" class="btn-check" name="theme" id="theme-dark" value="dark">
+            <label class="btn btn-outline-secondary" for="theme-dark"><i class="bi bi-moon-stars"></i> 深色</label>
+        </div>
+    </div>
+
     <div class="mb-4">
         <h6 class="fw-bold mb-2">
             <i class="bi bi-bell"></i> Web Push 通知
@@ -79,6 +94,16 @@ <h5 class="modal-title text-danger">⚠ 删除账户（不可恢复）</h5>
 </div>
 
 <script>
+const saved = localStorage.getItem('theme');
+document.getElementById('theme-' + (saved || 'auto')).checked = true;
+document.querySelectorAll('input[name="theme"]').forEach(r => {
+    r.addEventListener('change', () => {
+        if (r.value === 'auto') localStorage.removeItem('theme');
+        else localStorage.setItem('theme', r.value);
+        document.documentElement.setAttribute('data-bs-theme', getTheme());
+    });
+});
+
 const correctUsername = "{{ request.user.username }}";
 const correctText = "我要删除账户";
 

From 6bf3218ee1e9da99fdf3c908d191dd8c4da51034 Mon Sep 17 00:00:00 2001
From: xiokuai <liwu_python@outlook.com>
Date: Mon, 23 Feb 2026 12:15:19 +0800
Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20=E5=B0=86=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E4=BB=8E=E8=AE=BE=E7=BD=AE=E9=A1=B5=E7=A7=BB?=
 =?UTF-8?q?=E8=87=B3=E5=AF=BC=E8=88=AA=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

根据 review 反馈，主题切换不应在需要登录的设置页面，
改为导航栏右侧图标按钮，未登录用户也可使用。
---
 forum/templates/base.html                | 54 +++++++++++++++++-------
 forum/templates/forum/user_settings.html | 25 -----------
 2 files changed, 38 insertions(+), 41 deletions(-)

diff --git a/forum/templates/base.html b/forum/templates/base.html
index 190fef9..dbce856 100644
--- a/forum/templates/base.html
+++ b/forum/templates/base.html
@@ -74,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>
 
@@ -109,9 +114,26 @@
 
 
     <script>
+        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();
+        });
+
         window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
             if (!localStorage.getItem('theme')) {
                 document.documentElement.setAttribute('data-bs-theme', getTheme());
+                updateThemeIcon();
             }
         });
     </script>
diff --git a/forum/templates/forum/user_settings.html b/forum/templates/forum/user_settings.html
index 0d448f9..3f4c9fb 100644
--- a/forum/templates/forum/user_settings.html
+++ b/forum/templates/forum/user_settings.html
@@ -10,21 +10,6 @@
 
 {% block content %}
 <div class="container mt-5">
-    <div class="mb-4">
-        <h6 class="fw-bold mb-2">
-            <i class="bi bi-palette"></i> 主题设置
-        </h6>
-        <p class="text-muted small mb-3">选择论坛的显示主题</p>
-        <div class="btn-group" role="group">
-            <input type="radio" class="btn-check" name="theme" id="theme-auto" value="auto">
-            <label class="btn btn-outline-secondary" for="theme-auto"><i class="bi bi-circle-half"></i> 跟随系统</label>
-            <input type="radio" class="btn-check" name="theme" id="theme-light" value="light">
-            <label class="btn btn-outline-secondary" for="theme-light"><i class="bi bi-sun"></i> 浅色</label>
-            <input type="radio" class="btn-check" name="theme" id="theme-dark" value="dark">
-            <label class="btn btn-outline-secondary" for="theme-dark"><i class="bi bi-moon-stars"></i> 深色</label>
-        </div>
-    </div>
-
     <div class="mb-4">
         <h6 class="fw-bold mb-2">
             <i class="bi bi-bell"></i> Web Push 通知
@@ -94,16 +79,6 @@ <h5 class="modal-title text-danger">⚠ 删除账户（不可恢复）</h5>
 </div>
 
 <script>
-const saved = localStorage.getItem('theme');
-document.getElementById('theme-' + (saved || 'auto')).checked = true;
-document.querySelectorAll('input[name="theme"]').forEach(r => {
-    r.addEventListener('change', () => {
-        if (r.value === 'auto') localStorage.removeItem('theme');
-        else localStorage.setItem('theme', r.value);
-        document.documentElement.setAttribute('data-bs-theme', getTheme());
-    });
-});
-
 const correctUsername = "{{ request.user.username }}";
 const correctText = "我要删除账户";