From 92a1bfba50f2b7f9aa9e9af0b4b1f9724cae1e26 Mon Sep 17 00:00:00 2001
From: Aditya Chandra <aditchndr44@gmail.com>
Date: Sat, 14 Sep 2024 15:28:59 +0700
Subject: [PATCH 1/9] added(ui): theme-switch in navigation

---
 resources/js/app.js                          |  3 +
 resources/js/theme-switch.js                 | 61 ++++++++++++++++++++
 resources/views/layouts/navigation.blade.php | 10 ++++
 tailwind.config.js                           |  2 +
 4 files changed, 76 insertions(+)
 create mode 100644 resources/js/theme-switch.js

diff --git a/resources/js/app.js b/resources/js/app.js
index a782cf3c0..c2b0adb7f 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -64,4 +64,7 @@ Alpine.data('bookmarkButton', bookmarkButton);
 import { viewCreate } from './view-cerate.js';
 Alpine.data('viewCreate', viewCreate);
 
+import { themeSwitch } from './theme-switch.js';
+Alpine.data('themeSwitch', themeSwitch);
+
 Livewire.start()
diff --git a/resources/js/theme-switch.js b/resources/js/theme-switch.js
new file mode 100644
index 000000000..504eee71e
--- /dev/null
+++ b/resources/js/theme-switch.js
@@ -0,0 +1,61 @@
+const themeSwitch = () => ({
+    
+    theme: 'dark', // default theme
+
+    availableModes: ['dark', 'light', 'system'],
+
+    modeIndex: 0,
+
+    init() {
+        const currentTheme = localStorage.getItem('theme') || this.theme
+
+        this.modeIndex = this.availableModes.indexOf(currentTheme)
+
+        this.setTheme(currentTheme)
+    },
+
+    setTheme(theme) {
+        this.theme = theme
+        localStorage.setItem('theme', theme)
+
+        if (theme === 'dark') {
+            this.setDarkMode()
+            return
+        }
+
+        if (theme === 'light') {
+            this.setLightMode()
+            return
+        }
+
+        this.setSystemMode()
+    },
+
+    setLightMode() {
+        document.documentElement.classList.remove('dark')
+        document.documentElement.classList.add(this.theme)
+    },
+
+    setDarkMode() {
+        document.documentElement.classList.remove('light')
+        document.documentElement.classList.add(this.theme)
+    },
+
+    setSystemMode() {
+        document.documentElement.classList.remove('dark', 'light')
+    },
+
+    toggleTheme() {
+        const newModeIndex = (this.modeIndex + 1) % 3
+        
+        this.modeIndex = newModeIndex
+        this.setTheme(this.availableModes[newModeIndex])
+    },
+
+    toggleThemeButtonText() {
+        return this.theme.charAt(0).toUpperCase() + this.theme.slice(1)
+    }
+
+})
+
+export { themeSwitch }
\ No newline at end of file
diff --git a/resources/views/layouts/navigation.blade.php b/resources/views/layouts/navigation.blade.php
index cbf478df4..050cb93b7 100644
--- a/resources/views/layouts/navigation.blade.php
+++ b/resources/views/layouts/navigation.blade.php
@@ -98,6 +98,16 @@ class="inline-flex items-center rounded-md border border-transparent bg-slate-90
                     </x-slot>
 
                     <x-slot name="content">
+                        <x-dropdown-button x-data="themeSwitch()" @click="toggleTheme" class="text-sm text-slate-400">
+                            <div class="flex flex-row items-center justify-between">
+                                <span x-text="toggleThemeButtonText"></span>
+                                <span class="mr-2">
+                                    <x-heroicon-o-moon x-show="theme == 'dark'" class="h-4 w-4"/>
+                                    <x-heroicon-o-sun x-show="theme == 'light'" class="h-4 w-4"/>
+                                    <x-heroicon-o-computer-desktop x-show="theme == 'system'" class="h-4 w-4"/>
+                                </span>
+                            </div>
+                        </x-dropdown-button>
                         <x-dropdown-link :href="route('about')">
                             {{ __('About') }}
                         </x-dropdown-link>
diff --git a/tailwind.config.js b/tailwind.config.js
index 2bbd5c800..e34dd8b9a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,6 +12,8 @@ export default {
         "./resources/js/**/*.js",
     ],
 
+    darkMode: 'selector',
+
     theme: {
         extend: {
             fontFamily: {

From 17d2c5d1ed5d19b02b01e9de5f989b8f51661196 Mon Sep 17 00:00:00 2001
From: Aditya Chandra <aditchndr44@gmail.com>
Date: Sat, 14 Sep 2024 16:16:26 +0700
Subject: [PATCH 2/9] chore: take out 'system' in available modes

---
 resources/js/theme-switch.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/theme-switch.js b/resources/js/theme-switch.js
index 504eee71e..b2716f435 100644
--- a/resources/js/theme-switch.js
+++ b/resources/js/theme-switch.js
@@ -2,7 +2,7 @@ const themeSwitch = () => ({
     
     theme: 'dark', // default theme
 
-    availableModes: ['dark', 'light', 'system'],
+    availableModes: ['dark', 'light'], // e.g. system
 
     modeIndex: 0,
 
@@ -46,7 +46,7 @@ const themeSwitch = () => ({
     },
 
     toggleTheme() {
-        const newModeIndex = (this.modeIndex + 1) % 3
+        const newModeIndex = (this.modeIndex + 1) % this.availableModes.length
         
         this.modeIndex = newModeIndex
         this.setTheme(this.availableModes[newModeIndex])

From 7dcf8f2c0b54699a8af5eb85880e6b27a06b22af Mon Sep 17 00:00:00 2001
From: Aditya Chandra <aditchndr44@gmail.com>
Date: Sat, 14 Sep 2024 16:20:32 +0700
Subject: [PATCH 3/9] update: dark mode in app layouts, navigation, and footer

---
 .../components/dropdown-button.blade.php      |  2 +-
 .../views/components/dropdown-link.blade.php  |  2 +-
 resources/views/components/dropdown.blade.php |  2 +-
 resources/views/components/footer.blade.php   | 20 +++++------
 .../views/components/image-lightbox.blade.php |  4 +--
 resources/views/layouts/app.blade.php         |  4 +--
 resources/views/layouts/navigation.blade.php  | 34 +++++++++----------
 7 files changed, 33 insertions(+), 35 deletions(-)

diff --git a/resources/views/components/dropdown-button.blade.php b/resources/views/components/dropdown-button.blade.php
index 77756f9d0..31409236f 100644
--- a/resources/views/components/dropdown-button.blade.php
+++ b/resources/views/components/dropdown-button.blade.php
@@ -1,3 +1,3 @@
-<button {{ $attributes->merge(['class' => 'block w-full px-4 py-2 text-start text-sm leading-5 text-slate-400 hover:bg-slate-800 transition duration-150 ease-in-out']) }}>
+<button {{ $attributes->merge(['class' => 'block w-full px-4 py-2 text-start text-sm leading-5 dark:text-slate-400 text-slate-600 dark:hover:bg-slate-800 hover:bg-slate-200 transition duration-150 ease-in-out']) }}>
     {{ $slot }}
 </button>
diff --git a/resources/views/components/dropdown-link.blade.php b/resources/views/components/dropdown-link.blade.php
index 7d48286ee..2a7a6d7eb 100644
--- a/resources/views/components/dropdown-link.blade.php
+++ b/resources/views/components/dropdown-link.blade.php
@@ -1,5 +1,5 @@
 <a
-    {{ $attributes->merge(['class' => 'block w-full px-4 py-2 text-start text-sm leading-5 text-slate-400 hover:bg-slate-800 transition duration-150 ease-in-out']) }}
+    {{ $attributes->merge(['class' => 'block w-full px-4 py-2 text-start text-sm leading-5 dark:text-slate-400 text-slate-600 dark:hover:bg-slate-800 hover:bg-slate-200 transition duration-150 ease-in-out']) }}
     wire:navigate
 >
     {{ $slot }}
diff --git a/resources/views/components/dropdown.blade.php b/resources/views/components/dropdown.blade.php
index 49411bec9..9b578774e 100644
--- a/resources/views/components/dropdown.blade.php
+++ b/resources/views/components/dropdown.blade.php
@@ -1,4 +1,4 @@
-@props(['align' => 'right', 'width' => '48', 'contentClasses' => 'bg-slate-900 py-1 text-slate-500', 'dropdownClasses' => ''])
+@props(['align' => 'right', 'width' => '48', 'contentClasses' => 'dark:bg-slate-900 bg-slate-100 dark:border-none border border-slate-100 py-1 text-slate-500', 'dropdownClasses' => ''])
 
 @php
     switch ($align) {
diff --git a/resources/views/components/footer.blade.php b/resources/views/components/footer.blade.php
index 569c9b75b..a82bfd499 100644
--- a/resources/views/components/footer.blade.php
+++ b/resources/views/components/footer.blade.php
@@ -1,4 +1,4 @@
-<footer class="border-t border-gray-800">
+<footer class="border-t dark:border-gray-800 border-gray-300">
     <div class="mx-auto max-w-7xl overflow-hidden px-6 py-16 sm:py-24 lg:px-8">
         <nav
             class="-mb-6 columns-2 sm:flex sm:justify-center sm:space-x-12"
@@ -7,35 +7,35 @@ class="-mb-6 columns-2 sm:flex sm:justify-center sm:space-x-12"
             <div class="pb-6">
                 <a
                     href="{{ route('changelog') }}"
-                    class="text-sm leading-6 text-slate-400 hover:text-slate-200"
+                    class="text-sm leading-6 dark:text-slate-400 text-slate-500 dark:hover:text-slate-200 hover:text-slate-950"
                     >Changelog</a
                 >
             </div>
             <div class="pb-6">
                 <a
                     href="{{ route('terms') }}"
-                    class="text-sm leading-6 text-slate-400 hover:text-slate-200"
+                    class="text-sm leading-6 dark:text-slate-400 text-slate-500 dark:hover:text-slate-200 hover:text-slate-950"
                     >Terms</a
                 >
             </div>
             <div class="pb-6">
                 <a
                     href="{{ route('privacy') }}"
-                    class="text-sm leading-6 text-slate-400 hover:text-slate-200"
+                    class="text-sm leading-6 dark:text-slate-400 text-slate-500 dark:hover:text-slate-200 hover:text-slate-950"
                     >Privacy Policy</a
                 >
             </div>
             <div class="pb-6">
                 <a
                     href="{{ route('support') }}"
-                    class="text-sm leading-6 text-slate-400 hover:text-slate-200"
+                    class="text-sm leading-6 dark:text-slate-400 text-slate-500 dark:hover:text-slate-200 hover:text-slate-950"
                     >Support</a
                 >
             </div>
             <div class="pb-6">
                 <a
                     href="{{ route('brand.resources') }}"
-                    class="text-sm leading-6 text-slate-400 hover:text-slate-200"
+                    class="text-sm leading-6 dark:text-slate-400 text-slate-500 dark:hover:text-slate-200 hover:text-slate-950"
                     >Brand</a
                 >
             </div>
@@ -45,7 +45,7 @@ class="text-sm leading-6 text-slate-400 hover:text-slate-200"
             <a
                 href="https://twitter.com/PinkaryProject"
                 target="_blank"
-                class="text-slate-400 hover:text-slate-200"
+                class="dark:text-slate-400 text-slate-500 dark:hover:text-slate-200 hover:text-slate-950"
             >
                 <span class="sr-only">X</span>
 
@@ -55,7 +55,7 @@ class="text-slate-400 hover:text-slate-200"
             <a
                 href="https://github.com/pinkary-project"
                 target="_blank"
-                class="text-slate-400 hover:text-slate-200"
+                class="dark:text-slate-400 text-slate-500 dark:hover:text-slate-200 hover:text-slate-950"
             >
                 <span class="sr-only">GitHub</span>
 
@@ -63,8 +63,8 @@ class="text-slate-400 hover:text-slate-200"
             </a>
         </div>
 
-        <p class="mt-10 text-xs leading-5 text-slate-400 sm:text-center">&copy; {{ date('Y') }} {{ config('app.name') }}.</p>
-        <p class="text-xs leading-5 text-slate-400 sm:text-center">{{ $version }}</p>
+        <p class="mt-10 text-xs leading-5 dark:text-slate-400 text-slate-500 sm:text-center">&copy; {{ date('Y') }} {{ config('app.name') }}.</p>
+        <p class="text-xs leading-5 dark:text-slate-400 text-slate-500 sm:text-center">{{ $version }}</p>
     </div>
 
     <livewire:views.create />
diff --git a/resources/views/components/image-lightbox.blade.php b/resources/views/components/image-lightbox.blade.php
index 75632a224..b9f3dd239 100644
--- a/resources/views/components/image-lightbox.blade.php
+++ b/resources/views/components/image-lightbox.blade.php
@@ -2,7 +2,7 @@
 <x-modal name="image-lightbox" close-button-outside-modal should-center-modal-content>
     <div x-data="lightBox" class="relative md:flex md:items-center">
             <img :src="imgSrc" alt="image" class="object-contain max-h-[85vh] rounded-lg"/>
-        <button x-show="shouldShowPrevButton" class="absolute left-0 md:-ml-8 text-white cursor-pointer text-2xl" @click="prevImage">&larr;</button>
-        <button x-show="shouldShowNextButton" class="absolute right-0 md:-mr-8 text-white cursor-pointer text-2xl" @click="nextImage">&rarr;</button>
+        <button x-show="shouldShowPrevButton" class="absolute left-0 md:-ml-8 dark:text-white text-black cursor-pointer text-2xl" @click="prevImage">&larr;</button>
+        <button x-show="shouldShowNextButton" class="absolute right-0 md:-mr-8 dark:text-white text-black cursor-pointer text-2xl" @click="nextImage">&rarr;</button>
     </div>
 </x-modal>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 6126670f9..542ebf89c 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -4,7 +4,7 @@
         @include('layouts.components.head')
     </head>
     <body
-        class="bg-slate-950 bg-center bg-repeat font-sans text-slate-50 antialiased"
+        class="dark:bg-slate-950 bg-slate-100 bg-center bg-repeat font-sans dark:text-slate-50 text-slate-950 antialiased"
         style="background-image: url({{ asset('/img/dots.svg') }})"
     >
         @persist('flash-messages')
@@ -16,7 +16,7 @@ class="bg-slate-950 bg-center bg-repeat font-sans text-slate-50 antialiased"
                 @if (isset($title))
                     <div class="mb-6 mt-20 flex flex-col items-center sm:mb-12">
                         <div class="w-full max-w-md px-2 sm:px-0">
-                            <h1 class="font-mona text-2xl font-medium text-slate-200">
+                            <h1 class="font-mona text-2xl font-medium dark:text-slate-200 text-slate-900">
                                 {{ $title }}
                             </h1>
                         </div>
diff --git a/resources/views/layouts/navigation.blade.php b/resources/views/layouts/navigation.blade.php
index 050cb93b7..037871b03 100644
--- a/resources/views/layouts/navigation.blade.php
+++ b/resources/views/layouts/navigation.blade.php
@@ -19,7 +19,7 @@ class=""
                     >
                         <button
                             type="button"
-                            class="{{ request()->routeIs('home.*') ? 'text-slate-100' : 'text-slate-500 hover:text-slate-100' }} inline-flex items-center rounded-md border border-transparent bg-slate-900 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
+                            class="{{ request()->routeIs('home.*') ? 'dark:text-slate-100 text-slate-900' : 'dark:text-slate-500 text-slate-500 dark:hover:text-slate-100 hover:text-slate-900' }} inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-100 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
                         >
                             <x-heroicon-o-home class="h-6 w-6"/>
                         </button>
@@ -33,7 +33,7 @@ class=""
                     >
                         <button
                             type="button"
-                            class="text-slate-500 hover:text-slate-100 inline-flex items-center rounded-md border border-transparent bg-slate-900 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
+                            class="dark:text-slate-500 text-slate-500 dark:hover:text-slate-100 hover:text-slate-900 inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-100 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
                         >
                             <x-heroicon-o-code-bracket class="h-6 w-6"/>
                         </button>
@@ -47,7 +47,7 @@ class=""
                     >
                         <button
                             type="button"
-                            class="{{ request()->fullUrlIs(route('profile.show', ['username' => auth()->user()->username])) ? 'text-slate-100' : 'text-slate-500 hover:text-slate-100' }} inline-flex items-center rounded-md border border-transparent bg-slate-900 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
+                            class="{{ request()->fullUrlIs(route('profile.show', ['username' => auth()->user()->username])) ? 'dark:text-slate-100 text-slate-900' : 'dark:text-slate-500 text-slate-500 dark:hover:text-slate-100 hover:text-slate-900' }} inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-100 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
                         >
                             <x-heroicon-o-user class="h-6 w-6"/>
                         </button>
@@ -61,7 +61,7 @@ class=""
                     >
                         <button
                             type="button"
-                            class="{{ request()->routeIs('bookmarks.*') ? 'text-slate-100' : 'text-slate-500 hover:text-slate-100' }} inline-flex items-center rounded-md border border-transparent bg-slate-900 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
+                            class="{{ request()->routeIs('bookmarks.*') ? 'dark:text-slate-100 text-slate-900' : 'dark:text-slate-500 text-slate-500 dark:hover:text-slate-100 hover:text-slate-900' }} inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-100 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
                         >
                             <x-heroicon-o-bookmark class="h-6 w-6"/>
                         </button>
@@ -75,7 +75,7 @@ class=""
                     >
                         <button
                             type="button"
-                            class="{{ request()->routeIs('notifications.index') ? 'text-slate-100' : 'text-slate-500 hover:text-slate-100' }} inline-flex items-center rounded-md border border-transparent bg-slate-900 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
+                            class="{{ request()->routeIs('notifications.index') ? 'dark:text-slate-100 text-slate-900' : 'dark:text-slate-500 text-slate-500 dark:hover:text-slate-100 hover:text-slate-900' }} inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-100 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
                         >
                             <x-heroicon-o-bell class="h-6 w-6"/>
 
@@ -91,22 +91,20 @@ class="{{ request()->routeIs('notifications.index') ? 'text-slate-100' : 'text-s
                     <x-slot name="trigger">
                         <button
                             title="Menu"
-                            class="inline-flex items-center rounded-md border border-transparent bg-slate-900 px-3 py-2 text-sm font-medium leading-4 text-slate-500 transition duration-150 ease-in-out hover:text-slate-100 focus:outline-none"
+                            class="inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-100 px-3 py-2 text-sm font-medium leading-4 text-slate-500 transition duration-150 ease-in-out dark:hover:text-slate-100 hover:text-slate-900 focus:outline-none"
                         >
                             <x-icons.bars class="size-6"/>
                         </button>
                     </x-slot>
 
                     <x-slot name="content">
-                        <x-dropdown-button x-data="themeSwitch()" @click="toggleTheme" class="text-sm text-slate-400">
-                            <div class="flex flex-row items-center justify-between">
-                                <span x-text="toggleThemeButtonText"></span>
-                                <span class="mr-2">
-                                    <x-heroicon-o-moon x-show="theme == 'dark'" class="h-4 w-4"/>
-                                    <x-heroicon-o-sun x-show="theme == 'light'" class="h-4 w-4"/>
-                                    <x-heroicon-o-computer-desktop x-show="theme == 'system'" class="h-4 w-4"/>
-                                </span>
-                            </div>
+                        <x-dropdown-button x-data="themeSwitch()" @click="toggleTheme" class="flex flex-row items-center justify-between">
+                            <span x-text="toggleThemeButtonText"></span>
+                            <span class="mr-2">
+                                <x-heroicon-o-moon x-show="theme == 'dark'" class="h-4 w-4"/>
+                                <x-heroicon-o-sun x-show="theme == 'light'" class="h-4 w-4"/>
+                                <x-heroicon-o-computer-desktop x-show="theme == 'system'" class="h-4 w-4"/>
+                            </span>
                         </x-dropdown-button>
                         <x-dropdown-link :href="route('about')">
                             {{ __('About') }}
@@ -130,21 +128,21 @@ class="inline-flex items-center rounded-md border border-transparent bg-slate-90
                         @else
                             <x-dropdown-link
                                 :href="route('home.feed')"
-                                :class="request()->routeIs('home.feed') ? 'bg-slate-800' : ''"
+                                :class="request()->routeIs('home.feed') ? 'dark:bg-slate-800 bg-slate-200' : ''"
                             >
                                 {{ __('Feed') }}
                             </x-dropdown-link>
 
                             <x-dropdown-link
                                 :href="route('login')"
-                                :class="request()->routeIs('login') ? 'bg-slate-800' : ''"
+                                :class="request()->routeIs('login') ? 'dark:bg-slate-800 bg-slate-200' : ''"
                             >
                                 {{ __('Log in') }}
                             </x-dropdown-link>
 
                             <x-dropdown-link
                                 :href="route('register')"
-                                :class="request()->routeIs('register') ? 'bg-slate-800' : ''"
+                                :class="request()->routeIs('register') ? 'dark:bg-slate-800 bg-slate-200' : ''"
                             >
                                 {{ __('Register') }}
                             </x-dropdown-link>

From 5604dd40151498cb30e27d810c3ed1c1eb4028c4 Mon Sep 17 00:00:00 2001
From: Aditya Chandra <aditchndr44@gmail.com>
Date: Sat, 14 Sep 2024 17:15:57 +0700
Subject: [PATCH 4/9] chore: make the button lighter, and WIP light-mode for
 Feed, For You and Trending

---
 .../views/components/home-menu.blade.php      |  8 ++--
 .../components/load-more-button.blade.php     |  4 +-
 .../views/components/post-divider.blade.php   |  8 ++--
 resources/views/components/textarea.blade.php |  2 +-
 resources/views/home/feed.blade.php           |  2 +-
 .../views/home/questions-for-you.blade.php    |  2 +-
 .../views/home/trending-questions.blade.php   |  2 +-
 resources/views/home/users.blade.php          |  2 +-
 resources/views/layouts/navigation.blade.php  | 12 +++---
 resources/views/livewire/feed.blade.php       |  2 +-
 .../livewire/home/questions-for-you.blade.php |  2 +-
 .../views/livewire/questions/create.blade.php |  8 ++--
 .../views/livewire/questions/show.blade.php   | 40 +++++++++----------
 resources/views/profile/show.blade.php        |  2 +-
 14 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/resources/views/components/home-menu.blade.php b/resources/views/components/home-menu.blade.php
index 00bea40cd..42ac0e485 100644
--- a/resources/views/components/home-menu.blade.php
+++ b/resources/views/components/home-menu.blade.php
@@ -1,7 +1,7 @@
 <div class="mb-8 flex justify-between space-x-2">
     <a
         href="{{ route('home.feed') }}"
-        class="{{ request()->routeIs('home.feed') ? 'bg-pink-600 text-slate-100' : 'text-slate-500 hover:text-slate-100 bg-slate-900 ' }} inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-md border border-transparent px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
+        class="{{ request()->routeIs('home.feed') ? 'bg-pink-600 text-slate-100' : 'text-slate-500 dark:hover:text-slate-100 hover:text-slate-800 dark:bg-slate-900 bg-slate-50 ' }} inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-md border dark:border-transparent border-slate-200 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
         title="{{ __('Feed') }}"
         wire:navigate
         wire:transition
@@ -13,7 +13,7 @@ class="h-6 w-6 xsm:mr-2" />
 
     <a
         href="{{ route('home.for_you') }}"
-        class="{{ request()->routeIs('home.for_you') ? 'bg-pink-600 text-slate-100' : 'text-slate-500 hover:text-slate-100 bg-slate-900 ' }} inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-md border border-transparent px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
+        class="{{ request()->routeIs('home.for_you') ? 'bg-pink-600 text-slate-100' : 'text-slate-500 dark:hover:text-slate-100 hover:text-slate-800 dark:bg-slate-900 bg-slate-50 ' }} inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-md border dark:border-transparent border-slate-200 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
         title="{{ __('For you') }}"
         wire:navigate
         wire:transition
@@ -25,7 +25,7 @@ class="h-6 w-6 xsm:mr-2" />
 
     <a
         href="{{ route('home.trending') }}"
-        class="{{ request()->routeIs('home.trending') ? 'bg-pink-600 text-slate-100' : 'text-slate-500 hover:text-slate-100 bg-slate-900 ' }} inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-md border border-transparent px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
+        class="{{ request()->routeIs('home.trending') ? 'bg-pink-600 text-slate-100' : 'text-slate-500 dark:hover:text-slate-100 hover:text-slate-800 dark:bg-slate-900 bg-slate-50 ' }} inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-md border dark:border-transparent border-slate-200 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
         title="{{ __('Trending') }}"
         wire:navigate
         wire:transition
@@ -39,7 +39,7 @@ class="h-6 w-6 xsm:mr-2"
 
     <a
         href="{{ route('home.users') }}"
-        class="{{ request()->routeIs('home.users') ? 'bg-pink-600 text-slate-100' : 'text-slate-500 hover:text-slate-100 bg-slate-900 ' }} inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-md border border-transparent px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
+        class="{{ request()->routeIs('home.users') ? 'bg-pink-600 text-slate-100' : 'text-slate-500 dark:hover:text-slate-100 hover:text-slate-800 dark:bg-slate-900 bg-slate-50 ' }} inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-md border dark:border-transparent border-slate-200 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
         title="{{ __('Search') }}"
         wire:navigate
         wire:transition
diff --git a/resources/views/components/load-more-button.blade.php b/resources/views/components/load-more-button.blade.php
index d1197ab1b..011a1d9fb 100644
--- a/resources/views/components/load-more-button.blade.php
+++ b/resources/views/components/load-more-button.blade.php
@@ -1,9 +1,9 @@
 @if ($perPage < 100 && $paginator->hasMorePages())
     <div x-intersect.margin.50%="$wire.loadMore()" class="text-center">
-        <div class="text-center text-slate-400" wire:loading wire:target="loadMore">
+        <div class="text-center dark:text-slate-400 text-slate-600" wire:loading wire:target="loadMore">
             <x-heroicon-o-arrow-path class="w-5 h-5 animate-spin" />
         </div>
     </div>
 @elseif ($perPage > 10)
-    <div class="text-center text-slate-400">{{ $message }}</div>
+    <div class="text-center dark:text-slate-400 text-slate-600">{{ $message }}</div>
 @endif
diff --git a/resources/views/components/post-divider.blade.php b/resources/views/components/post-divider.blade.php
index 98ff24355..538065eb5 100644
--- a/resources/views/components/post-divider.blade.php
+++ b/resources/views/components/post-divider.blade.php
@@ -5,16 +5,16 @@
 
 @if ($link !== null && $text !== null)
     <div class="relative h-10 -mb-3 flex items-center">
-        <span class="absolute left-8 h-2 top-0 border-2 border-slate-600" aria-hidden="true"></span>
-        <span class="absolute left-8 h-6 border-2 border-slate-600 border-dotted" aria-hidden="true"></span>
-        <span class="absolute left-8 h-2 bottom-0 border-2 border-slate-600 " aria-hidden="true"></span>
+        <span class="absolute left-8 h-2 top-0 border-2 dark:border-slate-600 border-slate-400" aria-hidden="true"></span>
+        <span class="absolute left-8 h-6 border-2 dark:border-slate-600 border-slate-400 border-dotted" aria-hidden="true"></span>
+        <span class="absolute left-8 h-2 bottom-0 border-2 dark:border-slate-600 border-slate-400 " aria-hidden="true"></span>
         <a href="{{ $link }}" class="text-sm text-pink-500 ml-12">
             {{ $text }}
         </a>
     </div>
 @else
     <div class="relative h-6 -mb-3 flex items-center">
-        <span class="absolute left-8 h-full w-1 rounded-full bg-slate-700" aria-hidden="true"></span>
+        <span class="absolute left-8 h-full w-1 dark:bg-slate-700 bg-slate-300" aria-hidden="true"></span>
     </div>
 @endif
 
diff --git a/resources/views/components/textarea.blade.php b/resources/views/components/textarea.blade.php
index 041dd7b29..fe491f450 100644
--- a/resources/views/components/textarea.blade.php
+++ b/resources/views/components/textarea.blade.php
@@ -1,6 +1,6 @@
 @props(['autocomplete' => false])
 <textarea
-    {!! $attributes->merge(['class' => 'w-full text-white caret-white focus:border-pink-500 border-slate-800 bg-slate-900/50 backdrop-blur-sm focus:ring-slate-900 rounded-lg shadow-sm sm:text-sm']) !!}
+    {!! $attributes->merge(['class' => 'w-full dark:text-white text-black dark:caret-white caret-black focus:border-pink-500 dark:border-slate-800 border-slate-300 dark:bg-slate-900/50 bg-slate-50/50 backdrop-blur-sm dark:focus:ring-slate-900 focus:ring-slate-100 rounded-lg shadow-sm sm:text-sm']) !!}
     @if ($autocomplete === true)
         x-data="usesDynamicAutocomplete"
         x-bind="autocompleteInputBindings"
diff --git a/resources/views/home/feed.blade.php b/resources/views/home/feed.blade.php
index d458f50ea..5960a37fd 100644
--- a/resources/views/home/feed.blade.php
+++ b/resources/views/home/feed.blade.php
@@ -1,6 +1,6 @@
 <x-app-layout>
     <div class="flex flex-col items-center justify-center">
-        <div class="w-full max-w-md overflow-hidden rounded-lg px-2 shadow-md sm:px-0">
+        <div class="w-full max-w-md overflow-hidden rounded-lg px-2 dark:shadow-md sm:px-0">
             <x-home-menu></x-home-menu>
 
             @auth
diff --git a/resources/views/home/questions-for-you.blade.php b/resources/views/home/questions-for-you.blade.php
index 39227d3a9..e6ebfada6 100644
--- a/resources/views/home/questions-for-you.blade.php
+++ b/resources/views/home/questions-for-you.blade.php
@@ -1,6 +1,6 @@
 <x-app-layout>
     <div class="flex flex-col items-center justify-center">
-        <div class="w-full max-w-md overflow-hidden rounded-lg px-2 shadow-md sm:px-0">
+        <div class="w-full max-w-md overflow-hidden rounded-lg px-2 dark:shadow-md sm:px-0">
             <x-home-menu></x-home-menu>
 
             @auth
diff --git a/resources/views/home/trending-questions.blade.php b/resources/views/home/trending-questions.blade.php
index 489f2eab1..57b986af8 100644
--- a/resources/views/home/trending-questions.blade.php
+++ b/resources/views/home/trending-questions.blade.php
@@ -1,6 +1,6 @@
 <x-app-layout>
     <div class="flex flex-col items-center justify-center">
-        <div class="w-full max-w-md overflow-hidden rounded-lg px-2 shadow-md sm:px-0">
+        <div class="w-full max-w-md overflow-hidden rounded-lg px-2 dark:shadow-md sm:px-0">
             <x-home-menu></x-home-menu>
 
             <livewire:home.trending-questions :focus-input="true" />
diff --git a/resources/views/home/users.blade.php b/resources/views/home/users.blade.php
index d12c566c1..c9081999e 100644
--- a/resources/views/home/users.blade.php
+++ b/resources/views/home/users.blade.php
@@ -1,6 +1,6 @@
 <x-app-layout>
     <div class="flex flex-col items-center justify-center">
-        <div class="min-h-screen w-full max-w-md overflow-hidden rounded-lg px-2 shadow-md sm:px-0">
+        <div class="min-h-screen w-full max-w-md overflow-hidden rounded-lg px-2 dark:shadow-md sm:px-0">
             <x-home-menu></x-home-menu>
 
             <livewire:home.users :focus-input="true" />
diff --git a/resources/views/layouts/navigation.blade.php b/resources/views/layouts/navigation.blade.php
index 037871b03..8288923eb 100644
--- a/resources/views/layouts/navigation.blade.php
+++ b/resources/views/layouts/navigation.blade.php
@@ -19,7 +19,7 @@ class=""
                     >
                         <button
                             type="button"
-                            class="{{ request()->routeIs('home.*') ? 'dark:text-slate-100 text-slate-900' : 'dark:text-slate-500 text-slate-500 dark:hover:text-slate-100 hover:text-slate-900' }} inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-100 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
+                            class="{{ request()->routeIs('home.*') ? 'dark:text-slate-100 text-slate-900' : 'dark:text-slate-500 text-slate-500 dark:hover:text-slate-100 hover:text-slate-900' }} inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-50 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
                         >
                             <x-heroicon-o-home class="h-6 w-6"/>
                         </button>
@@ -33,7 +33,7 @@ class=""
                     >
                         <button
                             type="button"
-                            class="dark:text-slate-500 text-slate-500 dark:hover:text-slate-100 hover:text-slate-900 inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-100 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
+                            class="dark:text-slate-500 text-slate-500 dark:hover:text-slate-100 hover:text-slate-900 inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-50 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
                         >
                             <x-heroicon-o-code-bracket class="h-6 w-6"/>
                         </button>
@@ -47,7 +47,7 @@ class=""
                     >
                         <button
                             type="button"
-                            class="{{ request()->fullUrlIs(route('profile.show', ['username' => auth()->user()->username])) ? 'dark:text-slate-100 text-slate-900' : 'dark:text-slate-500 text-slate-500 dark:hover:text-slate-100 hover:text-slate-900' }} inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-100 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
+                            class="{{ request()->fullUrlIs(route('profile.show', ['username' => auth()->user()->username])) ? 'dark:text-slate-100 text-slate-900' : 'dark:text-slate-500 text-slate-500 dark:hover:text-slate-100 hover:text-slate-900' }} inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-50 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
                         >
                             <x-heroicon-o-user class="h-6 w-6"/>
                         </button>
@@ -61,7 +61,7 @@ class=""
                     >
                         <button
                             type="button"
-                            class="{{ request()->routeIs('bookmarks.*') ? 'dark:text-slate-100 text-slate-900' : 'dark:text-slate-500 text-slate-500 dark:hover:text-slate-100 hover:text-slate-900' }} inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-100 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
+                            class="{{ request()->routeIs('bookmarks.*') ? 'dark:text-slate-100 text-slate-900' : 'dark:text-slate-500 text-slate-500 dark:hover:text-slate-100 hover:text-slate-900' }} inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-50 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
                         >
                             <x-heroicon-o-bookmark class="h-6 w-6"/>
                         </button>
@@ -75,7 +75,7 @@ class=""
                     >
                         <button
                             type="button"
-                            class="{{ request()->routeIs('notifications.index') ? 'dark:text-slate-100 text-slate-900' : 'dark:text-slate-500 text-slate-500 dark:hover:text-slate-100 hover:text-slate-900' }} inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-100 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
+                            class="{{ request()->routeIs('notifications.index') ? 'dark:text-slate-100 text-slate-900' : 'dark:text-slate-500 text-slate-500 dark:hover:text-slate-100 hover:text-slate-900' }} inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-50 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
                         >
                             <x-heroicon-o-bell class="h-6 w-6"/>
 
@@ -91,7 +91,7 @@ class="{{ request()->routeIs('notifications.index') ? 'dark:text-slate-100 text-
                     <x-slot name="trigger">
                         <button
                             title="Menu"
-                            class="inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-100 px-3 py-2 text-sm font-medium leading-4 text-slate-500 transition duration-150 ease-in-out dark:hover:text-slate-100 hover:text-slate-900 focus:outline-none"
+                            class="inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-50 px-3 py-2 text-sm font-medium leading-4 text-slate-500 transition duration-150 ease-in-out dark:hover:text-slate-100 hover:text-slate-900 focus:outline-none"
                         >
                             <x-icons.bars class="size-6"/>
                         </button>
diff --git a/resources/views/livewire/feed.blade.php b/resources/views/livewire/feed.blade.php
index 5fbbd55f6..08d9ee6cd 100644
--- a/resources/views/livewire/feed.blade.php
+++ b/resources/views/livewire/feed.blade.php
@@ -8,7 +8,7 @@
                 :inThread="$hashtag === null"
             />
         @empty
-            <div class="text-center text-slate-400">There are no questions to show.</div>
+            <div class="text-center dark:text-slate-400 text-slate-600">There are no questions to show.</div>
         @endforelse
 
         <x-load-more-button
diff --git a/resources/views/livewire/home/questions-for-you.blade.php b/resources/views/livewire/home/questions-for-you.blade.php
index 9d1e59904..39f5dde98 100644
--- a/resources/views/livewire/home/questions-for-you.blade.php
+++ b/resources/views/livewire/home/questions-for-you.blade.php
@@ -1,4 +1,4 @@
-<div class="mb-12 w-full text-slate-200">
+<div class="mb-12 w-full dark:text-slate-200 text-slate-800">
     @if ($forYouQuestions->isEmpty())
         <section class="rounded-lg">
             <p class="my-8 text-center text-lg text-slate-500">
diff --git a/resources/views/livewire/questions/create.blade.php b/resources/views/livewire/questions/create.blade.php
index d2bc403e6..42174bb7d 100644
--- a/resources/views/livewire/questions/create.blade.php
+++ b/resources/views/livewire/questions/create.blade.php
@@ -37,14 +37,14 @@ class="relative group/menu">
                              title="Reinsert the image"
                              class="h-full w-full rounded-lg object-cover cursor-pointer"/>
                         <button @click="removeImage($event, index)"
-                                class="absolute top-0.5 right-0.5 p-1 rounded-md bg-slate-800 bg-opacity-75 text-slate-400 hover:text-pink-500">
+                                class="absolute top-0.5 right-0.5 p-1 rounded-md dark:bg-slate-800 bg-slate-200 bg-opacity-75 dark:text-slate-400 text-slate-600 hover:text-pink-500">
                             <x-icons.close class="size-4"/>
                         </button>
                     </div>
                 </template>
             </div>
 
-            <p class="text-right text-xs text-slate-400"><span x-text="$wire.content.length"></span> / {{ $this->maxContentLength}}</p>
+            <p class="text-right text-xs dark:text-slate-400 text-slate-600"><span x-text="$wire.content.length"></span> / {{ $this->maxContentLength}}</p>
 
             <ul>
                 <template x-for="(error, index) in errors" :key="index">
@@ -65,7 +65,7 @@ class="text-{{ $user->left_color }} border-{{ $user->left_color }}"
                     title="Upload an image"
                     x-ref="imageButton"
                     :disabled="uploading || images.length >= uploadLimit"
-                    class="rounded-lg bg-slate-800 text-sm text-slate-400 p-1.5 hover:text-pink-500"
+                    class="rounded-lg dark:bg-slate-800 bg-slate-200 text-sm dark:text-slate-400 text-slate-600 p-1.5 hover:text-pink-500"
                     :class="{'cursor-not-allowed text-pink-500': uploading || images.length >= uploadLimit}"
                 >
                     <x-heroicon-o-photo class="h-5 w-5"/>
@@ -80,7 +80,7 @@ class="rounded-lg bg-slate-800 text-sm text-slate-400 p-1.5 hover:text-pink-500"
 
                     <label
                         for="anonymously"
-                        class="ml-2 text-slate-400"
+                        class="ml-2 dark:text-slate-400 text-slate-600"
                         >Anonymously</label
                     >
                 </div>
diff --git a/resources/views/livewire/questions/show.blade.php b/resources/views/livewire/questions/show.blade.php
index ecbdc3553..8301aadac 100644
--- a/resources/views/livewire/questions/show.blade.php
+++ b/resources/views/livewire/questions/show.blade.php
@@ -10,7 +10,7 @@
             @unless ($question->isSharedUpdate())
                 @if ($question->anonymously)
                     <div class="flex items-center gap-3 px-4 text-sm text-slate-500">
-                        <div class="border-1 flex h-10 w-10 items-center justify-center rounded-full border border-dashed border-slate-400">
+                        <div class="border-1 flex h-10 w-10 items-center justify-center rounded-full border border-dashed dark:border-slate-400 border-slate-600">
                             <span>?</span>
                         </div>
 
@@ -22,14 +22,14 @@
             @endunless
             @if ($question->pinned && $pinnable)
                 <div class="mb-2 flex items-center space-x-1 px-4 text-sm focus:outline-none">
-                    <x-icons.pin class="h-4 w-4 text-slate-400" />
-                    <span class="text-slate-400">Pinned</span>
+                    <x-icons.pin class="h-4 w-4 dark:text-slate-400 text-slate-600" />
+                    <span class="dark:text-slate-400 text-slate-600">Pinned</span>
                 </div>
             @endif
         </div>
 
         @unless ($question->isSharedUpdate())
-        <p class="mt-3 px-4 text-slate-200">
+        <p class="mt-3 px-4 dark:text-slate-200 text-slate-800">
             {!! $question->content !!}
         </p>
         @endunless
@@ -41,8 +41,8 @@
             x-intersect.once.full="$dispatch('post-viewed', { postId: '{{ $questionId }}' })"
             x-data="clickHandler"
             x-on:click="handleNavigation($event)"
-            class="group p-4 mt-3 rounded-2xl {{ $previousQuestionId === $questionId ? 'bg-slate-700/60' : 'bg-slate-900' }}
-            {{ $commenting ?: "cursor-pointer transition-colors duration-100 ease-in-out hover:bg-slate-700/60" }}"
+            class="group p-4 mt-3 rounded-2xl {{ $previousQuestionId === $questionId ? 'dark:bg-slate-700/60 bg-slate-200/60' : 'border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-50' }}
+            {{ $commenting ?: "cursor-pointer transition-colors duration-100 ease-in-out dark:hover:bg-slate-700/60 hover:bg-slate-100/60" }}"
         >
             <div class="flex justify-between">
                 <a
@@ -51,7 +51,7 @@ class="group/profile flex items-center gap-3"
                     data-navigate-ignore="true"
                     wire:navigate
                 >
-                    <figure class="{{ $question->to->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-10 w-10 flex-shrink-0 bg-slate-800 transition-opacity group-hover/profile:opacity-90">
+                    <figure class="{{ $question->to->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-10 w-10 flex-shrink-0 dark:bg-slate-800 bg-slate-100 transition-opacity group-hover/profile:opacity-90">
                         <img
                             src="{{ $question->to->avatar_url }}"
                             alt="{{ $question->to->username }}"
@@ -60,7 +60,7 @@ class="{{ $question->to->is_company_verified ? 'rounded-md' : 'rounded-full' }}
                     </figure>
                     <div class="overflow-hidden text-sm">
                         <div class="items flex">
-                            <p class="truncate font-medium text-slate-50">
+                            <p class="truncate font-medium dark:text-slate-50 text-slate-950">
                                 {{ $question->to->name }}
                             </p>
 
@@ -77,7 +77,7 @@ class="ml-1 mt-0.5 h-3.5 w-3.5"
                             @endif
                         </div>
 
-                        <p class="truncate text-slate-500 transition-colors group-hover/profile:text-slate-400">
+                        <p class="truncate text-slate-500 transition-colors dark:group-hover/profile:text-slate-400 group-hover/profile:text-slate-600">
                             {{ '@'.$question->to->username }}
                         </p>
                     </div>
@@ -91,7 +91,7 @@ class="ml-1 mt-0.5 h-3.5 w-3.5"
                         <x-slot name="trigger">
                             <button
                                 data-navigate-ignore="true"
-                                class="inline-flex items-center rounded-md border border-transparent py-1 text-sm text-slate-400 transition duration-150 ease-in-out hover:text-slate-50 focus:outline-none">
+                                class="inline-flex items-center rounded-md border border-transparent py-1 text-sm dark:text-slate-400 text-slate-600 transition duration-150 ease-in-out dark:hover:text-slate-50 hover:text-slate-950 focus:outline-none">
                                 <x-heroicon-o-ellipsis-horizontal class="h-6 w-6" />
                             </button>
                         </x-slot>
@@ -103,7 +103,7 @@ class="inline-flex items-center rounded-md border border-transparent py-1 text-s
                                     wire:click="pin"
                                     class="flex items-center gap-1.5"
                                 >
-                                    <x-icons.pin class="h-4 w-4 text-slate-50" />
+                                    <x-icons.pin class="h-4 w-4" />
                                     <span>Pin</span>
                                 </x-dropdown-button>
                             @elseif ($question->pinned)
@@ -152,7 +152,7 @@ class="flex items-center gap-1.5"
                     }}"
                    data-navigate-ignore="true"
                    wire:navigate
-                   class="truncate text-xs text-slate-500 transition-colors hover:text-slate-400"
+                   class="truncate text-xs text-slate-500 transition-colors dark:hover:text-slate-400 hover:text-slate-600"
                 >
                     In response to {{ '@'.$question->parent->to->username }}
                 </a>
@@ -160,7 +160,7 @@ class="truncate text-xs text-slate-500 transition-colors hover:text-slate-400"
 
             <div x-data="showMore">
                 <div
-                    class="mt-3 break-words text-slate-200 overflow-hidden answer"
+                    class="mt-3 break-words dark:text-slate-200 text-slate-800 overflow-hidden answer"
                     wire:ignore.self
                     x-ref="parentDiv"
                 >
@@ -192,7 +192,7 @@ class="text-sm text-pink-500 flex ml-auto"
                         @endif
                         title="{{ Number::format($question->children_count) }} {{ str('Comment')->plural($question->children_count) }}"
                         @class([
-                            "flex items-center transition-colors group-hover:text-pink-500 hover:text-slate-400 focus:outline-none",
+                            "flex items-center transition-colors group-hover:text-pink-500 dark:hover:text-slate-400 hover:text-slate-600 focus:outline-none",
                             "cursor-pointer" => ! $commenting,
                         ])
                     >
@@ -217,7 +217,7 @@ class="text-sm text-pink-500 flex ml-auto"
                         data-navigate-ignore="true"
                         x-on:click="toggleLike"
                         :title="likeButtonTitle"
-                        class="flex items-center transition-colors hover:text-slate-400 focus:outline-none"
+                        class="flex items-center transition-colors dark:hover:text-slate-400 hover:text-slate-600 focus:outline-none"
                     >
                         <x-heroicon-s-heart class="h-4 w-4" x-show="isLiked" />
                         <x-heroicon-o-heart class="h-4 w-4" x-show="!isLiked" />
@@ -262,7 +262,7 @@ class="cursor-help"
                         x-cloak
                         x-on:click="toggleBookmark"
                         :title="bookmarkButtonTitle"
-                        class="mr-1 flex items-center transition-colors hover:text-slate-400 focus:outline-none"
+                        class="mr-1 flex items-center transition-colors dark:hover:text-slate-400 hover:text-slate-600 focus:outline-none"
                     >
                         <x-heroicon-s-bookmark class="h-4 w-4" x-show="isBookmarked" />
                         <x-heroicon-o-bookmark class="h-4 w-4" x-show="!isBookmarked" />
@@ -277,7 +277,7 @@ class="mr-1 flex items-center transition-colors hover:text-slate-400 focus:outli
                             <button
                                 data-navigate-ignore="true"
                                 x-bind:class="{ 'text-pink-500 hover:text-pink-600': open,
-                                                'text-slate-500 hover:text-slate-400': !open }"
+                                                'text-slate-500 dark:hover:text-slate-400 hover:text-slate-600': !open }"
                                 title="Share"
                                 class="flex items-center transition-colors duration-150 ease-in-out focus:outline-none"
                             >
@@ -302,7 +302,7 @@ class="flex items-center transition-colors duration-150 ease-in-out focus:outlin
                                     )
                                 "
                                 type="button"
-                                class="text-slate-500 transition-colors hover:text-slate-400 focus:outline-none"
+                                class="text-slate-500 transition-colors dark:hover:text-slate-400 hover:text-slate-600 focus:outline-none"
                             >
                                 <x-heroicon-o-link class="size-4" />
                             </button>
@@ -321,7 +321,7 @@ class="text-slate-500 transition-colors hover:text-slate-400 focus:outline-none"
                                         }}',
                                     })
                                 "
-                                class="text-slate-500 transition-colors hover:text-slate-400 focus:outline-none"
+                                class="text-slate-500 transition-colors dark:hover:text-slate-400 hover:text-slate-600 focus:outline-none"
                             >
                                 <x-heroicon-o-link class="size-4" />
                             </button>
@@ -337,7 +337,7 @@ class="text-slate-500 transition-colors hover:text-slate-400 focus:outline-none"
                                     })
                                 "
                                 type="button"
-                                class="text-slate-500 transition-colors hover:text-slate-400 focus:outline-none"
+                                class="text-slate-500 transition-colors dark:hover:text-slate-400 hover:text-slate-600 focus:outline-none"
                             >
                                 <x-icons.twitter-x class="size-4" />
                             </button>
diff --git a/resources/views/profile/show.blade.php b/resources/views/profile/show.blade.php
index 5a92ef3df..4e31e376c 100644
--- a/resources/views/profile/show.blade.php
+++ b/resources/views/profile/show.blade.php
@@ -1,6 +1,6 @@
 <x-app-layout>
     <div class="flex flex-col items-center justify-center py-10">
-        <div class="min-h-screen w-full max-w-md overflow-hidden rounded-lg px-4 shadow-md md:px-0">
+        <div class="min-h-screen w-full max-w-md overflow-hidden rounded-lg px-4 dark:shadow-md md:px-0">
             <livewire:links.index :userId="$user->id" />
             <livewire:questions.create :toId="$user->id" />
             <livewire:questions.index

From 6d436afb4212a9e0c0e259ed514cbe98f2e0522e Mon Sep 17 00:00:00 2001
From: Aditya Chandra <aditchndr44@gmail.com>
Date: Mon, 16 Sep 2024 01:13:36 +0700
Subject: [PATCH 5/9] ui: light-mode at Search

---
 resources/views/components/text-input.blade.php | 2 +-
 resources/views/livewire/home/users.blade.php   | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/resources/views/components/text-input.blade.php b/resources/views/components/text-input.blade.php
index d8c47fd5f..e20b6de5e 100644
--- a/resources/views/components/text-input.blade.php
+++ b/resources/views/components/text-input.blade.php
@@ -2,5 +2,5 @@
 
 <input
     {{ $disabled ? 'disabled' : '' }}
-    {!! $attributes->merge(['class' => 'text-white caret-white focus:border-pink-500 border-slate-800 bg-slate-900/50 backdrop-blur-sm focus:ring-slate-900 rounded-lg shadow-sm sm:text-sm']) !!}
+    {!! $attributes->merge(['class' => 'dark:text-white text-black dark:caret-white caret-black focus:border-pink-500 dark:border-slate-800 border-slate-300 dark:bg-slate-900/50 bg-slate-200/50 backdrop-blur-sm dark:focus:ring-slate-900 focus:ring-slate-100 rounded-lg shadow-sm sm:text-sm']) !!}
 />
diff --git a/resources/views/livewire/home/users.blade.php b/resources/views/livewire/home/users.blade.php
index 36a4dc3f3..fa8dc3378 100644
--- a/resources/views/livewire/home/users.blade.php
+++ b/resources/views/livewire/home/users.blade.php
@@ -1,4 +1,4 @@
-<div class="mb-12 w-full text-slate-200">
+<div class="mb-12 w-full dark:text-slate-200 text-slate-400">
     <div class="mb-8 w-full max-w-md">
         <div class="relative flex items-center py-1">
 
@@ -10,7 +10,7 @@
                 wire:model.live.debounce.500ms="query"
                 name="q"
                 placeholder="Search for users..."
-                class="w-full !rounded-2xl !bg-slate-950 !bg-opacity-80 py-3 pl-14"
+                class="w-full mx-1 !rounded-2xl dark:!bg-slate-950 !bg-slate-100 !bg-opacity-80 py-3 pl-14"
             />
         </div>
     </div>
@@ -26,7 +26,7 @@ class="w-full !rounded-2xl !bg-slate-950 !bg-opacity-80 py-3 pl-14"
                     <li>
                         <a
                             href="{{ route('profile.show', ['username' => $user->username]) }}"
-                            class="group flex items-center gap-3 rounded-2xl border border-slate-900 bg-slate-950 bg-opacity-80 p-4 transition-colors hover:bg-slate-900"
+                            class="group flex items-center gap-3 rounded-2xl border dark:border-slate-900 border-slate-200 dark:bg-slate-950 bg-slate-50 dark:bg-opacity-80 p-4 transition-colors dark:hover:bg-slate-900 hover:bg-slate-100"
                             wire:navigate
                         >
                             <figure class="{{ $user->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-12 w-12 flex-shrink-0 overflow-hidden bg-slate-800 transition-opacity group-hover:opacity-90">
@@ -38,7 +38,7 @@ class="{{ $user->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-12 w-1
                             </figure>
                             <div class="flex flex-col overflow-hidden text-sm">
                                 <div class="flex items-center space-x-2">
-                                    <p class="truncate font-medium">
+                                    <p class="truncate font-medium dark:text-white text-black">
                                         {{ $user->name }}
                                     </p>
 

From 0e53b8dc26db2fe76b136646323b5352de49bb0d Mon Sep 17 00:00:00 2001
From: Aditya Chandra <aditchndr44@gmail.com>
Date: Mon, 16 Sep 2024 02:44:04 +0700
Subject: [PATCH 6/9] ui: light-mode at profiles, autocomplete, q&a,
 notifications, and other components

---
 .../autocomplete/hashtag-item.blade.php       |  2 +-
 .../autocomplete/mention-item.blade.php       |  4 +-
 .../components/avatar-with-name.blade.php     |  6 +--
 .../views/components/back-to-top.blade.php    |  2 +-
 resources/views/components/checkbox.blade.php |  2 +-
 resources/views/components/modal.blade.php    |  2 +-
 .../views/components/primary-button.blade.php |  2 +-
 .../primary-colorless-button.blade.php        |  2 +-
 .../components/secondary-button.blade.php     |  2 +-
 resources/views/hashtag/show.blade.php        |  2 +-
 .../views/livewire/autocomplete.blade.php     | 10 ++---
 .../views/livewire/links/create.blade.php     |  2 +-
 .../views/livewire/links/index.blade.php      | 42 +++++++++----------
 .../livewire/notifications/index.blade.php    | 14 +++----
 .../views/livewire/questions/create.blade.php |  2 +-
 .../views/livewire/questions/edit.blade.php   |  4 +-
 .../views/livewire/questions/show.blade.php   |  2 +-
 resources/views/profile/edit.blade.php        |  2 +-
 resources/views/questions/show.blade.php      |  2 +-
 19 files changed, 53 insertions(+), 53 deletions(-)

diff --git a/resources/views/components/autocomplete/hashtag-item.blade.php b/resources/views/components/autocomplete/hashtag-item.blade.php
index 833c23419..63445e0dd 100644
--- a/resources/views/components/autocomplete/hashtag-item.blade.php
+++ b/resources/views/components/autocomplete/hashtag-item.blade.php
@@ -1,6 +1,6 @@
 @php
     /** @var \App\Services\Autocomplete\Result $result */
 @endphp
-<span class="truncate text-sm font-medium text-slate-50">
+<span class="truncate text-sm font-medium dark:text-slate-50 text-slate-950">
     {{ $result->replacement }}
 </span>
diff --git a/resources/views/components/autocomplete/mention-item.blade.php b/resources/views/components/autocomplete/mention-item.blade.php
index e943ff79e..ffed68255 100644
--- a/resources/views/components/autocomplete/mention-item.blade.php
+++ b/resources/views/components/autocomplete/mention-item.blade.php
@@ -6,7 +6,7 @@
         class="flex items-center gap-3"
     >
         <figure
-            class="{{ $result->payload['isCompanyVerified'] ? 'rounded-md' : 'rounded-full' }} h-10 w-10 flex-shrink-0 bg-slate-800">
+            class="{{ $result->payload['isCompanyVerified'] ? 'rounded-md' : 'rounded-full' }} h-10 w-10 flex-shrink-0 dark:bg-slate-800 bg-slate-50">
             <img
                 src="{{ $result->payload['avatarSrc'] }}"
                 alt="{{ $result->payload['username'] }}"
@@ -15,7 +15,7 @@ class="{{ $result->payload['isCompanyVerified'] ? 'rounded-md' : 'rounded-full'
         </figure>
         <div class="overflow-hidden text-sm">
             <div class="flex items-center">
-                <p class="truncate font-medium text-slate-50">
+                <p class="truncate font-medium dark:text-white text-black">
                     {{ $result->payload['name'] }}
                 </p>
 
diff --git a/resources/views/components/avatar-with-name.blade.php b/resources/views/components/avatar-with-name.blade.php
index 1c3ba69ca..8e507e7d4 100644
--- a/resources/views/components/avatar-with-name.blade.php
+++ b/resources/views/components/avatar-with-name.blade.php
@@ -5,7 +5,7 @@
     class="group flex items-center gap-3 px-4"
     wire:navigate
 >
-    <figure class="{{ $user->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-10 w-10 flex-shrink-0 bg-slate-800 transition-opacity group-hover:opacity-90">
+    <figure class="{{ $user->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-10 w-10 flex-shrink-0 dark:bg-slate-800 bg-slate-200 transition-opacity group-hover:opacity-90">
         <img
             src="{{ $user->avatar_url }}"
             alt="{{ $user->username }}"
@@ -15,7 +15,7 @@ class="{{ $user->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-10 w-1
 
     <div class="overflow-hidden text-sm">
         <div class="flex">
-            <p class="truncate font-medium text-slate-50">
+            <p class="truncate font-medium dark:text-slate-50 text-slate-950">
                 {{ $user->name }}
             </p>
 
@@ -32,7 +32,7 @@ class="ml-1 mt-0.5 h-3.5 w-3.5"
             @endif
         </div>
 
-        <p class="truncate text-slate-500 transition-colors group-hover:text-slate-400">
+        <p class="truncate text-slate-500 transition-colors dark:group-hover:text-slate-400 group-hover:text-slate-600">
             {{ '@'.$user->username }}
         </p>
     </div>
diff --git a/resources/views/components/back-to-top.blade.php b/resources/views/components/back-to-top.blade.php
index 97b81b9cb..b7a3c653f 100644
--- a/resources/views/components/back-to-top.blade.php
+++ b/resources/views/components/back-to-top.blade.php
@@ -14,6 +14,6 @@ class="fixed bottom-8 right-8"
         x-on:click="window.scrollTo({ top: 0, behavior: 'smooth' })"
         class="rounded-full bg-pink-500 p-2 shadow-lg"
     >
-        <x-icons.arrow-top width="20" height="20"/>
+        <x-icons.arrow-top class="dark:text-black text-white" width="20" height="20"/>
     </button>
 </div>
diff --git a/resources/views/components/checkbox.blade.php b/resources/views/components/checkbox.blade.php
index e5755a608..469b8173d 100644
--- a/resources/views/components/checkbox.blade.php
+++ b/resources/views/components/checkbox.blade.php
@@ -1,4 +1,4 @@
 <input
     type="checkbox"
-    {!! $attributes->merge(['class' => 'focus:ring-pink-500 focus:ring-offset-slate-900 size-4.5 text-pink-500 border-slate-800 bg-slate-900 ring-slate-900 rounded cursor-pointer']) !!}
+    {!! $attributes->merge(['class' => 'focus:ring-pink-500 dark:focus:ring-offset-slate-900 focus:ring-offset-slate-200 size-4.5 text-pink-500 dark:border-slate-800 border-slate-200 dark:bg-slate-900 bg-slate-50 dark:ring-slate-900 ring-slate-200 rounded cursor-pointer dark:shadow-none shadow-md']) !!}
 />
diff --git a/resources/views/components/modal.blade.php b/resources/views/components/modal.blade.php
index bdd6e6efe..c7397eb18 100644
--- a/resources/views/components/modal.blade.php
+++ b/resources/views/components/modal.blade.php
@@ -82,7 +82,7 @@ class="fixed inset-0 transform transition-all"
     </div>
     <div
         x-show="show"
-        class="{{ $maxWidth }} {{$contentOverflowStyle}} transform rounded-lg bg-slate-950 shadow-xl transition-all sm:mx-auto sm:w-auto"
+        class="{{ $maxWidth }} {{$contentOverflowStyle}} transform rounded-lg dark:bg-slate-950 bg-slate-50 shadow-xl transition-all sm:mx-auto sm:w-auto"
         x-transition:enter="duration-300 ease-out"
         x-transition:enter-start="translate-y-4 opacity-0 sm:translate-y-0 sm:scale-95"
         x-transition:enter-end="translate-y-0 opacity-100 sm:scale-100"
diff --git a/resources/views/components/primary-button.blade.php b/resources/views/components/primary-button.blade.php
index bdb558c21..ee335c00c 100644
--- a/resources/views/components/primary-button.blade.php
+++ b/resources/views/components/primary-button.blade.php
@@ -2,6 +2,6 @@
     'as' => 'button',
 ])
 
-<{{ $as }} {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center px-4 py-2 border text-pink-500 border-pink-500 rounded-lg font-semibold text-xs tracking-widest hover:bg-pink-900/20 focus:outline-none focus:ring-0 focus:ring-offset-0 transition ease-in-out duration-150']) }}>
+<{{ $as }} {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center px-4 py-2 border text-pink-500 border-pink-500 rounded-lg font-semibold text-xs tracking-widest dark:hover:bg-pink-900/20 hover:bg-pink-400/20 focus:outline-none focus:ring-0 focus:ring-offset-0 transition ease-in-out duration-150']) }}>
     {{ $slot }}
 </{{ $as }}>
diff --git a/resources/views/components/primary-colorless-button.blade.php b/resources/views/components/primary-colorless-button.blade.php
index 494fbf08c..4da0962c6 100644
--- a/resources/views/components/primary-colorless-button.blade.php
+++ b/resources/views/components/primary-colorless-button.blade.php
@@ -1,3 +1,3 @@
-<button {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center px-4 py-2 border rounded-lg font-semibold text-xs tracking-widest hover:bg-gray-900 focus:outline-none focus:ring-0 focus:ring-offset-0 transition ease-in-out duration-150']) }}>
+<button {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center px-4 py-2 border rounded-lg font-semibold text-xs tracking-widest dark:hover:bg-gray-900 hover:bg-gray-200 focus:outline-none focus:ring-0 focus:ring-offset-0 transition ease-in-out duration-150']) }}>
     {{ $slot }}
 </button>
diff --git a/resources/views/components/secondary-button.blade.php b/resources/views/components/secondary-button.blade.php
index 997d01c34..e5d1c8095 100644
--- a/resources/views/components/secondary-button.blade.php
+++ b/resources/views/components/secondary-button.blade.php
@@ -1,3 +1,3 @@
-<button {{ $attributes->merge(['type' => 'button', 'class' => 'inline-flex items-center px-4 py-2 border text-slate-500 border-slate-500 rounded-lg font-semibold text-xs tracking-widest hover:bg-slate-800/40 focus:outline-none focus:ring-0 focus:ring-offset-0 transition ease-in-out duration-150']) }}>
+<button {{ $attributes->merge(['type' => 'button', 'class' => 'inline-flex items-center px-4 py-2 border text-slate-500 border-slate-500 rounded-lg font-semibold text-xs tracking-widest dark:hover:bg-slate-800/40 hover:bg-slate-300/40 focus:outline-none focus:ring-0 focus:ring-offset-0 transition ease-in-out duration-150']) }}>
     {{ $slot }}
 </button>
diff --git a/resources/views/hashtag/show.blade.php b/resources/views/hashtag/show.blade.php
index 85c6c8e77..7f379cc3f 100644
--- a/resources/views/hashtag/show.blade.php
+++ b/resources/views/hashtag/show.blade.php
@@ -2,7 +2,7 @@
     <x-slot name="title">Recent posts with <span class="text-blue-500">#{{ $hashtag }}</span></x-slot>
 
     <div class="flex flex-col items-center justify-center">
-        <div class="w-full max-w-md overflow-hidden rounded-lg px-2 shadow-md sm:px-0">
+        <div class="w-full max-w-md overflow-hidden rounded-lg px-2 dark:shadow-md sm:px-0">
             <x-home-menu></x-home-menu>
 
             <livewire:home.feed :hashtag="$hashtag" />
diff --git a/resources/views/livewire/autocomplete.blade.php b/resources/views/livewire/autocomplete.blade.php
index 9acad74f8..242452c03 100644
--- a/resources/views/livewire/autocomplete.blade.php
+++ b/resources/views/livewire/autocomplete.blade.php
@@ -16,7 +16,7 @@ class="fixed h-full top-0 left-0 w-full"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
         x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-        class="absolute w-full max-h-96 overflow-auto max-w-sm z-50 focus:outline-none sm:text-sm bg-slate-950 shadow-md shadow-slate-800 rounded-lg text-white p-2 translate-x-2 left-0"
+        class="absolute w-full max-h-96 overflow-auto max-w-sm z-50 focus:outline-none sm:text-sm dark:bg-slate-950 bg-slate-50 shadow-md dark:shadow-slate-800 shadow-slate-200 rounded-lg dark:text-white text-black p-2 translate-x-2 left-0"
     >
 
         <ul
@@ -27,11 +27,11 @@ class="relative space-y-2"
                 @php /** @var \App\Services\Autocomplete\Result $result */ @endphp
                 @if($result->view)
                     <li
-                        class="text-white rounded-lg m-0 p-2 cursor-pointer select-none relative hover:bg-slate-800"
+                        class="dark:text-white text-black rounded-lg m-0 p-2 cursor-pointer select-none relative dark:hover:bg-slate-800 hover:bg-slate-100"
                         x-bind:data-id="{{ $result->id }}"
                         x-bind:data-replacement="'{{ $result->replacement }}'"
                         @click="select('{{ $result->replacement }}')"
-                        :class="{ 'bg-slate-800': selectedIndex === {{ $index }} }"
+                        :class="{ 'dark:bg-slate-800 bg-slate-50': selectedIndex === {{ $index }} }"
                         wire:key="{{ $result->id }}"
                         role="option"
                     >
@@ -39,10 +39,10 @@ class="text-white rounded-lg m-0 p-2 cursor-pointer select-none relative hover:b
                     </li>
                 @endif
             @empty
-                <li wire:loading.remove class="text-slate-400 p-2" wire:key="no-results">
+                <li wire:loading.remove class="dark:text-slate-400 text-slate-600 p-2" wire:key="no-results">
                     No matching results...
                 </li>
-                <li wire:loading class="text-slate-400 p-2" wire:key="no-results-loading">
+                <li wire:loading class="dark:text-slate-400 text-slate-600 p-2" wire:key="no-results-loading">
                     Searching...
                 </li>
             @endforelse
diff --git a/resources/views/livewire/links/create.blade.php b/resources/views/livewire/links/create.blade.php
index e62d2691b..efde0030a 100644
--- a/resources/views/livewire/links/create.blade.php
+++ b/resources/views/livewire/links/create.blade.php
@@ -49,7 +49,7 @@ class="text-{{ $user->left_color }} border-{{ $user->left_color }}"
             <button
                 x-on:click="showLinksForm = false"
                 type="button"
-                class="text-slate-400 hover:text-slate-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                class="dark:text-slate-400 text-slate-600 dark:hover:text-slate-600 hover:text-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
             >
                 Cancel
             </button>
diff --git a/resources/views/livewire/links/index.blade.php b/resources/views/livewire/links/index.blade.php
index cc0ac5ce9..05721ce02 100644
--- a/resources/views/livewire/links/index.blade.php
+++ b/resources/views/livewire/links/index.blade.php
@@ -3,14 +3,14 @@
     gradient: '{{ $user->gradient }}',
     link_shape: '{{ $user->link_shape }}',
 }" @endif>
-    <div class="relative bg-gradient-to-r p-5 text-center text-white">
+    <div class="relative bg-gradient-to-r p-5 text-center dark:text-white text-black">
         <div class="absolute left-0 top-6 flex">
             <x-dropdown-link-profile>
                 <x-slot name="trigger">
                     <button
-                        x-bind:class="{ 'bg-pink-500 hover:bg-pink-500': open,
-                                        'bg-slate-900 hover:bg-slate-800': !open }"
-                                    class="mr-2 flex size-10 items-center justify-center rounded-lg text-slate-300 hover:text-white transition duration-150 ease-in-out "
+                        x-bind:class="{ 'bg-pink-500 hover:bg-pink-500 text-white hover:text-white': open,
+                                        'dark:bg-slate-900 bg-slate-50 dark:hover:bg-slate-800 hover:bg-slate-100 border dark:border-transparent border-slate-200': !open }"
+                                    class="mr-2 flex size-10 items-center justify-center rounded-lg dark:text-slate-300 text-slate-600 transition duration-150 ease-in-out "
                     >
                         <x-heroicon-o-share class="size-5" />
                     </button>
@@ -22,7 +22,7 @@ class="mr-2 flex size-10 items-center justify-center rounded-lg text-slate-300 h
                         x-show="isVisible"
                         x-on:click="share({ url: '{{ route('profile.show', ['username' => $user->username]) }}' })"
                         type="button"
-                        class="mr-2 flex size-10 items-center justify-center rounded-lg bg-slate-900 text-slate-300 transition duration-150 ease-in-out hover:bg-slate-800 hover:text-white"
+                        class="mr-2 flex size-10 items-center justify-center rounded-lg border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-50 dark:text-slate-300 text-slate-600 transition duration-150 ease-in-out dark:hover:bg-slate-800 hover:bg-slate-100 dark:hover:text-white hover:text-black"
                     >
                         <x-heroicon-o-link class="size-5" />
                     </button>
@@ -35,7 +35,7 @@ class="mr-2 flex size-10 items-center justify-center rounded-lg bg-slate-900 tex
                             )
                         "
                         type="button"
-                        class="mr-2 flex size-10 items-center justify-center rounded-lg bg-slate-900 text-slate-300 transition duration-150 ease-in-out hover:bg-slate-800 hover:text-white"
+                        class="mr-2 flex size-10 items-center justify-center rounded-lg border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-50 dark:text-slate-300 text-slate-600 transition duration-150 ease-in-out dark:hover:bg-slate-800 hover:bg-slate-100 dark:hover:text-white hover:text-black"
                     >
                         <x-heroicon-o-link class="size-5" />
                     </button>
@@ -48,7 +48,7 @@ class="mr-2 flex size-10 items-center justify-center rounded-lg bg-slate-900 tex
                             })
                         "
                         type="button"
-                        class="mr-2 flex size-10 items-center justify-center rounded-lg bg-slate-900 text-slate-300 transition duration-150 ease-in-out hover:bg-slate-800 hover:text-white"
+                        class="mr-2 flex size-10 items-center justify-center rounded-lg border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-50 dark:text-slate-300 text-slate-600 transition duration-150 ease-in-out dark:hover:bg-slate-800 hover:bg-slate-100 dark:hover:text-white hover:text-black"
                     >
                         <x-icons.twitter-x class="size-5" />
                     </button>
@@ -56,7 +56,7 @@ class="mr-2 flex size-10 items-center justify-center rounded-lg bg-slate-900 tex
             </x-dropdown-link-profile>
             @if (auth()->user()?->is($user))
                 <button
-                    class="flex size-10 items-center justify-center rounded-lg bg-slate-900 text-slate-300 transition duration-150 ease-in-out hover:bg-slate-800 hover:text-white"
+                    class="flex size-10 items-center justify-center rounded-lg border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-50 dark:text-slate-300 text-slate-600 transition duration-150 ease-in-out dark:hover:bg-slate-800 hover:bg-slate-100 dark:hover:text-white hover:text-black"
                     x-on:click.prevent="$dispatch('open-modal', 'show-qr-code')"
                 >
                     <span class="sr-only">See QR Code</span>
@@ -73,7 +73,7 @@ class="flex size-10 items-center justify-center rounded-lg bg-slate-900 text-sla
                     <button
                         type="button"
                         wire:click="unfollow({{ $user->id }})"
-                        class="flex items-center justify-center rounded-lg bg-slate-900 px-2 py-1 text-slate-300 transition duration-150 ease-in-out hover:bg-slate-800 hover:text-white"
+                        class="flex items-center justify-center rounded-lg border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-50 px-2 py-1 dark:text-slate-300 text-slate-600 transition duration-150 ease-in-out dark:hover:bg-slate-800 hover:bg-slate-200 dark:hover:text-white hover:text-black"
                     >
                         Following
                     </button>
@@ -81,7 +81,7 @@ class="flex items-center justify-center rounded-lg bg-slate-900 px-2 py-1 text-s
                     <button
                         type="button"
                         wire:click="follow({{ $user->id }})"
-                        class="flex items-center justify-center rounded-lg bg-slate-900 px-2 py-1 text-slate-300 transition duration-150 ease-in-out hover:bg-slate-800 hover:text-white"
+                        class="flex items-center justify-center rounded-lg border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-50 px-2 py-1 dark:text-slate-300 text-slate-600 transition duration-150 ease-in-out dark:hover:bg-slate-800 hover:bg-slate-200 dark:hover:text-white hover:text-black"
                     >
                         Follow
                     </button>
@@ -101,7 +101,7 @@ class="{{ $user->is_company_verified ? 'rounded-md' : 'rounded-full' }} mx-auto
                 x-show="showAvatar"
                 x-cloak
                 x-on:click="showAvatar = false"
-                class="fixed inset-0 flex items-center justify-center bg-slate-900 bg-opacity-75 z-50"
+                class="fixed inset-0 flex items-center justify-center dark:bg-slate-900 bg-slate-50 bg-opacity-75 z-50"
             >
                 <img
                     src="{{ $user->avatar_url }}"
@@ -113,7 +113,7 @@ class="rounded-lg size-48 md:size-80 sm:size-64"
 
             @if (auth()->user()?->is($user))
                 <button
-                    class="absolute right-0 top-0 rounded bg-slate-900 text-slate-300 transition duration-150 ease-in-out hover:bg-slate-800 hover:text-white"
+                    class="absolute right-0 top-0 p-0.5 m-0.5 rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-50 dark:text-slate-300 text-slate-500 transition duration-150 ease-in-out dark:hover:bg-slate-800 hover:bg-slate-100 dark:hover:text-white hover:text-black"
                     href="{{ route('profile.edit') }}"
                     wire:navigate
                     title="Upload Avatar"
@@ -123,7 +123,7 @@ class="absolute right-0 top-0 rounded bg-slate-900 text-slate-300 transition dur
             @endif
         </div>
 
-        <div class="items center flex items-center justify-center">
+        <div class="items center flex items-center justify-center mt-2">
             <h2 class="text-2xl font-bold">{{ $user->name }}</h2>
 
             @if ($user->is_verified && $user->is_company_verified)
@@ -140,7 +140,7 @@ class="ml-1.5 size-6"
         </div>
 
         <a
-            class="text-slate-400"
+            class="dark:text-slate-400 text-slate-600"
             href="{{ route('profile.show', ['username' => $user->username]) }}"
             wire:navigate
         >
@@ -162,7 +162,7 @@ class="text-sm text-slate-500 hover:underline"
         <livewire:following.index :userId="$user->id" />
 
         <div class="mt-2 text-sm">
-            <p class="text-slate-400">
+            <p class="dark:text-slate-400 text-slate-600">
                 @if ($user->followers_count > 0)
                     <button x-on:click.prevent="$dispatch('open-modal', 'followers')">
                         <span
@@ -238,7 +238,7 @@ class="relative h-12 hover:darken-gradient group flex {{ $link->is_visible ? 'bg
                         >
                             <div
                                 x-sortable-handle
-                                class="absolute left-0 sm:-left-10 top-0 bottom-0 flex w-11 cursor-move items-center justify-center text-slate-300 opacity-50 hover:opacity-100 focus:outline-none group-hover:left-0 transition-all duration-500 z-10"
+                                class="absolute left-0 sm:-left-10 top-0 bottom-0 flex w-11 cursor-move items-center justify-center text-slate-50 opacity-50 hover:opacity-100 focus:outline-none group-hover:left-0 transition-all duration-500 z-10"
                             >
                                 <x-heroicon-o-bars-3 class="size-6 opacity-100 group-hover:opacity-100 sm:opacity-0" />
                             </div>
@@ -252,7 +252,7 @@ class="absolute left-0 sm:-left-10 top-0 bottom-0 flex w-11 cursor-move items-ce
                             <div
                                 x-on:click="showActions = !showActions"
                                 x-bind:class="{ 'invisible': isDragging }"
-                                class="absolute right-0 sm:-right-10 top-0 bottom-0 flex w-11 cursor-pointer items-center justify-center text-slate-300 opacity-50 hover:opacity-100 focus:outline-none transition-all duration-500 z-10 group-hover:right-0"
+                                class="absolute right-0 sm:-right-10 top-0 bottom-0 flex w-11 cursor-pointer items-center justify-center text-slate-50 opacity-50 hover:opacity-100 focus:outline-none transition-all duration-500 z-10 group-hover:right-0"
                             >
                                 <x-heroicon-o-chevron-double-left class="size-6 opacity-100 group-hover:opacity-100 sm:opacity-0"
                                     x-bind:class="{ 'rotate-180': showActions }"
@@ -264,7 +264,7 @@ class="absolute right-0 sm:-right-10 top-0 bottom-0 flex w-11 cursor-pointer ite
                                 x-bind:class="{ 'group-hover:inset-0' : showActions }"
                             >
                                 <div
-                                    class="min-w-fit cursor-help items-center gap-1 text-xs"
+                                    class="text-white min-w-fit cursor-help items-center gap-1 text-xs"
                                     title="Clicked {{ Number::format($link->click_count) }} times"
                                     x-bind:class="{ 'invisible': isDragging }"
                                 >
@@ -275,7 +275,7 @@ class="min-w-fit cursor-help items-center gap-1 text-xs"
                                 <button
                                     wire:click="setVisibility({{ $link->id }})"
                                     type="button"
-                                    class="flex w-10 justify-center text-slate-300 opacity-50 hover:opacity-100 focus:outline-none"
+                                    class="flex w-10 justify-center text-slate-50 opacity-50 hover:opacity-100 focus:outline-none"
                                 >
                                     @if ($link->is_visible)
                                         <x-heroicon-o-eye class="size-5"
@@ -291,7 +291,7 @@ class="flex w-10 justify-center text-slate-300 opacity-50 hover:opacity-100 focu
                                 <button
                                     wire:click="$dispatchTo('links.edit', 'link.edit', { link: {{ $link->id }} })"
                                     type="button"
-                                    class="flex w-10 justify-center text-slate-300 opacity-50 hover:opacity-100 focus:outline-none"
+                                    class="flex w-10 justify-center text-slate-50 opacity-50 hover:opacity-100 focus:outline-none"
                                 >
                                     <x-heroicon-o-pencil
                                         class="size-5"
@@ -303,7 +303,7 @@ class="size-5"
                                     <button
                                         onclick="if (!confirm('Are you sure you want to delete this link?')) { return false; }"
                                         type="submit"
-                                        class="flex w-10 justify-center text-slate-300 opacity-50 hover:opacity-100 focus:outline-none"
+                                        class="flex w-10 justify-center text-slate-50 opacity-50 hover:opacity-100 focus:outline-none"
                                     >
                                         <x-heroicon-o-trash
                                             class="size-5 opacity-100 group-hover:opacity-100 sm:opacity-0"
diff --git a/resources/views/livewire/notifications/index.blade.php b/resources/views/livewire/notifications/index.blade.php
index d4efc9e4e..57eec4b68 100644
--- a/resources/views/livewire/notifications/index.blade.php
+++ b/resources/views/livewire/notifications/index.blade.php
@@ -2,7 +2,7 @@
     @if ($notifications->isNotEmpty())
         <div class="flex items-center justify-end mb-2">
             <button
-                class="text-slate-400"
+                class="dark:text-slate-400 text-slate-600"
                 wire:click="ignoreAll('{{ now() }}')"
             >
                 Ignore all
@@ -26,7 +26,7 @@ class="text-slate-400"
             href="{{ route('notifications.show', ['notification' => $notification->id]) }}"
             wire:navigate
         >
-            <div class="group overflow-hidden rounded-2xl border border-slate-900 bg-slate-950 bg-opacity-80 p-4 transition-colors hover:bg-slate-900">
+            <div class="group overflow-hidden rounded-2xl border dark:border-slate-900 border-slate-200 dark:bg-slate-950 bg-slate-50 bg-opacity-80 p-4 transition-colors dark:hover:bg-slate-900 hover:bg-slate-100 hover:cursor-pointer">
                 <div
                     class="cursor-help text-right text-xs text-slate-400"
                     title="{{ $notification->created_at->timezone(session()->get('timezone', 'UTC'))->isoFormat('ddd, D MMMM YYYY HH:mm') }}"
@@ -40,7 +40,7 @@ class="cursor-help text-right text-xs text-slate-400"
                 @if (! $isMention)
                     @if ($question->parent_id !== null)
                         <div class="flex items center gap-3 text-sm text-slate-500">
-                            <figure class="{{ $question->from->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-10 w-10 flex-shrink-0 bg-slate-800 transition-opacity group-hover:opacity-90">
+                            <figure class="{{ $question->from->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-10 w-10 flex-shrink-0 dark:bg-slate-800 bg-slate-50 transition-opacity group-hover:opacity-90">
                                 <img
                                     src="{{ $question->from->avatar_url }}"
                                     alt="{{ $question->from->username }}"
@@ -51,7 +51,7 @@ class="{{ $question->from->is_company_verified ? 'rounded-md' : 'rounded-full' }
                         </div>
                     @elseif ($question->from->is(auth()->user()) && $question->answer !== null)
                         <div class="flex items-center gap-3 text-sm text-slate-500">
-                            <figure class="{{ $question->to->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-10 w-10 flex-shrink-0 bg-slate-800 transition-opacity group-hover:opacity-90">
+                            <figure class="{{ $question->to->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-10 w-10 flex-shrink-0 dark:bg-slate-800 bg-slate-50 transition-opacity group-hover:opacity-90">
                                 <img
                                     src="{{ $question->to->avatar_url }}"
                                     alt="{{ $question->to->username }}"
@@ -70,14 +70,14 @@ class="{{ $question->to->is_company_verified ? 'rounded-md' : 'rounded-full' }}
                             </div>
                         @else
                             <div class="flex items-center gap-3 text-sm text-slate-500">
-                                <figure class="{{ $question->from->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-10 w-10 flex-shrink-0 bg-slate-800 transition-opacity group-hover:opacity-90">
+                                <figure class="{{ $question->from->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-10 w-10 flex-shrink-0 dark:bg-slate-800 bg-slate-50 transition-opacity group-hover:opacity-90">
                                     <img
                                         src="{{ $question->from->avatar_url }}"
                                         alt="{{ $question->from->username }}"
                                         class="{{ $question->from->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-10 w-10"
                                     />
                                 </figure>
-                                <p>{{ $question->from->name }} asked you:</p>
+                                <p><span class="dark:text-white text-black">{{ $question->from->name }}</span> asked you:</p>
                             </div>
                         @endif
                     @endif
@@ -87,7 +87,7 @@ class="{{ $question->from->is_company_verified ? 'rounded-md' : 'rounded-full' }
                     <p class="text-sm text-slate-500">You have been mentioned in a {{ $question->isSharedUpdate() ? 'update by @'.$question->to->username : 'question:'}}</p>
                 @endif
                 @if(!$question->isSharedUpdate())
-                    <p class="mt-2 text-slate-200">
+                    <p class="mt-2 dark:text-slate-200 text-slate-800">
                         {!! $question->content !!}
                     </p>
                 @endif
diff --git a/resources/views/livewire/questions/create.blade.php b/resources/views/livewire/questions/create.blade.php
index 42174bb7d..6344000d7 100644
--- a/resources/views/livewire/questions/create.blade.php
+++ b/resources/views/livewire/questions/create.blade.php
@@ -65,7 +65,7 @@ class="text-{{ $user->left_color }} border-{{ $user->left_color }}"
                     title="Upload an image"
                     x-ref="imageButton"
                     :disabled="uploading || images.length >= uploadLimit"
-                    class="rounded-lg dark:bg-slate-800 bg-slate-200 text-sm dark:text-slate-400 text-slate-600 p-1.5 hover:text-pink-500"
+                    class="p-1.5 rounded-lg border dark:border-transparent border-slate-200 dark:bg-slate-800 bg-slate-50 text-sm dark:text-slate-400 text-slate-600 hover:text-pink-500 dark:hover:bg-slate-700 hover:bg-slate-100"
                     :class="{'cursor-not-allowed text-pink-500': uploading || images.length >= uploadLimit}"
                 >
                     <x-heroicon-o-photo class="h-5 w-5"/>
diff --git a/resources/views/livewire/questions/edit.blade.php b/resources/views/livewire/questions/edit.blade.php
index 42a2f2808..2ea6afde6 100644
--- a/resources/views/livewire/questions/edit.blade.php
+++ b/resources/views/livewire/questions/edit.blade.php
@@ -1,4 +1,4 @@
-<div class="border-l border-slate-900">
+<div class="border-l dark:border-slate-900 border-slate-200">
     <form wire:submit="update">
         <div class="mt-4 flex items-center justify-between">
             <div class="w-full">
@@ -13,7 +13,7 @@ class="sr-only"
                         id="{{ 'answer_question_'.$question->id }}"
                         wire:model="answer"
                         x-autosize
-                        class="h-24 w-full resize-none border-none border-transparent bg-transparent text-white focus:border-transparent focus:outline-0 focus:ring-0"
+                        class="h-24 w-full resize-none border-none border-transparent bg-transparent dark:text-white text-black focus:border-transparent focus:outline-0 focus:ring-0"
                         placeholder="Write your answer..."
                         maxlength="1000"
                         rows="3"
diff --git a/resources/views/livewire/questions/show.blade.php b/resources/views/livewire/questions/show.blade.php
index 8301aadac..412bbb99e 100644
--- a/resources/views/livewire/questions/show.blade.php
+++ b/resources/views/livewire/questions/show.blade.php
@@ -352,7 +352,7 @@ class="text-slate-500 transition-colors dark:hover:text-slate-400 hover:text-sla
                 name="question.edit.answer.{{ $questionId }}"
             >
                 <div class="p-8">
-                    <h2 class="text-lg font-medium text-slate-50">Edit Answer</h2>
+                    <h2 class="text-lg font-medium dark:text-slate-50 text-slate-950">Edit Answer</h2>
                     <livewire:questions.edit
                         :questionId="$question->id"
                         :key="'edit-answer-'.$question->id"
diff --git a/resources/views/profile/edit.blade.php b/resources/views/profile/edit.blade.php
index d91054575..83ea7077f 100644
--- a/resources/views/profile/edit.blade.php
+++ b/resources/views/profile/edit.blade.php
@@ -4,7 +4,7 @@
             <div class="px-4 sm:px-8">
                 <a
                     href="{{ route('profile.show', ['username' => auth()->user()->username]) }}"
-                    class="flex items-center space-x-1 text-slate-400 hover:underline"
+                    class="flex items-center space-x-1 dark:text-slate-400 text-slate-500 hover:underline"
                     wire:navigate
                 >
                     <x-icons.chevron-left class="size-5" />
diff --git a/resources/views/questions/show.blade.php b/resources/views/questions/show.blade.php
index 9a13e4f0b..1b74674a0 100644
--- a/resources/views/questions/show.blade.php
+++ b/resources/views/questions/show.blade.php
@@ -16,7 +16,7 @@
                     }
                  }"
                 x-on:click.prevent="back()"
-                class="flex text-slate-400 hover:underline cursor-pointer"
+                class="flex dark:text-slate-400 text-slate-500 hover:underline cursor-pointer"
             >
                 <x-icons.chevron-left class="h-6 w-6" />
                 <span>Back</span>

From c25af3cf8b3d7ac461c9441215a3ca0b85645368 Mon Sep 17 00:00:00 2001
From: Aditya Chandra <aditchndr44@gmail.com>
Date: Tue, 17 Sep 2024 18:32:59 +0700
Subject: [PATCH 7/9] feat(light-mode): footer's pages in light mode

---
 resources/views/brand/resources.blade.php |  4 ++--
 resources/views/changelog.blade.php       | 14 +++++++-------
 resources/views/privacy.blade.php         |  4 ++--
 resources/views/support.blade.php         |  4 ++--
 resources/views/terms.blade.php           |  4 ++--
 5 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/resources/views/brand/resources.blade.php b/resources/views/brand/resources.blade.php
index 47a6f2f37..841ad2a22 100644
--- a/resources/views/brand/resources.blade.php
+++ b/resources/views/brand/resources.blade.php
@@ -2,7 +2,7 @@
     <div class="mx-auto my-16 max-w-7xl px-6 lg:px-8">
         <a
             href="{{ route('about') }}"
-            class="-mt-10 mb-12 flex items-center text-slate-400 hover:underline"
+            class="-mt-10 mb-12 flex items-center dark:text-slate-400 text-slate-600 hover:underline"
             wire:navigate
         >
             <x-icons.chevron-left class="size-4" />
@@ -10,7 +10,7 @@ class="-mt-10 mb-12 flex items-center text-slate-400 hover:underline"
         </a>
 
         <div class="mt-6">
-            <div class="prose prose-slate prose-invert mx-auto max-w-4xl">
+            <div class="prose prose-slate dark:prose-invert mx-auto max-w-4xl">
                 <h1>Pinkary Brand</h1>
                 <p><strong>Last Updated: 27 March 2024</strong></p>
 
diff --git a/resources/views/changelog.blade.php b/resources/views/changelog.blade.php
index e7e9b5a66..72e9c4a94 100644
--- a/resources/views/changelog.blade.php
+++ b/resources/views/changelog.blade.php
@@ -3,11 +3,11 @@
 
     <div class="flex flex-col items-center justify-center">
         <div class="min-h-screen w-full max-w-md px-2 sm:px-0">
-            <p class="text-slate-400">A changelog of the latest Pinkary feature releases, product updates and important bug fixes.</p>
+            <p class="dark:text-slate-400 text-slate-600">A changelog of the latest Pinkary feature releases, product updates and important bug fixes.</p>
 
             <div class="relative mb-20 mt-12 py-1">
                 <div class="absolute bottom-0 left-0 top-0 hidden w-6 justify-center sm:flex">
-                    <div class="w-px border-r border-dashed border-slate-700"></div>
+                    <div class="w-px border-r border-dashed dark:border-slate-700 border-slate-300"></div>
                 </div>
 
                 <ul
@@ -20,17 +20,17 @@ class="space-y-6 sm:space-y-12"
                                 <div class="size-1.5 rounded-full bg-pink-500 ring-1 ring-pink-500"></div>
                             </div>
 
-                            <div class="relative flex-1 overflow-hidden rounded-xl border border-slate-900">
-                                <header class="flex w-full flex-1 items-center justify-between border-b border-slate-900 px-4 py-3.5 text-slate-200">
+                            <div class="relative flex-1 overflow-hidden rounded-xl border dark:border-slate-900 border-slate-100 dark:shadow-none shadow-sm shadow-slate-200">
+                                <header class="flex w-full flex-1 items-center justify-between border-b dark:border-slate-900 border-slate-200 px-4 py-3.5 dark:text-slate-200 text-slate-800">
                                     <h2 class="font-bold">Version {{ $version }}</h2>
                                     <time
                                         datetime="{{ $release['publishedAt'] }}"
-                                        class="flex-none py-0.5 text-xs font-semibold leading-5 text-slate-500"
+                                        class="flex-none py-0.5 text-xs dark:font-semibold leading-5 dark:text-slate-500 text-slate-600"
                                     >
                                         {{ $release['publishedAt'] }}
                                     </time>
                                 </header>
-                                <div class="prose prose-sm prose-invert px-4 py-3.5 prose-h3:text-sm">
+                                <div class="prose prose-sm dark:prose-invert px-4 py-3.5 prose-h3:text-sm">
                                     @if ($release['changes'])
                                         <h3>Improvements & Bug fixes</h3>
                                         <ul>
@@ -42,7 +42,7 @@ class="flex-none py-0.5 text-xs font-semibold leading-5 text-slate-500"
                                 </div>
                                 <div class="absolute -right-[200px] -top-[200px] z-10 transform-gpu opacity-20 blur-3xl">
                                     <div
-                                        class="size-[600px] bg-gradient-to-r from-pink-900 to-pink-500"
+                                        class="size-[600px] bg-gradient-to-r dark:from-pink-900 from-pink-200 to-pink-500"
                                         style="
                                             clip-path: polygon(
                                                 50% 0%,
diff --git a/resources/views/privacy.blade.php b/resources/views/privacy.blade.php
index 5d2d5d7f8..b3a115e33 100644
--- a/resources/views/privacy.blade.php
+++ b/resources/views/privacy.blade.php
@@ -2,7 +2,7 @@
     <div class="mx-auto my-16 max-w-7xl px-6 lg:px-8">
         <a
             href="{{ route('about') }}"
-            class="-mt-10 mb-12 flex items-center text-slate-400 hover:underline"
+            class="-mt-10 mb-12 flex items-center dark:text-slate-400 text-slate-600 hover:underline"
             wire:navigate
         >
             <x-icons.chevron-left class="size-4" />
@@ -10,7 +10,7 @@ class="-mt-10 mb-12 flex items-center text-slate-400 hover:underline"
         </a>
 
         <div class="mt-6">
-            <div class="prose prose-slate prose-invert mx-auto max-w-4xl">
+            <div class="prose prose-slate dark:prose-invert mx-auto max-w-4xl">
                 <h1>Privacy Policy</h1>
                 <p><strong>Last Updated: 19 Feb 2024</strong></p>
 
diff --git a/resources/views/support.blade.php b/resources/views/support.blade.php
index 3a541e260..3f1a9aec9 100644
--- a/resources/views/support.blade.php
+++ b/resources/views/support.blade.php
@@ -2,7 +2,7 @@
     <div class="mx-auto my-16 max-w-7xl px-6 lg:px-8">
         <a
             href="{{ route('about') }}"
-            class="-mt-10 mb-12 flex items-center text-slate-400 hover:underline"
+            class="-mt-10 mb-12 flex items-center dark:text-slate-400 text-slate-600 hover:underline"
             wire:navigate
         >
             <x-icons.chevron-left class="size-4" />
@@ -10,7 +10,7 @@ class="-mt-10 mb-12 flex items-center text-slate-400 hover:underline"
         </a>
 
         <div class="mt-6">
-            <div class="prose prose-slate prose-invert mx-auto max-w-4xl">
+            <div class="prose prose-slate dark:prose-invert mx-auto max-w-4xl">
                 <h1>Support</h1>
                 <p><strong>Last Updated: 02 March 2024</strong></p>
 
diff --git a/resources/views/terms.blade.php b/resources/views/terms.blade.php
index fe5ea8824..091a159a4 100644
--- a/resources/views/terms.blade.php
+++ b/resources/views/terms.blade.php
@@ -2,7 +2,7 @@
     <div class="mx-auto my-16 max-w-7xl px-6 lg:px-8">
         <a
             href="{{ route('about') }}"
-            class="-mt-10 mb-12 flex items-center text-slate-400 hover:underline"
+            class="-mt-10 mb-12 flex items-center dark:text-slate-400 text-slate-600 hover:underline"
             wire:navigate
         >
             <x-icons.chevron-left class="size-4" />
@@ -10,7 +10,7 @@ class="-mt-10 mb-12 flex items-center text-slate-400 hover:underline"
         </a>
 
         <div class="mt-6">
-            <div class="prose prose-slate prose-invert mx-auto max-w-4xl">
+            <div class="prose prose-slate dark:prose-invert mx-auto max-w-4xl">
                 <h1>Terms of Service</h1>
                 <p><strong>Last Updated: 21 July 2024</strong></p>
 

From 8916be39d00e5e15db48da9f40ceb21a724f12b4 Mon Sep 17 00:00:00 2001
From: Aditya Chandra <aditchndr44@gmail.com>
Date: Tue, 17 Sep 2024 19:25:41 +0700
Subject: [PATCH 8/9] feat(light-mode): guest pages, about, auth pages (login,
 register, forgot password), profile settings

---
 resources/views/about.blade.php               | 28 +++++-----
 .../views/auth/forgot-password.blade.php      |  2 +-
 resources/views/auth/login.blade.php          |  8 +--
 resources/views/auth/register.blade.php       |  2 +-
 .../views/components/home-menu.blade.php      |  8 +--
 .../views/components/pinkary-logo.blade.php   | 10 +++-
 .../views/components/section-border.blade.php |  2 +-
 .../views/components/select-input.blade.php   |  2 +-
 .../views/components/text-input.blade.php     |  2 +-
 resources/views/layouts/about.blade.php       |  2 +-
 resources/views/layouts/guest.blade.php       |  2 +-
 resources/views/layouts/navigation.blade.php  | 12 ++---
 .../livewire/about-users-avatars.blade.php    | 54 ++++++++++++++++++-
 resources/views/livewire/home/users.blade.php |  2 +-
 .../two-factor-authentication-form.blade.php  |  4 +-
 resources/views/profile/edit.blade.php        | 14 ++---
 .../partials/delete-user-form.blade.php       |  4 +-
 .../partials/update-password-form.blade.php   |  2 +-
 .../update-profile-information-form.blade.php |  2 +-
 .../upload-profile-photo-form.blade.php       |  2 +-
 .../profile/partials/verified-form.blade.php  |  4 +-
 21 files changed, 113 insertions(+), 55 deletions(-)

diff --git a/resources/views/about.blade.php b/resources/views/about.blade.php
index 94c38477a..5e5dff700 100644
--- a/resources/views/about.blade.php
+++ b/resources/views/about.blade.php
@@ -2,12 +2,12 @@
     <div class="relative flex justify-center">
         <div class="absolute -top-48 -z-10 size-[400px] -rotate-45 rounded-full bg-gradient-to-br from-indigo-300 via-rose-200 to-green-600 opacity-70 blur-3xl lg:size-[500px]"></div>
     </div>
-    <nav class="fixed top-0 z-20 flex w-full justify-end gap-2 border-b border-slate-200/10 bg-slate-950/20 p-4 shadow-2xl backdrop-blur-md">
+    <nav class="fixed top-0 z-20 flex w-full justify-end gap-2 border-b dark:border-slate-200/10 border-slate-900/10 dark:bg-slate-950/20 bg-slate-100/20 p-4 shadow-2xl backdrop-blur-md">
         <a
             href="{{ route('home.feed') }}"
             wire:navigate
         >
-            <x-primary-colorless-button class="flex items-center justify-center gap-2">
+            <x-primary-colorless-button class="flex items-center justify-center gap-2 dark:border-white border-slate-900">
                 <x-heroicon-o-home class="h-4 w-4" />
                 <span class="sr-only sm:not-sr-only">Feed</span>
             </x-primary-colorless-button>
@@ -62,40 +62,40 @@ class="mt-12 max-w-4xl text-center font-mona text-3xl font-light md:text-4xl"
 
         <section class="mt-28 w-full max-w-2xl">
             <div class="grid w-full gap-4 md:grid-cols-2">
-                <div class="rounded-2xl border-t border-slate-800 bg-slate-900 p-4 transition-colors md:aspect-video">
-                    <div class="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-slate-950">
+                <div class="rounded-2xl dark:border-t border-none dark:border-slate-800 dark:shadow-none shadow-sm dark:bg-slate-900 bg-slate-50 p-4 transition-colors md:aspect-video">
+                    <div class="mb-3 flex h-12 w-12 items-center justify-center rounded-full dark:bg-slate-950 bg-slate-200">
                         <x-heroicon-o-bolt class="h-5 w-5" />
                     </div>
 
                     <h3>Create a profile</h3>
-                    <p class="text-slate-400">Choose a username, add a bio, and you're good to go.</p>
+                    <p class="dark:text-slate-400 text-slate-500 text-sm">Choose a username, add a bio, and you're good to go.</p>
                 </div>
 
-                <div class="rounded-2xl border-t border-slate-800 bg-slate-900 p-4 md:aspect-video">
-                    <div class="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-slate-950">
+                <div class="rounded-2xl dark:border-t border-none dark:border-slate-800 dark:shadow-none shadow-sm dark:bg-slate-900 bg-slate-50 p-4 md:aspect-video">
+                    <div class="mb-3 flex h-12 w-12 items-center justify-center rounded-full dark:bg-slate-950 bg-slate-200">
                         <x-heroicon-o-link class="h-5 w-5" />
                     </div>
 
                     <h3>Share your links</h3>
-                    <p class="text-slate-400">Collect links of your social profiles, your work, and what matters to you.</p>
+                    <p class="dark:text-slate-400 text-slate-500 text-sm">Collect links of your social profiles, your work, and what matters to you.</p>
                 </div>
 
-                <div class="rounded-2xl border-t border-slate-800 bg-slate-900 p-4 md:aspect-video">
-                    <div class="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-slate-950">
+                <div class="rounded-2xl dark:border-t border-none dark:border-slate-800 dark:shadow-none shadow-sm dark:bg-slate-900 bg-slate-50 p-4 md:aspect-video">
+                    <div class="mb-3 flex h-12 w-12 items-center justify-center rounded-full dark:bg-slate-950 bg-slate-200">
                         <x-heroicon-o-chat-bubble-oval-left class="h-5 w-5" />
                     </div>
 
                     <h3>Ask and answer questions</h3>
-                    <p class="text-slate-400">Engage with the community in an open and friendly way.</p>
+                    <p class="dark:text-slate-400 text-slate-500 text-sm">Engage with the community in an open and friendly way.</p>
                 </div>
 
-                <div class="rounded-2xl border-t border-slate-800 bg-slate-900 p-4 md:aspect-video">
-                    <div class="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-slate-950">
+                <div class="rounded-2xl dark:border-t border-none dark:border-slate-800 dark:shadow-none shadow-sm dark:bg-slate-900 bg-slate-50 p-4 md:aspect-video">
+                    <div class="mb-3 flex h-12 w-12 items-center justify-center rounded-full dark:bg-slate-950 bg-slate-200">
                         <x-heroicon-o-globe-americas class="h-5 w-5" />
                     </div>
 
                     <h3>Discover</h3>
-                    <p class="text-slate-400">keep an eye on the people you admire, and expand your circle.</p>
+                    <p class="dark:text-slate-400 text-slate-500 text-sm">Keep an eye on the people you admire, and expand your circle.</p>
                 </div>
             </div>
         </section>
diff --git a/resources/views/auth/forgot-password.blade.php b/resources/views/auth/forgot-password.blade.php
index 4ec79c5cf..63b38f233 100644
--- a/resources/views/auth/forgot-password.blade.php
+++ b/resources/views/auth/forgot-password.blade.php
@@ -1,5 +1,5 @@
 <x-guest-layout>
-    <div class="mb-4 text-sm text-slate-400">
+    <div class="mb-4 text-sm dark:text-slate-400 text-slate-500">
         {{ __('Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.') }}
     </div>
 
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index fe3288076..3586c5fa2 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -47,8 +47,8 @@ class="mt-1 block w-full pr-10"
                 />
                 <div class="absolute inset-y-0 right-0 flex items-center pr-3">
                     <button type="button" x-on:click="showPassword = !showPassword">
-                        <x-icons.eye x-show="showPassword" class="size-5 text-gray-400 hover:text-pink-500" />
-                        <x-icons.eye-off x-show="!showPassword" class="size-5 text-gray-400 hover:text-pink-500" />
+                        <x-icons.eye x-show="showPassword" class="size-5 text-slate-400 hover:text-pink-500" />
+                        <x-icons.eye-off x-show="!showPassword" class="size-5 text-slate-400 hover:text-pink-500" />
                     </button>
                 </div>
             </div>
@@ -77,7 +77,7 @@ class="flex items-center"
         <div class="mt-4 flex items-center justify-end space-x-3.5">
             @if (Route::has('password.request'))
                 <a
-                    class="text-sm text-slate-200 underline hover:no-underline"
+                    class="text-sm dark:text-slate-200 text-slate-800 underline hover:no-underline"
                     href="{{ route('password.request') }}"
                     wire:navigate
                 >
@@ -97,7 +97,7 @@ class="text-sm text-slate-200 underline hover:no-underline"
         Don't have an account?
         <a
             href="{{ route('register') }}"
-            class="text-slate-200 underline hover:no-underline"
+            class="dark:text-slate-200 text-slate-800 underline hover:no-underline"
             wire:navigate
         >
             {{ __('Sign up here') }}
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index 32b22df1f..b8f6d7eb9 100644
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -167,7 +167,7 @@ class="mt-2"
                 <span class="text-slate-500">Already have an account?</span>
 
                 <a
-                    class="rounded-md text-sm text-slate-200 underline hover:no-underline focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2"
+                    class="rounded-md text-sm dark:text-slate-200 text-slate-800 underline hover:no-underline focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2"
                     href="{{ route('login') }}"
                     wire:navigate
                 >
diff --git a/resources/views/components/home-menu.blade.php b/resources/views/components/home-menu.blade.php
index 42ac0e485..8d50f6cee 100644
--- a/resources/views/components/home-menu.blade.php
+++ b/resources/views/components/home-menu.blade.php
@@ -1,7 +1,7 @@
 <div class="mb-8 flex justify-between space-x-2">
     <a
         href="{{ route('home.feed') }}"
-        class="{{ request()->routeIs('home.feed') ? 'bg-pink-600 text-slate-100' : 'text-slate-500 dark:hover:text-slate-100 hover:text-slate-800 dark:bg-slate-900 bg-slate-50 ' }} inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-md border dark:border-transparent border-slate-200 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
+        class="{{ request()->routeIs('home.feed') ? 'bg-pink-600 text-slate-100' : 'dark:text-slate-500 text-slate-400 dark:hover:text-slate-100 hover:text-slate-800 dark:bg-slate-900 bg-slate-50 ' }} inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-md border dark:border-transparent border-slate-200 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
         title="{{ __('Feed') }}"
         wire:navigate
         wire:transition
@@ -13,7 +13,7 @@ class="h-6 w-6 xsm:mr-2" />
 
     <a
         href="{{ route('home.for_you') }}"
-        class="{{ request()->routeIs('home.for_you') ? 'bg-pink-600 text-slate-100' : 'text-slate-500 dark:hover:text-slate-100 hover:text-slate-800 dark:bg-slate-900 bg-slate-50 ' }} inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-md border dark:border-transparent border-slate-200 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
+        class="{{ request()->routeIs('home.for_you') ? 'bg-pink-600 text-slate-100' : 'dark:text-slate-500 text-slate-400 dark:hover:text-slate-100 hover:text-slate-800 dark:bg-slate-900 bg-slate-50 ' }} inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-md border dark:border-transparent border-slate-200 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
         title="{{ __('For you') }}"
         wire:navigate
         wire:transition
@@ -25,7 +25,7 @@ class="h-6 w-6 xsm:mr-2" />
 
     <a
         href="{{ route('home.trending') }}"
-        class="{{ request()->routeIs('home.trending') ? 'bg-pink-600 text-slate-100' : 'text-slate-500 dark:hover:text-slate-100 hover:text-slate-800 dark:bg-slate-900 bg-slate-50 ' }} inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-md border dark:border-transparent border-slate-200 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
+        class="{{ request()->routeIs('home.trending') ? 'bg-pink-600 text-slate-100' : 'dark:text-slate-500 text-slate-400 dark:hover:text-slate-100 hover:text-slate-800 dark:bg-slate-900 bg-slate-50 ' }} inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-md border dark:border-transparent border-slate-200 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
         title="{{ __('Trending') }}"
         wire:navigate
         wire:transition
@@ -39,7 +39,7 @@ class="h-6 w-6 xsm:mr-2"
 
     <a
         href="{{ route('home.users') }}"
-        class="{{ request()->routeIs('home.users') ? 'bg-pink-600 text-slate-100' : 'text-slate-500 dark:hover:text-slate-100 hover:text-slate-800 dark:bg-slate-900 bg-slate-50 ' }} inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-md border dark:border-transparent border-slate-200 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
+        class="{{ request()->routeIs('home.users') ? 'bg-pink-600 text-slate-100' : 'dark:text-slate-500 text-slate-400 dark:hover:text-slate-100 hover:text-slate-800 dark:bg-slate-900 bg-slate-50 ' }} inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-md border dark:border-transparent border-slate-200 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
         title="{{ __('Search') }}"
         wire:navigate
         wire:transition
diff --git a/resources/views/components/pinkary-logo.blade.php b/resources/views/components/pinkary-logo.blade.php
index b90f4c3aa..62bad828b 100644
--- a/resources/views/components/pinkary-logo.blade.php
+++ b/resources/views/components/pinkary-logo.blade.php
@@ -1,5 +1,5 @@
 <svg
-    {{ $attributes }}
+    {{ $attributes->merge(['class' => 'dark:block hidden']) }}
     alt="Pinkary logo"
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
@@ -7,3 +7,11 @@
 >
     <path fill="#fff" d="M17.596 171.084c-4.24 0-8.268-1.131-12.084-3.392C1.83733 165.431 0 162.533 0 159c0-1.837.28267-3.816.848-5.936.70667-2.12 1.34267-4.099 1.908-5.936 4.38133-13.427 8.48-25.935 12.296-37.524 3.816-11.7307 7.632-22.9667 11.448-33.708 3.9573-10.8827 8.056-21.7653 12.296-32.648 4.3813-10.8827 9.2573-22.26 14.628-34.132-5.3707 1.1307-9.964 2.6147-13.78 4.452-3.816 1.696-6.9253 3.2507-9.328 4.664-2.4027 1.272-4.1693 1.908-5.3 1.908-.7067 0-1.7667-.4947-3.18-1.484-1.272-.9893-2.4027-2.12-3.392-3.392-.9893-1.272-1.484-2.4027-1.484-3.392 3.9573-1.696 8.5507-3.46267 13.78-5.3 5.3707-1.83733 11.1653-3.392 17.384-4.664C54.3427.636 60.5613 0 66.78 0c6.6427 0 13.4267.91867 20.352 2.756 6.9253 1.696 13.285 4.31066 19.08 7.844 5.936 3.392 10.671 7.7027 14.204 12.932 3.675 5.088 5.512 11.0947 5.512 18.02 0 7.4907-1.696 13.9213-5.088 19.292-3.392 5.3707-7.915 9.8933-13.568 13.568-5.512 3.6747-11.5187 6.6427-18.02 8.904-6.5013 2.2613-13.0027 3.9573-19.504 5.088-6.36 1.1307-12.084 1.908-17.172 2.332-5.088.424-8.904.636-11.448.636h-1.272c-3.9573 13.992-7.844 27.984-11.66 41.976-3.816 13.851-7.3493 26.429-10.6 37.736ZM41.764 84.8c7.9147-.5653 15.8293-1.908 23.744-4.028 7.9147-2.12 15.052-5.0173 21.412-8.692 6.5013-3.816 11.66-8.5507 15.476-14.204 3.957-5.6533 5.936-12.2253 5.936-19.716 0-7.0667-1.908-12.7907-5.724-17.172-3.6747-4.3813-8.48-7.7027-14.416-9.964-5.7947-2.26133-11.9427-3.46267-18.444-3.60401C64.66 17.3133 59.784 29.044 55.12 42.612 50.456 56.0387 46.004 70.1013 41.764 84.8Z" /><path fill="#fff" d="M123.412 159c-6.219 0-10.883-1.837-13.992-5.512-3.109-3.675-4.664-8.127-4.664-13.356 0-3.251.565-7.349 1.696-12.296 1.131-4.947 2.685-10.105 4.664-15.476 2.12-5.512 4.523-10.671 7.208-15.476 2.685-4.8053 5.583-8.692 8.692-11.66 3.109-3.1093 6.219-4.664 9.328-4.664 1.696 0 3.18.5653 4.452 1.696 1.272.9893 1.908 2.4733 1.908 4.452 0 1.8373-1.131 4.5933-3.392 8.268-2.12 3.6747-4.664 7.915-7.632 12.72-2.827 4.805-5.371 9.823-7.632 15.052-2.12 5.088-3.18 9.964-3.18 14.628 0 4.523.777 7.561 2.332 9.116 1.696 1.413 4.099 2.12 7.208 2.12 4.805 0 10.035-2.403 15.688-7.208 5.653-4.805 11.519-13.215 17.596-25.228l3.18 3.392c-4.947 12.437-11.236 22.119-18.868 29.044-7.632 6.925-15.829 10.388-24.592 10.388Zm25.016-95.612c-2.685 0-5.159-.636-7.42-1.908-2.12-1.4133-3.18-3.5333-3.18-6.36 0-3.392 1.837-6.2893 5.512-8.692 3.675-2.4027 7.491-3.604 11.448-3.604 2.544 0 4.664.5653 6.36 1.696 1.837 1.1307 2.756 3.18 2.756 6.148 0 2.968-1.625 5.8653-4.876 8.692-3.251 2.6853-6.784 4.028-10.6 4.028Z" /><path fill="#fff" d="M229.654 156.88c-5.512 0-9.752-1.413-12.72-4.24-2.827-2.685-4.24-6.148-4.24-10.388 0-2.827.495-5.795 1.484-8.904.989-3.251 1.979-6.501 2.968-9.752.989-3.251 1.484-6.36 1.484-9.328 0-3.109-.777-5.229-2.332-6.36-1.413-1.272-3.109-1.908-5.088-1.908-4.24 0-8.621 1.767-13.144 5.3-4.381 3.392-8.692 7.703-12.932 12.932-4.099 5.229-7.985 10.671-11.66 16.324-3.675 5.653-6.855 10.741-9.54 15.264-2.685 0-5.229-.495-7.632-1.484-2.403-.848-4.452-2.403-6.148-4.664.141-.707.989-2.827 2.544-6.36 1.413-3.675 3.039-7.985 4.876-12.932 1.837-5.088 3.463-10.388 4.876-15.9 1.413-5.512 2.12-10.529 2.12-15.052.989-1.1307 2.473-2.2613 4.452-3.392 2.12-1.1307 4.311-1.696 6.572-1.696 4.947 0 7.42 2.12 7.42 6.36 0 1.696-.353 4.24-1.06 7.632-.565 3.251-1.413 6.996-2.544 11.236 3.675-4.947 7.703-9.611 12.084-13.992 4.381-4.381 8.904-7.9147 13.568-10.6 4.805-2.8267 9.611-4.24 14.416-4.24 6.077 0 10.529 2.0493 13.356 6.148 2.968 4.099 4.452 8.621 4.452 13.568 0 4.24-.707 8.197-2.12 11.872-1.413 3.675-2.827 7.137-4.24 10.388-1.272 3.251-1.908 6.431-1.908 9.54 0 2.261.495 3.887 1.484 4.876 1.131.848 2.332 1.272 3.604 1.272 3.392 0 6.925-1.625 10.6-4.876 3.675-3.251 7.137-7.349 10.388-12.296 3.392-5.088 6.36-10.176 8.904-15.264l3.604 2.968c-2.968 6.925-6.36 13.285-10.176 19.08-3.675 5.653-7.844 10.247-12.508 13.78-4.523 3.392-9.611 5.088-15.264 5.088Z" /><path fill="#fff" d="M325.617 160.696c-4.381 0-8.197-1.413-11.448-4.24-3.251-2.827-5.865-6.36-7.844-10.6-1.979-4.24-3.463-8.551-4.452-12.932-.989-4.523-1.484-8.409-1.484-11.66 1.979-.424 4.452-1.06 7.42-1.908 2.968-.848 6.007-1.979 9.116-3.392 3.109-1.555 5.653-3.392 7.632-5.512 2.12-2.261 3.18-4.947 3.18-8.056 0-2.544-.848-4.5933-2.544-6.148-1.555-1.5547-3.816-2.332-6.784-2.332-3.957 0-7.703 1.3427-11.236 4.028-3.533 2.544-6.855 5.936-9.964 10.176-2.968 4.24-5.724 8.833-8.268 13.78-2.403 4.947-4.593 9.752-6.572 14.416-1.837 4.664-3.392 8.692-4.664 12.084-1.555 4.24-3.039 7.067-4.452 8.48-1.413 1.555-3.463 2.332-6.148 2.332-.989 0-2.191-.283-3.604-.848-1.272-.565-2.403-1.979-3.392-4.24-.848-2.261-1.272-5.865-1.272-10.812 0-8.621 1.201-18.091 3.604-28.408s5.583-20.776 9.54-31.376c4.099-10.7413 8.551-20.988 13.356-30.74 4.805-9.752 9.681-18.5147 14.628-26.288 4.947-7.7733 9.54-13.9213 13.78-18.444 4.381-4.52267 7.985-6.784 10.812-6.784 2.403 0 4.381 1.484 5.936 4.452 1.696 2.82667 2.544 6.5013 2.544 11.024 0 4.8053-1.06 10.176-3.18 16.112-2.12 5.7947-5.159 11.7307-9.116 17.808-3.816 5.936-8.409 11.5893-13.78 16.96-5.371 5.3707-11.307 9.964-17.808 13.78-3.957 9.1867-6.996 18.3027-9.116 27.348-2.12 8.904-3.463 16.819-4.028 23.744 2.544-5.795 5.441-11.731 8.692-17.808 3.251-6.077 6.855-11.731 10.812-16.96 3.957-5.3707 8.197-9.6813 12.72-12.932 4.664-3.2507 9.611-4.876 14.84-4.876 5.653 0 10.6 1.9787 14.84 5.936s6.36 8.904 6.36 14.84c0 4.24-1.131 7.915-3.392 11.024-2.261 3.109-5.088 5.724-8.48 7.844-3.251 1.979-6.572 3.463-9.964 4.452-3.392.989-6.289 1.555-8.692 1.696.424 1.837.989 4.169 1.696 6.996.848 2.827 1.908 5.583 3.18 8.268 1.272 2.685 2.897 4.947 4.876 6.784 1.979 1.837 4.311 2.756 6.996 2.756 3.533 0 7.137-1.625 10.812-4.876 3.816-3.251 7.491-7.561 11.024-12.932 3.675-5.371 6.925-11.307 9.752-17.808l2.968 3.604c-2.403 7.067-5.724 13.851-9.964 20.352-4.099 6.501-8.692 11.731-13.78 15.688-5.088 4.099-10.317 6.148-15.688 6.148Zm-30.316-93.704c3.816-3.392 7.844-7.5613 12.084-12.508 4.24-5.088 7.844-10.4587 10.812-16.112 3.109-5.7947 4.735-11.3067 4.876-16.536V21.2c-1.413.5653-3.675 3.0387-6.784 7.42-2.968 4.24-6.289 9.6813-9.964 16.324-3.675 6.6427-7.349 13.992-11.024 22.048Z" /><path fill="#fff" d="M368.211 162.604c-4.664 0-8.692-1.555-12.084-4.664-3.533-3.109-5.3-7.773-5.3-13.992 0-4.947 1.131-10.317 3.392-16.112 2.261-5.795 5.371-11.519 9.328-17.172 3.957-5.653 8.48-10.7413 13.568-15.264 5.088-4.664 10.529-8.4093 16.324-11.236 5.795-2.8267 11.589-4.24 17.384-4.24 6.077 0 11.236 1.5547 15.476 4.664 4.24 3.1093 6.36 7.208 6.36 12.296 0 3.816-1.343 6.572-4.028 8.268-2.685 1.696-5.865 2.191-9.54 1.484.283-1.272.495-2.544.636-3.816.283-1.272.424-2.615.424-4.028 0-2.8267-.565-5.3707-1.696-7.632-1.131-2.2613-3.533-3.392-7.208-3.392-3.957 0-7.985 1.3427-12.084 4.028-4.099 2.6853-8.056 6.2187-11.872 10.6-3.675 4.24-6.996 8.975-9.964 14.204-2.968 5.088-5.3 10.105-6.996 15.052-1.696 4.947-2.544 9.399-2.544 13.356 0 4.523 1.625 6.784 4.876 6.784 3.251 0 6.855-1.555 10.812-4.664 3.957-3.251 7.915-7.279 11.872-12.084 4.099-4.805 7.985-9.681 11.66-14.628 3.675-5.088 6.855-9.399 9.54-12.932.424-.707.989-1.06 1.696-1.06.565.141 1.625.495 3.18 1.06 1.696.424 3.251 1.131 4.664 2.12 1.413.989 2.12 2.261 2.12 3.816 0 1.413-.636 3.251-1.908 5.512-1.131 2.12-2.544 4.523-4.24 7.208-1.555 2.544-2.968 5.159-4.24 7.844-1.131 2.544-1.696 5.017-1.696 7.42 0 1.837.495 3.604 1.484 5.3.989 1.555 2.615 2.332 4.876 2.332 3.392 0 8.127-2.473 14.204-7.42 6.219-5.088 12.508-13.639 18.868-25.652l4.028 4.028c-3.392 7.632-7.491 14.416-12.296 20.352-4.664 5.795-9.611 10.317-14.84 13.568-5.229 3.392-10.529 5.088-15.9 5.088-5.795 0-10.105-1.837-12.932-5.512s-4.381-7.632-4.664-11.872v-1.06c-5.653 6.784-10.883 12.155-15.688 16.112-4.664 3.957-9.681 5.936-15.052 5.936Z" /><path fill="#fff" d="M489.758 158.152c-5.229 0-9.469-1.413-12.72-4.24-3.251-2.685-4.876-6.36-4.876-11.024 0-3.957.989-8.197 2.968-12.72 1.979-4.523 3.957-8.975 5.936-13.356 2.12-4.381 3.18-8.268 3.18-11.66 0-3.251-1.06-5.936-3.18-8.056-2.12-2.2613-4.593-4.0987-7.42-5.512-3.109 7.7733-6.643 15.335-10.6 22.684-3.816 7.208-6.925 12.861-9.328 16.96l-3.18-6.148c1.979-3.675 4.593-8.904 7.844-15.688 3.251-6.784 6.36-14.3453 9.328-22.684-1.413-1.4133-2.12-3.3213-2.12-5.724 0-3.6747 1.131-7.1373 3.392-10.388s4.452-4.876 6.572-4.876c1.696 0 2.897.9893 3.604 2.968.848 1.8373 1.272 3.1093 1.272 3.816 0 .7067-.353 1.9787-1.06 3.816-.565 1.8373-.989 3.18-1.272 4.028.141 1.5547 1.343 3.1093 3.604 4.664 2.403 1.4133 5.088 3.1093 8.056 5.088 2.968 1.9787 5.583 4.452 7.844 7.42s3.392 6.713 3.392 11.236c0 4.099-.919 8.268-2.756 12.508-1.837 4.24-3.675 8.197-5.512 11.872-1.837 3.675-2.756 6.855-2.756 9.54 0 1.979.495 3.321 1.484 4.028 1.131.565 2.403.848 3.816.848 3.392 0 6.925-.989 10.6-2.968 3.675-2.12 7.279-4.805 10.812-8.056 3.533-3.251 6.643-6.643 9.328-10.176 2.685-3.675 4.735-6.996 6.148-9.964l5.088 3.816c-2.685 6.077-6.572 12.084-11.66 18.02-5.088 5.795-10.741 10.6-16.96 14.416-6.219 3.675-12.508 5.512-18.868 5.512Z" /><path fill="#fff" d="M537.73 212c-3.534 0-6.855-1.131-9.964-3.392-2.968-2.12-4.452-5.583-4.452-10.388 0-4.523 1.342-8.621 4.028-12.296 2.685-3.533 6.148-6.855 10.388-9.964 4.24-2.968 8.762-5.724 13.568-8.268 4.946-2.403 9.681-4.664 14.204-6.784 1.554-4.099 3.25-9.257 5.088-15.476 1.978-6.36 3.674-12.225 5.088-17.596-4.382 6.077-9.046 11.448-13.992 16.112-4.947 4.664-10.459 6.996-16.536 6.996-2.544 0-5.23-.495-8.056-1.484-2.827-1.131-5.23-2.968-7.208-5.512-1.838-2.685-2.756-6.219-2.756-10.6 0-3.675.636-8.127 1.908-13.356 1.413-5.229 3.109-10.317 5.088-15.264 2.12-5.088 4.31-9.2573 6.572-12.508 2.261-3.392 4.24-5.088 5.936-5.088.848 0 2.049.3533 3.604 1.06 1.696.5653 3.321 1.4133 4.876 2.544 1.554.9893 2.544 2.12 2.968 3.392-1.272 1.696-2.686 4.1693-4.24 7.42-1.555 3.109-3.039 6.643-4.452 10.6-1.414 3.816-2.615 7.561-3.604 11.236-.848 3.675-1.272 6.855-1.272 9.54 0 2.12.424 3.957 1.272 5.512.848 1.555 2.473 2.332 4.876 2.332 3.109 0 6.289-1.272 9.54-3.816 3.392-2.544 6.642-5.795 9.752-9.752 3.25-3.957 6.148-7.985 8.692-12.084.282-.989.565-2.544.848-4.664.282-2.12.777-4.311 1.484-6.572.706-2.403 1.908-4.5933 3.604-6.572 1.837-1.9787 4.381-2.968 7.632-2.968 1.13 0 2.19.0707 3.18.212.989.1413 2.19.3533 3.604.636 0 2.12-.778 6.289-2.332 12.508-1.414 6.077-3.322 13.144-5.724 21.2-2.403 8.056-5.088 16.112-8.056 24.168 5.936-2.403 12.084-6.36 18.444-11.872 6.501-5.653 11.73-13.639 15.688-23.956l3.604 2.968c-2.12 7.067-5.371 13.215-9.752 18.444-4.24 5.229-9.046 9.681-14.416 13.356-5.371 3.675-10.812 6.713-16.324 9.116-3.816 9.187-7.986 17.667-12.508 25.44-4.382 7.773-9.046 13.921-13.992 18.444-4.947 4.664-10.247 6.996-15.9 6.996Zm-2.12-7.844c2.685 0 6.43-2.827 11.236-8.48 4.805-5.653 9.681-14.133 14.628-25.44-4.523 2.261-9.116 4.876-13.78 7.844-4.523 3.109-8.339 6.36-11.448 9.752-3.11 3.392-4.664 6.855-4.664 10.388 0 1.413.282 2.756.848 4.028.706 1.272 1.766 1.908 3.18 1.908Z" /><circle cx="631.146" cy="96.1079" r="11.7778" fill="#EC4899" />
 </svg>
+<svg
+    {{ $attributes->merge(['class' => 'dark:hidden block']) }}
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 643 212"
+>
+    <path fill="#0F172A" d="M17.596 171.084c-4.24 0-8.268-1.131-12.084-3.392C1.83733 165.431 0 162.533 0 159c0-1.837.28267-3.816.848-5.936.70667-2.12 1.34267-4.099 1.908-5.936 4.38133-13.427 8.48-25.935 12.296-37.524 3.816-11.7307 7.632-22.9667 11.448-33.708 3.9573-10.8827 8.056-21.7653 12.296-32.648 4.3813-10.8827 9.2573-22.26 14.628-34.132-5.3707 1.1307-9.964 2.6147-13.78 4.452-3.816 1.696-6.9253 3.2507-9.328 4.664-2.4027 1.272-4.1693 1.908-5.3 1.908-.7067 0-1.7667-.4947-3.18-1.484-1.272-.9893-2.4027-2.12-3.392-3.392-.9893-1.272-1.484-2.4027-1.484-3.392 3.9573-1.696 8.5507-3.46267 13.78-5.3 5.3707-1.83733 11.1653-3.392 17.384-4.664C54.3427.636 60.5613 0 66.78 0c6.6427 0 13.4267.91867 20.352 2.756 6.9253 1.696 13.285 4.31066 19.08 7.844 5.936 3.392 10.671 7.7027 14.204 12.932 3.675 5.088 5.512 11.0947 5.512 18.02 0 7.4907-1.696 13.9213-5.088 19.292-3.392 5.3707-7.915 9.8933-13.568 13.568-5.512 3.6747-11.5187 6.6427-18.02 8.904-6.5013 2.2613-13.0027 3.9573-19.504 5.088-6.36 1.1307-12.084 1.908-17.172 2.332-5.088.424-8.904.636-11.448.636h-1.272c-3.9573 13.992-7.844 27.984-11.66 41.976-3.816 13.851-7.3493 26.429-10.6 37.736ZM41.764 84.8c7.9147-.5653 15.8293-1.908 23.744-4.028 7.9147-2.12 15.052-5.0173 21.412-8.692 6.5013-3.816 11.66-8.5507 15.476-14.204 3.957-5.6533 5.936-12.2253 5.936-19.716 0-7.0667-1.908-12.7907-5.724-17.172-3.6747-4.3813-8.48-7.7027-14.416-9.964-5.7947-2.26133-11.9427-3.46267-18.444-3.60401C64.66 17.3133 59.784 29.044 55.12 42.612 50.456 56.0387 46.004 70.1013 41.764 84.8Z" /><path fill="#0F172A" d="M123.412 159c-6.219 0-10.883-1.837-13.992-5.512-3.109-3.675-4.664-8.127-4.664-13.356 0-3.251.565-7.349 1.696-12.296 1.131-4.947 2.685-10.105 4.664-15.476 2.12-5.512 4.523-10.671 7.208-15.476 2.685-4.8053 5.583-8.692 8.692-11.66 3.109-3.1093 6.219-4.664 9.328-4.664 1.696 0 3.18.5653 4.452 1.696 1.272.9893 1.908 2.4733 1.908 4.452 0 1.8373-1.131 4.5933-3.392 8.268-2.12 3.6747-4.664 7.915-7.632 12.72-2.827 4.805-5.371 9.823-7.632 15.052-2.12 5.088-3.18 9.964-3.18 14.628 0 4.523.777 7.561 2.332 9.116 1.696 1.413 4.099 2.12 7.208 2.12 4.805 0 10.035-2.403 15.688-7.208 5.653-4.805 11.519-13.215 17.596-25.228l3.18 3.392c-4.947 12.437-11.236 22.119-18.868 29.044-7.632 6.925-15.829 10.388-24.592 10.388Zm25.016-95.612c-2.685 0-5.159-.636-7.42-1.908-2.12-1.4133-3.18-3.5333-3.18-6.36 0-3.392 1.837-6.2893 5.512-8.692 3.675-2.4027 7.491-3.604 11.448-3.604 2.544 0 4.664.5653 6.36 1.696 1.837 1.1307 2.756 3.18 2.756 6.148 0 2.968-1.625 5.8653-4.876 8.692-3.251 2.6853-6.784 4.028-10.6 4.028Z" /><path fill="#0F172A" d="M229.654 156.88c-5.512 0-9.752-1.413-12.72-4.24-2.827-2.685-4.24-6.148-4.24-10.388 0-2.827.495-5.795 1.484-8.904.989-3.251 1.979-6.501 2.968-9.752.989-3.251 1.484-6.36 1.484-9.328 0-3.109-.777-5.229-2.332-6.36-1.413-1.272-3.109-1.908-5.088-1.908-4.24 0-8.621 1.767-13.144 5.3-4.381 3.392-8.692 7.703-12.932 12.932-4.099 5.229-7.985 10.671-11.66 16.324-3.675 5.653-6.855 10.741-9.54 15.264-2.685 0-5.229-.495-7.632-1.484-2.403-.848-4.452-2.403-6.148-4.664.141-.707.989-2.827 2.544-6.36 1.413-3.675 3.039-7.985 4.876-12.932 1.837-5.088 3.463-10.388 4.876-15.9 1.413-5.512 2.12-10.529 2.12-15.052.989-1.1307 2.473-2.2613 4.452-3.392 2.12-1.1307 4.311-1.696 6.572-1.696 4.947 0 7.42 2.12 7.42 6.36 0 1.696-.353 4.24-1.06 7.632-.565 3.251-1.413 6.996-2.544 11.236 3.675-4.947 7.703-9.611 12.084-13.992 4.381-4.381 8.904-7.9147 13.568-10.6 4.805-2.8267 9.611-4.24 14.416-4.24 6.077 0 10.529 2.0493 13.356 6.148 2.968 4.099 4.452 8.621 4.452 13.568 0 4.24-.707 8.197-2.12 11.872-1.413 3.675-2.827 7.137-4.24 10.388-1.272 3.251-1.908 6.431-1.908 9.54 0 2.261.495 3.887 1.484 4.876 1.131.848 2.332 1.272 3.604 1.272 3.392 0 6.925-1.625 10.6-4.876 3.675-3.251 7.137-7.349 10.388-12.296 3.392-5.088 6.36-10.176 8.904-15.264l3.604 2.968c-2.968 6.925-6.36 13.285-10.176 19.08-3.675 5.653-7.844 10.247-12.508 13.78-4.523 3.392-9.611 5.088-15.264 5.088Z" /><path fill="#0F172A" d="M325.617 160.696c-4.381 0-8.197-1.413-11.448-4.24-3.251-2.827-5.865-6.36-7.844-10.6-1.979-4.24-3.463-8.551-4.452-12.932-.989-4.523-1.484-8.409-1.484-11.66 1.979-.424 4.452-1.06 7.42-1.908 2.968-.848 6.007-1.979 9.116-3.392 3.109-1.555 5.653-3.392 7.632-5.512 2.12-2.261 3.18-4.947 3.18-8.056 0-2.544-.848-4.5933-2.544-6.148-1.555-1.5547-3.816-2.332-6.784-2.332-3.957 0-7.703 1.3427-11.236 4.028-3.533 2.544-6.855 5.936-9.964 10.176-2.968 4.24-5.724 8.833-8.268 13.78-2.403 4.947-4.593 9.752-6.572 14.416-1.837 4.664-3.392 8.692-4.664 12.084-1.555 4.24-3.039 7.067-4.452 8.48-1.413 1.555-3.463 2.332-6.148 2.332-.989 0-2.191-.283-3.604-.848-1.272-.565-2.403-1.979-3.392-4.24-.848-2.261-1.272-5.865-1.272-10.812 0-8.621 1.201-18.091 3.604-28.408s5.583-20.776 9.54-31.376c4.099-10.7413 8.551-20.988 13.356-30.74 4.805-9.752 9.681-18.5147 14.628-26.288 4.947-7.7733 9.54-13.9213 13.78-18.444 4.381-4.52267 7.985-6.784 10.812-6.784 2.403 0 4.381 1.484 5.936 4.452 1.696 2.82667 2.544 6.5013 2.544 11.024 0 4.8053-1.06 10.176-3.18 16.112-2.12 5.7947-5.159 11.7307-9.116 17.808-3.816 5.936-8.409 11.5893-13.78 16.96-5.371 5.3707-11.307 9.964-17.808 13.78-3.957 9.1867-6.996 18.3027-9.116 27.348-2.12 8.904-3.463 16.819-4.028 23.744 2.544-5.795 5.441-11.731 8.692-17.808 3.251-6.077 6.855-11.731 10.812-16.96 3.957-5.3707 8.197-9.6813 12.72-12.932 4.664-3.2507 9.611-4.876 14.84-4.876 5.653 0 10.6 1.9787 14.84 5.936s6.36 8.904 6.36 14.84c0 4.24-1.131 7.915-3.392 11.024-2.261 3.109-5.088 5.724-8.48 7.844-3.251 1.979-6.572 3.463-9.964 4.452-3.392.989-6.289 1.555-8.692 1.696.424 1.837.989 4.169 1.696 6.996.848 2.827 1.908 5.583 3.18 8.268 1.272 2.685 2.897 4.947 4.876 6.784 1.979 1.837 4.311 2.756 6.996 2.756 3.533 0 7.137-1.625 10.812-4.876 3.816-3.251 7.491-7.561 11.024-12.932 3.675-5.371 6.925-11.307 9.752-17.808l2.968 3.604c-2.403 7.067-5.724 13.851-9.964 20.352-4.099 6.501-8.692 11.731-13.78 15.688-5.088 4.099-10.317 6.148-15.688 6.148Zm-30.316-93.704c3.816-3.392 7.844-7.5613 12.084-12.508 4.24-5.088 7.844-10.4587 10.812-16.112 3.109-5.7947 4.735-11.3067 4.876-16.536V21.2c-1.413.5653-3.675 3.0387-6.784 7.42-2.968 4.24-6.289 9.6813-9.964 16.324-3.675 6.6427-7.349 13.992-11.024 22.048Z" /><path fill="#0F172A" d="M368.211 162.604c-4.664 0-8.692-1.555-12.084-4.664-3.533-3.109-5.3-7.773-5.3-13.992 0-4.947 1.131-10.317 3.392-16.112 2.261-5.795 5.371-11.519 9.328-17.172 3.957-5.653 8.48-10.7413 13.568-15.264 5.088-4.664 10.529-8.4093 16.324-11.236 5.795-2.8267 11.589-4.24 17.384-4.24 6.077 0 11.236 1.5547 15.476 4.664 4.24 3.1093 6.36 7.208 6.36 12.296 0 3.816-1.343 6.572-4.028 8.268-2.685 1.696-5.865 2.191-9.54 1.484.283-1.272.495-2.544.636-3.816.283-1.272.424-2.615.424-4.028 0-2.8267-.565-5.3707-1.696-7.632-1.131-2.2613-3.533-3.392-7.208-3.392-3.957 0-7.985 1.3427-12.084 4.028-4.099 2.6853-8.056 6.2187-11.872 10.6-3.675 4.24-6.996 8.975-9.964 14.204-2.968 5.088-5.3 10.105-6.996 15.052-1.696 4.947-2.544 9.399-2.544 13.356 0 4.523 1.625 6.784 4.876 6.784 3.251 0 6.855-1.555 10.812-4.664 3.957-3.251 7.915-7.279 11.872-12.084 4.099-4.805 7.985-9.681 11.66-14.628 3.675-5.088 6.855-9.399 9.54-12.932.424-.707.989-1.06 1.696-1.06.565.141 1.625.495 3.18 1.06 1.696.424 3.251 1.131 4.664 2.12 1.413.989 2.12 2.261 2.12 3.816 0 1.413-.636 3.251-1.908 5.512-1.131 2.12-2.544 4.523-4.24 7.208-1.555 2.544-2.968 5.159-4.24 7.844-1.131 2.544-1.696 5.017-1.696 7.42 0 1.837.495 3.604 1.484 5.3.989 1.555 2.615 2.332 4.876 2.332 3.392 0 8.127-2.473 14.204-7.42 6.219-5.088 12.508-13.639 18.868-25.652l4.028 4.028c-3.392 7.632-7.491 14.416-12.296 20.352-4.664 5.795-9.611 10.317-14.84 13.568-5.229 3.392-10.529 5.088-15.9 5.088-5.795 0-10.105-1.837-12.932-5.512s-4.381-7.632-4.664-11.872v-1.06c-5.653 6.784-10.883 12.155-15.688 16.112-4.664 3.957-9.681 5.936-15.052 5.936Z" /><path fill="#0F172A" d="M489.758 158.152c-5.229 0-9.469-1.413-12.72-4.24-3.251-2.685-4.876-6.36-4.876-11.024 0-3.957.989-8.197 2.968-12.72 1.979-4.523 3.957-8.975 5.936-13.356 2.12-4.381 3.18-8.268 3.18-11.66 0-3.251-1.06-5.936-3.18-8.056-2.12-2.2613-4.593-4.0987-7.42-5.512-3.109 7.7733-6.643 15.335-10.6 22.684-3.816 7.208-6.925 12.861-9.328 16.96l-3.18-6.148c1.979-3.675 4.593-8.904 7.844-15.688 3.251-6.784 6.36-14.3453 9.328-22.684-1.413-1.4133-2.12-3.3213-2.12-5.724 0-3.6747 1.131-7.1373 3.392-10.388s4.452-4.876 6.572-4.876c1.696 0 2.897.9893 3.604 2.968.848 1.8373 1.272 3.1093 1.272 3.816 0 .7067-.353 1.9787-1.06 3.816-.565 1.8373-.989 3.18-1.272 4.028.141 1.5547 1.343 3.1093 3.604 4.664 2.403 1.4133 5.088 3.1093 8.056 5.088 2.968 1.9787 5.583 4.452 7.844 7.42s3.392 6.713 3.392 11.236c0 4.099-.919 8.268-2.756 12.508-1.837 4.24-3.675 8.197-5.512 11.872-1.837 3.675-2.756 6.855-2.756 9.54 0 1.979.495 3.321 1.484 4.028 1.131.565 2.403.848 3.816.848 3.392 0 6.925-.989 10.6-2.968 3.675-2.12 7.279-4.805 10.812-8.056 3.533-3.251 6.643-6.643 9.328-10.176 2.685-3.675 4.735-6.996 6.148-9.964l5.088 3.816c-2.685 6.077-6.572 12.084-11.66 18.02-5.088 5.795-10.741 10.6-16.96 14.416-6.219 3.675-12.508 5.512-18.868 5.512Z" /><path fill="#0F172A" d="M537.73 212c-3.534 0-6.855-1.131-9.964-3.392-2.968-2.12-4.452-5.583-4.452-10.388 0-4.523 1.342-8.621 4.028-12.296 2.685-3.533 6.148-6.855 10.388-9.964 4.24-2.968 8.762-5.724 13.568-8.268 4.946-2.403 9.681-4.664 14.204-6.784 1.554-4.099 3.25-9.257 5.088-15.476 1.978-6.36 3.674-12.225 5.088-17.596-4.382 6.077-9.046 11.448-13.992 16.112-4.947 4.664-10.459 6.996-16.536 6.996-2.544 0-5.23-.495-8.056-1.484-2.827-1.131-5.23-2.968-7.208-5.512-1.838-2.685-2.756-6.219-2.756-10.6 0-3.675.636-8.127 1.908-13.356 1.413-5.229 3.109-10.317 5.088-15.264 2.12-5.088 4.31-9.2573 6.572-12.508 2.261-3.392 4.24-5.088 5.936-5.088.848 0 2.049.3533 3.604 1.06 1.696.5653 3.321 1.4133 4.876 2.544 1.554.9893 2.544 2.12 2.968 3.392-1.272 1.696-2.686 4.1693-4.24 7.42-1.555 3.109-3.039 6.643-4.452 10.6-1.414 3.816-2.615 7.561-3.604 11.236-.848 3.675-1.272 6.855-1.272 9.54 0 2.12.424 3.957 1.272 5.512.848 1.555 2.473 2.332 4.876 2.332 3.109 0 6.289-1.272 9.54-3.816 3.392-2.544 6.642-5.795 9.752-9.752 3.25-3.957 6.148-7.985 8.692-12.084.282-.989.565-2.544.848-4.664.282-2.12.777-4.311 1.484-6.572.706-2.403 1.908-4.5933 3.604-6.572 1.837-1.9787 4.381-2.968 7.632-2.968 1.13 0 2.19.0707 3.18.212.989.1413 2.19.3533 3.604.636 0 2.12-.778 6.289-2.332 12.508-1.414 6.077-3.322 13.144-5.724 21.2-2.403 8.056-5.088 16.112-8.056 24.168 5.936-2.403 12.084-6.36 18.444-11.872 6.501-5.653 11.73-13.639 15.688-23.956l3.604 2.968c-2.12 7.067-5.371 13.215-9.752 18.444-4.24 5.229-9.046 9.681-14.416 13.356-5.371 3.675-10.812 6.713-16.324 9.116-3.816 9.187-7.986 17.667-12.508 25.44-4.382 7.773-9.046 13.921-13.992 18.444-4.947 4.664-10.247 6.996-15.9 6.996Zm-2.12-7.844c2.685 0 6.43-2.827 11.236-8.48 4.805-5.653 9.681-14.133 14.628-25.44-4.523 2.261-9.116 4.876-13.78 7.844-4.523 3.109-8.339 6.36-11.448 9.752-3.11 3.392-4.664 6.855-4.664 10.388 0 1.413.282 2.756.848 4.028.706 1.272 1.766 1.908 3.18 1.908Z" /><circle cx="631.146" cy="96.1079" r="11.7778" fill="#EC4899" />
+</svg>
\ No newline at end of file
diff --git a/resources/views/components/section-border.blade.php b/resources/views/components/section-border.blade.php
index 143dc8231..3335a2e07 100644
--- a/resources/views/components/section-border.blade.php
+++ b/resources/views/components/section-border.blade.php
@@ -1,3 +1,3 @@
 <div class="py-8">
-    <div class="border-t border-slate-800"></div>
+    <div class="border-t dark:border-slate-800 border-slate-300"></div>
 </div>
diff --git a/resources/views/components/select-input.blade.php b/resources/views/components/select-input.blade.php
index 97b5e5127..8b3c37517 100644
--- a/resources/views/components/select-input.blade.php
+++ b/resources/views/components/select-input.blade.php
@@ -2,7 +2,7 @@
 
 <select
     {{ $disabled ? 'disabled' : '' }}
-    {!! $attributes->merge(['class' => 'text-white sm:text-sm focus:border-pink-500 border-slate-800 bg-slate-900/50 backdrop-blur-sm focus:ring-slate-900 rounded-lg shadow-sm']) !!}
+    {!! $attributes->merge(['class' => 'dark:text-white text-black dark:caret-white caret-black focus:border-pink-500 dark:border-slate-800 border-slate-300 dark:bg-slate-900/50 bg-slate-50/20 backdrop-blur-sm dark:focus:ring-slate-900 focus:ring-slate-100 rounded-lg shadow-sm sm:text-sm']) !!}
 >
     @foreach ($options as $value => $label)
         <option
diff --git a/resources/views/components/text-input.blade.php b/resources/views/components/text-input.blade.php
index e20b6de5e..8921784b4 100644
--- a/resources/views/components/text-input.blade.php
+++ b/resources/views/components/text-input.blade.php
@@ -2,5 +2,5 @@
 
 <input
     {{ $disabled ? 'disabled' : '' }}
-    {!! $attributes->merge(['class' => 'dark:text-white text-black dark:caret-white caret-black focus:border-pink-500 dark:border-slate-800 border-slate-300 dark:bg-slate-900/50 bg-slate-200/50 backdrop-blur-sm dark:focus:ring-slate-900 focus:ring-slate-100 rounded-lg shadow-sm sm:text-sm']) !!}
+    {!! $attributes->merge(['class' => 'dark:text-white text-black dark:caret-white caret-black focus:border-pink-500 dark:border-slate-800 border-slate-300 dark:bg-slate-900/50 bg-slate-50/20 backdrop-blur-sm dark:focus:ring-slate-900 focus:ring-slate-100 rounded-lg shadow-sm sm:text-sm']) !!}
 />
diff --git a/resources/views/layouts/about.blade.php b/resources/views/layouts/about.blade.php
index 5a85c3b9d..89a7769a0 100644
--- a/resources/views/layouts/about.blade.php
+++ b/resources/views/layouts/about.blade.php
@@ -4,7 +4,7 @@
         @include('layouts.components.head')
     </head>
     <body
-        class="bg-slate-950 bg-center bg-repeat font-sans text-slate-50 antialiased"
+        class="dark:bg-slate-950 bg-slate-100 bg-center bg-repeat font-sans dark:text-slate-50 text-slate-900 antialiased"
         style="background-image: url({{ asset('/img/dots.svg') }})"
     >
         <livewire:flash-messages.show />
diff --git a/resources/views/layouts/guest.blade.php b/resources/views/layouts/guest.blade.php
index afd6e479b..365f75b38 100644
--- a/resources/views/layouts/guest.blade.php
+++ b/resources/views/layouts/guest.blade.php
@@ -4,7 +4,7 @@
         @include('layouts.components.head')
     </head>
     <body
-        class="bg-gray-950 bg-center bg-repeat font-sans text-gray-50 antialiased"
+        class="dark:bg-slate-950 bg-slate-100 bg-center bg-repeat font-sans dark:text-slate-50 text-slate-900 antialiased"
         style="background-image: url({{ asset('/img/dots.svg') }})"
     >
         <livewire:flash-messages.show />
diff --git a/resources/views/layouts/navigation.blade.php b/resources/views/layouts/navigation.blade.php
index 8288923eb..5b4556ec8 100644
--- a/resources/views/layouts/navigation.blade.php
+++ b/resources/views/layouts/navigation.blade.php
@@ -19,7 +19,7 @@ class=""
                     >
                         <button
                             type="button"
-                            class="{{ request()->routeIs('home.*') ? 'dark:text-slate-100 text-slate-900' : 'dark:text-slate-500 text-slate-500 dark:hover:text-slate-100 hover:text-slate-900' }} inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-50 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
+                            class="{{ request()->routeIs('home.*') ? 'dark:text-slate-100 text-slate-900' : 'dark:text-slate-500 text-slate-400 dark:hover:text-slate-100 hover:text-slate-900' }} inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-50 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
                         >
                             <x-heroicon-o-home class="h-6 w-6"/>
                         </button>
@@ -33,7 +33,7 @@ class=""
                     >
                         <button
                             type="button"
-                            class="dark:text-slate-500 text-slate-500 dark:hover:text-slate-100 hover:text-slate-900 inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-50 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
+                            class="dark:text-slate-500 text-slate-400 dark:hover:text-slate-100 hover:text-slate-900 inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-50 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
                         >
                             <x-heroicon-o-code-bracket class="h-6 w-6"/>
                         </button>
@@ -47,7 +47,7 @@ class=""
                     >
                         <button
                             type="button"
-                            class="{{ request()->fullUrlIs(route('profile.show', ['username' => auth()->user()->username])) ? 'dark:text-slate-100 text-slate-900' : 'dark:text-slate-500 text-slate-500 dark:hover:text-slate-100 hover:text-slate-900' }} inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-50 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
+                            class="{{ request()->fullUrlIs(route('profile.show', ['username' => auth()->user()->username])) ? 'dark:text-slate-100 text-slate-900' : 'dark:text-slate-500 text-slate-400 dark:hover:text-slate-100 hover:text-slate-900' }} inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-50 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
                         >
                             <x-heroicon-o-user class="h-6 w-6"/>
                         </button>
@@ -61,7 +61,7 @@ class=""
                     >
                         <button
                             type="button"
-                            class="{{ request()->routeIs('bookmarks.*') ? 'dark:text-slate-100 text-slate-900' : 'dark:text-slate-500 text-slate-500 dark:hover:text-slate-100 hover:text-slate-900' }} inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-50 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
+                            class="{{ request()->routeIs('bookmarks.*') ? 'dark:text-slate-100 text-slate-900' : 'dark:text-slate-500 text-slate-400 dark:hover:text-slate-100 hover:text-slate-900' }} inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-50 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
                         >
                             <x-heroicon-o-bookmark class="h-6 w-6"/>
                         </button>
@@ -75,7 +75,7 @@ class=""
                     >
                         <button
                             type="button"
-                            class="{{ request()->routeIs('notifications.index') ? 'dark:text-slate-100 text-slate-900' : 'dark:text-slate-500 text-slate-500 dark:hover:text-slate-100 hover:text-slate-900' }} inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-50 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
+                            class="{{ request()->routeIs('notifications.index') ? 'dark:text-slate-100 text-slate-900' : 'dark:text-slate-500 text-slate-400 dark:hover:text-slate-100 hover:text-slate-900' }} inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-50 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
                         >
                             <x-heroicon-o-bell class="h-6 w-6"/>
 
@@ -91,7 +91,7 @@ class="{{ request()->routeIs('notifications.index') ? 'dark:text-slate-100 text-
                     <x-slot name="trigger">
                         <button
                             title="Menu"
-                            class="inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-50 px-3 py-2 text-sm font-medium leading-4 text-slate-500 transition duration-150 ease-in-out dark:hover:text-slate-100 hover:text-slate-900 focus:outline-none"
+                            class="inline-flex items-center rounded-md border dark:border-transparent border-slate-200 dark:bg-slate-900 bg-slate-50 px-3 py-2 text-sm font-medium leading-4 dark:text-slate-500 text-slate-400 transition duration-150 ease-in-out dark:hover:text-slate-100 hover:text-slate-900 focus:outline-none"
                         >
                             <x-icons.bars class="size-6"/>
                         </button>
diff --git a/resources/views/livewire/about-users-avatars.blade.php b/resources/views/livewire/about-users-avatars.blade.php
index f5f88cdb2..ed99fb9b8 100644
--- a/resources/views/livewire/about-users-avatars.blade.php
+++ b/resources/views/livewire/about-users-avatars.blade.php
@@ -1,6 +1,6 @@
 <div class="relative flex w-full items-center justify-center gap-3 overflow-hidden text-2xl">
-    <div class="absolute left-0 h-full w-24 bg-gradient-to-r from-slate-950 to-transparent"></div>
-    <div class="absolute right-0 h-full w-24 bg-gradient-to-l from-slate-950 to-transparent"></div>
+    <div class="absolute left-0 h-full w-24 bg-gradient-to-r dark:from-slate-950 from-slate-100 to-transparent"></div>
+    <div class="absolute right-0 h-full w-24 bg-gradient-to-l dark:from-slate-950 from-slate-100 to-transparent"></div>
 
     @foreach ($users as $user)
         <a
@@ -13,5 +13,55 @@ class="flex-shrink-0 transition-opacity hover:opacity-90"
                 class="{{ $user->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-12 w-12"
             />
         </a>
+        <a
+            class="flex-shrink-0 transition-opacity hover:opacity-90"
+            href="{{ route('profile.show', ['username' => $user->username]) }}"
+        >
+            <img
+                src="{{ $user->avatar_url }}"
+                alt="{{ $user->username }}"
+                class="{{ $user->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-12 w-12"
+            />
+        </a>
+        <a
+            class="flex-shrink-0 transition-opacity hover:opacity-90"
+            href="{{ route('profile.show', ['username' => $user->username]) }}"
+        >
+            <img
+                src="{{ $user->avatar_url }}"
+                alt="{{ $user->username }}"
+                class="{{ $user->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-12 w-12"
+            />
+        </a>
+        <a
+            class="flex-shrink-0 transition-opacity hover:opacity-90"
+            href="{{ route('profile.show', ['username' => $user->username]) }}"
+        >
+            <img
+                src="{{ $user->avatar_url }}"
+                alt="{{ $user->username }}"
+                class="{{ $user->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-12 w-12"
+            />
+        </a>
+        <a
+            class="flex-shrink-0 transition-opacity hover:opacity-90"
+            href="{{ route('profile.show', ['username' => $user->username]) }}"
+        >
+            <img
+                src="{{ $user->avatar_url }}"
+                alt="{{ $user->username }}"
+                class="{{ $user->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-12 w-12"
+            />
+        </a>
+        <a
+            class="flex-shrink-0 transition-opacity hover:opacity-90"
+            href="{{ route('profile.show', ['username' => $user->username]) }}"
+        >
+            <img
+                src="{{ $user->avatar_url }}"
+                alt="{{ $user->username }}"
+                class="{{ $user->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-12 w-12"
+            />
+        </a>
     @endforeach
 </div>
diff --git a/resources/views/livewire/home/users.blade.php b/resources/views/livewire/home/users.blade.php
index fa8dc3378..45132feeb 100644
--- a/resources/views/livewire/home/users.blade.php
+++ b/resources/views/livewire/home/users.blade.php
@@ -10,7 +10,7 @@
                 wire:model.live.debounce.500ms="query"
                 name="q"
                 placeholder="Search for users..."
-                class="w-full mx-1 !rounded-2xl dark:!bg-slate-950 !bg-slate-100 !bg-opacity-80 py-3 pl-14"
+                class="w-full mx-1 !rounded-2xl dark:!bg-slate-950 !bg-slate-50 !bg-opacity-80 py-3 pl-14"
             />
         </div>
     </div>
diff --git a/resources/views/livewire/profile/two-factor-authentication-form.blade.php b/resources/views/livewire/profile/two-factor-authentication-form.blade.php
index e221d249f..596cbe916 100644
--- a/resources/views/livewire/profile/two-factor-authentication-form.blade.php
+++ b/resources/views/livewire/profile/two-factor-authentication-form.blade.php
@@ -1,6 +1,6 @@
 <section class="space-y-6">
     <header>
-        <h2 class="text-lg font-medium text-slate-400">
+        <h2 class="text-lg font-medium dark:text-slate-400 text-slate-600">
             {{ __('Two factor authentication') }}
         </h2>
 
@@ -10,7 +10,7 @@
     </header>
 
     <section>
-        <h3 class="text-lg font-medium text-slate-300">
+        <h3 class="text-lg font-medium dark:text-slate-300 text-slate-800">
             @if ($enabled)
                 @if ($showingConfirmation)
                     {{ __('Finish enabling two factor authentication.') }}
diff --git a/resources/views/profile/edit.blade.php b/resources/views/profile/edit.blade.php
index 83ea7077f..db4bb5c20 100644
--- a/resources/views/profile/edit.blade.php
+++ b/resources/views/profile/edit.blade.php
@@ -4,7 +4,7 @@
             <div class="px-4 sm:px-8">
                 <a
                     href="{{ route('profile.show', ['username' => auth()->user()->username]) }}"
-                    class="flex items-center space-x-1 dark:text-slate-400 text-slate-500 hover:underline"
+                    class="flex items-center space-x-1 dark:text-slate-400 text-slate-600 hover:underline"
                     wire:navigate
                 >
                     <x-icons.chevron-left class="size-5" />
@@ -12,37 +12,37 @@ class="flex items-center space-x-1 dark:text-slate-400 text-slate-500 hover:unde
                 </a>
             </div>
 
-            <div class="p-4 shadow sm:rounded-lg sm:p-8">
+            <div class="p-4 dark:shadow sm:rounded-lg sm:p-8">
                 <div class="max-w-xl">
                     @include('profile.partials.verified-form')
                 </div>
             </div>
 
-            <div class="p-4 shadow sm:rounded-lg sm:p-8">
+            <div class="p-4 dark:shadow sm:rounded-lg sm:p-8">
                 <div class="max-w-xl">
                     @include('profile.partials.upload-profile-photo-form')
                 </div>
             </div>
 
-            <div class="p-4 shadow sm:rounded-lg sm:p-8">
+            <div class="p-4 dark:shadow sm:rounded-lg sm:p-8">
                 <div class="max-w-xl">
                     @include('profile.partials.update-profile-information-form')
                 </div>
             </div>
 
-            <div class="p-4 shadow sm:rounded-lg sm:p-8">
+            <div class="p-4 dark:shadow sm:rounded-lg sm:p-8">
                 <div class="max-w-xl">
                     @include('profile.partials.update-password-form')
                 </div>
             </div>
 
-            <div class="p-4 shadow sm:rounded-lg sm:p-8">
+            <div class="p-4 dark:shadow sm:rounded-lg sm:p-8">
                 <div class="max-w-xl">
                     <livewire:profile.two-factor-authentication-form />
                 </div>
             </div>
 
-            <div class="p-4 shadow sm:rounded-lg sm:p-8">
+            <div class="p-4 dark:shadow sm:rounded-lg sm:p-8">
                 <div class="max-w-xl">
                     @include('profile.partials.delete-user-form')
                 </div>
diff --git a/resources/views/profile/partials/delete-user-form.blade.php b/resources/views/profile/partials/delete-user-form.blade.php
index c146cadf6..a73e88df7 100644
--- a/resources/views/profile/partials/delete-user-form.blade.php
+++ b/resources/views/profile/partials/delete-user-form.blade.php
@@ -1,6 +1,6 @@
 <section class="space-y-6">
     <header>
-        <h2 class="text-lg font-medium text-slate-400">
+        <h2 class="text-lg font-medium dark:text-slate-400 text-slate-600">
             {{ __('Delete Account') }}
         </h2>
 
@@ -29,7 +29,7 @@ class="p-6"
             @csrf
             @method('delete')
 
-            <h2 class="text-lg font-medium text-slate-400">
+            <h2 class="text-lg font-medium dark:text-slate-400 text-slate-600">
                 {{ __('Are you sure you want to delete your account?') }}
             </h2>
 
diff --git a/resources/views/profile/partials/update-password-form.blade.php b/resources/views/profile/partials/update-password-form.blade.php
index 17f42b035..bdcb7ecf5 100644
--- a/resources/views/profile/partials/update-password-form.blade.php
+++ b/resources/views/profile/partials/update-password-form.blade.php
@@ -1,6 +1,6 @@
 <section>
     <header>
-        <h2 class="text-lg font-medium text-slate-400">
+        <h2 class="text-lg font-medium dark:text-slate-400 text-slate-600">
             {{ __('Update Password') }}
         </h2>
 
diff --git a/resources/views/profile/partials/update-profile-information-form.blade.php b/resources/views/profile/partials/update-profile-information-form.blade.php
index 195379f23..0b3ad1cc1 100644
--- a/resources/views/profile/partials/update-profile-information-form.blade.php
+++ b/resources/views/profile/partials/update-profile-information-form.blade.php
@@ -5,7 +5,7 @@
 
 <section>
     <header>
-        <h2 class="text-lg font-medium text-slate-400">
+        <h2 class="text-lg font-medium dark:text-slate-400 text-slate-600">
             {{ __('Profile Information') }}
         </h2>
 
diff --git a/resources/views/profile/partials/upload-profile-photo-form.blade.php b/resources/views/profile/partials/upload-profile-photo-form.blade.php
index 315e56e9b..cd71849e4 100644
--- a/resources/views/profile/partials/upload-profile-photo-form.blade.php
+++ b/resources/views/profile/partials/upload-profile-photo-form.blade.php
@@ -15,7 +15,7 @@
     }
 }'>
     <header>
-        <h2 class="text-lg font-medium text-slate-400">
+        <h2 class="text-lg font-medium dark:text-slate-400 text-slate-600">
             {{ __('Profile Photo') }}
         </h2>
 
diff --git a/resources/views/profile/partials/verified-form.blade.php b/resources/views/profile/partials/verified-form.blade.php
index affa8bffe..97f9356e5 100644
--- a/resources/views/profile/partials/verified-form.blade.php
+++ b/resources/views/profile/partials/verified-form.blade.php
@@ -1,8 +1,8 @@
 <section>
     <header>
-        <h2 class="text-lg font-medium text-slate-400">
+        <h2 class="text-lg font-medium dark:text-slate-400 text-slate-600">
             <div class="items flex items-center space-x-3">
-                <h2 class="text-lg font-medium text-slate-400">
+                <h2 class="text-lg font-medium dark:text-slate-400 text-slate-600">
                     {{ $user->is_verified ? __('Manage Verified Badge') : __('Get Verified') }}
                 </h2>
                 <x-icons.verified

From 873cb98fd19ccc6ba3fa38cf9f3b8658fea39fa4 Mon Sep 17 00:00:00 2001
From: Aditya Chandra <aditchndr44@gmail.com>
Date: Tue, 17 Sep 2024 19:50:55 +0700
Subject: [PATCH 9/9] chore(light-mode): updates changelog items

---
 resources/views/changelog.blade.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/views/changelog.blade.php b/resources/views/changelog.blade.php
index 72e9c4a94..2cbfd24e6 100644
--- a/resources/views/changelog.blade.php
+++ b/resources/views/changelog.blade.php
@@ -20,7 +20,7 @@ class="space-y-6 sm:space-y-12"
                                 <div class="size-1.5 rounded-full bg-pink-500 ring-1 ring-pink-500"></div>
                             </div>
 
-                            <div class="relative flex-1 overflow-hidden rounded-xl border dark:border-slate-900 border-slate-100 dark:shadow-none shadow-sm shadow-slate-200">
+                            <div class="relative flex-1 overflow-hidden rounded-xl border dark:bg-transparent bg-slate-100 dark:border-slate-900 border-slate-200 dark:shadow-none shadow-sm shadow-slate-200">
                                 <header class="flex w-full flex-1 items-center justify-between border-b dark:border-slate-900 border-slate-200 px-4 py-3.5 dark:text-slate-200 text-slate-800">
                                     <h2 class="font-bold">Version {{ $version }}</h2>
                                     <time
@@ -42,7 +42,7 @@ class="flex-none py-0.5 text-xs dark:font-semibold leading-5 dark:text-slate-500
                                 </div>
                                 <div class="absolute -right-[200px] -top-[200px] z-10 transform-gpu opacity-20 blur-3xl">
                                     <div
-                                        class="size-[600px] bg-gradient-to-r dark:from-pink-900 from-pink-200 to-pink-500"
+                                        class="size-[600px] bg-gradient-to-r dark:from-pink-900 from-pink-50 dark:to-pink-500 to-pink-200"
                                         style="
                                             clip-path: polygon(
                                                 50% 0%,