fix: mode listeners not removed

Author: stevapple

components/Mode/ModePicker.vue

@@ -6,14 +6,14 @@
         v-for="(mode, index) in modeOptions"
         :key="index"
         :class="getClass(mode.mode)"
-        @click="selectMode(mode)"
+        @click="selectMode(mode.mode)"
       >{{ mode.title }}</li>
     </ul>
   </div>
 </template>
 
 <script>
-import setMode, { activateMode } from './setMode'
+import setMode from './setMode'
 
 export default {
   name: 'ModeOptions',
@@ -32,21 +32,17 @@ export default {
   mounted () {
     const mode = localStorage.getItem('mode')
     const { mode: customizeMode } = this.$themeConfig
-    this.currentMode = mode === null ? customizeMode === undefined ? 'auto' : customizeMode : mode
-    activateMode(this.currentMode)
+    this.currentMode = mode ?? (customizeMode === null || customizeMode === undefined ? 'auto' : customizeMode)
+    setMode(this.currentMode)
   },
 
   methods: {
     selectMode (mode) {
-      if (mode.mode === this.currentMode) {
-        return
-      } else if (mode.mode === 'auto') {
-        setMode()
-      } else {
-        activateMode(mode.mode)
+      if (mode !== this.currentMode) {
+        this.currentMode = mode
+        setMode(mode)
+        localStorage.setItem('mode', mode)
       }
-      localStorage.setItem('mode', mode.mode)
-      this.currentMode = mode.mode
     },
     getClass (mode) {
       return mode !== this.currentMode ? mode : `${mode} active`

components/Mode/setMode.js

@@ -1,6 +1,6 @@
 import modeOptions from './modeOptions'
 
-export function activateMode (mode) {
+function activateMode (mode) {
   const rootElement = document.querySelector(':root')
   const options = modeOptions[mode]
 
@@ -9,19 +9,33 @@ export function activateMode (mode) {
   }
 }
 
+// Dark and Light autoswitches
+const onDark = (e) => e.matches && activateMode('dark')
+const onLight = (e) => e.matches && activateMode('light')
+
+const darkScheme = window.matchMedia('(prefers-color-scheme: dark)')
+const lightScheme = window.matchMedia('(prefers-color-scheme: light)')
+
 /**
  * Sets a color scheme for the website.
  * If browser supports "prefers-color-scheme" it will respect the setting for light or dark mode
  * otherwise it will set a dark theme during night time
  */
-export default function setMode () {
-  const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
-  const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
+export default function setMode (mode = 'auto') {
+  if (mode !== 'auto') {
+    darkScheme.removeListener(onDark)
+    lightScheme.removeListener(onLight)
+    activateMode(mode)
+    return
+  }
+
+  const isDarkMode = darkScheme.matches
+  const isLightMode = lightScheme.matches
   const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
   const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
 
-  window.matchMedia('(prefers-color-scheme: dark)').addListener(e => e.matches && activateMode('dark'))
-  window.matchMedia('(prefers-color-scheme: light)').addListener(e => e.matches && activateMode('light'))
+  darkScheme.addListener(onDark)
+  lightScheme.addListener(onLight)
 
   if (isDarkMode) activateMode('dark')
   if (isLightMode) activateMode('light')