refactor(darkmodetoggle): move dark mode toggle to own component

components/DarkModeToggle.vue

@@ -0,0 +1,22 @@
+<template>
+  <v-switch v-model="darkMode" :label="$t('darkModeToggle')"></v-switch>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  computed: {
+    darkMode: {
+      get() {
+        return this.$store.getters['displayPreferences/getDarkMode'];
+      },
+      set(value: boolean) {
+        this.$store.dispatch('displayPreferences/setDarkMode', {
+          darkMode: value
+        });
+      }
+    }
+  }
+});
+</script>

layouts/default.vue

@@ -47,10 +47,7 @@
       <template #append>
         <v-list>
           <v-list-item>
-            <v-switch
-              v-model="darkMode"
-              :label="$t('darkModeToggle')"
-            ></v-switch>
+            <dark-mode-toggle />
           </v-list-item>
           <v-list-item
             v-for="(item, i) in configItems"
@@ -124,16 +121,6 @@ export default Vue.extend({
   },
   computed: {
     ...mapState('page', ['opaqueAppBar']),
-    darkMode: {
-      get() {
-        return this.$store.getters['displayPreferences/getDarkMode'];
-      },
-      set(value: boolean) {
-        this.$store.dispatch('displayPreferences/setDarkMode', {
-          darkMode: value
-        });
-      }
-    },
     items() {
       return [
         {

store/index.ts

@@ -7,6 +7,7 @@ import { UserViewsState } from './userViews';
 import { HomeSectionState } from './homeSection';
 import { BackdropState } from './backdrop';
 import { DeviceState } from './deviceProfile';
+import { DisplayPreferencesState } from './displayPreferences';
 
 export interface AppState {
   tvShows: TvShowsState;
@@ -18,4 +19,5 @@ export interface AppState {
   homeSection: HomeSectionState;
   backdrop: BackdropState;
   device: DeviceState;
+  displayPreferences: DisplayPreferencesState;
 }