✨ Enhance accessibility by improving text opacity and contrast in platform switcher component

Author: HassanZahirnia

resources/css/app.css

@@ -46,11 +46,11 @@ nav > ul > li > ul {
         @apply font-normal;
 
         & a {
-            @apply ml-3 block w-full border-l py-1.5 pl-3 transition-all duration-200 dark:border-white/10;
+            @apply ml-3 block w-full border-l-[1.5px] py-1.5 pl-3 transition-all duration-200 dark:border-white/10;
         }
 
         &.exact-active a {
-            @apply border-violet-400 text-violet-400 dark:border-violet-400/90;
+            @apply border-violet-400 font-medium text-violet-800/80 dark:border-violet-400/90 dark:text-white;
         }
 
         &:hover a {
@@ -139,7 +139,7 @@ nav > ul > li > ul {
 
 :root {
     --docsearch-container-background: rgba(0, 0, 0, 0.5);
-    --docsearch-primary-color: #00aaa6;
+    --docsearch-primary-color: #a78bfa;
 }
 
 [id='docsearch'] {

resources/views/components/platform-switcher.blade.php

@@ -21,7 +21,7 @@ class="space-y-1.5"
             {{-- Title --}}
             <div class="text-sm">Choose your platform</div>
             {{-- Description --}}
-            <div class="text-xs text-gray-500">
+            <div class="text-xs opacity-60">
                 Switch between mobile and desktop documentation.
             </div>
         </div>
@@ -42,7 +42,7 @@ class="flex items-center gap-3 text-xs"
             @class([
                 'flex w-1/2 items-center justify-center gap-x-1.5 gap-y-1 rounded-xl transition duration-300 ease-in-out',
                 'bg-white dark:bg-gray-900' => ! $isMobile,
-                'hover:bg-zinc-200/50 dark:text-gray-500 dark:hover:bg-gray-900/80 dark:hover:text-white' => $isMobile,
+                'hover:bg-zinc-200/50 dark:text-gray-400/80 dark:hover:bg-gray-900/80 dark:hover:text-white' => $isMobile,
             ])
             :class="{ 'flex-col p-2.5': !scrolled, 'flex-row p-2': scrolled }"
         >
@@ -60,7 +60,7 @@ class="flex items-center gap-3 text-xs"
         {{-- Center icon --}}
         <svg
             xmlns="http://www.w3.org/2000/svg"
-            class="size-6 dark:text-gray-500"
+            class="size-6 dark:text-gray-400/80"
             viewBox="0 0 256 256"
         >
             <path
@@ -75,7 +75,7 @@ class="size-6 dark:text-gray-500"
             @class([
                 'flex w-1/2 items-center justify-center gap-x-1.5 gap-y-1 rounded-xl transition duration-300 ease-in-out',
                 'bg-white dark:bg-gray-900' => $isMobile,
-                'hover:bg-zinc-200/50 dark:text-gray-500 dark:hover:bg-gray-900/80 dark:hover:text-white' => ! $isMobile,
+                'hover:bg-zinc-200/50 dark:text-gray-400/80 dark:hover:bg-gray-900/80 dark:hover:text-white' => ! $isMobile,
             ])
             :class="{ 'flex-col p-2.5': !scrolled, 'flex-row p-2': scrolled }"
         >