feat: initial tests with darkmode

Author: FelipeO16

docs/app/components/ShowComponent.vue

@@ -1,15 +1,24 @@
 <template>
-  <div class="border-2 border-primary-light-500 rounded-lg w-72 h-48 hover:scale-110 transition-all duration-300 relative">
-    <div class="absolute top-2 right-2">
+  <div
+    :class="{
+      dark: isDarkMode,
+    }"
+    class="border-2 border-primary-light-500 rounded-lg w-72 h-48 hover:scale-110 transition-all duration-300 relative"
+  >
+    <div class="absolute top-2 right-2 cursor-pointer dark:text-primary-light-50">
       <PUIcon
-        v-if="isNew"
-        name="star"
+        name="brightness"
+        @click="toogleDarkMode"
       />
     </div>
-    <div class="component-example p-4 flex justify-center items-center h-36 ">
+    <div class="component-example p-4 flex justify-center items-center h-36 dark:bg-primary-light-500">
       <slot name="component" />
     </div>
-    <div class="component-name text-lg font-bold flex h-12 justify-center items-center w-full border-t-2 border-primary-light-500">
+    <div class="component-name text-lg font-bold flex h-12 gap-4 justify-center items-center w-full border-t-2 border-primary-light-500">
+      <PUIcon
+        v-if="isNew"
+        name="star-solid"
+      />
       <slot name="component-name" />
     </div>
   </div>
@@ -19,4 +28,10 @@
 defineProps<{
   isNew?: boolean
 }>()
+
+const isDarkMode = ref(false)
+
+const toogleDarkMode = () => {
+  isDarkMode.value = !isDarkMode.value
+}
 </script>

src/runtime/components/PUButton.vue

@@ -74,11 +74,11 @@ buttonClass.value.push(
 }
 
 .pu-button.pu-button--normal {
-  @apply bg-primary-light-500 rounded-lg  text-primary-light-50;
+  @apply bg-primary-light-500 rounded-lg  text-primary-light-50 dark:bg-primary-light-50 dark:text-primary-light-500;
 }
 
 .pu-button.pu-button--outlined {
-  @apply bg-transparent border-2 border-primary-light-500 text-primary-light-500;
+  @apply bg-transparent border-2 border-primary-light-500 text-primary-light-500 dark:border-primary-light-50 dark:text-primary-light-50;
 }
 
 .pu-button.pu-button--ghost {

src/runtime/components/PUIcon.vue

@@ -2163,6 +2163,11 @@ const iconPaths: Record<string, {
       d: 'M15 14H9C8.73479 14 8.48043 14.1054 8.2929 14.2929C8.10536 14.4804 8 14.7348 8 15C8 15.2652 8.10536 15.5196 8.2929 15.7071C8.48043 15.8946 8.73479 16 9 16H15C15.2652 16 15.5196 15.8946 15.7071 15.7071C15.8946 15.5196 16 15.2652 16 15C16 14.7348 15.8946 14.4804 15.7071 14.2929C15.5196 14.1054 15.2652 14 15 14ZM9.08 12.21L10.58 10.71C10.6737 10.617 10.7481 10.5064 10.7989 10.3846C10.8497 10.2627 10.8758 10.132 10.8758 10C10.8758 9.86799 10.8497 9.73728 10.7989 9.61542C10.7481 9.49356 10.6737 9.38296 10.58 9.29L9.08 7.79C8.8917 7.6017 8.63631 7.49591 8.37 7.49591C8.1037 7.49591 7.84831 7.6017 7.66 7.79C7.4717 7.9783 7.36591 8.2337 7.36591 8.5C7.36591 8.7663 7.4717 9.0217 7.66 9.21L8.46 10L7.66 10.79C7.56628 10.883 7.49188 10.9936 7.44111 11.1154C7.39034 11.2373 7.36421 11.368 7.36421 11.5C7.36421 11.632 7.39034 11.7627 7.44111 11.8846C7.49188 12.0064 7.56628 12.117 7.66 12.21C7.75344 12.3027 7.86426 12.376 7.9861 12.4258C8.10794 12.4755 8.2384 12.5008 8.37 12.5C8.50161 12.5008 8.63207 12.4755 8.75391 12.4258C8.87575 12.376 8.98656 12.3027 9.08 12.21ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20ZM16.58 7.79C16.487 7.69627 16.3764 7.62188 16.2546 7.57111C16.1327 7.52034 16.002 7.4942 15.87 7.4942C15.738 7.4942 15.6073 7.52034 15.4854 7.57111C15.3636 7.62188 15.253 7.69627 15.16 7.79L13.66 9.29C13.5663 9.38296 13.4919 9.49356 13.4411 9.61542C13.3903 9.73728 13.3642 9.86799 13.3642 10C13.3642 10.132 13.3903 10.2627 13.4411 10.3846C13.4919 10.5064 13.5663 10.617 13.66 10.71L15.16 12.21C15.2534 12.3027 15.3643 12.376 15.4861 12.4258C15.6079 12.4755 15.7384 12.5008 15.87 12.5C16.0016 12.5008 16.1321 12.4755 16.2539 12.4258C16.3757 12.376 16.4866 12.3027 16.58 12.21C16.6737 12.117 16.7481 12.0064 16.7989 11.8846C16.8497 11.7627 16.8758 11.632 16.8758 11.5C16.8758 11.368 16.8497 11.2373 16.7989 11.1154C16.7481 10.9936 16.6737 10.883 16.58 10.79L15.79 10L16.58 9.21C16.6737 9.11704 16.7481 9.00644 16.7989 8.88458C16.8497 8.76272 16.8758 8.63201 16.8758 8.5C16.8758 8.36799 16.8497 8.23728 16.7989 8.11542C16.7481 7.99356 16.6737 7.88296 16.58 7.79Z',
     },
   ],
+  'star-solid': [
+    {
+      d: 'M10.8575 2.55485C11.2144 1.4444 12.7856 1.4444 13.1425 2.55486L15.0689 8.54915H21.3393C22.4986 8.54915 22.984 10.03 22.0497 10.7163L16.9656 14.4509L18.9006 20.4718C19.2566 21.5797 17.9856 22.495 17.0477 21.8061L12 18.0983L6.95229 21.8061C6.01442 22.495 4.74339 21.5797 5.09944 20.4718L7.03444 14.4509L1.95028 10.7163C1.01597 10.03 1.5014 8.54915 2.66068 8.54915H8.93112L10.8575 2.55485Z',
+    },
+  ],
   'star-half-alt': [
     {
       d: 'M12 18.0982L6.9523 21.806C6.01443 22.4949 4.74339 21.5796 5.09945 20.4717L7.03445 14.4508L1.95028 10.7162C1.01598 10.0299 1.5014 8.54906 2.66068 8.54906H8.93112L10.8576 2.55476C11.2144 1.44431 12.7856 1.44431 13.1425 2.55477L15.0689 8.54906H21.3393C22.4986 8.54906 22.984 10.0299 22.0497 10.7162L16.9656 14.4508L18.9006 20.4717C19.2566 21.5796 17.9856 22.4949 17.0477 21.806L12 18.0982ZM13.6109 10.5491H18.8989L14.6208 13.6915L16.2406 18.7315L12 15.6166V5.5366L13.6109 10.5491Z',