Apply theme

Author: JanisV

frontend/src/App.vue

@@ -1,7 +1,9 @@
 <script setup>
 import {onMounted, ref} from 'vue'
 import {useRoute, useRouter} from 'vue-router'
+import {useTheme} from 'vuetify'
 import {useSQLite} from "@/composables/useSQLite.js";
+import {useThemeStore} from '@/stores/theme'
 import FileUploaderView from '@/components/FileUploaderView.vue'
 import CoinListView from "@/components/CoinListView.vue";
 import SettingsView from "@/components/SettingsView.vue";
@@ -25,7 +27,12 @@ const drawer = ref(false)
 const router = useRouter()
 const route = useRoute()
 
+const themeStore = useThemeStore()
+const theme = useTheme()
+
 onMounted(async () => {
+  theme.change(themeStore.currentTheme)
+
   await router.replace('/')
 })
 

frontend/src/components/SettingsView.vue

@@ -1,10 +1,12 @@
 <script setup>
 import {onMounted, onUnmounted, ref} from "vue";
+import { useTheme } from 'vuetify'
 import { useLocaleStore } from '@/stores/locale'
 import { useThemeStore } from '@/stores/theme'
 
 const themeStore = useThemeStore()
 const localeStore = useLocaleStore()
+const appTheme = useTheme()
 
 const langs = ref([
   {lang: 'bg', name: 'Български'},
@@ -37,6 +39,11 @@ onMounted(async () => {
 onUnmounted(async () => {
   emit('update:title', oldTitle);
 })
+
+const handleThemeChange = (theme) => {
+  themeStore.setTheme(theme)
+  appTheme.change(theme)
+}
 </script>
 
 <template>
@@ -47,9 +54,10 @@ onUnmounted(async () => {
             v-model="themeStore.currentTheme"
             rounded="xl"
             border
+            @update:model-value="handleThemeChange"
         >
           <v-btn value="dark" icon="mdi-weather-night"></v-btn>
-          <v-btn value="auto" icon="mdi-brightness-auto"></v-btn>
+          <v-btn value="system" icon="mdi-brightness-auto"></v-btn>
           <v-btn value="light" icon="mdi-weather-sunny"></v-btn>
         </v-btn-toggle>
       </v-list-item>

frontend/src/main.js

@@ -10,6 +10,8 @@ import { createPinia } from 'pinia'
 import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+import colors from 'vuetify/util/colors'
+import { md3 } from 'vuetify/blueprints'
 
 // Components
 import App from './App.vue'
@@ -21,6 +23,24 @@ pinia.use(piniaPluginPersistedstate)
 const vuetify = createVuetify({
   components,
   directives,
+  blueprint: md3,
+  theme: {
+    defaultTheme: 'dark',
+    themes: {
+      light: {
+        dark: false,
+        colors: {
+          primary: colors.orange.lighten1,
+        }
+      },
+      dark: {
+        dark: true,
+        colors: {
+          primary: colors.orange.darken2,
+        }
+      }
+    }
+  }
 })
 
 const app = createApp(App)