dark & light theme

plugins/vuetify.ts

@@ -1,15 +1,20 @@
-
 import { createVuetify } from "vuetify";
 import * as components from "vuetify/components";
 import * as directives from "vuetify/directives";
-import PerfectScrollbar from 'vue3-perfect-scrollbar';
-import VueApexCharts from 'vue3-apexcharts';
-import VueTablerIcons from 'vue-tabler-icons';
-import '@mdi/font/css/materialdesignicons.css';
-import '@/scss/style.scss';
+import PerfectScrollbar from "vue3-perfect-scrollbar";
+import VueApexCharts from "vue3-apexcharts";
+import VueTablerIcons from "vue-tabler-icons";
+import "@mdi/font/css/materialdesignicons.css";
+import "@/scss/style.scss";
+import { BLUE_THEME } from "@/theme/LightTheme";
 import {
-  BLUE_THEME,
-} from "@/theme/LightTheme";
+  DARK_BLUE_THEME,
+  DARK_AQUA_THEME,
+  DARK_ORANGE_THEME,
+  DARK_PURPLE_THEME,
+  DARK_GREEN_THEME,
+  DARK_CYAN_THEME,
+} from "@/theme/DarkTheme";
 export default defineNuxtPlugin((nuxtApp) => {
   const vuetify = createVuetify({
     components,
@@ -18,24 +23,30 @@ export default defineNuxtPlugin((nuxtApp) => {
       defaultTheme: "BLUE_THEME",
       themes: {
         BLUE_THEME,
+        DARK_BLUE_THEME,
+        DARK_AQUA_THEME,
+        DARK_ORANGE_THEME,
+        DARK_PURPLE_THEME,
+        DARK_GREEN_THEME,
+        DARK_CYAN_THEME,
       },
     },
     defaults: {
       VBtn: {},
       VCard: {
-          rounded: 'md'
+        rounded: "md",
       },
       VTextField: {
-          rounded: 'lg'
+        rounded: "lg",
       },
       VTooltip: {
-          location: 'top'
-      }
-  }
+        location: "top",
+      },
+    },
   });
   nuxtApp.vueApp.use(vuetify);
+  nuxtApp.provide('vuetify', vuetify)
   nuxtApp.vueApp.use(PerfectScrollbar);
   nuxtApp.vueApp.use(VueApexCharts);
   nuxtApp.vueApp.use(VueTablerIcons);
 });
-