Design: Dark mode support #24 from Lakshan-Madushanka/feature/dark-mode

This adds dark mode support
Lakshan-Madushanka · Sep 9, 2024 · cd9d170 · cd9d170
2 parents 8667d04 + a30e7e5
commit cd9d170
Show file tree

Hide file tree

Showing 14 changed files with 53 additions and 53 deletions.
diff --git a/public/build/assets/app-CWsMpDrY.css → public/build/assets/app-D6DVg4PG.css b/public/build/assets/app-CWsMpDrY.css → public/build/assets/app-D6DVg4PG.css
diff --git a/public/build/assets/app-DWR3bMaP.js → public/build/assets/app-Dxj4FzLf.js b/public/build/assets/app-DWR3bMaP.js → public/build/assets/app-Dxj4FzLf.js
diff --git a/public/build/manifest.json b/public/build/manifest.json
@@ -1,11 +1,11 @@
 {
   "resources/js/app.js": {
-    "file": "assets/app-DWR3bMaP.js",
+    "file": "assets/app-Dxj4FzLf.js",
     "name": "app",
     "src": "resources/js/app.js",
     "isEntry": true,
     "css": [
-      "assets/app-CWsMpDrY.css"
+      "assets/app-D6DVg4PG.css"
     ]
   }
-}
+}
diff --git a/resources/views/components/chip.blade.php b/resources/views/components/chip.blade.php
@@ -2,8 +2,8 @@
 <div {{ $attributes
     ->class([
         'px-2 py-1 rounded cursor-pointer transition ml-[-6px] sm:ml-[2px] text-nowrap',
-        'border hover:bg-gray-300' => Helpers::isDefaultTheme(),
-        'bg-gray-400 text-white hover:bg-gray-500' => Helpers::isGithubTheme()
+        'border hover:bg-gray-300 dark:bg-slate-700 dark:hover:bg-slate-800 dark:border-0' => Helpers::isDefaultTheme(),
+        'bg-gray-400 text-white hover:bg-gray-500 dark:bg-slate-800 dark:hover:bg-slate-900' => Helpers::isGithubTheme()
     ])
     ->merge() }}
 >

diff --git a/resources/views/components/index.blade.php b/resources/views/components/index.blade.php
@@ -2,7 +2,7 @@
     'model',
 ])
 
-<div x-cloak x-data class="space-y-8">
+<div x-cloak x-data class="space-y-8 dark:text-white">
     @if(config('comments.should_confirm_link_visit'))
         <x-comments::link-visit-confirm-modal/>
     @endif

diff --git a/resources/views/components/input/index.blade.php b/resources/views/components/input/index.blade.php
@@ -6,5 +6,5 @@
 <input
     @disabled($shouldDisable)
     type="{{ $type }}"
-    {{ $attributes->merge(['class' => 'py-2 px-4 block w-full border-2 border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600']) }}
+    {{ $attributes->merge(['class' => 'py-2 px-4 block w-full border-2 border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-white dark:focus:ring-gray-600']) }}
 />
diff --git a/resources/views/components/modal.blade.php b/resources/views/components/modal.blade.php
@@ -3,12 +3,12 @@
 <div
     x-show="show"
     x-transition
-    class='z-10 bg-gray-900/25 z-10 w-full h-screen h-svh overflow-auto flex justify-center items-center fixed top-0 left-0'
+    class='z-10 bg-gray-900/25 z-10 w-full h-screen h-svh overflow-auto flex justify-center items-center fixed top-0 left-0 dark:bg-gray-600/85'
 >
     <div
         @keydown.escape.window="show=false"
         @click.outside="show=false"
-        {{$attributes->class(['z-20 rounded border border-gray-200 bg-white shadow-lg mx-2 w-full max-h-[50svh] lg:max-h-[65svh] overflow-auto sm:w-auto sm:min-w-[32rem]'])}}
+        {{$attributes->class(['z-20 rounded border border-gray-200 bg-white dark:bg-slate-800 dark:border-black shadow-lg mx-2 w-full max-h-[50svh] lg:max-h-[65svh] overflow-auto sm:w-auto sm:min-w-[32rem]'])}}
     >
         <div @click="show=false" class="flex w-full cursor-pointer justify-end p-1">
             <x-comments::icons.close />

diff --git a/resources/views/components/show-reacted-users.blade.php b/resources/views/components/show-reacted-users.blade.php
@@ -17,7 +17,7 @@
             wire:loading.remove
             wire:target="lastReactedUser"
         >
-            <div class="flex w-full flex-col rounded border border-gray-200 bg-white p-1 text-sm shadow">
+            <div class="flex w-full flex-col rounded border border-gray-200 bg-white p-1 text-sm shadow dark:bg-slate-800 dark:border-slate-700">
                 <span>
                     {{ Str::limit($lastReactedUserName, 10) }}
                     @if ($reactions[$key]['count'] > 1)

diff --git a/resources/views/components/show-reaction.blade.php b/resources/views/components/show-reaction.blade.php
@@ -16,8 +16,8 @@
     @mouseleave="showUsers=false"
     @class([
           "flex flex-row items-center justify-center rounded-md px-1 py-[2px]",
-          "border hover:bg-gray-200" => config('comments.theme') === 'default',
-          "bg-gray-300 hover:bg-gray-400" => config('comments.theme') === 'github'
+          "border hover:bg-gray-200 dark:border-slate-700 dark:hover:bg-slate-900" => config('comments.theme') === 'default',
+          "bg-gray-300 hover:bg-gray-400 dark:bg-slate-900 dark:hover:bg-slate-600" => config('comments.theme') === 'github'
     ])
 >
     <div

diff --git a/resources/views/livewire/comment-item.blade.php b/resources/views/livewire/comment-item.blade.php
@@ -23,13 +23,13 @@ class="basis-full"
             x-show="!showUpdateForm"
             x-transition
             @class([
-                "rounded border border-gray-200" => Helpers::isGithubTheme(),
+                "rounded border border-gray-200 dark:border-slate-700" => Helpers::isGithubTheme(),
             ])
         >
             <div
                 @class([
                     "flex items-center justify-between p-1",
-                    "mb-2 border-b border-gray-100 bg-gray-100" => Helpers::isGithubTheme()
+                    "mb-2 border-b border-gray-100 bg-gray-100 dark:bg-slate-800 dark:border-slate-900" => Helpers::isGithubTheme()
                 ])
             >
                 <div>
@@ -79,12 +79,12 @@ class="relative cursor-pointer"
                                 x-show="showEditMenu"
                                 @click.outside="showEditMenu=false"
                                 x-transition
-                                class="absolute bottom-[1rem] right-[0.8rem] z-10 min-w-32 space-y-1 rounded border border-[gray-100] bg-white p-1 shadow-lg"
+                                class="absolute bottom-[1rem] right-[0.8rem] z-10 min-w-32 space-y-1 rounded border border-[gray-100] bg-white dark:border-slate-900 dark:bg-slate-800 p-1 shadow-lg"
                             >
                                 @if ($model->canEditComment($comment))
                                     <li
                                         @click="showUpdateForm = !showUpdateForm; showEditMenu=false"
-                                        class="flex items-center space-x-2 rounded p-2 hover:!bg-gray-200"
+                                        class="flex items-center space-x-2 rounded p-2 hover:!bg-gray-200 dark:hover:!bg-slate-900"
                                     >
                                         <x-comments::pencil height="13" width="13" strokeColor="blue" />
 
@@ -99,7 +99,7 @@ class="flex items-center space-x-2 rounded p-2 hover:!bg-gray-200"
                                         wire:click="delete({{ $comment }})"
                                         wire:confirm="{{ __('Are you sure you want to delete this comment?') }}"
                                         @click="showEditMenu=false"
-                                        class="flex items-center items-center space-x-2 space-x-2 rounded p-2 hover:!bg-gray-200"
+                                        class="flex items-center items-center space-x-2 space-x-2 rounded p-2 hover:!bg-gray-200 dark:hover:!bg-slate-900"
                                     >
                                         <x-comments::trash height="13" width="13" strokeColor="red" />
                                         <x-comments::action
@@ -186,7 +186,7 @@ class="inline-block"
                 >
                     <x-comments::link
                         type="popup"
-                        class="inline-flex items-center border-b-0 px-2 py-1 transition hover:rounded hover:border-b-0 hover:bg-gray-200 [&>*]:pr-1"
+                        class="inline-flex items-center border-b-0 px-2 py-1 transition hover:rounded hover:border-b-0 hover:bg-gray-200 dark:hover:bg-slate-800 [&>*]:pr-1"
                     >
                         <x-comments::icons.chevron-down x-show="!showReplyList" />
                         <x-comments::icons.chevron-up x-show="showReplyList" />

diff --git a/resources/views/livewire/comment-list.blade.php b/resources/views/livewire/comment-list.blade.php
@@ -21,8 +21,8 @@ class="space-y-6"
                     wire:click="setSortBy('top')"
                     wire:loading.class="!pointer-events-none"
                     @class([
-                        'bg-gray-200' => $sortBy === Sort::TOP && Helpers::isDefaultTheme(),
-                        'bg-gray-500' => $sortBy === Sort::TOP && Helpers::isGithubTheme(),
+                        'bg-gray-200 dark:bg-slate-500' => $sortBy === Sort::TOP && Helpers::isDefaultTheme(),
+                        'bg-gray-500 dark:bg-slate-600' => $sortBy === Sort::TOP && Helpers::isGithubTheme(),
                     ])
                 >
                     {{ __('Top') }}
@@ -31,8 +31,8 @@ class="space-y-6"
                     wire:click="setSortBy('latest')"
                     wire:loading.class="!pointer-events-none"
                     @class([
-                         'bg-gray-200' => $sortBy === Sort::LATEST && Helpers::isDefaultTheme(),
-                         'bg-gray-500' => $sortBy === Sort::LATEST && Helpers::isGithubTheme(),
+                         'bg-gray-200 dark:bg-slate-500' => $sortBy === Sort::LATEST && Helpers::isDefaultTheme(),
+                         'bg-gray-500 dark:bg-slate-600' => $sortBy === Sort::LATEST && Helpers::isGithubTheme(),
                      ])
                 >
                     {{ __('Newest') }}
@@ -41,8 +41,8 @@ class="space-y-6"
                     wire:click="setSortBy('oldest')"
                     wire:loading.class="!pointer-events-none"
                     @class([
-                        'bg-gray-200' => $sortBy === Sort::OLDEST && Helpers::isDefaultTheme(),
-                        'bg-gray-500' => $sortBy === Sort::OLDEST && Helpers::isGithubTheme(),
+                        'bg-gray-200 dark:bg-slate-500' => $sortBy === Sort::OLDEST && Helpers::isDefaultTheme(),
+                        'bg-gray-500 dark:bg-slate-600' => $sortBy === Sort::OLDEST && Helpers::isGithubTheme(),
                     ])
                 >
                     {{ __('Oldest') }}
@@ -51,8 +51,8 @@ class="space-y-6"
                     wire:click="setSortBy('replies')"
                     wire:loading.class="!pointer-events-none"
                     @class([
-                        'bg-gray-200' => $sortBy === Sort::REPLIES && Helpers::isDefaultTheme(),
-                        'bg-gray-500' => $sortBy === Sort::REPLIES && Helpers::isGithubTheme(),
+                        'bg-gray-200 dark:bg-slate-500' => $sortBy === Sort::REPLIES && Helpers::isDefaultTheme(),
+                        'bg-gray-500 dark:bg-slate-600' => $sortBy === Sort::REPLIES && Helpers::isGithubTheme(),
                     ])
                 >
                     {{ __('Replies') }}
@@ -62,8 +62,8 @@ class="space-y-6"
                     wire:click="setFilter('own')"
                     wire:loading.class="!pointer-events-none"
                     @class([
-                        'bg-gray-200' => $filter === 'own' && Helpers::isDefaultTheme(),
-                        'bg-gray-500' => $filter === 'own' && Helpers::isGithubTheme(),
+                        'bg-gray-200 dark:bg-slate-500' => $filter === 'own' && Helpers::isDefaultTheme(),
+                        'bg-gray-500 dark:bg-slate-600' => $filter === 'own' && Helpers::isGithubTheme(),
                     ])
                 >
                     {{ __('My Comments') }}

diff --git a/resources/views/livewire/comment-reply-item.blade.php b/resources/views/livewire/comment-reply-item.blade.php
@@ -22,12 +22,12 @@ class="basis-full"
             x-show="!showUpdateForm"
             x-transition
             @class([
-                "rounded border border-gray-200" => Helpers::isGithubTheme(),
+                "rounded border border-gray-200 dark:border-slate-700" => Helpers::isGithubTheme(),
             ])>
             <div
                 @class([
                     "flex items-start justify-between space-x-4 p-1 sm:flex-row sm:items-center sm:justify-between",
-                    "mb-2 border-b border-gray-200 bg-gray-100" => Helpers::isGithubTheme(),
+                    "mb-2 border-b border-gray-200 bg-gray-100 bg-gray-100 dark:bg-slate-800 dark:border-slate-900" => Helpers::isGithubTheme(),
                 ])
             >
                 <div>
@@ -77,7 +77,7 @@ class="relative cursor-pointer"
                                 x-show="showEditMenu"
                                 @click.outside="showEditMenu=false"
                                 x-transition
-                                class="absolute bottom-[1rem] right-[0.8rem] z-10 min-w-32 space-y-1 rounded border border-[gray-100] bg-white p-1 shadow-lg"
+                                class="absolute bottom-[1rem] right-[0.8rem] z-10 min-w-32 space-y-1 rounded border border-[gray-100] bg-white dark:border-slate-900 dark:bg-slate-800 p-1 shadow-lg"
                             >
                                 @if ($this->canUpdateReply($reply))
                                     <li
@@ -86,7 +86,7 @@ class="absolute bottom-[1rem] right-[0.8rem] z-10 min-w-32 space-y-1 rounded bor
                                          showEditMenu=false
                                          $dispatch('show-reply-update-form-@js($reply->getKey())', {show: showUpdateForm})
                                          "
-                                        class="flex items-center space-x-2 rounded p-2 hover:!bg-gray-200"
+                                        class="flex items-center space-x-2 rounded p-2 hover:!bg-gray-200 dark:hover:!bg-slate-900"
                                     >
                                         <x-comments::pencil height="13" width="13" strokeColor="blue" />
                                         <x-comments::action class="text-sm hover:!no-underline sm:text-sm">
@@ -100,7 +100,7 @@ class="flex items-center space-x-2 rounded p-2 hover:!bg-gray-200"
                                         wire:click="delete({{ $reply }})"
                                         wire:confirm="{{ __('Are you sure you want to delete this reply?') }}"
                                         @click="showEditMenu=false"
-                                        class="flex items-center items-center space-x-2 space-x-2 rounded p-2 hover:!bg-gray-200"
+                                        class="flex items-center items-center space-x-2 space-x-2 rounded p-2 hover:!bg-gray-200 dark:hover:!bg-slate-900"
                                     >
                                         <x-comments::trash height="13" width="13" strokeColor="red" />
                                         <x-comments::action

diff --git a/resources/views/livewire/comment-reply-list.blade.php b/resources/views/livewire/comment-reply-list.blade.php
@@ -7,8 +7,8 @@
                     wire:click="setSortBy('latest')"
                     wire:loading.class="!pointer-events-none"
                     @class([
-                        'bg-gray-200' => $sortBy === Sort::LATEST && Helpers::isDefaultTheme(),
-                        'bg-gray-500' => $sortBy === Sort::LATEST && Helpers::isGithubTheme(),
+                        'bg-gray-200 dark:bg-slate-500' => $sortBy === Sort::LATEST && Helpers::isDefaultTheme(),
+                        'bg-gray-500 dark:bg-slate-600' => $sortBy === Sort::LATEST && Helpers::isGithubTheme(),
                     ])
                 >
                     {{ __('Newest') }}
@@ -17,8 +17,8 @@
                     wire:click="setSortBy('oldest')"
                     wire:loading.class="!pointer-events-none"
                     @class([
-                       'bg-gray-200' => $sortBy === Sort::OLDEST && Helpers::isDefaultTheme(),
-                        'bg-gray-500' => $sortBy === Sort::OLDEST && Helpers::isGithubTheme(),
+                       'bg-gray-200 dark:bg-slate-500' => $sortBy === Sort::OLDEST && Helpers::isDefaultTheme(),
+                        'bg-gray-500 dark:bg-slate-600' => $sortBy === Sort::OLDEST && Helpers::isGithubTheme(),
                     ])
                 >
                     {{ __('Oldest') }}
@@ -27,8 +27,8 @@
                     wire:click="setFilter('own')"
                     wire:loading.class="!pointer-events-none"
                     @class([
-                        'bg-gray-200' => $filter === 'own' && Helpers::isDefaultTheme(),
-                        'bg-gray-500' => $filter === 'own' && Helpers::isGithubTheme(),
+                        'bg-gray-200 dark:bg-slate-500' => $filter === 'own' && Helpers::isDefaultTheme(),
+                        'bg-gray-500 dark:bg-slate-600' => $filter === 'own' && Helpers::isGithubTheme(),
                     ]) >
                     {{ __('My Replies') }}
                 </x-comments::chip>

diff --git a/resources/views/livewire/reactions-manager.blade.php b/resources/views/livewire/reactions-manager.blade.php
@@ -4,7 +4,7 @@
         <div
             @class([
                 "flex items-center gap-x-1 rounded p-1 sm:gap-x-2",
-                "border border-gray-200 bg-gray-100" => Helpers::isGithubTheme()
+                "border border-gray-200 bg-gray-100 dark:bg-slate-800 dark:border-slate-700" => Helpers::isGithubTheme()
             ])
         >
             @foreach ($lReactions as $key => $value)
@@ -31,8 +31,8 @@
                         "
                         @class([
                            "cursor-pointer rounded px-1",
-                           "border hover:bg-gray-200" => Helpers::isDefaultTheme(),
-                           "bg-gray-300 hover:bg-gray-400" => Helpers::isGithubTheme()
+                           "border hover:bg-gray-200 dark:border-slate-700 dark:hover:bg-slate-900" => Helpers::isDefaultTheme(),
+                           "bg-gray-300 hover:bg-gray-400 dark:bg-slate-900 dark:hover:bg-slate-600" => Helpers::isGithubTheme()
                        ])
                     >
                         <div
@@ -97,8 +97,8 @@ class="bottom-[-3.4rem] left-[-2rem]"
                         "
                         @class([
                             "cursor-pointer rounded px-1",
-                            "border hover:bg-gray-200" => Helpers::isDefaultTheme(),
-                            " bg-gray-300 hover:bg-gray-400" => Helpers::isGithubTheme()
+                            "border hover:bg-gray-200 dark:border-slate-700 dark:hover:bg-slate-900" => Helpers::isDefaultTheme(),
+                            "bg-gray-300 hover:bg-gray-400 dark:bg-slate-900 dark:hover:bg-slate-600" => Helpers::isGithubTheme()
                         ])
                     >
                         <div
@@ -175,7 +175,7 @@ class="bottom-[-3.4rem] left-[-2rem]"
         <div
             @class([
                   "flex max-w-40 items-center gap-x-1 overflow-x-auto rounded p-1 sm:gap-x-2 md:max-w-72",
-                  "border border-gray-200 bg-gray-100" => Helpers::isGithubTheme(),
+                  "border border-gray-200 bg-gray-100 dark:bg-slate-800 dark:border-slate-700" => Helpers::isGithubTheme(),
                 ])
         >
             @foreach ($rReactions as $key => $value)
@@ -210,21 +210,21 @@ class="bottom-[-3.4rem] left-[-2rem]"
         >
             <x-comments::modal loadingTarget="loadReactedUsers">
                 <div class="flex py-4">
-                    <div class="space-y-2 border-r-2 border-gray-200">
-                        <div class="mb-4 border-b-2 border-gray-200 p-4">
-                            <span class="bg-gray-300 px-4 py-2 font-bold">{{ $total }}</span>
+                    <div class="space-y-2 border-r-2 border-gray-200 dark:border-slate-900">
+                        <div class="mb-4 border-b-2 border-gray-200 p-4 dark:border-slate-900">
+                            <span class="bg-gray-300 dark:bg-slate-600 px-4 py-2 font-bold">{{ $total }}</span>
                         </div>
                         @foreach (config("comments.reactions") as $key => $reaction)
                             <div
                                 @if ($reactions[$key]["count"] > 0)
                                     wire:click="loadReactedUsers('{{ $key }}')"
                                 @click="type = '{{ $key }}'"
-                                class="cursor-pointer p-4 relative"
+                                class="cursor-pointer p-4 relative hover:bg-gray-300 hover:dark:bg-slate-700"
                                 @endif
                                 wire:loading.class="cursor-not-allowed"
                                 target="loadReactedUsers"
                                 class="relative p-4"
-                                :class="type === '{{ $key }}' ? 'bg-gray-100' : ''"
+                                :class="type === '{{ $key }}' ? 'bg-gray-300 dark:bg-slate-600' : ''"
                             >
                                 @if ($reactions[$key]["reacted"])
                                     <x-dynamic-component
@@ -235,7 +235,7 @@ class="relative p-4"
                                     <x-dynamic-component component="comments::icons.{{$key}}" />
                                 @endif
 
-                                <span class="absolute left-8 top-1 rounded bg-gray-300 px-1 text-xs">
+                                <span class="absolute left-8 top-1 rounded bg-gray-400 px-1 text-xs dark:bg-slate-900">
                                 {{ $reactions[$key]["count"] }}
                             </span>
                             </div>