fix auto mode client side first time dark cookie set

Author: xeoneux

lerna.json

@@ -1,5 +1,5 @@
 {
   "npmClient": "yarn",
   "useWorkspaces": true,
-  "version": "2.2.0"
+  "version": "2.2.1"
 }

package.json

@@ -34,7 +34,7 @@
     "publish:release": "lerna publish --tag-version-prefix=\"\" --force-publish=* --no-push --no-git-tag-version",
     "start": "yarn build:quick && lerna run start --parallel"
   },
-  "version": "2.2.0",
+  "version": "2.2.1",
   "workspaces": [
     "packages/*"
   ]

packages/next-dark-mode-example/package.json

@@ -5,7 +5,7 @@
   },
   "dependencies": {
     "next": "^9.3.5",
-    "next-dark-mode": "^2.2.0",
+    "next-dark-mode": "^2.2.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   },
@@ -29,5 +29,5 @@
     "serve": "next start",
     "start": "next"
   },
-  "version": "2.2.0"
+  "version": "2.2.1"
 }

packages/next-dark-mode-example/src/pages/_app.tsx

@@ -1,6 +1,6 @@
 import App from 'next/app'
-import withDarkMode from 'next-dark-mode'
+import withDarkMode, { MODE } from 'next-dark-mode'
 
 import '../styles/global.css'
 
-export default withDarkMode(App)
+export default withDarkMode(App, { defaultMode: MODE.DARK })

packages/next-dark-mode/package.json

@@ -43,5 +43,5 @@
   },
   "source": "src/index.tsx",
   "types": "es6/index.d.ts",
-  "version": "2.2.0"
+  "version": "2.2.1"
 }

packages/next-dark-mode/src/index.tsx

@@ -56,15 +56,31 @@ export default (App: NextComponentType | any, config?: Partial<Config>) => {
                 if (state.autoModeSupported) {
                   setCookie(null, darkModeCookieName, '1', {})
                   return { ...state, browserMode: MODE.DARK, darkModeActive: true }
-                } else return { ...state, autoModeSupported: true, browserMode: MODE.DARK }
+                } else {
+                  if (state.autoModeActive) setCookie(null, darkModeCookieName, '1', {})
+                  return {
+                    ...state,
+                    autoModeSupported: true,
+                    browserMode: MODE.DARK,
+                    darkModeActive: state.autoModeActive ? true : state.darkModeActive,
+                  }
+                }
               })
               break
             case themes.LIGHT:
               setState(state => {
                 if (state.autoModeSupported) {
                   setCookie(null, darkModeCookieName, '0', {})
                   return { ...state, browserMode: MODE.LIGHT, darkModeActive: false }
-                } else return { ...state, autoModeSupported: true, browserMode: MODE.LIGHT }
+                } else {
+                  if (state.autoModeActive) setCookie(null, darkModeCookieName, '0', {})
+                  return {
+                    ...state,
+                    autoModeSupported: true,
+                    browserMode: MODE.LIGHT,
+                    darkModeActive: state.autoModeActive ? false : state.darkModeActive,
+                  }
+                }
               })
               break
             case themes.NO_PREF:
@@ -113,4 +129,4 @@ export default (App: NextComponentType | any, config?: Partial<Config>) => {
   return DarkMode
 }
 
-export { useDarkMode }
+export { MODE, useDarkMode }