add dark mode

package.json

@@ -1,6 +1,6 @@
 {
   "name": "evolution-manager",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "main": "dist",
   "engines": {
     "node": ">=16.0.0"

src/components/modal/SendMessage.vue

@@ -119,8 +119,8 @@
         </v-alert>
       </v-card-text>
       <v-card-actions>
+        <v-btn text @click="dialog = false" :disabled="loading">Fechar</v-btn>
         <v-spacer></v-spacer>
-        <v-btn text to="/" :disabled="loading">Cancel</v-btn>
         <v-btn
           color="success"
           variant="tonal"

src/layouts/default/AppBar.vue

@@ -1,7 +1,7 @@
 <template>
   <v-app-bar flat>
     <v-app-bar-title class="flex-shrink-0">
-      <v-btn variant="text" @click="$router.push({name: 'instances'})">
+      <v-btn variant="text" @click="$router.push({ name: 'instances' })">
         <v-img src="@/assets/logo.png" height="24" width="24" class="mr-2" />
         Evolution Manager
       </v-btn>
@@ -9,7 +9,11 @@
     <v-icon v-if="AppStore.connecting" color="info">
       mdi-loading mdi-spin
     </v-icon>
-    <v-chip v-else-if="AppStore.validConnection" color="success" style="max-width: 40vw">
+    <v-chip
+      v-else-if="AppStore.validConnection"
+      color="success"
+      style="max-width: 40vw"
+    >
       <v-icon color="success" start> mdi-check-circle </v-icon>
       {{
         AppStore.connection.host.replace(/https?:\/\//, "").replace(/\/$/, "")
@@ -19,6 +23,11 @@
     <v-btn @click="openSettings" icon>
       <v-icon>mdi-cog</v-icon>
     </v-btn>
+    <v-btn @click="toggleTheme" icon>
+      <v-icon>mdi-{{
+        dark ? "white-balance-sunny" : "weather-night"
+      }}</v-icon>
+    </v-btn>
   </v-app-bar>
   <SettingsModal ref="settings" />
 </template>
@@ -26,20 +35,32 @@
 <script>
 import SettingsModal from "@/components/modal/Settings.vue";
 import { useAppStore } from "@/store/app";
+import { useTheme } from "vuetify";
 
 export default {
   name: "AppBar",
   data: () => ({
     AppStore: useAppStore(),
+    theme: useTheme(),
   }),
   components: {
     SettingsModal,
   },
   methods: {
+    toggleTheme() {
+      this.theme.global.name = this.theme.global.current.dark
+        ? "light"
+        : "dark";
+    },
     openSettings() {
       this.$refs.settings.open();
     },
   },
+  computed: {
+    dark() {
+      return this.theme.global.current.dark;
+    },
+  },
   async mounted() {
     await this.AppStore.loadConnection();
     if (!this.AppStore.validConnection) this.openSettings();

src/layouts/default/AppFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-footer absolute app class="pt-10">
+  <v-footer absolute app class="mt-10">
     <div class="d-flex flex-grow-1 flex-wrap gap-y-1 align-end">
       <div class="flex-shrink-0 d-flex gap-2 align-center">
         <v-btn