feat(components): initial darkmode

Author: FelipeO16

docs/app/components/AllComponents.vue

@@ -1,5 +1,15 @@
 <template>
   <div class="flex gap-4 flex-wrap mx-4">
+    <PUCompare>
+      <template #left>
+        <img src="/bg.svg" class="w-full h-full object-cover" />
+      </template>
+      <template #right>
+        <img src="/bg.svg" class="w-full h-full object-cover" />
+      </template>
+    </PUCompare>
+
+
     <ShowComponent is-new>
       <template #component>
         <div class="flex w-48 relative">

docs/app/components/AsideMenu.vue

@@ -27,6 +27,19 @@ const items: Items[] = [
     links: [
       { name: 'PUAccordion', link: '/docs/components/pu-accordion' },
       { name: 'PUAvatar', link: '/docs/components/pu-avatar', new: true },
+      { name: 'PUAudio', link: '/docs/components/pu-audio', new: true },
+      // { name: 'PUChip', link: '/docs/components/pu-chip' },
+      // { name: 'PUCollapsible', link: '/docs/components/pu-collapsible' },
+      // { name: 'PUDataTable', link: '/docs/components/pu-data-table', new: true },
+      // { name: 'PUDropdown', link: '/docs/components/pu-dropdown' },
+      // { name: 'PUInputNumber', link: '/docs/components/pu-input-number' },
+      // { name: 'PUList', link: '/docs/components/pu-list' },
+      // { name: 'PUMenu', link: '/docs/components/pu-menu' },
+      // { name: 'PUPagination', link: '/docs/components/pu-pagination' },
+      // { name: 'PURating', link: '/docs/components/pu-rating' },
+      // { name: 'PUSearch', link: '/docs/components/pu-search' },
+      // { name: 'PUSelectGroup', link: '/docs/components/pu-select-group' },
+
       { name: 'PUBadge', link: '/docs/components/pu-badge' },
       { name: 'PUButtonIcon', link: '/docs/components/pu-button-icon' },
       { name: 'PUButton', link: '/docs/components/pu-button' },

docs/app/components/CodeBlock.vue

@@ -18,7 +18,7 @@
     <div class="p-6 bg-gradient-to-b from-white to-gray-50 rounded-xl shadow-lg h-auto">
       <div
         v-if="activeTab === 'Preview'"
-        class="w-full h-full flex justify-center items-center gap-2"
+        class="w-full h-full flex justify-center items-center gap-2 p-4 bg-primary-light-500 dark"
       >
         <slot name="preview" />
       </div>

docs/app/components/HeaderUi.vue

@@ -18,8 +18,8 @@
         id="nav-mobile"
         class="right hide-on-med-and-down flex gap-4 mt-4"
       >
-        <li><a href="/docs"><PUButton flavor="outlined">Docs</PUButton></a></li>
-        <li><a href="https://github.com/paper-kit/nuxt"><PUButton flavor="outlined">Github</PUButton></a></li>
+        <li><a href="/docs"><PUButton flavor="outlined" icon-right="file-alt">docs</PUButton></a></li>
+        <li><a href="https://github.com/paper-kit/nuxt"><PUButton flavor="outlined" icon-right="github-alt">github</PUButton></a></li>
       </ul>
     </div>
   </div>

docs/app/components/paper/ShowAccordion.vue

@@ -20,7 +20,7 @@
         <div class="w-72">
           <PUAccordion :items="demoItems">
             <template #content>
-              <div class="p-4 bg-gray-50 rounded">
+              <div class="p-4 bg-gray-50 rounded dark:text-primary-light-500">
                 Custom content area with additional styling
               </div>
             </template>
@@ -39,7 +39,7 @@
             class="w-full"
           >
             <template #header="{ item, isOpen }">
-              <h3 :class="{ 'text-[#E12B56]': isOpen, 'text-gray-800': !isOpen }">
+              <h3 :class="{ 'text-[#E12B56]': isOpen, 'text-gray-800 dark:text-white': !isOpen }">
                 {{ item.title }}
               </h3>
             </template>

docs/app/components/paper/ShowInput.vue

@@ -17,7 +17,7 @@
         <PUInput
           v-model="searchValue"
           icon-left="search"
-          icon-right="cancel"
+          icon-right="close-x-exit"
           placeholder="Search..."
         />
       </template>

docs/content/docs/components/pu-accordion.md

@@ -58,7 +58,7 @@ Basic Usage
 <template>
   <PUAccordion :items="items">
     <template #content="{ item }">
-      <div class="custom-content">
+      <div class="p-4 bg-gray-50 rounded dark:text-primary-light-500">
         <PUIcon name="info" />
         {{ item.content }}
       </div>

src/runtime/components/PUAccordion.vue

@@ -65,8 +65,8 @@ const toggle = (index: number) => {
 
 <style scoped>
 .accordion {
-  @apply p-1 bg-white shadow-sm;
-  @apply border-2 border-primary-light-500 rounded-lg;
+  @apply p-1 bg-white dark:bg-primary-light-500 shadow-sm;
+  @apply border-2 border-primary-light-500 dark:border-white rounded-lg;
   @apply text-base;
 }
 
@@ -79,19 +79,19 @@ const toggle = (index: number) => {
 }
 
 .default-header {
-  @apply text-gray-800 text-lg;
+  @apply text-gray-800 dark:text-white text-lg;
 }
 
 .icon {
-  @apply transform transition-transform duration-200;
+  @apply transform transition-transform duration-200 dark:text-white;;
 }
 
 .accordion-content {
-  @apply p-2 text-gray-700 text-base;
+  @apply p-2 text-gray-700 dark:text-gray-50 text-base;
 }
 
 .divider {
-  @apply border-t border-primary-light-500/10 my-2;
+  @apply border-t border-primary-light-500/10 dark:border-white/50 my-2;
 }
 
 /* Transitions */

src/runtime/components/PUAudio.vue

@@ -66,7 +66,7 @@ watch(isMuted, (newVal) => {
 </script>
 
 <template>
-  <div class="relative w-full max-w-lg border-2 border-primary-light-500 rounded-lg shadow-lg p-4 flex items-center gap-3 bg-white">
+  <div class="relative w-full max-w-lg border-2 border-primary-light-500 dark:border-white rounded-lg shadow-lg p-4 flex items-center gap-3 bg-white dark:bg-primary-light-500">
     <audio
       ref="audioRef"
       :src="src"
@@ -76,32 +76,32 @@ watch(isMuted, (newVal) => {
     <button @click="togglePlay">
       <PUIcon
         :name="isPlaying ? 'pause' : 'play'"
-        class="w-8 h-8 text-primary-light-500"
+        class="w-8 h-8 text-primary-light-500 dark:text-white"
       />
     </button>
 
     <input
       type="range"
-      class="flex-1 accent-primary-light-500"
+      class="flex-1 accent-primary-light-500 dark:accent-white"
       min="0"
       :max="duration"
       :value="currentTime"
       @input="seek"
     >
 
-    <span class="text-md font-bold text-primary-light-600 font-patrick">
+    <span class="text-md font-bold text-primary-light-600 dark:text-gray-50 font-patrick">
       {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
     </span>
 
     <button @click="toggleMute">
       <PUIcon
         :name="isMuted ? 'volume-mute' : 'volume'"
-        class="w-6 h-6 text-primary-light-500"
+        class="w-6 h-6 text-primary-light-500 dark:text-white"
       />
     </button>
     <input
       type="range"
-      class="w-16 accent-primary-light-500"
+      class="w-16 accent-primary-light-500 dark:accent-white"
       min="0"
       max="1"
       step="0.1"

src/runtime/components/PUAvatar.vue

@@ -67,6 +67,6 @@ const shapeClass = computed(() => {
 
 <style scoped>
 div {
-  border: 2px solid black;
+  @apply border-2 border-primary-light-500 dark:border-primary-dark-500
 }
 </style>