Dark mode

5 files changed, 30 insertions, 24 deletions

diff --git a/components/FilePreview.vue b/components/FilePreview.vue
index 3892857..878ca5b 100644
--- a/components/FilePreview.vue
+++ b/components/FilePreview.vue
@@ -8,13 +8,13 @@
       v-else-if="isStl(path)"
       :rotate="rotate"
       :src="baseAPI + '' + path"
-      :backgroundColor="bg ? bg : '#D1D5DB'"
+      :backgroundColor="color ? color : '#D1D5DB'"
       :controlsOptions="{'enablePan': controls ? true : false, 'enableZoom': controls ? true : false, 'enableRotate': controls ? true : false}"
     )
     model-obj(
       v-else-if="isObj(path)"
       :src="baseAPI + '' + path"
-      :backgroundColor="bg ? bg : '#D1D5DB'"
+      :backgroundColor="color ? color : '#D1D5DB'"
       :controlsOptions="{'enablePan': controls ? true : false, 'enableZoom': controls ? true : false, 'enableRotate': controls ? true : false}"
     )
 </template>
@@ -33,6 +33,7 @@ export default {
         y: 0,
         z: 0,
       },
+      color: "",
     };
   },
   components: {
@@ -41,6 +42,11 @@ export default {
   },
   created() {
     this.baseAPI = this.$config.api;
+    if (this.$colorMode.preference == "light") {
+      this.color = this.bg;
+    } else {
+      this.color = "#ecfdf5";
+    }
   },
   methods: {
     checkExt(path, ext) {
diff --git a/components/ModelBoxCard.vue b/components/ModelBoxCard.vue
index 110c234..bdd8a8f 100644
--- a/components/ModelBoxCard.vue
+++ b/components/ModelBoxCard.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
   .model.shadow-sm.rounded-lg.bg-white.p-4.w-full.h-80.duration-300(
-    class="hover:ease-out hover:shadow-md"
+    class="hover:ease-out hover:shadow-md dark:bg-gray-600 dark:text-white"
   )
     a(:href="'/models/'+model.id")
       .image.bg-gray-900.rounded-xl.w-full.h-48.overflow-hidden
@@ -17,7 +17,7 @@
         .mr-3.float-left
           user-avatar(:data="model.author")
         p.leading-8
-          a.text-green-800(class="hover:text-green-700" :href="'/user/'+model.author_id")
+          a.text-green-800(class="hover:text-green-700 dark:text-green-300 dark:hover:text-green-200" :href="'/user/'+model.author_id")
             | @
             span.underline {{ model.author.username }}
 
diff --git a/components/ModelForm.vue b/components/ModelForm.vue
index f0edb64..d09c1ab 100644
--- a/components/ModelForm.vue
+++ b/components/ModelForm.vue
@@ -46,21 +46,21 @@
                 @click="boxDeleteModelUpload = 0"
               ) Cancel
     .shadow(class="sm:overflow-hidden sm:rounded-md")
-      .grid.grid-cols-2(v-if="form.id")
+      .grid.grid-cols-2(v-if="form.id" class="dark:bg-gray-600")
         button.p-2.duration-100(
           type="button"
-          :class="{'hover:bg-white': true, 'bg-white border-green-600 border-b-2': tab == 'info'}"
+          :class="{'dark:hover:bg-gray-300 hover:bg-white': true, 'bg-white dark:bg-gray-300 border-green-600 border-b-2': tab == 'info'}"
           @click="tab = 'info'"
         ) Info
         button.p-2.duration-100(
           type="button"
-          :class="{'hover:bg-white': true, 'bg-white border-green-600 border-b-2': tab == 'files'}"
+          :class="{'dark:hover:bg-gray-300 hover:bg-white': true, 'bg-white dark:bg-gray-300 border-green-600 border-b-2': tab == 'files'}"
           @click="tab = 'files'"
         ) Files
       div(v-if="tab == 'info'")
-        .space-y-6.bg-white.px-4.py-5(class="sm:p-6")
+        .space-y-6.bg-white.px-4.py-5(class="sm:p-6 dark:bg-gray-600")
           div
-            label.block.text-sm.font-medium.text-gray-700(for="name") Name
+            label.block.text-sm.font-medium.text-gray-700(class="dark:text-white" for="name") Name
             .mt-1
               input#name.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
                 name="name"
@@ -70,7 +70,7 @@
                 v-model="form.name"
               )
           div
-            label.block.text-sm.font-medium.text-gray-700(for="description") Description 
+            label.block.text-sm.font-medium.text-gray-700(class="dark:text-white" for="description") Description 
               span.text-gray-300 (Optional)
             .mt-1
               textarea#description.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
@@ -80,7 +80,7 @@
                 v-model="form.description"
               )
           div
-            label.block.text-sm.font-medium.text-gray-700(for="duration") Duration
+            label.block.text-sm.font-medium.text-gray-700(class="dark:text-white" for="duration") Duration
             .mt-1
               input#duration.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
                 name="duration"
@@ -92,7 +92,7 @@
               )
             p.text-sm.text-gray-500 Print duration in minutes
           div
-            label.block.text-sm.font-medium.text-gray-700(for="height") Height
+            label.block.text-sm.font-medium.text-gray-700(class="dark:text-white" for="height") Height
             .mt-1
               input#height.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
                 name="height"
@@ -104,7 +104,7 @@
               )
             p.text-sm.text-gray-500 Height in mm
           div
-            label.block.text-sm.font-medium.text-gray-700(for="weight") Weight
+            label.block.text-sm.font-medium.text-gray-700(class="dark:text-white" for="weight") Weight
             .mt-1
               input#weight.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
                 name="weight"
@@ -116,7 +116,7 @@
               )
             p.text-sm.text-gray-500 Weight in g
           div
-            label.block.text-sm.font-medium.text-gray-700(for="printer") Printer 
+            label.block.text-sm.font-medium.text-gray-700(class="dark:text-white" for="printer") Printer 
               span.text-gray-300 (Optional)
             .mt-1
               input#printer.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
@@ -126,7 +126,7 @@
                 v-model="form.printer"
               )
           div
-            label.block.text-sm.font-medium.text-gray-700(for="material") Material 
+            label.block.text-sm.font-medium.text-gray-700(class="dark:text-white" for="material") Material 
               span.text-gray-300 (Optional)
             .mt-1
               input#material.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
@@ -150,7 +150,7 @@
             | Save
           p.text-sm.text-gray-700.mt-2(v-if="!form.id") You will add assets like images and STL/OBJ later.
       div(v-else)
-        .space-y-6.bg-white.px-4.py-5(class="sm:p-6")
+        .space-y-6.bg-white.px-4.py-5(class="sm:p-6 dark:bg-gray-600 dark:text-white")
           h3(v-if="form.uploads") Manage '{{ form.name }}' already uploaded files
           ul.divide-y.divide-gray-200.rounded-b-md.border.border-gray-200(role="list" v-if="form.uploads")
             li.flex.items-center.justify-between.py-3.pl-3.pr-4.text-sm(v-for="upload in form.uploads" :key="upload.id")
@@ -160,7 +160,7 @@
                 span.ml-2.w-0.flex-1.truncate {{ getFileName(upload.filepath) }}
               .ml-4
                 a.font-medium.text-black-700.cursor-pointer.mr-2(class="hover:underline" @click="openPreview = upload.filepath") Preview
-                a.font-medium.text-red-700.cursor-pointer(class="hover:underline" @click="boxDeleteModelUpload = upload.id") Delete
+                a.font-medium.text-red-700.cursor-pointer(class="hover:underline dark:text-red-500" @click="boxDeleteModelUpload = upload.id") Delete
           hr(v-if="form.uploads")
           h3 Add new uploads
           label.inline-flex.leading-6.justify-center.rounded-md.border.border-transparent.bg-green-600.py-2.px-4.text-sm.font-medium.text-white.shadow-sm.cursor-pointer(
diff --git a/components/ModelReportsList.vue b/components/ModelReportsList.vue
index 37ffaf9..9ea9475 100644
--- a/components/ModelReportsList.vue
+++ b/components/ModelReportsList.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .shadow-sm.rounded-lg.bg-white.p-4.w-full.mb-5(v-if="warnings.length")
+  .shadow-sm.rounded-lg.bg-white.p-4.w-full.mb-5(class="dark:bg-gray-600" v-if="warnings.length")
     .relative.z-10(aria-labelledby="modal-title", role="dialog", aria-modal="true" v-if="boxToResolve > 0")
       .fixed.inset-0.bg-gray-900.bg-opacity-90.transition-opacity
       .fixed.inset-0.z-10.overflow-y-auto
@@ -35,16 +35,16 @@
 
     .flow-root
       .float-left
-        h2.text-xl.font-bold(v-if="me && me.is_staff") Reports 
-        h2.text-xl.font-bold(v-else) My reports
-      .float-right.flex.cursor-pointer(@click="expandList = !expandList")
+        h2.text-xl.font-bold(class="dark:text-white" v-if="me && me.is_staff") Reports 
+        h2.text-xl.font-bold(class="dark:text-white" v-else) My reports
+      .float-right.flex.cursor-pointer(class="dark:text-white" @click="expandList = !expandList")
         span {{ notResolved(warnings) }} not resolved
         svg(xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="ml-2 w-6 h-6")
           path(stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" v-if="!expandList")
           path(stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" v-else)
 
     ul(role="list" v-if="me && expandList")
-      li.text-sm.rounded-md.border.border-gray-200.mt-3(v-for="warning in warnings" :key="warning.id")
+      li.text-sm.rounded-md.border.border-gray-200.mt-3(class="dark:bg-gray-50" v-for="warning in warnings" :key="warning.id")
         .py-3.pl-3.pr-4(v-if="!me.is_staff")
           h3.flex.leading-6.mb-2.float-right
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 w-6 h-6">
diff --git a/components/VHeader.vue b/components/VHeader.vue
index 3ab2ca7..1f6a5d3 100644
--- a/components/VHeader.vue
+++ b/components/VHeader.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
   div
-    nav.bg-green-800
-      .mx-auto.max-w-7xl.px-2(class="sm:px-6 lg:px-8")
+    nav.bg-green-800(class="dark:bg-gray-900")
+      .mx-auto.max-w-7xl.px-2(class="sm:px-6 lg:px-8 dark:border-b-1 dark:border-green-300")
         .relative.flex.h-16.items-center.justify-between
           .absolute.inset-y-0.left-0.flex.items-center(class="sm:hidden")
             button.inline-flex.items-center.justify-center.rounded-md.p-2.text-gray-400(