From 7066c3da51f2b4d02074cacd02efc1548a9a8562 Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Sun, 15 Jan 2023 17:32:18 +0800
Subject: [PATCH 1/2] =?UTF-8?q?:white=5Fcheck=5Fmark:=20test:=20=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=B5=8C=E5=A5=97ThemeProvider=20=E7=9A=84=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95=E7=94=A8=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/containers/ThemeProvider/ThemeSwitcher.tsx      |  1 +
 tests/hooks/{useTheme.test.ts => useTheme.test.tsx} | 13 +++++++++++++
 tests/hooks/useToken.test.ts                        |  2 --
 3 files changed, 14 insertions(+), 2 deletions(-)
 rename tests/hooks/{useTheme.test.ts => useTheme.test.tsx} (60%)

diff --git a/src/containers/ThemeProvider/ThemeSwitcher.tsx b/src/containers/ThemeProvider/ThemeSwitcher.tsx
index 1d365ddb..4b85fc09 100644
--- a/src/containers/ThemeProvider/ThemeSwitcher.tsx
+++ b/src/containers/ThemeProvider/ThemeSwitcher.tsx
@@ -55,6 +55,7 @@ const ThemeSwitcher: FC<ThemeSwitcherProps> = memo(
       else setAppearance(themeMode);
     }, [themeMode]);
 
+    // 自动监听系统主题变更
     useLayoutEffect(() => {
       if (!darkThemeMatch) {
         darkThemeMatch = matchThemeMode('dark');
diff --git a/tests/hooks/useTheme.test.ts b/tests/hooks/useTheme.test.tsx
similarity index 60%
rename from tests/hooks/useTheme.test.ts
rename to tests/hooks/useTheme.test.tsx
index a3dc2dd7..86ccdef2 100644
--- a/tests/hooks/useTheme.test.ts
+++ b/tests/hooks/useTheme.test.tsx
@@ -1,6 +1,7 @@
 import { renderHook } from '@testing-library/react';
 
 import { ThemeProvider, useTheme } from 'antd-style';
+import { FC, PropsWithChildren } from 'react';
 
 describe('useTheme', () => {
   it('如果没有 Provider，theme 对象时是 antd Token 默认值', () => {
@@ -15,6 +16,18 @@ describe('useTheme', () => {
     expect(result.current.stylish).toEqual({});
   });
 
+  it('嵌套 Provider 后能拿到准确的值', () => {
+    const Wrapper: FC<PropsWithChildren> = ({ children }) => {
+      return (
+        <ThemeProvider themeMode={'dark'}>
+          <ThemeProvider prefixCls={'kitchen'}>{children}</ThemeProvider>
+        </ThemeProvider>
+      );
+    };
+    const { result } = renderHook(useTheme, { wrapper: Wrapper });
+    expect(result.current.colorPrimary.toLowerCase()).toEqual('#1668dc');
+  });
+
   it('自定义 Token', () => {});
   it('自定义 Stylish', () => {});
 });
diff --git a/tests/hooks/useToken.test.ts b/tests/hooks/useToken.test.ts
index 1905756f..c2b7b052 100644
--- a/tests/hooks/useToken.test.ts
+++ b/tests/hooks/useToken.test.ts
@@ -7,6 +7,4 @@ describe('useAntdToken', () => {
     const { result } = renderHook(useAntdToken);
     expect(result.current.colorPrimary.toLowerCase()).toEqual('#1677ff');
   });
-
-  it('TODO: 嵌套 CP 时能拿到准确的 token 值', () => {});
 });

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 2/2] =?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>
       );
     };