fix: 修复暗黑主题切换时的页面闪烁问题

问题原因: - 主题脚本在 body 底部，HTML 加载时先用默认亮色显示 - 造成 FOUC (Flash of Unstyled Content) 修复方案: - 在 head 最开始就立即应用主题 (inline script) - 阻塞式初始化，防止页面闪烁 Author: xiaohei
2026-03-15 08:26:48 +08:00
parent b1f430aa3b
commit 5a1f539ea4
1 changed files with 11 additions and 1 deletions
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -1,11 +1,21 @@
 {# 基础模板 #}
 <!DOCTYPE html>
-<html lang="zh-CN" data-theme="light">
+<html lang="zh-CN">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}智队中枢{% endblock %}</title>
    
+    {# 立即应用主题 - 防止闪烁 #}
+    <script>
+        // 立即应用保存的主题，阻塞渲染防止闪烁
+        (function() {
+            const theme = localStorage.getItem('theme') || 'light';
+            document.documentElement.classList.add(theme === 'dark' ? 'dark' : '');
+            document.documentElement.setAttribute('data-theme', theme);
+        })();
+    </script>
+    
    {# Tailwind CSS #}
    <script src="https://cdn.tailwindcss.com"></script>
    <script>