Light theme support.

app.vue

@@ -1,5 +1,5 @@
 <template>
-  <div data-theme="torrust">
+  <div>
     <Notifications />
 
     <NavigationBar />

components/ThemeToggle.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="flex">
+    <button v-if="$colorMode.preference === 'system'" @click="$colorMode.preference = 'dark'">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="feather feather-monitor"
+      >
+        <rect
+          x="2"
+          y="3"
+          width="20"
+          height="14"
+          rx="2"
+          ry="2"
+        />
+        <line x1="8" y1="21" x2="16" y2="21" />
+        <line x1="12" y1="17" x2="12" y2="21" />
+      </svg>
+    </button>
+    <button v-if="$colorMode.preference === 'dark'" @click="$colorMode.preference = 'light'">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="feather feather-moon"
+      >
+        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+      </svg>
+    </button>
+    <button v-if="$colorMode.preference === 'light'" @click="$colorMode.preference = 'system'">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="feather feather-sun"
+      >
+        <circle cx="12" cy="12" r="5" />
+        <line x1="12" y1="1" x2="12" y2="3" />
+        <line x1="12" y1="21" x2="12" y2="23" />
+        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+        <line x1="1" y1="12" x2="3" y2="12" />
+        <line x1="21" y1="12" x2="23" y2="12" />
+        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+  <style scoped>
+.feather:hover {
+  stroke: orange;
+  stroke-opacity: 75%;
+}
+  </style>

components/navigation/NavigationBar.vue

@@ -37,7 +37,7 @@
       </div>
       <div class="flex-none gap-2 ml-auto">
         <template v-if="user">
-          <NuxtLink to="/upload" class="hidden md:flex btn bg-base-100 rounded-2xl">
+          <NuxtLink id="upload-button" to="/upload" class="hidden md:flex btn bg-base-100 rounded-2xl">
             Upload Torrent
           </NuxtLink>
           <div data-cy="user-menu" class="dropdown dropdown-end z-[1]">
@@ -62,6 +62,7 @@
             Sign Up
           </NuxtLink>
         </template>
+        <ThemeToggle />
       </div>
     </div>
     <template v-if="!mobileCollapsed">
@@ -133,4 +134,8 @@ function submitSearch () {
 #mobile-menu a.router-link-exact-active {
   @apply bg-primary;
 }
+
+[data-theme="light"] #upload-button {
+  background-color: #ffffff;
+}
 </style>

nuxt.config.ts

@@ -11,9 +11,22 @@ export default defineNuxtConfig({
   },
 
   modules: [
-    "@nuxtjs/tailwindcss"
+    "@nuxtjs/tailwindcss",
+    "@nuxtjs/color-mode"
   ],
 
+  colorMode: {
+    preference: "dark", // default value of $colorMode.preference
+    fallback: "dark", // fallback value if not system preference found
+    hid: "nuxt-color-mode-script",
+    globalName: "__NUXT_COLOR_MODE__",
+    componentName: "ColorScheme",
+    classPrefix: "",
+    classSuffix: "",
+    storageKey: "nuxt-color-mode",
+    dataValue: "theme"
+  },
+
   vite: {
     server: {
       fs: {