添加项目文件。

wwwroot/js/site.js

@@ -0,0 +1,4 @@
+// Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
+// for details on configuring this project to bundle and minify static web assets.
+
+// Write your JavaScript code.

wwwroot/js/theme-switcher.js

@@ -0,0 +1,69 @@
+/**
+ * 主题切换逻辑
+ * 依赖: Bootstrap 5.3+ (用于 data-bs-theme 和 Tooltip)
+ */
+document.addEventListener('DOMContentLoaded', function () {
+    const toggleBtn = document.getElementById('theme-toggle-btn');
+    if (!toggleBtn) return;
+
+    const htmlElement = document.documentElement;
+
+    // 初始化 Bootstrap Tooltip
+    const tooltip = new bootstrap.Tooltip(toggleBtn);
+
+    /**
+     * 更新按钮的图标和提示文字
+     * @param {string} theme - 'light' or 'dark'
+     */
+    function updateButtonUI(theme) {
+        const iconContainer = toggleBtn.querySelector('i');
+        if (!iconContainer) return;
+
+        if (theme === 'dark') {
+            // 当前是深色，按钮显示“太阳”，提示“切换到浅色”
+            iconContainer.className = 'bi bi-sun-fill';
+            toggleBtn.setAttribute('data-bs-original-title', '切换到浅色模式');
+        } else {
+            // 当前是浅色，按钮显示“月亮”，提示“切换到深色”
+            iconContainer.className = 'bi bi-moon-stars-fill';
+            toggleBtn.setAttribute('data-bs-original-title', '切换到深色模式');
+        }
+
+        // 刷新 Tooltip 显示
+        tooltip.setContent({ '.tooltip-inner': toggleBtn.getAttribute('data-bs-original-title') });
+    }
+
+    // 初始更新 UI (确保图标与后端传来的 ViewBag.CurrentTheme 一致)
+    // 注意：data-bs-theme 已经在 HTML 根节点由 Razor 设置
+    const initialTheme = htmlElement.getAttribute('data-bs-theme') || 'light';
+    updateButtonUI(initialTheme);
+
+    // 点击事件处理
+    toggleBtn.addEventListener('click', function () {
+        const currentTheme = htmlElement.getAttribute('data-bs-theme');
+        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+
+        // 1. 立即更新 UI (无刷新)
+        htmlElement.setAttribute('data-bs-theme', newTheme);
+        updateButtonUI(newTheme);
+        tooltip.show(); // 可选：点击时短暂显示提示
+        setTimeout(() => tooltip.hide(), 1000);
+
+        // 2. 异步持久化到后端
+        fetch('/Home/SetTheme', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                // 如果需要 AntiForgery Token，请确保页面中有表单或手动注入
+                // 'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]')?.value
+            },
+            body: JSON.stringify({ theme: newTheme })
+        })
+            .then(response => {
+                if (!response.ok) {
+                    console.error('Failed to save theme preference');
+                }
+            })
+            .catch(error => console.error('Error:', error));
+    });
+});