Add color mode switcher

frontend/components/organisms/layout/TheColorModeSwitcher.vue

@@ -0,0 +1,36 @@
+<template>
+  <v-btn
+    icon
+    fab
+    @click="isDark=!isDark"
+  >
+    <v-icon v-if="isDark">
+      mdi-moon-waxing-crescent
+    </v-icon>
+    <v-icon v-else>
+      mdi-white-balance-sunny
+    </v-icon>
+  </v-btn>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isDark: false
+    }
+  },
+
+  watch: {
+    isDark() {
+      this.$vuetify.theme.dark = this.isDark
+      localStorage.setItem('dark', this.isDark)
+    }
+  },
+
+  created() {
+    const dark = localStorage.getItem('dark')
+    this.isDark = dark ? JSON.parse(dark) : false
+  }
+}
+</script>

frontend/components/organisms/layout/TheHeader.vue

@@ -11,6 +11,7 @@
       doccano
     </v-toolbar-title>
     <div class="flex-grow-1" />
+    <the-color-mode-switcher />
     <v-btn
       v-if="isAuthenticated"
       text
@@ -49,17 +50,16 @@
     >
       Sign in
     </v-btn>
-    <the-top-menu v-if="isAuthenticated" />
   </v-app-bar>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-import TheTopMenu from '@/components/organisms/layout/TheTopMenu'
+import TheColorModeSwitcher from '@/components/organisms/layout/TheColorModeSwitcher'
 
 export default {
   components: {
-    TheTopMenu
+    TheColorModeSwitcher
   },
 
   data() {

frontend/components/organisms/layout/TheTopMenu.vue

@@ -1,70 +0,0 @@
-<template>
-  <v-menu bottom left>
-    <template v-slot:activator="{ on }">
-      <v-btn
-        icon
-        v-on="on"
-      >
-        <v-icon>mdi-dots-vertical</v-icon>
-      </v-btn>
-    </template>
-
-    <v-list>
-      <v-list-item>
-        <v-list-item-icon>
-          <v-icon>mdi-settings</v-icon>
-        </v-list-item-icon>
-        <v-list-item-content>
-          <v-list-item-title>
-            Dark Theme
-          </v-list-item-title>
-        </v-list-item-content>
-        <v-list-item-action>
-          <v-switch v-model="isDark" />
-        </v-list-item-action>
-      </v-list-item>
-      <v-list-item>
-        <v-list-item-icon>
-          <v-icon>mdi-translate</v-icon>
-        </v-list-item-icon>
-        <v-list-item-content>
-          <v-list-item-title>
-            RTL
-          </v-list-item-title>
-        </v-list-item-content>
-        <v-list-item-action>
-          <v-switch v-model="isRTL" />
-        </v-list-item-action>
-      </v-list-item>
-    </v-list>
-  </v-menu>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      isDark: false,
-      isRTL: false
-    }
-  },
-
-  watch: {
-    isDark() {
-      this.$vuetify.theme.dark = this.isDark
-      localStorage.setItem('dark', this.isDark)
-    },
-    isRTL() {
-      this.$vuetify.rtl = this.isRTL
-      localStorage.setItem('rtl', this.isRTL)
-    }
-  },
-
-  created() {
-    const dark = localStorage.getItem('dark')
-    const rtl = localStorage.getItem('rtl')
-    this.isDark = dark ? JSON.parse(dark) : false
-    this.isRTL = rtl ? JSON.parse(rtl) : false
-  }
-}
-</script>