release: v2.1.9-beta9 (#360)

Theme persistence fix and version bump

AGENTS.md

@@ -1,9 +1,9 @@
 # PROJECT KNOWLEDGE BASE
 
 **Generated:** Fri Mar 20 2026
-**Commit:** f45f960
+**Commit:** c137bdc
 **Branch:** main
-**Tag:** 2.1.9-beta8
+**Tag:** 2.1.9-beta9
 
 ## OVERVIEW
 FLVX (formerly Flux Panel) is a traffic forwarding management system built on a forked GOST v3 stack. It ships as a Go-based admin API (SQLite/PostgreSQL) + Vite/React UI + Go forwarding agent, with optional mobile WebView wrappers.

vite-frontend/index.html

@@ -85,11 +85,22 @@
           shortcutIconLink.removeAttribute('type');
         }
 
-        // 立即检测系统主题并应用
-        const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+        // 立即检测主题并应用（优先读取 localStorage 中的用户偏好）
+        var savedMode = '';
+        try { savedMode = localStorage.getItem('flvx:theme') || ''; } catch (_) {}
+
+        var useDark;
+        if (savedMode === 'dark') {
+          useDark = true;
+        } else if (savedMode === 'light') {
+          useDark = false;
+        } else {
+          // "system" 或无保存：跟随系统
+          useDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+        }
         
         // 立即设置主题类，避免闪烁
-        if (isDarkMode) {
+        if (useDark) {
           document.documentElement.classList.add('dark');
           document.documentElement.style.colorScheme = 'dark';
         } else {
@@ -97,9 +108,13 @@
           document.documentElement.style.colorScheme = 'light';
         }
         
-        // 监听系统主题变化
-        if (window.matchMedia) {
+        // 仅在"跟随系统"模式下监听系统主题变化
+        if ((!savedMode || savedMode === 'system') && window.matchMedia) {
           window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
+            // 运行时可能已由 React 接管，这里仅做 fallback
+            var currentMode = '';
+            try { currentMode = localStorage.getItem('flvx:theme') || ''; } catch (_) {}
+            if (currentMode && currentMode !== 'system') return; // 用户已手动选择，不干预
             if (e.matches) {
               document.documentElement.classList.add('dark');
               document.documentElement.style.colorScheme = 'dark';

vite-frontend/src/components/theme-provider.tsx

@@ -12,6 +12,12 @@ import React from "react";
 import "@/themes/loader";
 
 import { ThemeProvider as ThemeContextProvider } from "@/themes/context";
+import { initThemeSystem } from "@/themes/registry";
+
+// Restore saved theme SYNCHRONOUSLY at module load time — before first render.
+// This ensures the CSS tokens are injected before any component renders,
+// preventing a flash of the default theme.
+initThemeSystem();
 
 interface ThemeProviderProps {
   children: React.ReactNode;

vite-frontend/src/pages/config.tsx

@@ -27,6 +27,7 @@ import {
   type AnnouncementData,
 } from "@/api";
 import { BackIcon, SettingsIcon } from "@/components/icons";
+import { ThemeSettings } from "@/components/theme-settings";
 import { isAdmin } from "@/utils/auth";
 import { getCachedConfigs, configCache, updateSiteConfig } from "@/config/site";
 import {
@@ -979,6 +980,11 @@ export default function ConfigPage() {
         </CardBody>
       </Card>
 
+      {/* 主题设置 */}
+      <div className="mt-6">
+        <ThemeSettings />
+      </div>
+
       {hasChanges && (
         <Card className="mt-4 bg-warning-50 dark:bg-warning-900/20 border-warning-200 dark:border-warning-800 shadow-sm overflow-hidden">
           <div className="h-10 flex items-center justify-center gap-2 text-warning-700 dark:text-warning-300">

vite-frontend/src/pages/settings.tsx

@@ -10,7 +10,6 @@ import { Switch } from "@/shadcn-bridge/heroui/switch";
 import { reinitializeBaseURL } from "@/api/network";
 import { getConfigByName, updateConfig } from "@/api";
 import { BackIcon } from "@/components/icons";
-import { ThemeSettings } from "@/components/theme-settings";
 import {
   type UpdateReleaseChannel,
   getUpdateReleaseChannel,
@@ -182,7 +181,6 @@ export const SettingsPage = () => {
       {/* 内容区域 */}
       <div className="max-w-4xl mx-auto px-4 py-6">
         <div className="space-y-6">
-          <ThemeSettings />
           <Card className="border border-gray-200 dark:border-gray-700">
             <CardBody className="p-6">
               <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-4">

vite-frontend/src/themes/context.tsx

@@ -29,7 +29,6 @@ import {
   getSavedMode,
   saveMode,
   getEffectiveMode,
-  initThemeSystem,
   registerTheme,
   unregisterTheme,
   type ThemeMode,
@@ -95,11 +94,6 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
   // Re-render whenever register changes
   useSyncExternalStore(originalSubscribe, getSnapshot);
 
-  // Initialise on mount
-  useEffect(() => {
-    initThemeSystem();
-  }, []);
-
   // Listen for system mode changes
   useEffect(() => {
     const mq = window.matchMedia("(prefers-color-scheme: dark)");