fix: adjust icon opacity for improved visibility across light and dark themes

Author: yilanboy

resources/views/components/layouts/background.blade.php

@@ -27,69 +27,69 @@ class="absolute bottom-12 left-[3%] hidden flex-col gap-4 font-jetbrains-mono te
 
     <div
         aria-hidden="true"
-        class="absolute bottom-16 left-[1.5%] hidden h-[35vh] w-px bg-linear-to-t from-transparent via-zinc-300/40 to-transparent lg:block dark:via-zinc-700/40"
+        class="absolute bottom-16 left-[1.5%] hidden h-[35vh] w-px bg-linear-to-t from-transparent via-zinc-300/60 to-transparent lg:block dark:via-zinc-700/40"
     ></div>
 
     <div class="absolute top-[5vh] right-[20%] hidden lg:block">
-        <x-icons.livewire class="-rotate-6 size-20 text-zinc-300/40 dark:text-zinc-700/40" />
+        <x-icons.livewire class="-rotate-6 size-20 text-zinc-300/60 dark:text-zinc-700/40" />
     </div>
 
     <div class="absolute top-[6vh] right-[2%] hidden lg:block">
-        <x-icons.gunbash class="rotate-6 size-20 text-zinc-300/40 dark:text-zinc-700/40" />
+        <x-icons.gunbash class="rotate-6 size-20 text-zinc-300/60 dark:text-zinc-700/40" />
     </div>
 
     <div class="absolute top-[13vh] right-[11%] hidden lg:block">
-        <x-icons.svelte class="-rotate-12 size-20 text-zinc-300/40 dark:text-zinc-700/40" />
+        <x-icons.svelte class="-rotate-12 size-20 text-zinc-300/60 dark:text-zinc-700/40" />
     </div>
 
     <div class="absolute top-[25vh] right-[20%] hidden lg:block">
-        <x-icons.laravel class="rotate-12 size-20 text-zinc-300/40 dark:text-zinc-700/40" />
+        <x-icons.laravel class="rotate-12 size-20 text-zinc-300/60 dark:text-zinc-700/40" />
     </div>
 
     <div class="absolute top-[26vh] right-[2%] hidden lg:block">
         <x-icons.php
             class="-rotate-6 size-20"
-            :path-class-name="'fill-zinc-300/40 dark:fill-zinc-700/40'"
+            :path-class-name="'fill-zinc-300/60 dark:fill-zinc-700/40'"
         />
     </div>
 
     <div class="absolute top-[34vh] right-[11%] hidden lg:block">
-        <x-icons.github class="-rotate-12 size-20 text-zinc-300/40 dark:text-zinc-700/40" />
+        <x-icons.github class="-rotate-12 size-20 text-zinc-300/60 dark:text-zinc-700/40" />
     </div>
 
     <div class="absolute top-[45vh] right-[20%] hidden lg:block">
-        <x-icons.folder-open class="rotate-6 size-20 text-zinc-300/40 dark:text-zinc-700/40" />
+        <x-icons.folder-open class="rotate-6 size-20 text-zinc-300/60 dark:text-zinc-700/40" />
     </div>
 
     <div class="absolute top-[46vh] right-[2%] hidden lg:block">
-        <x-icons.docker class="-rotate-6 size-20 text-zinc-300/40 dark:text-zinc-700/40" />
+        <x-icons.docker class="-rotate-6 size-20 text-zinc-300/60 dark:text-zinc-700/40" />
     </div>
 
     <div class="absolute top-[55vh] right-[11%] hidden lg:block">
         <x-icons.typescript
             class="rotate-12 size-20"
-            :rect-class-name="'fill-zinc-300/40 dark:fill-zinc-700/40'"
+            :rect-class-name="'fill-zinc-300/60 dark:fill-zinc-700/40'"
             :path-class-name="'fill-zinc-200 dark:fill-zinc-900'"
         />
     </div>
 
     <div class="absolute top-[65vh] right-[20%] hidden lg:block">
-        <x-icons.rust class="rotate-12 size-20 text-zinc-300/40 dark:text-zinc-700/40" />
+        <x-icons.rust class="rotate-12 size-20 text-zinc-300/60 dark:text-zinc-700/40" />
     </div>
 
     <div class="absolute top-[66vh] right-[2%] hidden lg:block">
-        <x-icons.terraform class="-rotate-6 size-20 text-zinc-300/40 dark:text-zinc-700/40" />
+        <x-icons.terraform class="-rotate-6 size-20 text-zinc-300/60 dark:text-zinc-700/40" />
     </div>
 
     <div class="absolute top-[76vh] right-[11%] hidden lg:block">
-        <x-icons.cloud class="-rotate-12 size-20 text-zinc-300/40 dark:text-zinc-700/40" />
+        <x-icons.cloud class="-rotate-12 size-20 text-zinc-300/60 dark:text-zinc-700/40" />
     </div>
 
     <div class="absolute top-[85vh] right-[20%] hidden lg:block">
-        <x-icons.bug class="-rotate-6 size-20 text-zinc-300/40 dark:text-zinc-700/40" />
+        <x-icons.bug class="-rotate-6 size-20 text-zinc-300/60 dark:text-zinc-700/40" />
     </div>
 
     <div class="absolute top-[86vh] right-[2%] hidden lg:block">
-        <x-icons.floppy class="rotate-12 size-20 text-zinc-300/40 dark:text-zinc-700/40" />
+        <x-icons.floppy class="rotate-12 size-20 text-zinc-300/60 dark:text-zinc-700/40" />
     </div>
 </div>