From 3eb6809e85b7f546465c1f11b745e0eda1c7ba1d Mon Sep 17 00:00:00 2001
From: Salem Yaslem <s@sy.sa>
Date: Tue, 6 Jun 2023 03:59:48 +0300
Subject: [PATCH] support dark mode

---
 app.vue                      | 26 ++++++++++++--------------
 composables/files-manager.ts |  2 +-
 plugins/vuetify.ts           |  8 +++++++-
 3 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/app.vue b/app.vue
index 585b989..f20bdc9 100644
--- a/app.vue
+++ b/app.vue
@@ -144,8 +144,8 @@ function stepUp(path: string) {
           </v-col>
         </v-row>
       </v-toolbar>
-      <template v-if="filesManager.getFile(selectedPath)?.isFolder || false">
-        <v-container>
+      <v-container>
+        <template v-if="filesManager.getFile(selectedPath)?.isFolder || false">
           <v-list :selected="[selectedPath]">
             <v-row no-gutters>
               <v-col cols="6" lg="2" md="3" sm="6" v-for="file of filesGridList" style="text-align: center;">
@@ -159,16 +159,9 @@ function stepUp(path: string) {
               </v-col>
             </v-row>
           </v-list>
-        </v-container>
-      </template>
-
-      <VueSelecto :selectableTargets="['.selectable']" :dragContainer="dragContainer" :hitRate="20"
-        :selectFromInside="false" :toggleContinueSelect="'ctrl'" @select="onSelectStart" @selectStart="onSelectStart"
-        :get-element-rect="getElementInfo" @selectEnd="onSelectEnd" :select-by-click="false" />
-
-      <template v-if="!files.length">
-        <!-- tutorial drag and drop zipped file here and review it securely -->
-        <v-container fill-height fluid>
+        </template>
+        <template v-if="!files.length">
+          <!-- tutorial drag and drop zipped file here and review it securely -->
           <v-row align="center" justify="center">
             <v-col cols="12">
               <v-card variant="flat" class="mx-auto" max-width="768">
@@ -189,8 +182,13 @@ function stepUp(path: string) {
               </v-card>
             </v-col>
           </v-row>
-        </v-container>
-      </template>
+        </template>
+      </v-container>
+
+      <VueSelecto :selectableTargets="['.selectable']" :dragContainer="dragContainer" :hitRate="20"
+        :selectFromInside="false" :toggleContinueSelect="'ctrl'" @select="onSelectStart" @selectStart="onSelectStart"
+        :get-element-rect="getElementInfo" @selectEnd="onSelectEnd" :select-by-click="false" />
+
     </v-main>
     <v-dialog v-model="loadingModel" persistent width="auto">
       <v-card>
diff --git a/composables/files-manager.ts b/composables/files-manager.ts
index ff0e4fa..60bab1f 100644
--- a/composables/files-manager.ts
+++ b/composables/files-manager.ts
@@ -138,7 +138,7 @@ export class FilesManager {
                     if (a.name > b.name) return 1;
                     return 0;
                 }),
-                isFolder: true,
+                isFolder: this.filesList.value.length ? true : false,
             };
         }
 
diff --git a/plugins/vuetify.ts b/plugins/vuetify.ts
index 33811d3..5a3b57d 100644
--- a/plugins/vuetify.ts
+++ b/plugins/vuetify.ts
@@ -3,10 +3,16 @@ import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
 
 export default defineNuxtPlugin(nuxtApp => {
+  // get system dark mode
+  const darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
+
   const vuetify = createVuetify({
     ssr: false,
     components,
-    directives
+    directives,
+    theme: {
+      defaultTheme: darkMode ? 'dark' : 'light',
+    }
   })
 
   nuxtApp.vueApp.use(vuetify)