🐛 fix: 默认注入主题

rdmclin2 · rdmclin2 · commit 402f4c62e443 · 2024-08-25T22:27:09.000+08:00
diff --git a/src/layout/AppTheme.tsx b/src/layout/AppTheme.tsx
@@ -1,17 +1,22 @@
 'use client';
 
 import { NeutralColors, PrimaryColors, ThemeProvider } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
+import { ThemeAppearance, createStyles } from 'antd-style';
 import { ReactNode, memo, useEffect } from 'react';
 
-import { VIDOL_THEME_NEUTRAL_COLOR, VIDOL_THEME_PRIMARY_COLOR } from '@/constants/theme';
+import {
+  VIDOL_THEME_APPEARANCE,
+  VIDOL_THEME_NEUTRAL_COLOR,
+  VIDOL_THEME_PRIMARY_COLOR,
+} from '@/constants/theme';
 import { useGlobalStore } from '@/store/global';
 import { useSettingStore } from '@/store/setting';
 import { GlobalStyle } from '@/styles';
 import { setCookie } from '@/utils/cookie';
 
 export interface AppThemeProps {
   children?: ReactNode;
+  defaultAppearance?: ThemeAppearance;
   defaultNeutralColor?: NeutralColors;
   defaultPrimaryColor?: PrimaryColors;
 }
@@ -28,7 +33,7 @@ const useStyles = createStyles(({ css }) => ({
 }));
 
 const AppTheme = memo((props: AppThemeProps) => {
-  const { children, defaultNeutralColor, defaultPrimaryColor } = props;
+  const { children, defaultNeutralColor, defaultAppearance, defaultPrimaryColor } = props;
   const [primaryColor, neutralColor] = useSettingStore((s) => [
     s.config.primaryColor,
     s.config.neutralColor,
@@ -52,6 +57,10 @@ const AppTheme = memo((props: AppThemeProps) => {
         primaryColor: primaryColor ?? defaultPrimaryColor,
         neutralColor: neutralColor ?? defaultNeutralColor,
       }}
+      defaultAppearance={defaultAppearance}
+      onAppearanceChange={(appearance) => {
+        setCookie(VIDOL_THEME_APPEARANCE, appearance);
+      }}
       themeMode={themeMode}
     >
       <GlobalStyle />
diff --git a/src/layout/index.tsx b/src/layout/index.tsx
@@ -5,7 +5,11 @@ import { ReactNode } from 'react';
 import { resolveAcceptLanguage } from 'resolve-accept-language';
 
 import { LOBE_LOCALE_COOKIE } from '@/constants/locale';
-import { VIDOL_THEME_NEUTRAL_COLOR, VIDOL_THEME_PRIMARY_COLOR } from '@/constants/theme';
+import {
+  VIDOL_THEME_APPEARANCE,
+  VIDOL_THEME_NEUTRAL_COLOR,
+  VIDOL_THEME_PRIMARY_COLOR,
+} from '@/constants/theme';
 import AppTheme from '@/layout/AppTheme';
 import StoreHydration from '@/layout/StoreHydration';
 import StyleRegistry from '@/layout/StyleRegistry';
@@ -40,6 +44,8 @@ const Layout = async (props: LayoutProps) => {
   const { children } = props;
 
   const cookieStore = cookies();
+  const appearance = cookieStore.get(VIDOL_THEME_APPEARANCE);
+
   const primaryColor = cookieStore.get(VIDOL_THEME_PRIMARY_COLOR);
   const neutralColor = cookieStore.get(VIDOL_THEME_NEUTRAL_COLOR);
 
@@ -54,6 +60,7 @@ const Layout = async (props: LayoutProps) => {
     <StyleRegistry>
       <Locale antdLocale={antdLocale} defaultLang={userLocale}>
         <AppTheme
+          defaultAppearance={appearance?.value}
           defaultNeutralColor={neutralColor?.value as any}
           defaultPrimaryColor={primaryColor?.value as any}
         >
