feat: 'change-mode' event when chosen a new color mode

vue-a11y · Jun 9, 2020 · 8fa7193 · 8fa7193
1 parent 130f96f
commit 8fa7193
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 0 deletions.
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -39,6 +39,7 @@ module.exports = {
               '/guide/',
               '/guide/class-naming.md',
               '/guide/modes.md',
+              '/guide/events.md',
               '/guide/storage.md',
               '/guide/meta-theme-color.md',
               '/guide/accessibility.md',

diff --git a/docs/guide/events.md b/docs/guide/events.md
@@ -0,0 +1,29 @@
+# Events
+
+## change-mode
+
+Event fired every color mode change.
+
+
+| Event          | value                                                        |
+| -------------- | ------------------------------------------------------------ |
+| `change-mode`  | color mode token. (`light` \| `dark` \| `system` \| `myCustomMode`)  | 
+
+```vue
+<VueDarkMode @change-mode="myColorModeHandler">
+  <template v-slot="{ mode }">
+    Color mode: {{ mode }}
+  </template>
+</VueDarkMode>
+```
+
+```js
+export default {
+  // ...
+  methods: {
+    myColorModeHandler (mode) {
+      // action here
+    }
+  }
+}
+```
diff --git a/src/VueDarkMode.vue b/src/VueDarkMode.vue
@@ -62,6 +62,7 @@ export default {
 
   computed: {
     getPrefersColorScheme () {
+      if (this.$isServer) return false
       const colorSchemeTypes = ['dark', 'light']
       let colorScheme = null
       colorSchemeTypes.forEach(type => {
@@ -120,6 +121,7 @@ export default {
       window[this.storage].setItem('colorMode', this.chosenMode)
       this.handleColorModeClass('add')
       if (Object.keys(this.metaThemeColor).length) this.setMetaThemeColor(this.metaThemeColor[this.currentMode] || this.metaThemeColor[this.getPrefersColorScheme])
+      this.$emit('change-mode', this.chosenMode)
     },
 
     getMediaQueryList (type) {
@@ -135,6 +137,7 @@ export default {
     },
 
     handleColorModeClass (action) {
+      if (this.$isServer) return
       return document.documentElement.classList[action](`${this.className.replace(/%cm/g, this.currentMode)}`)
     },