From b862ea8b6ff425c53f35e1d6cf66874cdb4b9676 Mon Sep 17 00:00:00 2001
From: mym0404 <mym0404@gmail.com>
Date: Sun, 17 Mar 2024 15:08:20 +0900
Subject: [PATCH 1/2] docs: update readme.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index c9b50a9..ea70dc6 100644
--- a/README.md
+++ b/README.md
@@ -48,7 +48,7 @@ Extend & Extend Theme token is described as the following section.
 `app/layout.tsx`
 
 ```tsx
-<DesignProvider cookies={cookies().getAll()} cookiesString={cookies().toString()} theme={AppTheme}>
+<DesignProvider initialColorMode={'dark' /* or light */ } theme={AppTheme}>
   {children}
 </DesignProvider>
 ```
@@ -63,7 +63,7 @@ All components are wrapping of Chakra-UI components.
 
 So you can use all the `styled-system` syntax used in it.
 
-Currently, css variables always have a prefix of `--ck`, but this will be changed so that it can be set in a future update.
+Currently, css variables always have a prefix of `--ck`, this can be changed by chakra-ui `css-var-prefix` config feature.
 
 For example, colors can be used in CSS like `var(--ck-colors-red-500)`.
 

From af1e21a061c5598e1fce3b11b263ed8e46c026e3 Mon Sep 17 00:00:00 2001
From: mym0404 <mym0404@gmail.com>
Date: Sun, 17 Mar 2024 22:22:14 +0900
Subject: [PATCH 2/2] feat: change colorMode prop name

---
 src/provider/DesignProvider.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/provider/DesignProvider.tsx b/src/provider/DesignProvider.tsx
index 1dbe30b..8c11f72 100644
--- a/src/provider/DesignProvider.tsx
+++ b/src/provider/DesignProvider.tsx
@@ -15,7 +15,8 @@ import { InitialCookiesProvider } from './InitialCookieProvider';
 
 type Props = PropsWithChildren<{
   theme?: Dict;
-  initialColorMode?: 'dark' | 'light';
+  /** color mode of theme, default: light */
+  colorMode?: 'dark' | 'light';
   enableColorModeScript?: boolean;
 }>;
 
@@ -23,17 +24,17 @@ const cookieKey = 'chakra-ui-color-mode';
 export const DesignProvider = ({
   children,
   theme,
-  initialColorMode = 'light',
+  colorMode = 'light',
   enableColorModeScript = true,
 }: Props) => {
   return (
-    <InitialCookiesProvider cookies={[{ name: cookieKey, value: initialColorMode }]}>
+    <InitialCookiesProvider cookies={[{ name: cookieKey, value: colorMode }]}>
       {enableColorModeScript ? (
-        <ColorModeScript initialColorMode={initialColorMode} type={'cookie'} />
+        <ColorModeScript initialColorMode={colorMode} type={'cookie'} />
       ) : null}
       <StyledComponentsRegistry>
         <ChakraProvider
-          colorModeManager={cookieStorageManagerSSR(`cookieKey=${initialColorMode}`)}
+          colorModeManager={cookieStorageManagerSSR(`${cookieKey}=${colorMode}`)}
           theme={theme ?? baseTheme}
         >
           <AppAlertDialogProvider>{children}</AppAlertDialogProvider>