From 8581665be9b84b9e41f611ff96e81557b019e2da Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Tue, 17 Jan 2023 21:31:57 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20feat:=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=B5=8C=E5=A5=97Provider=20=E5=90=8E=E8=BF=98=E8=83=BD?=
 =?UTF-8?q?=E8=8E=B7=E5=BE=97=E5=87=86=E7=A1=AE=E7=9A=84=20theme=20?=
 =?UTF-8?q?=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/containers/ThemeProvider/ThemeSwitcher.tsx | 14 +++++++++++---
 tests/hooks/useTheme.test.tsx                  |  6 ++++--
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/containers/ThemeProvider/ThemeSwitcher.tsx b/src/containers/ThemeProvider/ThemeSwitcher.tsx
index 4b85fc09..54dffbc5 100644
--- a/src/containers/ThemeProvider/ThemeSwitcher.tsx
+++ b/src/containers/ThemeProvider/ThemeSwitcher.tsx
@@ -1,7 +1,8 @@
-import { FC, memo, ReactNode, useCallback, useLayoutEffect } from 'react';
+import { FC, memo, ReactNode, useCallback, useLayoutEffect, useMemo } from 'react';
 import useControlledState from 'use-merge-value';
 
 import { ThemeModeContext } from '@/context';
+import { useTheme } from '@/hooks';
 import { ThemeAppearance, ThemeMode } from '@/types';
 
 let darkThemeMatch: MediaQueryList;
@@ -32,11 +33,18 @@ const ThemeSwitcher: FC<ThemeSwitcherProps> = memo(
     appearance: appearanceProp,
     defaultAppearance,
     onAppearanceChange,
-    themeMode = 'light',
+    themeMode: themeModeProps,
   }) => {
+    const { appearance: upperAppearance, themeMode: upperThemeMode } = useTheme();
+
+    const themeMode = useMemo(
+      () => themeModeProps ?? upperThemeMode,
+      [themeModeProps, upperThemeMode],
+    );
+
     const [appearance, setAppearance] = useControlledState<ThemeAppearance>('light', {
       value: appearanceProp,
-      defaultValue: defaultAppearance,
+      defaultValue: defaultAppearance ?? upperAppearance,
       onChange: onAppearanceChange,
     });
 
diff --git a/tests/hooks/useTheme.test.tsx b/tests/hooks/useTheme.test.tsx
index 86ccdef2..b9a2e6a1 100644
--- a/tests/hooks/useTheme.test.tsx
+++ b/tests/hooks/useTheme.test.tsx
@@ -16,11 +16,13 @@ describe('useTheme', () => {
     expect(result.current.stylish).toEqual({});
   });
 
-  it('嵌套 Provider 后能拿到准确的值', () => {
+  it('嵌套 Provider 后能拿到准确的主题值', () => {
     const Wrapper: FC<PropsWithChildren> = ({ children }) => {
       return (
         <ThemeProvider themeMode={'dark'}>
-          <ThemeProvider prefixCls={'kitchen'}>{children}</ThemeProvider>
+          <ThemeProvider defaultAppearance={'light'} prefixCls={'kitchen'}>
+            {children}
+          </ThemeProvider>
         </ThemeProvider>
       );
     };