Merge #422: Light theme support.

4ee9702 refactor: [#421]  light theme improved (Mario)
d8d7c49 feat:[#421] added hover effect for buttons (Mario)
e917427 refactor: [#421] new component name and added flex (Mario)
300f8c2 feat: [#421] button transition when changing theme (Mario)
9319e3b feat: [#421] system color preference working (Mario)
2e3f421 feat: [#421] custom light theme for DaisyUi added (Mario)
7f26b0b feat: [#421] light dark switch button (Mario)
ac91576 feat: [#421] added theme switch functionality (Mario)
d4f819e feat: [#421] added placeholder theme switch (Mario)
4424052 feat: [#421] NuxtJs color mode config added (Mario)
69ca328 feat: [#421] NuxtJs color mode installation (Mario)

Pull request description:

  Resolves #421.

ACKs for top commit:
  josecelano:
    ACK 4ee9702

Tree-SHA512: 3223f68c9cedaa721e6f9bf1b670e4b991ef9c441e957f583b48b8f7d0dbc941e5e6d90138711822330f335f4fcebe2f30ba2fc5c512b928fbbd54aa6ae01da4

Author: josecelano

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: {