fix: remove localStorage watch (blink)

nuxt-modules · Oct 7, 2022 · b7b32ed · b7b32ed · P4sca1 · Oct 12, 2022
1 parent f5253fe
commit b7b32ed
Show file tree

Hide file tree

Showing 5 changed files with 2 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -26,7 +26,6 @@
 - Force a page to a specific color mode (perfect for incremental development)
 - Works with client-side and universal rendering
 - Auto detect system [color-mode](https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-mode)
-- Sync dark mode across tabs and windows 🔄
 - Supports IE9+ 👴
 
 [📖 &nbsp;Read more](https://color-mode.nuxtjs.org)

diff --git a/docs/content/1.index.md b/docs/content/1.index.md
@@ -19,7 +19,6 @@ v3 of `@nuxtjs/color-mode` is compatible with [Nuxt 3 and Nuxt Bridge](https://v
 - Force a page to a specific color mode (perfect for incremental development)
 - Works with client-side and universal rendering
 - Auto detect system [color-mode](https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-mode)
-- Sync dark mode across tabs and windows 🔄
 - Supports IE9+ 👴
 
 ## Live demo

diff --git a/playground/app.vue b/playground/app.vue
@@ -8,6 +8,7 @@
     <p class="note">
       Demo based on <a href="https://color-mode.nuxtjs.org">@nuxtjs/color-mode</a> module.
     </p>
+    <iframe src="http://localhost:3000" />
   </div>
 </template>
 

diff --git a/playground/nuxt.config.js b/playground/nuxt.config.js
@@ -1,5 +1,5 @@
 import { defineNuxtConfig } from 'nuxt'
-import colorModeModule from '..'
+import colorModeModule from '../src/module'
 
 export default defineNuxtConfig({
   components: { global: true, dirs: ['~/components'] },

diff --git a/src/runtime/plugin.client.ts b/src/runtime/plugin.client.ts
@@ -71,14 +71,6 @@ export default defineNuxtPlugin((nuxtApp) => {
     })
   }
 
-  function watchStorageChange () {
-    window.addEventListener('storage', (e) => {
-      if (e.key === storageKey && e.newValue && colorMode.preference !== e.newValue) {
-        colorMode.preference = e.newValue
-      }
-    })
-  }
-
   watch(() => colorMode.preference, (preference) => {
     if (colorMode.forced) {
       return
@@ -104,9 +96,6 @@ export default defineNuxtPlugin((nuxtApp) => {
   }
 
   nuxtApp.hook('app:mounted', () => {
-    if (window.localStorage) {
-      watchStorageChange()
-    }
     if (colorMode.unknown) {
       colorMode.preference = helper.preference
       colorMode.value = helper.value