Dark mode

18 files changed, 147 insertions, 61 deletions

diff --git a/assets/sass/main.sass b/assets/sass/main.sass
index 04466c1..d0c5159 100644
--- a/assets/sass/main.sass
+++ b/assets/sass/main.sass
@@ -10,3 +10,9 @@ body
 
 .border-1
   border-width: 1px
+
+body.dark
+  background-color: #111827
+
+.dark\:border-b-1
+  border-bottom-width: 1px
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(
diff --git a/layouts/default.vue b/layouts/default.vue
index 128a9c6..c6e249f 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,8 +1,24 @@
 <template>
-  <div>
+  <div :class="$colorMode.preference">
     <VHeader />
     <main>
       <Nuxt />
     </main>
   </div>
 </template>
+
+<script>
+export default {
+  created() {
+    setTimeout(() => {
+      const dark = document.querySelector("#__layout .dark");
+      console.log(dark);
+      if (dark) {
+        document.querySelector("body").className = "dark";
+      } else {
+        document.querySelector("body").className = "";
+      }
+    }, 1000);
+  },
+};
+</script>
diff --git a/nuxt.config.js b/nuxt.config.js
index 4c7f57c..534ad80 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -31,7 +31,7 @@ export default {
 
   // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
   buildModules: [
-    // https://go.nuxtjs.dev/tailwindcss
+    "@nuxtjs/color-mode",
     "@nuxtjs/tailwindcss",
     "@nuxtjs/style-resources",
   ],
@@ -47,4 +47,8 @@ export default {
   publicRuntimeConfig: {
     api: process.env.BACKEND_URL,
   },
+
+  colorMode: {
+    fallback: "light",
+  },
 };
diff --git a/package-lock.json b/package-lock.json
index 85a1aa6..330861d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
       },
       "devDependencies": {
         "@babel/eslint-parser": "^7.16.3",
+        "@nuxtjs/color-mode": "^2.1.1",
         "@nuxtjs/style-resources": "^1.2.1",
         "@nuxtjs/tailwindcss": "^4.2.1",
         "eslint": "^8.4.1",
@@ -3139,6 +3140,22 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
+    "node_modules/@nuxtjs/color-mode": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/color-mode/-/color-mode-2.1.1.tgz",
+      "integrity": "sha512-kGB/FoICF4RwZkfNBhL/yGrHfaUFpviYq6HGvSkZEm2dCpjRXIv9VsWoP0uzwxnoaRAQQOkkWjaGv/nSk0gUSQ==",
+      "dev": true,
+      "dependencies": {
+        "defu": "^5.0.0",
+        "lodash.template": "^4.5.0"
+      }
+    },
+    "node_modules/@nuxtjs/color-mode/node_modules/defu": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/defu/-/defu-5.0.1.tgz",
+      "integrity": "sha512-EPS1carKg+dkEVy3qNTqIdp2qV7mUP08nIsupfwQpz++slCVRw7qbQyWvSTig+kFPwz2XXp5/kIIkH+CwrJKkQ==",
+      "dev": true
+    },
     "node_modules/@nuxtjs/style-resources": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@nuxtjs/style-resources/-/style-resources-1.2.1.tgz",
@@ -9808,9 +9825,9 @@
       }
     },
     "node_modules/jiti": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.15.0.tgz",
-      "integrity": "sha512-cClBkETOCVIpPMjX3ULlivuBvmt8l2Xtz+SHrULO06OqdtV0QFR2cuhc4FJnXByjUUX4CY0pl1nph0aFh9D3yA==",
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.16.0.tgz",
+      "integrity": "sha512-L3BJStEf5NAqNuzrpfbN71dp43mYIcBUlCRea/vdyv5dW/AYa1d4bpelko4SHdY3I6eN9Wzyasxirj1/vv5kmg==",
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -22515,6 +22532,24 @@
         }
       }
     },
+    "@nuxtjs/color-mode": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/color-mode/-/color-mode-2.1.1.tgz",
+      "integrity": "sha512-kGB/FoICF4RwZkfNBhL/yGrHfaUFpviYq6HGvSkZEm2dCpjRXIv9VsWoP0uzwxnoaRAQQOkkWjaGv/nSk0gUSQ==",
+      "dev": true,
+      "requires": {
+        "defu": "^5.0.0",
+        "lodash.template": "^4.5.0"
+      },
+      "dependencies": {
+        "defu": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/defu/-/defu-5.0.1.tgz",
+          "integrity": "sha512-EPS1carKg+dkEVy3qNTqIdp2qV7mUP08nIsupfwQpz++slCVRw7qbQyWvSTig+kFPwz2XXp5/kIIkH+CwrJKkQ==",
+          "dev": true
+        }
+      }
+    },
     "@nuxtjs/style-resources": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@nuxtjs/style-resources/-/style-resources-1.2.1.tgz",
@@ -27671,9 +27706,9 @@
       }
     },
     "jiti": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.15.0.tgz",
-      "integrity": "sha512-cClBkETOCVIpPMjX3ULlivuBvmt8l2Xtz+SHrULO06OqdtV0QFR2cuhc4FJnXByjUUX4CY0pl1nph0aFh9D3yA=="
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.16.0.tgz",
+      "integrity": "sha512-L3BJStEf5NAqNuzrpfbN71dp43mYIcBUlCRea/vdyv5dW/AYa1d4bpelko4SHdY3I6eN9Wzyasxirj1/vv5kmg=="
     },
     "js-base64": {
       "version": "2.6.4",
diff --git a/package.json b/package.json
index cb5f1cf..b230078 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.16.3",
+    "@nuxtjs/color-mode": "^2.1.1",
     "@nuxtjs/style-resources": "^1.2.1",
     "@nuxtjs/tailwindcss": "^4.2.1",
     "eslint": "^8.4.1",
diff --git a/pages/create.vue b/pages/create.vue
index 8063b7b..8930d0e 100644
--- a/pages/create.vue
+++ b/pages/create.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
   .mx-auto.w-90p.py-6(class="sm:px-6 lg:px-8 md:max-w-7xl")
-    h1.text-3xl.font-bold Create a new model
-    p Fill all the required fieds to upload your 3D model into Verden!
+    h1.text-3xl.font-bold(class="dark:text-white") Create a new model
+    p(class="dark:text-white") Fill all the required fieds to upload your 3D model into Verden!
     model-form
 </template>
 
diff --git a/pages/models/_id/edit.vue b/pages/models/_id/edit.vue
index 8ced3e2..0d707b9 100644
--- a/pages/models/_id/edit.vue
+++ b/pages/models/_id/edit.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
   .mx-auto.w-90p.py-6#modelpage(class="sm:px-6 lg:px-8 md:max-w-7xl")
-    h1.text-3xl.font-bold Edit {{ model.name }}
-    a.mt-3.mb-5.block.flex(:href="'/models/'+model.id" class="hover:underline")
+    h1.text-3xl.font-bold(class="dark:text-white") Edit {{ model.name }}
+    a.mt-3.mb-5.block.flex(:href="'/models/'+model.id" class="hover:underline dark:text-white")
       <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">
         <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
       </svg>
diff --git a/pages/models/_id/index.vue b/pages/models/_id/index.vue
index c06fa15..962b94a 100644
--- a/pages/models/_id/index.vue
+++ b/pages/models/_id/index.vue
@@ -73,16 +73,16 @@
     section.mb-5
       .flow-root
         .float-left
-          h1.text-3xl.font-bold.border-green-500.border-b-2.pb-3.w-full.mb-2(class="md:w-max md:mb-0") {{ model.name }}
+          h1.text-3xl.font-bold.border-green-500.border-b-2.pb-3.w-full.mb-2(class="md:w-max md:mb-0 dark:text-white") {{ model.name }}
         .float-right(v-if="model.author")
           .flex
             .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 }}
-      .description.mt-3
+      .description.mt-3(class="dark:text-white")
         p {{ model.description }}
 
     .mb-5.text-right
@@ -111,7 +111,7 @@
         </svg>
         | Delete
     model-reports-list(:model="model.id" v-if="me && model.id")
-    .images.shadow-sm.rounded-lg.bg-white.p-4.w-full(v-if="model.uploads")
+    .images.shadow-sm.rounded-lg.bg-white.p-4.w-full(class="dark:bg-gray-600" v-if="model.uploads")
       .block.gap-4.h-full(class="md:flex")
         .w-full(class="md:w-4/5")
           .image.bg-gray-900.border-2.rounded-xl.w-full.h-64.overflow-hidden(class="sm:h-full" v-if="model.uploads && model.uploads[selectedUpload]")
@@ -121,44 +121,44 @@
             .border-2.border-gray-300.bg-gray-300.w-20.h-20.rounded-xl.grid.items-center.justify-items-center.overflow-hidden.cursor-pointer(
               v-for="upload, i in model.uploads"
               :key="upload.id"
-              :class="{'md:w-24 md:h-24': true, 'border-green-700': selectedUpload == i}"
+              :class="{'md:w-24 md:h-24 dark:border-green-100': true, 'border-green-700': selectedUpload == i}"
               @click="selectedUpload = i"
             )
               file-preview(:path="upload.filepath")
 
     section.mt-5
       .grid.grid-cols-2.gap-5.mb-5(class="md:grid-cols-6")
-        .card.shadow-sm.rounded-lg.bg-white.p-4.w-full
+        .card.shadow-sm.rounded-lg.bg-white.p-4.w-full(class="dark:bg-gray-600 text-white")
           h3.font-bold Created: 
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
             <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
           </svg>
           p(:title="model.created|moment('DD/MM/YYYY HH:mm')") {{ model.created|moment("DD/MM/YYYY") }}
-        .card.shadow-sm.rounded-lg.bg-white.p-4.w-full
+        .card.shadow-sm.rounded-lg.bg-white.p-4.w-full(class="dark:bg-gray-600 text-white")
           h3.font-bold Duration: 
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
             <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM12.75 6a.75.75 0 00-1.5 0v6c0 .414.336.75.75.75h4.5a.75.75 0 000-1.5h-3.75V6z" clip-rule="evenodd" />
           </svg>
           p {{ model.duration }}m
-        .card.shadow-sm.rounded-lg.bg-white.p-4.w-full
+        .card.shadow-sm.rounded-lg.bg-white.p-4.w-full(class="dark:bg-gray-600 text-white")
           h3.font-bold Height: 
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
             <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
           </svg>
           p {{ model.height }}mm
-        .card.shadow-sm.rounded-lg.bg-white.p-4.w-full
+        .card.shadow-sm.rounded-lg.bg-white.p-4.w-full(class="dark:bg-gray-600 text-white")
           h3.font-bold Weight: 
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
             <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0012 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 01-2.031.352 5.988 5.988 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 01-2.031.352 5.989 5.989 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971z" />
           </svg>
           p {{ model.weight }}g
-        .card.shadow-sm.rounded-lg.bg-white.p-4.w-full(v-if="model.printer")
+        .card.shadow-sm.rounded-lg.bg-white.p-4.w-full(class="dark:bg-gray-600 text-white" v-if="model.printer")
           h3.font-bold Printer: 
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
             <path stroke-linecap="round" stroke-linejoin="round" d="M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0110.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0l.229 2.523a1.125 1.125 0 01-1.12 1.227H7.231c-.662 0-1.18-.568-1.12-1.227L6.34 18m11.318 0h1.091A2.25 2.25 0 0021 15.75V9.456c0-1.081-.768-2.015-1.837-2.175a48.055 48.055 0 00-1.913-.247M6.34 18H5.25A2.25 2.25 0 013 15.75V9.456c0-1.081.768-2.015 1.837-2.175a48.041 48.041 0 011.913-.247m10.5 0a48.536 48.536 0 00-10.5 0m10.5 0V3.375c0-.621-.504-1.125-1.125-1.125h-8.25c-.621 0-1.125.504-1.125 1.125v3.659M18 10.5h.008v.008H18V10.5zm-3 0h.008v.008H15V10.5z" />
           </svg>
           p {{ model.printer }}
-        .card.shadow-sm.rounded-lg.bg-white.p-4.w-full(v-if="model.material")
+        .card.shadow-sm.rounded-lg.bg-white.p-4.w-full(class="dark:bg-gray-600 text-white" v-if="model.material")
           h3.font-bold Material: 
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
             <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5" />
diff --git a/pages/settings.vue b/pages/settings.vue
index fc08199..bc028d4 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -1,13 +1,13 @@
 <template lang="pug">
   .mx-auto.w-90p.py-6(class="sm:px-6 lg:px-8 md:max-w-7xl")
-    h1.text-3xl.font-bold Settings
-    p Change your informations
+    h1.text-3xl.font-bold(class="dark:text-white") Settings
+    p(class="dark:text-white") Change your informations
 
     form.mt-3(v-if="me")
       .overflow-hidden.shadow(class="sm:rounded-md")
-        .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 Avatar
+            label.block.text-sm.font-medium.text-gray-700(class="dark:text-white") Avatar
             span.text-green-500.text-xs(v-if="avatarChanged") Avatar changed. Reload this page and/or clear your browser cache.
             .mt-1.flex.items-center
               user-avatar(:data="me")
@@ -28,7 +28,7 @@
                 | Delete
 
           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"
@@ -37,7 +37,7 @@
                 v-model="form.name"
               )
           div
-            label.block.text-sm.font-medium.text-gray-700(for="username") Username
+            label.block.text-sm.font-medium.text-gray-700(class="dark:text-white" for="username") Username
             .mt-1
               input#email.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
                 name="username"
@@ -46,7 +46,7 @@
                 v-model="form.username"
               )
           div
-            label.block.text-sm.font-medium.text-gray-700(for="email") Email
+            label.block.text-sm.font-medium.text-gray-700(class="dark:text-white" for="email") Email
             .mt-1
               input#email.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
                 type="email"
@@ -55,6 +55,18 @@
                 placeholder="john@example.com"
                 v-model="form.email"
               )
+
+          div
+            label.block.text-sm.font-medium.text-gray-700(class="dark:text-white" for="theme") Theme
+            .mt-1
+              select(
+                class="cursor-pointer rounded-md border border-gray-300 bg-white py-2 px-3 text-sm font-medium leading-4 text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+              )
+                option(@click="$colorMode.preference = 'system'") System
+                option(@click="$colorMode.preference = 'light'") Light
+                option(@click="$colorMode.preference = 'dark'") Dark
+
+
         .py-3.px-4.text-right(class="sm:px-6")
           button.inline-flex.justify-center.rounded-md.border.border-transparent.bg-green-600.py-2.px-4.text-sm.font-medium.text-white.shadow-sm(
             type="submit"
diff --git a/pages/signin.vue b/pages/signin.vue
index f2ac0e4..de80c05 100644
--- a/pages/signin.vue
+++ b/pages/signin.vue
@@ -3,9 +3,9 @@
     .flex.min-h-full.items-center.justify-center.py-12.px-4(class="sm:px-6 lg:px-8")
       .w-full.max-w-md.space-y-8
         div
-          h2.mt-6.text-center.text-3xl.font-bold.tracking-tight.text-gray-900 Sign in
+          h2.mt-6.text-center.text-3xl.font-bold.tracking-tight.text-gray-900(class="dark:text-white") Sign in
           p.mt-2.text-center.text-sm.text-gray-600 Or 
-            a.font-medium.text-indigo-600(class="hover:text-indigo-500" href="/signup") create a new account
+            a.font-medium.text-indigo-600(class="hover:text-indigo-500 dark:text-gray-100 dark:hover:text-white" href="/signup") create a new account
         form.mt-8.space-y-6(method="POST")
           input(type="hidden" name="remember" value="true")
           .-space-y-px.rounded-md.shadow-sm
diff --git a/pages/signup.vue b/pages/signup.vue
index bcb847e..09c5e27 100644
--- a/pages/signup.vue
+++ b/pages/signup.vue
@@ -3,9 +3,9 @@
     .flex.min-h-full.items-center.justify-center.py-12.px-4(class="sm:px-6 lg:px-8")
       .w-full.max-w-md.space-y-8
         div
-          h2.mt-6.text-center.text-3xl.font-bold.tracking-tight.text-gray-900 Create a new account
+          h2.mt-6.text-center.text-3xl.font-bold.tracking-tight.text-gray-900(class="dark:text-white") Create a new account
           p.mt-2.text-center.text-sm.text-gray-600 Or 
-            a.font-medium.text-indigo-600(class="hover:text-indigo-500" href="/signin") sign in
+            a.font-medium.text-indigo-600(class="hover:text-indigo-500 dark:text-gray-100 dark:hover:text-white" href="/signin") signin
         form.mt-8.space-y-6(method="POST")
           input(type="hidden" name="remember" value="true")
           .-space-y-px.rounded-md.shadow-sm
diff --git a/pages/user/_id.vue b/pages/user/_id.vue
index 7f57338..a43a7c8 100644
--- a/pages/user/_id.vue
+++ b/pages/user/_id.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
   .mx-auto.w-90p.py-6#modelpage(class="sm:px-6 lg:px-8 md:max-w-7xl")
-    .grid.mb-10.justify-items-center.text-center(class="sm:flex sm:text-left" v-if="user.username")
+    .grid.mb-10.justify-items-center.text-center(class="sm:flex sm:text-left dark:text-white" v-if="user.username")
       user-avatar(:data="user" big="1")
       .grid.p-0(class="sm:pl-7")
         h1.text-2xl.font-bold.self-end.flex(:title="user.username+' is an admin'") {{ user.name }} 
@@ -12,14 +12,14 @@
     model-loading(v-if="isLoading")
     section(v-else)
       div(v-if="models.length > 0")
-        h4.mb-1.text-lg My models
+        h4.mb-1.text-lg(class="dark:text-white") My models
         .grid.grid-cols-1.gap-4(class="md:grid-cols-4")
           model-box-card(
             v-for="model in models"
             :key="model.id"
             :model="model"
           )
-      h4.text-lg(v-else) No models found
+      h4.text-lg(v-else class="dark:text-white") No models found
 
 </template>
 
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..7028b6c
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  darkMode: "class",
+  variants: {
+    backgroundColor: ["dark"],
+  },
+};