64 implement dark and light mode that defaults to system settings

src/App.vue

@@ -33,15 +33,14 @@ export default {
 
 <style>
 html {
-  @apply bg-slate-900;
+  @apply bg-slate-900 dark:bg-dark-900;
 }
 
 input.input, select.input {
-  /*@apply py-2 px-4 w-full text-white bg-slate-800 border border-slate-700 rounded-md text-sm shadow-sm cursor-pointer placeholder-slate-400 hover:border-sky-500 focus:bg-slate-800 focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500 transition duration-200;*/
-  @apply px-4 py-3.5 block w-full max-w-xl bg-transparent text-slate-200 placeholder-slate-400 font-medium border-2 border-slate-800 hover:border-slate-600 focus:border-slate-400 text-sm rounded-2xl outline-0 duration-200;
+  @apply px-4 py-3.5 block w-full max-w-xl bg-transparent autofill:bg-transparent text-slate-200 dark:text-dark-200 placeholder-slate-400 dark:placeholder-dark-400 font-medium border-2 border-slate-800 dark:border-dark-800 hover:border-slate-600 dark:hover:border-dark-600 focus:border-slate-400 dark:focus:border-dark-400 text-sm rounded-2xl outline-0 transition duration-200;
 }
 
 label.input-label {
-  @apply block mb-2 text-sm font-medium text-slate-400;
+  @apply block mb-2 text-sm font-medium text-slate-400 dark:text-dark-400;
 }
 </style>

src/components/Layout.vue

@@ -3,9 +3,9 @@
 
     <Navbar />
 
-    <div class="flex flex-col w-full max-w-full">
+    <div class="flex flex-col w-full">
 
-      <div class="my-6 mx-auto py-0 px-3 md:px-8 flex flex-col grow w-full">
+      <div class="my-6 mx-auto py-0 px-3 md:px-8 flex flex-col grow w-full max-w-8xl">
         <router-view />
       </div>
 
@@ -25,7 +25,7 @@ import Sidebar from './navigation/Sidebar.vue'
 import Navbar from './navigation/Navbar.vue'
 import Footer from './Footer.vue'
 import Breadcrumb from "./Breadcrumb.vue";
-import AuthenticationModal from "../views/AuthenticationModal.vue";
+import AuthenticationModal from "../views/modals/AuthenticationModal.vue";
 
 export default {
   name: 'Layout',

src/components/navigation/Navbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col sticky top-0 h-16 md:h-20 justify-center bg-slate-900/90 border-b lg:border-0 border-slate-800/50 z-50 max-w-full" style="backdrop-filter: blur(20px);">
+  <div class="flex flex-col sticky top-0 h-16 md:h-20 justify-center bg-slate-900/90 dark:bg-dark-900/90 border-b lg:border-0 border-slate-800/50 z-50 max-w-full" style="backdrop-filter: blur(20px);">
     <div class="px-4 md:px-8 flex flex-col w-full">
 
       <!-- MOBILE -->
@@ -81,7 +81,7 @@
 
       <!-- DESKTOP -->
       <div id="desktop-menu" class="hidden md:flex flex-row items-center max-w-full">
-        <div id="left-menu" class="hidden md:flex flex-row flex-1 justify-start">
+        <div id="left-menu" class="hidden md:flex flex-row justify-start">
           <div id="site-name" class="hidden md:flex flex-row">
             <div class="flex flex-col">
               <router-link class="block text-2xl text-white duration-200" to="/">
@@ -91,59 +91,22 @@
               </router-link>
             </div>
           </div>
-          <div id="tabs" class="flex flex-row ml-3">
-            <div class="flex flex-col">
-              <span
-                  id="explore"
-                  class="px-6 h-10 flex flex-row flex-nowrap items-center appearance-none text-lg text-slate-200 hover:text-white font-medium cursor-pointer duration-200"
-                  @mouseover="dropdownOpened = true"
-                  @mouseleave="dropdownOpened = false"
-              >
-                <span>Explore</span>
-<!--                <ChevronDownIcon size="18" class="ml-1"></ChevronDownIcon>-->
-                <div
-                    class="absolute -ml-4 pt-60 z-10"
-                    :class="{hidden: !dropdownOpened}"
-                >
-                  <div @click.prevent="dropdownOpened = false" class="w-48 divide-y divide-slate-100 bg-slate-800 rounded-2xl overflow-hidden drop-shadow">
-                    <ul class="text-sm text-slate-400 font-medium duration-200" aria-labelledby="dropdownDefault">
-                      <li class="p-4 w-full hover:bg-slate-700 hover:text-white duration-200">
-                        <router-link to="/torrents/trending" replace class="inline-flex items-center">
-                          <span class="flex flex-nowrap whitespace-nowrap">Trending Torrents</span>
-                        </router-link>
-                      </li>
-                      <li class="p-4 w-full hover:bg-slate-700 hover:text-white duration-200">
-                        <router-link to="/torrents/popular" replace class="inline-flex items-center">
-                          <span class="flex flex-nowrap whitespace-nowrap">Most Popular Torrents</span>
-                        </router-link>
-                      </li>
-                      <li class="p-4 w-full hover:bg-slate-700 hover:text-white duration-200">
-                        <router-link to="/torrents/recent" replace class="inline-flex items-center">
-                          <span class="flex flex-nowrap whitespace-nowrap">Most Recent Torrents</span>
-                        </router-link>
-                      </li>
-                    </ul>
-                  </div>
-                </div>
-              </span>
-            </div>
-          </div>
         </div>
-        <div id="search-bar" class="hidden md:block mx-5 grow max-w-lg">
+        <div id="search-bar" class="ml-6 hidden md:block mx-5 grow max-w-md">
           <div class="flex flex-col">
             <div class="flex flex-col">
-              <div class="px-3.5 bg-slate-800/60 text-sm border border-transparent hover:border-slate-600 focus:border-slate-400 rounded-2xl duration-200">
+              <div class="px-3.5 bg-slate-800/60 dark:bg-white/5 text-sm border border-transparent hover:border-slate-600 dark:hover:border-white/20 focus:border-slate-400 rounded-xl duration-200">
                 <div class="flex flex-row items-center">
                   <div class="mr-3 flex flex-col">
-                    <SearchIcon size="18" class="text-slate-400" />
+                    <SearchIcon size="18" class="text-slate-400 dark:text-dark-500" />
                   </div>
                   <div class="flex flex-col grow">
                     <input
                         @keyup.enter="submitSearch"
                         v-model="searchQuery"
                         name="search"
                         type="text"
-                        class="h-12 bg-transparent outline-0 text-slate-200 font-medium placeholder-slate-400"
+                        class="h-10 bg-transparent outline-0 text-slate-200 dark:text-dark-200 font-medium placeholder-slate-400 dark:placeholder-dark-500"
                         placeholder="Search by torrent, category or user"
                     >
                   </div>
@@ -152,11 +115,48 @@
             </div>
           </div>
         </div>
+        <div id="tabs" class="flex flex-row ml-3">
+          <div class="flex flex-col">
+            <span
+                id="explore"
+                class="h-10 flex flex-row flex-nowrap items-center appearance-none text-slate-200 dark:text-dark-400 hover:text-white font-medium cursor-pointer duration-200"
+                @mouseover="dropdownOpened = true"
+                @mouseleave="dropdownOpened = false"
+            >
+              <span>Explore</span>
+              <ChevronDownIcon size="16" class="ml-1"></ChevronDownIcon>
+              <div
+                  class="absolute -ml-4 pt-60 z-10"
+                  :class="{hidden: !dropdownOpened}"
+              >
+                <div @click.prevent="dropdownOpened = false" class="w-48 divide-y divide-slate-100 bg-slate-800 dark:bg-dark-800 rounded-xl overflow-hidden drop-shadow">
+                  <ul class="text-sm text-slate-400 dark:text-dark-400 font-medium duration-200" aria-labelledby="dropdownDefault">
+                    <li class="p-4 w-full hover:bg-slate-700 dark:hover:bg-dark-700 hover:text-white duration-200">
+                      <router-link to="/torrents/trending" replace class="inline-flex items-center">
+                        <span class="flex flex-nowrap whitespace-nowrap">Trending Torrents</span>
+                      </router-link>
+                    </li>
+                    <li class="p-4 w-full hover:bg-slate-700 dark:hover:bg-dark-700 hover:text-white duration-200">
+                      <router-link to="/torrents/popular" replace class="inline-flex items-center">
+                        <span class="flex flex-nowrap whitespace-nowrap">Most Popular Torrents</span>
+                      </router-link>
+                    </li>
+                    <li class="p-4 w-full hover:bg-slate-700 dark:hover:bg-dark-700 hover:text-white duration-200">
+                      <router-link to="/torrents/recent" replace class="inline-flex items-center">
+                        <span class="flex flex-nowrap whitespace-nowrap">Most Recent Torrents</span>
+                      </router-link>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </span>
+          </div>
+        </div>
         <div id="extra-options" class="flex flex-row flex-1 ml-auto items-center justify-end">
           <Profile class="mr-3" />
-          <router-link to="/upload" class="px-4 h-10 inline-flex flex-nowrap justify-center items-center self-start appearance-none bg-sky-500 hover:bg-sky-600 text-sm text-white font-medium rounded-2xl cursor-pointer duration-200">
-            <UploadIcon size="18" class="mr-3" />
-            <span class="flex flex-nowrap whitespace-nowrap">Upload torrent</span>
+          <router-link to="/upload" class="px-4 h-10 inline-flex flex-nowrap justify-center items-center self-start appearance-none dark:bg-transparent text-sm text-white dark:text-neutral-400 dark:hover:text-white font-medium rounded-2xl cursor-pointer duration-200">
+<!--            <UploadIcon size="18" class="mr-3" />-->
+            <span class="flex flex-nowrap whitespace-nowrap">Upload</span>
           </router-link>
         </div>
       </div>

src/components/navigation/Profile.vue

@@ -4,7 +4,7 @@
     <span
         v-if="$store.getters.isLoggedIn"
         id="profile-button"
-        class="px-4 h-10 inline-flex justify-center items-center self-start appearance-none bg-slate-800 hover:bg-slate-700 text-sm text-white font-medium rounded-2xl cursor-pointer duration-200"
+        class="px-4 h-10 inline-flex justify-center items-center self-start appearance-none bg-slate-800 hover:bg-slate-700 dark:bg-white/5 dark:hover:bg-white/10 text-sm text-white font-medium rounded-2xl cursor-pointer duration-200"
         @click="dropdownOpened = !dropdownOpened"
         @mouseleave="dropdownOpened = false"
     >
@@ -18,19 +18,19 @@
           class="absolute pt-60 z-10"
           :class="{hidden: !dropdownOpened}"
       >
-        <div @click.prevent="dropdownOpened = false" class="w-48 divide-y divide-slate-100 bg-slate-800 rounded-2xl overflow-hidden drop-shadow">
-          <ul class="text-sm text-slate-400 font-medium duration-200" aria-labelledby="dropdownDefault">
-            <li class="p-4 w-full hover:bg-slate-700 hover:text-white duration-200">
+        <div @click.prevent="dropdownOpened = false" class="w-48 divide-y divide-slate-100 bg-slate-800 dark:bg-dark-800 rounded-2xl overflow-hidden drop-shadow">
+          <ul class="text-sm text-slate-400 dark:text-dark-400 font-medium duration-200" aria-labelledby="dropdownDefault">
+            <li class="p-4 w-full hover:bg-slate-700 dark:hover:bg-dark-700 hover:text-white duration-200">
               <router-link :to="`/profile/${user.username}`" replace class="inline-flex items-center">
                 <span class="flex flex-nowrap whitespace-nowrap">My Profile</span>
               </router-link>
             </li>
-            <li class="p-4 w-full hover:bg-slate-700 hover:text-white duration-200">
+            <li class="p-4 w-full hover:bg-slate-700 dark:hover:bg-dark-700 hover:text-white duration-200">
               <router-link to="/settings/general" replace class="inline-flex items-center">
                 <span class="flex flex-nowrap whitespace-nowrap">Settings</span>
               </router-link>
             </li>
-            <li class="p-4 w-full hover:bg-red-700 hover:text-white duration-200">
+            <li class="p-4 w-full hover:bg-red-700 dark:hover:bg-dark-700 hover:text-white duration-200">
               <a @click="$store.dispatch('logout')" class="inline-flex items-center">
                 <span class="flex flex-nowrap whitespace-nowrap">Sign Out</span>
               </a>
@@ -43,7 +43,7 @@
     <button
         v-else
         id="sign-in-button"
-        class="px-4 h-10 inline-flex justify-center items-center self-start appearance-none bg-slate-800 hover:bg-slate-700 text-sm text-white font-medium rounded-2xl cursor-pointer duration-200"
+        class="px-4 h-10 inline-flex justify-center items-center self-start appearance-none bg-slate-800 dark:bg-white/5 hover:bg-slate-700 dark:hover:bg-white/10 text-sm text-white font-medium rounded-2xl cursor-pointer duration-200"
         @click="$store.dispatch('openAuthModal')"
     >
       <UserCircleIcon size="24" class="mr-3" />

src/components/navigation/Tabs.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="overflow-x-auto">
-    <ul class="flex flex-row border-b-2 border-slate-600">
+    <ul class="flex flex-row border-b-2 border-slate-600 dark:border-dark-600">
       <li v-for="(tab) in tabs">
         <router-link
             :to="tab.path"
-            class="inline-flex py-2 px-6 font-medium text-center text-slate-400 hover:text-slate-200 border-b-2 border-transparent duration-200"
+            class="inline-flex py-2 px-6 font-medium text-center text-slate-400 dark:text-dark-400 hover:text-slate-200 dark:hover:text-dark-200 border-b-2 border-transparent duration-200"
             style="margin-bottom: -2px;"
             :class="{ 'active': $route.path === tab.path }"
         >
@@ -30,6 +30,6 @@ export default {
 
 <style scoped>
 .active {
-  @apply text-slate-200 border-slate-200;
+  @apply text-slate-200 dark:text-dark-200 border-slate-200 dark:border-dark-200;
 }
 </style>