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

fix: default theme consideration logic in inline script
designcise · Dec 10, 2023 · dcec742 · dcec742
2 parents f78e50d + a2b4e23
commit dcec742
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 7 deletions.
diff --git a/README.md b/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)
diff --git a/package.json b/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",

diff --git a/src/component/AntiFlickerScript.jsx b/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)`