feat: theme switch

Author: Randoooom

dashboard/components/layout/Navigation.vue renamed to dashboard/components/layout/navigation.vue

@@ -10,7 +10,8 @@
 
         <v-spacer />
 
-        <LayoutAuthentication v-if="loggedIn" />
+        <LayoutTheme class="mr-4" />
+        <LayoutProfile v-if="loggedIn" />
       </v-row>
     </v-container>
   </v-app-bar>

dashboard/components/layout/Authentication.vue renamed to dashboard/components/layout/profile.vue

@@ -0,0 +1,27 @@
+<template>
+  <v-btn variant="text" v-bind="$attrs" :icon="icon" @click="changeTheme" />
+</template>
+
+<script setup lang="ts">
+import { computed, useColorMode } from "#imports";
+import { useTheme } from "vuetify";
+
+const theme = useTheme();
+const colorMode = useColorMode();
+const icon = computed(() =>
+  colorMode.value === "light" ? "mdi-weather-night" : "mdi-weather-sunny",
+);
+const changeTheme = () => {
+  colorMode.preference = colorMode.value === "light" ? "dark" : "light";
+  colorMode.value = colorMode.preference;
+  syncTheme();
+};
+
+const syncTheme = () => {
+  theme.global.name.value = colorMode.value;
+};
+
+if (process.client) {
+  syncTheme();
+}
+</script>

dashboard/components/layout/theme.vue

@@ -1,8 +1,8 @@
 <template>
-  <v-expansion-panels>
+  <v-expansion-panels color="secondary">
     <v-expansion-panel :title="$t('prompt.preview')">
       <v-expansion-panel-text>
-        <v-tabs bg-color="primary" v-model="tab">
+        <v-tabs bg-color="secondary" v-model="tab">
           <v-tab value="preview">
             {{ $t("prompt.preview") }}
           </v-tab>
@@ -30,8 +30,6 @@
               &lt;feedback-fusion-prompt
                 baseUrl="{{ config.public.feedbackFusionEndpoint }}"
                 promptId="{{ prompt }}"
-                class="mt-4 mb-4"
-                style="width: 500px; max-width: 95vw"
               /&gt;
               </code>
             </pre>

dashboard/components/prompt/preview.vue

@@ -18,6 +18,7 @@ export default defineNuxtConfig({
     "@nuxtjs/i18n",
     "nuxt-oidc-auth",
     "@pinia/nuxt",
+    "@nuxtjs/color-mode",
   ],
   i18n: {
     locales: [{ code: "en", language: "en-US", file: "en.json" }],
@@ -70,9 +71,6 @@ export default defineNuxtConfig({
   },
   vuetify: {
     vuetifyOptions: {
-      theme: {
-        defaultTheme: "dark",
-      },
       labComponents: true,
     },
   },

dashboard/nuxt.config.ts

@@ -12,6 +12,7 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@nuxtjs/color-mode": "^3.5.2",
     "@nuxtjs/i18n": "^9.1.1",
     "@onelitefeathernet/feedback-fusion": "link:../lib",
     "@pinia/nuxt": "0.9.0",