perf: Synchronize the luna theme with lina.

src/app/elements/nav/nav.component.ts

@@ -137,11 +137,13 @@ export class ElementNavComponent implements OnInit {
         children: themes.map(theme => ({
           id: theme.name,
           click: () => {
+            (this._settingSvc.setting.basic as any).themes = theme.name;
             useTheme().switchTheme(theme.name);
             this._iframeSvc.sendMessage({
               name: 'CHANGE_MAIN_THEME',
               data: theme.name
             });
+            this._settingSvc.save();
           },
           name: this._i18n.instant(theme.label)
         }))

src/app/model.ts

@@ -289,6 +289,7 @@ export class Setting {
   basic: {
     is_async_asset_tree: boolean;
     connect_default_open_method: string;
+    themes?: string;
   };
   graphics: {
     rdp_resolution: string;
@@ -311,7 +312,8 @@ export class Setting {
     this.sqlClient = '1';
     this.basic = {
       is_async_asset_tree: false,
-      connect_default_open_method: 'new'
+      connect_default_open_method: 'new',
+      themes: 'default'
     };
     this.graphics = {
       rdp_resolution: 'Auto',

src/app/services/setting.ts

@@ -5,6 +5,7 @@ import { I18nService } from "@app/services/i18n";
 import { HttpService } from "@app/services/http";
 import { canvasWaterMark, getQueryParamFromURL } from "@app/utils/common";
 import { BehaviorSubject } from "rxjs";
+import { setThemeTypeGetter, useTheme } from "@src/sass/theme/util";
 
 @Injectable()
 export class SettingService {
@@ -106,6 +107,16 @@ export class SettingService {
     }
     await this.getSystemSetting();
     await this.getPublicSettings();
+
+    setThemeTypeGetter(() => this.setting?.basic?.themes || null);
+
+    try {
+      const theme = this.setting?.basic?.themes;
+
+      if (theme) {
+        useTheme().switchTheme(theme);
+      }
+    } catch (e) {}
     this.initialized$.next(true);
   }
 

src/sass/theme/util.ts

@@ -1,12 +1,17 @@
-import { mainTheme, themeColors } from "./main";
+import { mainTheme, themeColors } from './main';
 
 export namespace Theme {
-  export type ThemeType = "default" | "darkBlue" | "deepBlue" | "chinaRed";
+  export type ThemeType = 'default' | 'darkBlue' | 'deepBlue' | 'chinaRed';
+}
+
+let themeTypeGetter: (() => string | null) | null = null;
+
+export function setThemeTypeGetter(fn: () => string | null) {
+  themeTypeGetter = fn;
 }
 
-// 获取当前主题的主色
 function getCurrentThemeColor(): string {
-  const themeType = localStorage.getItem("themeType") || "default";
+  const themeType = (themeTypeGetter && themeTypeGetter()) || 'default';
   return themeColors[themeType] || themeColors.default;
 }
 
@@ -16,12 +21,12 @@ export function lighten(amount: number, color?: string, alphaValue?: number): st
   const actualColor = color || getCurrentThemeColor();
   const hsl = hexToHSL(actualColor);
   const hexColor = hslToHex(hsl.h, hsl.s, Math.min(100, hsl.l + amount));
-  
+
   // 如果提供了透明度参数，应用透明度
   if (alphaValue !== undefined) {
     return alpha(alphaValue, hexColor);
   }
-  
+
   return hexColor;
 }
 
@@ -31,12 +36,12 @@ export function darken(amount: number, color?: string, alphaValue?: number): str
   const actualColor = color || getCurrentThemeColor();
   const hsl = hexToHSL(actualColor);
   const hexColor = hslToHex(hsl.h, hsl.s, Math.max(0, hsl.l - amount));
-  
+
   // 如果提供了透明度参数，应用透明度
   if (alphaValue !== undefined) {
     return alpha(alphaValue, hexColor);
   }
-  
+
   return hexColor;
 }
 
@@ -64,12 +69,12 @@ export function alpha(alphaValue: number, color?: string): string {
   const alpha = Math.max(0, Math.min(1, alphaValue));
 
   // 移除#号并处理缩写形式
-  let hex = actualColor.replace(/^#/, "");
+  let hex = actualColor.replace(/^#/, '');
   if (hex.length === 3) {
     hex = hex
-      .split("")
-      .map((char) => char + char)
-      .join("");
+      .split('')
+      .map(char => char + char)
+      .join('');
   }
 
   // 解析RGB值
@@ -90,12 +95,12 @@ interface HSL {
 
 export function hexToHSL(hex: string): HSL {
   // 移除#号并处理缩写形式
-  let hexValue = hex.replace(/^#/, "");
+  let hexValue = hex.replace(/^#/, '');
   if (hexValue.length === 3) {
     hexValue = hexValue
-      .split("")
-      .map((char) => char + char)
-      .join("");
+      .split('')
+      .map(char => char + char)
+      .join('');
   }
 
   // 解析RGB值
@@ -133,7 +138,7 @@ export function hexToHSL(hex: string): HSL {
   return {
     h: Math.round(h * 360),
     s: Math.round(s * 100),
-    l: Math.round(l * 100),
+    l: Math.round(l * 100)
   };
 }
 
@@ -170,15 +175,15 @@ export function hslToHex(h: number, s: number, l: number): string {
   // 转换为十六进制
   const toHex = (x: number): string => {
     const hex = Math.round(x * 255).toString(16);
-    return hex.length === 1 ? "0" + hex : hex;
+    return hex.length === 1 ? '0' + hex : hex;
   };
 
   return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 }
 
 export const useTheme = () => {
   // 获取主题类型
-  const getThemeType = () => localStorage.getItem("themeType") || "default";
+  const getThemeType = () => localStorage.getItem('themeType') || 'default';
   const html = document.documentElement as HTMLElement;
 
   // 通用设置主题的方法
@@ -190,13 +195,13 @@ export const useTheme = () => {
 
   // 切换主题方法
   const switchTheme = (theme: string) => {
-    localStorage.setItem("themeType", theme);
-    if (theme === "darkBlue") {
-      html.setAttribute("class", "darkBlue");
-    } else if (theme === "deepBlue") {
-      html.setAttribute("class", "deepBlue");
+    localStorage.setItem('themeType', theme);
+    if (theme === 'darkBlue') {
+      html.setAttribute('class', 'darkBlue');
+    } else if (theme === 'deepBlue') {
+      html.setAttribute('class', 'deepBlue');
     } else {
-      html.setAttribute("class", "");
+      html.setAttribute('class', '');
     }
 
     // 应用所有主题
@@ -213,6 +218,6 @@ export const useTheme = () => {
   return {
     initTheme,
     setMainTheme,
-    switchTheme,
+    switchTheme
   };
 };