Set dark when prefer-color-scheme is configured

Author: ktquez

demo/index.html

@@ -66,7 +66,7 @@ <h1>
  VueDarkMode by CSS Filters
  </h1>
  <div>
- <vue-dark-mode :is-dark="preferDark">
+ <vue-dark-mode>
  <template v-slot="{ mode }">
  Dark mode: {{ mode ? 'on' : 'off' }}
  </template>
@@ -90,12 +90,7 @@ <h1>
 
  <script>
  new Vue({
- el: '#app',
- computed: {
- preferDark: function () {
- return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
- }
- }
+ el: '#app'
  })
  </script>
 </body>

src/vue-dark-mode.vue

@@ -48,6 +48,11 @@ export default {
  darkMode: this.isDark
  }
  },
+ created () {
+ if (!this.$isServer) {
+ this.darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches
+ }
+ },
  methods: {
  toggleDarkMode () {
  this.darkMode = !this.darkMode