Remove DaisyUI

linkie · Jan 23, 2023 · 32e0847 · 32e0847
1 parent 863565a
commit 32e0847
Show file tree

Hide file tree

Showing 24 changed files with 408 additions and 261 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -10,7 +10,6 @@
   "dependencies": {
     "@highlightjs/vue-plugin": "^2.1.0",
     "copy-to-clipboard": "^3.3.2",
-    "daisyui": "^2.24.0",
     "highlight.js": "^11.6.0",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.20",

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -35,17 +35,27 @@ export default defineComponent({
         },
         locale(): string {
             return this.$i18n.locale
-        }
+        },
     },
     mounted() {
         this.$i18n.locale = this.$i18n.availableLocales.find((locale: string) => locale === useI18nStore().locale) ?? "en_US"
-        
+
         let theme = localStorage.getItem("theme")
         if (theme) {
-            document.documentElement.setAttribute("data-theme", theme)
+            if (theme === "cupcake") {
+                document.documentElement.removeAttribute("data-theme")
+                document.documentElement.classList.remove("dark")
+                document.documentElement.style.setProperty("--color-scheme", "light")
+            } else {
+                document.documentElement.setAttribute("data-theme", "dark")
+                document.documentElement.classList.add("dark")
+                document.documentElement.style.setProperty("--color-scheme", "dark")
+            }
         } else {
             localStorage.setItem("theme", "cupcake")
-            document.documentElement.setAttribute("data-theme", "cupcake")
+            document.documentElement.removeAttribute("data-theme")
+            document.documentElement.classList.remove("dark")
+            document.documentElement.style.setProperty("--color-scheme", "light")
         }
     },
 })
@@ -54,10 +64,10 @@ export default defineComponent({
 
 <template>
     <meta name="theme-color" :key="theme" :content="theme === 'cupcake' ? '#efeae6' : '#242933'">
-    <div class="overflow-x-hidden" :key="locale">
+    <div class="overflow-x-hidden text-base-content dark:text-base-dark-content" :key="locale">
         <Navbar class="top-0 fixed z-10" :class="`navbar-${current}`"/>
 
-        <div class="min-h-screen flex flex-col justify-between bg-base-200">
+        <div class="min-h-screen flex flex-col justify-between bg-base-200 dark:bg-base-dark-100">
             <component :is="currentView"/>
             <Footer/>
         </div>
@@ -70,11 +80,20 @@ export default defineComponent({
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
 body {
-    @apply bg-base-200
+    @apply bg-base-100 dark:bg-base-dark-100;
 }
 
 .select {
     outline: 0 !important;
     border: 0 !important;
 }
+
+:root > * {
+    color-scheme: var(--color-scheme) !important;
+}
+
+:root {
+    color-scheme: var(--color-scheme) !important;
+}
+
 </style>
diff --git a/frontend/src/components/Block.vue b/frontend/src/components/Block.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="pb-6">
-        <div class="p-5 card bg-base-100 shadow-lg rounded-lg">
+        <div class="p-5 card bg-base-100 dark:bg-base-dark-200 shadow-lg rounded-lg">
             <slot></slot>
         </div>
     </div>

diff --git a/frontend/src/components/Footer.vue b/frontend/src/components/Footer.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="bg-base-300 px-4 w-full mt-6">
+    <div class="bg-base-300 dark:bg-base-dark-200 px-4 w-full mt-6">
         <footer class="max-w-[78rem] w-full mx-auto">
             <div class="items-center font-medium py-4 flex">
                 <p class="flex-1"><span class="whitespace-nowrap">Copyright Linkie & shedaniel</span> <span class="whitespace-nowrap">© 2020 - 2023.</span> <span class="whitespace-nowrap">All right reserved.</span></p>

diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
@@ -26,10 +26,10 @@
                                     enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75"
                                     leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
                             <div v-if="dropdownVisible"
-                                 class="locale-dropdown absolute right-0 z-10 mt-3 min-w-56 max-w-80 divide-y-2 divide-black/20 origin-top-right rounded-md bg-base-100 shadow-xl ring-4 ring-black ring-opacity-20">
+                                 class="locale-dropdown absolute right-0 z-10 mt-3 min-w-56 max-w-80 divide-y-2 divide-black/20 origin-top-right rounded-md bg-base-100 dark:bg-base-dark-300 dark:text-base-dark-content shadow-xl ring-4 ring-black ring-opacity-20">
                                 <div class="py-1">
                                     <a @click="locale = 'en_US'; $i18n.locale = locale; dropdownVisible = false"
-                                       class="cursor-pointer block px-4 py-2 hover:bg-base-300 transition-colors flex gap-2 items-center">
+                                       class="cursor-pointer block px-4 py-2 hover:bg-base-300 dark:hover:bg-base-dark-400 transition-colors flex gap-2 items-center">
                                         <p class="flex-1 pr-2">English (US)</p>
                                         <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
                                              viewBox="0 0 36 36">
@@ -43,7 +43,7 @@
                                         </svg>
                                     </a>
                                     <a @click="locale = 'en_GB'; $i18n.locale = locale; dropdownVisible = false"
-                                       class="cursor-pointer block px-4 py-2 hover:bg-base-300 transition-colors flex gap-2 items-center">
+                                       class="cursor-pointer block px-4 py-2 hover:bg-base-300 dark:hover:bg-base-dark-400 transition-colors flex gap-2 items-center">
                                         <p class="flex-1 pr-2">English (UK)</p>
                                         <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
                                              viewBox="0 0 36 36">
@@ -57,7 +57,7 @@
                                         </svg>
                                     </a>
                                     <a @click="locale = 'zh_CN'; $i18n.locale = locale; dropdownVisible = false"
-                                       class="cursor-pointer block px-4 py-2 hover:bg-base-300 transition-colors flex gap-2 items-center">
+                                       class="cursor-pointer block px-4 py-2 hover:bg-base-300 dark:hover:bg-base-dark-400 transition-colors flex gap-2 items-center">
                                         <p class="flex-1 pr-2">中文 (中国)</p>
                                         <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
                                              viewBox="0 0 36 36">
@@ -67,7 +67,7 @@
                                         </svg>
                                     </a>
                                     <a @click="locale = 'zh_TW'; $i18n.locale = locale; dropdownVisible = false"
-                                       class="cursor-pointer block px-4 py-2 hover:bg-base-300 transition-colors flex gap-2 items-center">
+                                       class="cursor-pointer block px-4 py-2 hover:bg-base-300 dark:hover:bg-base-dark-400 transition-colors flex gap-2 items-center">
                                         <p class="flex-1 pr-2">中文 (台灣)</p>
                                         <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
                                              viewBox="0 0 36 36">
@@ -82,7 +82,7 @@
                                 </div>
                                 <div class="py-1">
                                     <a href="https://github.com/linkie/linkie-web/tree/master/frontend/src/locales"
-                                       class="cursor-pointer block px-4 py-2 hover:bg-base-300 transition-colors flex gap-2 items-center">
+                                       class="cursor-pointer block px-4 py-2 hover:bg-base-300 dark:hover:bg-base-dark-400 transition-colors flex gap-2 items-center">
                                         <div class="flex-1 pr-2">
                                             <p class="whitespace-nowrap"> {{ $t("navbar.locale.help.0") }} </p>
                                             <p class="whitespace-nowrap"> {{ $t("navbar.locale.help.1") }} </p>
@@ -144,7 +144,15 @@ export default defineComponent({
         },
         setDarkMode(darkMode: boolean) {
             localStorage.setItem("theme", darkMode ? "dark" : "cupcake")
-            document.documentElement.setAttribute("data-theme", localStorage.getItem("theme")!)
+            if (localStorage.getItem("theme") === "dark") {
+                document.documentElement.setAttribute("data-theme", "dark")
+                document.documentElement.classList.add("dark")
+                document.documentElement.style.setProperty("--color-scheme", "dark")
+            } else {
+                document.documentElement.removeAttribute("data-theme")
+                document.documentElement.classList.remove("dark")
+                document.documentElement.style.setProperty("--color-scheme", "light")
+            }
             this.componentKey++
         },
     },

diff --git a/frontend/src/components/dependencies/CodeBlock.vue b/frontend/src/components/dependencies/CodeBlock.vue
@@ -1,6 +1,6 @@
 <template>
-    <p class="mt-1" v-if="title != undefined">{{ title }}</p>
-    <div class="rounded-lg bg-base-300 p-3 text-sm mt-2 mb-1">
+    <p class="mt-1" v-if="!!title">{{ title }}</p>
+    <div class="rounded-lg bg-base-300 dark:bg-base-dark-300 p-3 text-sm mt-2 mb-1">
         <div class="flex">
             <div class="flex-1">
                 <CodeLanguageTab v-for="language in languages" :language="language"/>

diff --git a/frontend/src/components/dependencies/DependencyFilterBlock.vue b/frontend/src/components/dependencies/DependencyFilterBlock.vue
@@ -4,7 +4,7 @@
 
         <div v-for="l in loaders" :class="[
             loader === l ? 'opacity-100 font-bold' : 'opacity-50 font-normal',
-            'cursor-pointer p-2 capitalize rounded transition-all hover:opacity-100 hover:bg-neutral hover:text-white']" @click="loader = l">
+            'cursor-pointer p-2 capitalize rounded transition-all hover:opacity-100 hover:bg-neutral dark:hover:bg-base-dark-300 hover:text-white']" @click="loader = l">
             {{ l }}
         </div>
 
@@ -14,13 +14,13 @@
 
             <div :class="[
             !forgeGradle ? 'opacity-100 font-bold' : 'opacity-50 font-normal',
-            'cursor-pointer p-2 capitalize rounded transition-all hover:opacity-100 hover:bg-neutral hover:text-white']" @click="forgeGradle = false">
+            'cursor-pointer p-2 capitalize rounded transition-all hover:opacity-100 hover:bg-neutral dark:hover:bg-base-dark-300 hover:text-white']" @click="forgeGradle = false">
                 {{ $t("dependencies.build.system.architectury.loom") }}
             </div>
 
             <div :class="[
             forgeGradle ? 'opacity-100 font-bold' : 'opacity-50 font-normal',
-            'cursor-pointer p-2 capitalize rounded transition-all hover:opacity-100 hover:bg-neutral hover:text-white']" @click="forgeGradle = true">
+            'cursor-pointer p-2 capitalize rounded transition-all hover:opacity-100 hover:bg-neutral dark:hover:bg-base-dark-300 hover:text-white']" @click="forgeGradle = true">
                 {{ $t("dependencies.build.system.forge.gradle") }}
             </div>
         </div>
@@ -35,11 +35,11 @@
             </div>
         </div>
 
-        <div class="bg-base-300 rounded-lg">
+        <div class="bg-base-300 dark:bg-base-dark-300 rounded-lg">
             <div class="px-1 py-2 h-52 overflow-x-clip gradient-mask-b-80 overflow-y-scroll">
                 <p v-for="v in applicableVersions"
                    :class="[version === v ? 'opacity-100 font-bold' : 'opacity-50 font-normal',
-                    'transition-all hover:opacity-100 hover:bg-neutral hover:text-white px-2 py-1 rounded-md cursor-pointer']"
+                    'transition-all hover:opacity-100 hover:bg-neutral dark:hover:bg-base-dark-400 hover:text-white px-2 py-1 rounded-md cursor-pointer']"
                    @click="version = v">
                     {{ v }}
                 </p>

diff --git a/frontend/src/components/dependencies/Header.vue b/frontend/src/components/dependencies/Header.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="pb-2 text-base-content font-extrabold text-3xl">
+    <div class="pb-2 text-base-content dark:text-base-dark-content font-extrabold text-3xl">
         <slot/>
     </div>
     <div class="divider mt-0 mb-0"/>

diff --git a/frontend/src/components/dependencies/tab/CodeLanguageTab.vue b/frontend/src/components/dependencies/tab/CodeLanguageTab.vue
@@ -1,5 +1,6 @@
 <template>
-    <button class="tab capitalize pl-2" :class="codeLanguage === language ? 'tab-active' : ''"
+    <button class="h-8 text-sm leading-8 select-none pr-4 capitalize pl-2 transition-opacity"
+            :class="codeLanguage === language ? 'cursor-default' : 'cursor-pointer opacity-50 hover:opacity-100'"
             @click="codeLanguage = language">
         {{ language.toLowerCase() }}
     </button>

diff --git a/frontend/src/components/home/HomeDependencies.vue b/frontend/src/components/home/HomeDependencies.vue
@@ -1,6 +1,7 @@
 <template>
     <div class="flex gap-x-4 gap-y-3 flex-wrap">
-        <a class="px-4 py-2 cursor-pointer border-2 border-base-content font-medium rounded-xl whitespace-nowrap hover:scale-110 transition-all" 
+        <a class="px-4 py-2 cursor-pointer border-2 border-base-content dark:border-base-dark-content
+        font-medium rounded-xl whitespace-nowrap hover:scale-110 transition-all" 
                v-for="version in versions.slice(0, 16)" :href="select(version[0], version[1])">{{ version[0] }} {{ version[1] }}</a>
     </div>
 </template>

diff --git a/frontend/src/components/home/HomeMappings.vue b/frontend/src/components/home/HomeMappings.vue
@@ -3,7 +3,8 @@
         <div v-for="vers in versions">
             <div class="font-bold text-xl mb-2">{{ namespaceLocalizations[vers[0][0]] ?? vers[0][0] }}</div>
             <div class="flex gap-x-4 gap-y-3 flex-wrap">
-                <a class="px-4 py-2 cursor-pointer border-2 border-base-content font-medium rounded-xl whitespace-nowrap hover:scale-110 transition-all"
+                <a class="px-4 py-2 cursor-pointer border-2 border-base-content dark:border-base-dark-content
+                 font-medium rounded-xl whitespace-nowrap hover:scale-110 transition-all"
                      v-for="version in vers.slice(0, 16)" :href="select(version[0], version[1])">{{ version[1] }}
                 </a>
             </div>

diff --git a/frontend/src/components/mappings/EntryDetails.vue b/frontend/src/components/mappings/EntryDetails.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="text-base whitespace-nowrap flex py-1">
         <span class="pr-2">{{ title }}</span>
-        <div class="px-2 rounded bg-base-300 overflow-x-auto" v-if="code">
+        <div class="px-2 rounded bg-base-300 dark:bg-base-dark-300 overflow-x-auto" v-if="code">
             <pre><code class="break-all whitespace-pre text-xs"><slot/></code></pre>
         </div>
         <span v-else><slot/></span>