Merge pull request #3 from designcise/fix/default-theme-in-inline-script

fix: default theme consideration logic in inline script

Author: designcise

README.md

@@ -285,4 +285,4 @@ https://github.com/designcise/next-theme-toggle/blob/main/LICENSE.md
 ## Resources
 
 - [How to Create Non-Flickering Dark/Light Mode Toggle in Next.js Using `localStorage`?](https://www.designcise.com/web/tutorial/how-to-create-non-flickering-dark-or-light-mode-toggle-in-next-js-using-localstorage)
-- [How to Create Non-Flickering Dark/Light Mode Toggle in Next.js Using Cookies?](https://www.designcise.com/web/tutorial/how-to-create-non-flickering-dark-or-light-mode-toggle-in-next-js-using-cookies).
+- [How to Create Non-Flickering Dark/Light Mode Toggle in Next.js Using Cookies?](https://www.designcise.com/web/tutorial/how-to-create-non-flickering-dark-or-light-mode-toggle-in-next-js-using-cookies)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcise/next-theme-toggle",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "A simple theme toggle for Next.js 13+",
   "exports": {
     ".": "./dist/client.js",

src/component/AntiFlickerScript.jsx

@@ -6,13 +6,10 @@ export default memo(
     const { [themes.auto]: _, ...colors } = palette
     const classList = Object.values(colors).join("','")
     const preferredTheme = `localStorage.getItem('${storageKey}')`
-    const fallbackTheme =
-      defaultTheme && defaultTheme !== themes.auto
-        ? `'${getColorByTheme(defaultTheme)}'`
-        : `(window.matchMedia('(prefers-color-scheme: ${colors.dark})').matches?'${colors.dark}':'${colors.light}')`
+    const fallbackTheme = `(window.matchMedia('(prefers-color-scheme: ${colors.dark})').matches?'${colors.dark}':'${colors.light}')`
     const script =
       '(function(root){' +
-      `const pref=${preferredTheme};` +
+      `const pref=${preferredTheme}??'${getColorByTheme(defaultTheme)}';` +
       `const theme=(pref&&pref!=='${themes.auto}')?pref:${fallbackTheme};` +
       `root.classList.remove('${classList}');root.classList.add(theme);root.style.colorScheme=theme;` +
       `})(document.documentElement)`