✨ Update dark mode styles across various components for improved consistency

Author: HassanZahirnia

resources/views/components/alert-beta.blade.php

@@ -1,5 +1,5 @@
 <div
-    class="dark:bg-mirage relative z-0 mt-5 flex items-center gap-6 overflow-hidden rounded-2xl bg-yellow-50/50 px-6 py-5 ring-1 ring-black/5"
+    class="relative z-0 mt-5 flex items-center gap-6 overflow-hidden rounded-2xl bg-yellow-50/50 px-6 py-5 ring-1 ring-black/5 dark:bg-mirage"
     role="alert"
     aria-labelledby="beta-alert-title"
     aria-describedby="beta-alert-description"

resources/views/components/footer.blade.php

@@ -96,7 +96,7 @@ class="flex flex-wrap items-center justify-center gap-2.5 *:opacity-0"
         >
             <a
                 href="/newsletter"
-                class="dark:bg-mirage dark:hover:ring-cloud dark:hover:bg-haiti group relative z-0 flex items-center gap-6 overflow-hidden rounded-2xl bg-cyan-50/50 py-5 pl-6 pr-7 ring-1 ring-black/5 transition duration-300 ease-in-out hover:bg-cyan-50 hover:ring-black/10 md:max-w-lg"
+                class="group relative z-0 flex items-center gap-6 overflow-hidden rounded-2xl bg-cyan-50/50 py-5 pl-6 pr-7 ring-1 ring-black/5 transition duration-300 ease-in-out hover:bg-cyan-50 hover:ring-black/10 md:max-w-lg dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
             >
                 {{-- Decorative circle --}}
                 <div

resources/views/components/link-button.blade.php

@@ -1,6 +1,6 @@
 <a
     {{ $attributes }}
-    class="dark:bg-mirage dark:hover:ring-cloud dark:hover:bg-haiti grid w-full max-w-72 grid-cols-1 gap-0.5 rounded-xl bg-zinc-100/80 p-5 transition duration-300 ease-in-out hover:bg-zinc-200/60 dark:ring-1 dark:ring-transparent"
+    class="grid w-full max-w-72 grid-cols-1 gap-0.5 rounded-xl bg-zinc-100/80 p-5 transition duration-300 ease-in-out hover:bg-zinc-200/60 dark:bg-mirage dark:ring-1 dark:ring-transparent dark:hover:bg-haiti dark:hover:ring-cloud"
 >
     {{ $slot }}
 </a>

resources/views/components/mobile-pricing.blade.php

@@ -78,7 +78,7 @@ class="mt-10 grid grid-cols-[repeat(auto-fill,minmax(19rem,1fr))] items-start ga
     >
         {{-- Mini Plan --}}
         <div
-            class="dark:bg-mirage rounded-2xl bg-gray-100 p-7 opacity-0"
+            class="rounded-2xl bg-gray-100 p-7 opacity-0 dark:bg-mirage"
             aria-labelledby="pro-plan-heading"
         >
             {{-- Plan Name --}}
@@ -241,7 +241,7 @@ class="size-2.5 shrink-0 dark:opacity-70"
 
         {{-- Pro Plan --}}
         <div
-            class="dark:bg-mirage rounded-2xl bg-gray-100 p-7 opacity-0"
+            class="rounded-2xl bg-gray-100 p-7 opacity-0 dark:bg-mirage"
             aria-labelledby="teams-plan-heading"
         >
             {{-- Plan Name --}}

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

@@ -6,7 +6,7 @@
 
 <div
     {{ $attributes }}
-    class="dark:bg-mirage mx-1 mb-3 rounded-xl bg-zinc-100/80 transition-all duration-300 ease-in-out"
+    class="mx-1 mb-3 rounded-xl bg-zinc-100/80 transition-all duration-300 ease-in-out dark:bg-mirage"
     :class="{
         'pb-4 pl-4 pr-5 pt-5' : !scrolled,
         'pb-2 pl-2 pr-3 pt-3' : scrolled
@@ -49,7 +49,7 @@ class="flex items-center gap-3 text-xs"
             <div
                 @class([
                     'grid h-9 w-10 place-items-center rounded-lg',
-                    'dark:bg-haiti bg-blue-50 text-blue-500 dark:text-blue-400' => ! $isMobile,
+                    'bg-blue-50 text-blue-500 dark:bg-haiti dark:text-blue-400' => ! $isMobile,
                 ])
             >
                 <x-icons.pc class="size-6 shrink-0" />
@@ -82,7 +82,7 @@ class="size-6 dark:text-gray-400/80"
             <div
                 @class([
                     'grid h-9 w-10 place-items-center rounded-lg',
-                    'dark:bg-haiti bg-blue-50 text-blue-500 dark:text-blue-400' => $isMobile,
+                    'bg-blue-50 text-blue-500 dark:bg-haiti dark:text-blue-400' => $isMobile,
                 ])
             >
                 <x-icons.device-mobile-phone class="size-5 shrink-0" />

resources/views/components/sidebar-left-navigation.blade.php

@@ -1,5 +1,5 @@
 <aside
-    class="sticky top-20 hidden max-h-[calc(100dvh-8rem)] w-[20rem] shrink-0 overflow-auto pr-5 pt-4 lg:block"
+    class="sticky top-20 hidden max-h-[calc(100dvh-8rem)] w-[19rem] shrink-0 overflow-auto pr-5 pt-4 lg:block"
 >
     <nav class="relative flex flex-1 flex-col pb-5">
         <x-platform-switcher />
@@ -16,7 +16,7 @@ class="sticky top-20 hidden max-h-[calc(100dvh-8rem)] w-[20rem] shrink-0 overflo
     x-transition:leave="transition duration-150 ease-in"
     x-transition:leave-start="translate-y-0 opacity-100"
     x-transition:leave-end="translate-y-1 opacity-0"
-    class="dark:bg-mirage fixed left-0 top-20 z-40 h-screen w-full overflow-y-auto bg-white px-4 pb-16 pt-10"
+    class="fixed left-0 top-20 z-40 h-screen w-full overflow-y-auto bg-white px-4 pb-16 pt-10 dark:bg-mirage"
 >
     <x-platform-switcher />
 

resources/views/components/social-networks-all.blade.php

@@ -2,7 +2,7 @@
     <a
         href="https://bsky.app/profile/nativephp.bsky.social"
         title="Bluesky"
-        class="dark:bg-mirage dark:hover:bg-haiti group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70"
+        class="group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70 dark:bg-mirage dark:hover:bg-haiti"
     >
         <x-icons.bluesky
             class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-400 dark:text-white"
@@ -14,7 +14,7 @@ class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-
     <a
         href="https://discord.gg/X62tWNStZK"
         title="Go to discord server"
-        class="dark:bg-mirage dark:hover:bg-haiti group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70"
+        class="group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70 dark:bg-mirage dark:hover:bg-haiti"
     >
         <x-icons.discord
             class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-400 dark:text-white"
@@ -26,7 +26,7 @@ class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-
     <a
         href="https://opencollective.com/nativephp"
         title="NativePHP on Open Collective"
-        class="dark:bg-mirage dark:hover:bg-haiti group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70"
+        class="group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70 dark:bg-mirage dark:hover:bg-haiti"
     >
         <x-icons.opencollective
             class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-400 dark:text-white"
@@ -38,7 +38,7 @@ class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-
     <a
         href="https://github.com/nativephp"
         title="Source code of NativePHP"
-        class="dark:bg-mirage dark:hover:bg-haiti group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70"
+        class="group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70 dark:bg-mirage dark:hover:bg-haiti"
     >
         <x-icons.github
             class="size-[1.1rem] transition duration-200 group-hover:fill-violet-400 dark:fill-white"
@@ -50,7 +50,7 @@ class="size-[1.1rem] transition duration-200 group-hover:fill-violet-400 dark:fi
     <a
         href="https://pinkary.com/@nativephp"
         title="NativePHP on Pinkary"
-        class="dark:bg-mirage dark:hover:bg-haiti group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70"
+        class="group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70 dark:bg-mirage dark:hover:bg-haiti"
     >
         <x-icons.pinkary
             class="size-[1.6rem] text-black transition duration-200 group-hover:text-violet-400 dark:text-white"
@@ -62,7 +62,7 @@ class="size-[1.6rem] text-black transition duration-200 group-hover:text-violet-
     <a
         href="https://www.linkedin.com/company/nativephp/"
         title="NativePHP on LinkedIn"
-        class="dark:bg-mirage dark:hover:bg-haiti group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70"
+        class="group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70 dark:bg-mirage dark:hover:bg-haiti"
     >
         <x-icons.linkedin
             class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-400 dark:text-white"

resources/views/components/sponsors/lists/docs/corporate-sponsors.blade.php

@@ -1,6 +1,6 @@
 <a
     href="https://www.redgalaxy.co.uk/"
-    class="dark:bg-mirage dark:hover:ring-cloud dark:hover:bg-haiti inline-grid h-16 w-40 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 will-change-transform hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60"
+    class="inline-grid h-16 w-40 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 will-change-transform hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
     title="Learn more about RedGalaxy"
     aria-label="Visit RedGalaxy website"
     rel="noopener"
@@ -14,7 +14,7 @@ class="h-auto max-h-8 max-w-full"
 
 <a
     href="https://sevalla.com/?utm_source=nativephp&utm_medium=Referral&utm_campaign=homepage"
-    class="dark:bg-mirage dark:hover:ring-cloud dark:hover:bg-haiti inline-grid h-16 w-40 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 will-change-transform hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60"
+    class="inline-grid h-16 w-40 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 will-change-transform hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
     title="Learn more about Sevalla"
     aria-label="Visit Sevalla website"
     rel="noopener"
@@ -42,7 +42,7 @@ class="block h-auto max-h-8 max-w-full fill-[#042340] dark:fill-white"
 
 <a
     href="https://www.kaashosting.nl/?lang=en"
-    class="dark:bg-mirage dark:hover:ring-cloud dark:hover:bg-haiti inline-grid h-16 w-40 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 will-change-transform hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60"
+    class="inline-grid h-16 w-40 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 will-change-transform hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
     title="Learn more about KaasHosting"
     aria-label="Visit KaasHosting website"
     rel="noopener"
@@ -56,7 +56,7 @@ class="block h-auto max-h-8 max-w-full fill-[#042340] dark:fill-white"
 
 <a
     href="https://borah.digital/"
-    class="dark:bg-mirage dark:hover:ring-cloud dark:hover:bg-haiti inline-grid h-16 w-40 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 will-change-transform hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60"
+    class="inline-grid h-16 w-40 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 will-change-transform hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
     title="Learn more about Borah Digital Labs"
     aria-label="Visit Borah Digital Labs website"
     rel="noopener"

resources/views/components/sponsors/lists/docs/featured-sponsors.blade.php

@@ -2,7 +2,7 @@
     href="https://beyondco.de/?utm_source=nativephp&utm_medium=logo&utm_campaign=nativephp"
     title="Learn more about BeyondCode"
     aria-label="Visit BeyondCode website"
-    class="dark:bg-mirage dark:hover:ring-cloud dark:hover:bg-haiti inline-grid h-16 w-40 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60"
+    class="inline-grid h-16 w-40 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
     rel="noopener sponsored"
 >
     <img
@@ -24,7 +24,7 @@ class="hidden h-auto max-h-8 max-w-full dark:block"
     href="https://laradevs.com/?ref=nativephp"
     title="Learn more about Laradevs"
     aria-label="Visit Laradevs website"
-    class="dark:bg-mirage dark:hover:ring-cloud dark:hover:bg-haiti inline-grid h-16 w-40 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60"
+    class="inline-grid h-16 w-40 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
     rel="noopener sponsored"
 >
     <x-sponsors.logos.laradevs

resources/views/components/sponsors/lists/home/corporate-sponsors.blade.php

@@ -4,7 +4,7 @@ class="opacity-0"
 >
     <a
         href="https://www.redgalaxy.co.uk/"
-        class="dark:bg-mirage dark:hover:ring-cloud dark:hover:bg-haiti inline-grid h-32 w-60 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60"
+        class="inline-grid h-32 w-60 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
         title="Learn more about RedGalaxy"
         aria-label="Visit RedGalaxy website"
         rel="noopener"
@@ -24,7 +24,7 @@ class="opacity-0"
 >
     <a
         href="https://sevalla.com/?utm_source=nativephp&utm_medium=Referral&utm_campaign=homepage"
-        class="dark:bg-mirage dark:hover:ring-cloud dark:hover:bg-haiti inline-grid h-32 w-60 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60"
+        class="inline-grid h-32 w-60 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
         title="Learn more about Sevalla"
         aria-label="Visit Sevalla website"
         rel="noopener"
@@ -61,7 +61,7 @@ class="opacity-0"
 >
     <a
         href="https://www.kaashosting.nl/?lang=en"
-        class="dark:bg-mirage dark:hover:ring-cloud dark:hover:bg-haiti inline-grid h-32 w-60 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60"
+        class="inline-grid h-32 w-60 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
         title="Learn more about KaasHosting"
         aria-label="Visit KaasHosting website"
         rel="noopener"
@@ -81,7 +81,7 @@ class="opacity-0"
 >
     <a
         href="https://borah.digital/"
-        class="dark:bg-mirage dark:hover:ring-cloud dark:hover:bg-haiti inline-grid h-32 w-60 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60"
+        class="inline-grid h-32 w-60 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
         title="Learn more about Borah Digital Labs"
         aria-label="Visit Borah Digital Labs website"
         rel="noopener"