From 8ccd41a2520cd57198900e27d1237283c032d95e Mon Sep 17 00:00:00 2001 From: designcise Date: Sun, 10 Dec 2023 02:01:35 +0100 Subject: [PATCH 1/3] fix: defaultTheme is only considered when no theme pref is stored --- src/component/AntiFlickerScript.jsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/component/AntiFlickerScript.jsx b/src/component/AntiFlickerScript.jsx index e4ae1c7..f69cf3b 100644 --- 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)` From a0d8f5707b2193ea8ce44b260527335bc308a5d2 Mon Sep 17 00:00:00 2001 From: designcise Date: Sun, 10 Dec 2023 02:01:50 +0100 Subject: [PATCH 2/3] docs: removed redundant fullstop --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 748883b..88a0705 100644 --- 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) From a2b4e2378df49912103b318c8571beb2ca6e94b3 Mon Sep 17 00:00:00 2001 From: designcise Date: Sun, 10 Dec 2023 02:03:06 +0100 Subject: [PATCH 3/3] chore: bumped up version to 3.0.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e2e0072..5705db9 100644 --- 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",