Merge pull request #283 from fabiorodriguesroque/feat/dark-mode

Add darkmode to frontend
ploi · Sep 23, 2024 · 2366006 · 2366006
2 parents 6adffc5 + 3976f5e
commit 2366006
Show file tree

Hide file tree

Showing 31 changed files with 168 additions and 95 deletions.
diff --git a/app/View/Components/ThemeToggle.php b/app/View/Components/ThemeToggle.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class ThemeToggle extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.theme-toggle');
+    }
+}
diff --git a/resources/css/tribute.css b/resources/css/tribute.css
@@ -11,7 +11,7 @@
     @apply min-w-[250px] shadow-lg ring-1 ring-black/5 mt-2;
 }
 .tribute-container ul {
-    @apply rounded overflow-hidden list-none bg-white;
+    @apply rounded overflow-hidden list-none bg-white dark:bg-gray-900;
 }
 .tribute-container li {
     @apply hover:bg-brand-50 cursor-pointer py-2 px-4;

diff --git a/resources/js/app.js b/resources/js/app.js
@@ -4,6 +4,9 @@ import Clipboard from '@ryangjchandler/alpine-clipboard'
 
 Alpine.plugin(Clipboard)
 
+import { themeToggle } from './theme-toggle.js';
+Alpine.data('themeToggle', themeToggle);
+
 Livewire.start()
 
 

diff --git a/resources/js/theme-toggle.js b/resources/js/theme-toggle.js
@@ -0,0 +1,25 @@
+const themeToggle = () => ({
+  theme: 'light',
+
+  init() {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme);
+
+    const currentTheme = localStorage.getItem('theme') || this.theme;
+
+    this.setTheme(currentTheme);
+  },
+
+  setTheme(theme) {
+    this.theme = theme
+
+    if (theme === 'dark' || theme === 'light') {
+      localStorage.setItem('theme', theme)
+    } else {
+      localStorage.removeItem('theme');
+    }
+
+    updateTheme();
+  },
+})
+
+export { themeToggle }
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
@@ -32,7 +32,7 @@
                                for="email">{{ trans('auth.email') }}</label>
 
                         <input
-                            class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:ring-1 focus:ring-inset focus:ring-brand-600 focus:border-brand-600"
+                            class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:ring-1 focus:ring-inset focus:ring-brand-600 focus:border-brand-600 dark:bg-gray-900 dark:border-white/10"
                             id="email"
                             name="email"
                             value="{{ old('email') }}"
@@ -44,7 +44,7 @@ class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shado
                                for="password">{{ trans('auth.password') }}</label>
 
                         <input
-                            class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:ring-1 focus:ring-inset focus:ring-brand-600 focus:border-brand-600"
+                            class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:ring-1 focus:ring-inset focus:ring-brand-600 focus:border-brand-600 dark:bg-gray-900 dark:border-white/10"
                             id="password"
                             name="password"
                             type="password">
@@ -77,7 +77,7 @@ class="flex items-center justify-center w-full h-8 px-3 text-sm font-semibold tr
                     @endif
                 </form>
 
-                <div class="w-4 mx-auto mt-4 border-t border-gray-300"></div>
+                <div class="w-4 mx-auto mt-4 border-t border-gray-300 dark:border-white/10"></div>
 
                 <p class="mt-3 text-sm font-medium text-center">
                     <a class="text-brand-600 transition hover:text-brand-500 focus:outline-none focus:underline"

diff --git a/resources/views/auth/password-protection.blade.php b/resources/views/auth/password-protection.blade.php
@@ -13,7 +13,7 @@
 </head>
 <body>
 <div class="min-h-[720px] flex justify-center">
-    <div class="w-full max-w-lg py-8 bg-white md:py-16">
+    <div class="w-full max-w-lg py-8 bg-white md:py-16 dark:bg-gray-900">
         <div class="w-full max-w-md px-4 mx-auto sm:px-6 md:px-8">
             <h1 class="text-xl font-semibold tracking-tight md:text-2xl">
                 {{ trans('auth.password_protected') }}

diff --git a/resources/views/auth/passwords/email.blade.php b/resources/views/auth/passwords/email.blade.php
@@ -43,7 +43,7 @@ class="flex items-center justify-center w-full h-8 px-3 text-sm font-semibold tr
                         {{ trans('auth.send_reset_link') }}
                     </button>
 
-                    <div class="w-4 mx-auto mt-4 border-t border-gray-300"></div>
+                    <div class="w-4 mx-auto mt-4 border-t border-gray-300 dark:border-white/10"></div>
 
                     <p class="mt-3 text-sm font-medium text-center">
                         <a class="text-brand-600 transition hover:text-brand-500 focus:outline-none focus:underline"

diff --git a/resources/views/auth/passwords/reset.blade.php b/resources/views/auth/passwords/reset.blade.php
@@ -78,7 +78,7 @@ class="flex items-center justify-center w-full h-8 px-3 text-sm font-semibold tr
                         {{ trans('auth.reset_password') }}
                     </button>
 
-                    <div class="w-4 mx-auto mt-4 border-t border-gray-300"></div>
+                    <div class="w-4 mx-auto mt-4 border-t border-gray-300 dark:border-white/10"></div>
 
                     <p class="mt-3 text-sm font-medium text-center">
                         <a class="text-brand-600 transition hover:text-brand-500 focus:outline-none focus:underline"

diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
@@ -34,7 +34,7 @@
                                for="name">{{ trans('auth.name') }}</label>
 
                         <input
-                            class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:border-blue-600 focus:ring-1 focus:ring-inset focus:ring-blue-600"
+                            class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:border-blue-600 focus:ring-1 focus:ring-inset focus:ring-blue-600 dark:bg-gray-900 dark:border-white/10"
                             id="name"
                             name="name"
                             value="{{ old('name') }}"
@@ -46,7 +46,7 @@ class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shado
                                for="email">{{ trans('auth.email') }}</label>
 
                         <input
-                            class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:ring-1 focus:ring-inset focus:ring-blue-600 focus:border-blue-600"
+                            class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:ring-1 focus:ring-inset focus:ring-blue-600 focus:border-blue-600 dark:bg-gray-900 dark:border-white/10"
                             id="email"
                             placeholder="{{ trans('auth.email_placeholder') }}"
                             name="email"
@@ -59,7 +59,7 @@ class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shado
                                for="password">{{ trans('auth.password') }}</label>
 
                         <input
-                            class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:ring-1 focus:ring-inset focus:ring-blue-600 focus:border-blue-600"
+                            class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:ring-1 focus:ring-inset focus:ring-blue-600 focus:border-blue-600 dark:bg-gray-900 dark:border-white/10"
                             id="password"
                             name="password"
                             type="password">
@@ -70,7 +70,7 @@ class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shado
                                for="password_confirmation">{{ trans('auth.confirm_password') }}</label>
 
                         <input
-                            class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:ring-1 focus:ring-inset focus:ring-blue-600 focus:border-blue-600"
+                            class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:ring-1 focus:ring-inset focus:ring-blue-600 focus:border-blue-600 dark:bg-gray-900 dark:border-white/10"
                             id="password_confirmation"
                             name="password_confirmation"
                             type="password">

diff --git a/resources/views/board.blade.php b/resources/views/board.blade.php
@@ -14,7 +14,7 @@
 
         @if($board->canUsersCreateItem())
             <section class="w-96 sticky top-0">
-                <div class="bg-white rounded-lg shadow p-5">
+                <div class="bg-white rounded-lg shadow p-5 dark:bg-gray-900">
                     <livewire:item.create :project="$project" :board="$board"/>
                 </div>
             </section>

diff --git a/resources/views/components/app.blade.php b/resources/views/components/app.blade.php
@@ -15,6 +15,17 @@
         }
     </style>
 
+    <script>
+      function updateTheme() {
+        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+          document.documentElement.classList.add('dark')
+        } else {
+          document.documentElement.classList.remove('dark')
+        }
+      }
+      updateTheme();
+    </script>
+
     @if(file_exists($favIcon = storage_path('app/public/favicon.png')))
         <link href="{{ asset('storage/favicon.png') }}?v={{ md5_file($favIcon) }}" rel="icon" type="image/x-icon"/>
     @endif
@@ -32,7 +43,7 @@
         <meta name="robots" content="noindex">
     @endif
 </head>
-<body class="antialiased bg-gray-50">
+<body class="antialiased bg-gray-50 dark:bg-gray-950 dark:text-white">
 @if($userNeedsToVerify)
     <div class="relative bg-brand-600">
         <div class="max-w-7xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
@@ -54,13 +65,13 @@
 <div class="w-full mx-auto py-5 md:space-x-10 h-full grid grid-cols-6 px-2 sm:px-6 md:px-8 max-w-[1500px]">
     @include('partials.navbar')
 
-    <main class="flex-1 h-full col-span-6 lg:col-span-5 lg:border-l lg:pl-5">
+    <main class="flex-1 h-full col-span-6 lg:col-span-5 lg:border-l lg:pl-5 dark:lg:border-white/10">
         <div class="pb-4">
             <ul class="flex items-center space-x-0.5 text-sm font-medium text-gray-600">
                 @foreach(array_filter($breadcrumbs) as $breadcrumb)
                     @if(!$loop->first)
                         <li>
-                            <svg class="text-gray-400 w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none"
+                            <svg class="text-gray-400 w-5 h-5 dark:text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none"
                                  viewBox="0 0 24 24">
                                 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                       stroke-width="1.5" d="M10.75 8.75L14.25 12L10.75 15.25"/>
@@ -69,7 +80,7 @@
                     @endif
 
                     <li>
-                        <a class="transition hover:underline focus:outline-none focus:text-gray-800 focus:underline"
+                        <a class="transition hover:underline focus:outline-none focus:text-gray-800 focus:underline dark:focus:text-gray-600"
                            href="{{ $breadcrumb['url'] }}">
                             {{ $breadcrumb['title'] }}
                         </a>

diff --git a/resources/views/components/card.blade.php b/resources/views/components/card.blade.php
@@ -1,3 +1,3 @@
-<div {{ $attributes->merge(['class' => 'p-2 space-y-2 bg-white shadow rounded-xl']) }}>
+<div {{ $attributes->merge(['class' => 'p-2 space-y-2 bg-white shadow rounded-xl dark:bg-gray-900']) }}>
     {{ $slot }}
 </div>
diff --git a/resources/views/components/modal.blade.php b/resources/views/components/modal.blade.php
@@ -1,4 +1,4 @@
-<div class="relative w-full p-2 m-auto space-y-2 bg-white shadow rounded-xl" x-cloak>
+<div class="relative w-full p-2 m-auto space-y-2 bg-white shadow rounded-xl dark:bg-gray-900" x-cloak>
     <div class="px-4 py-2">
         <h2 class="text-xl font-semibold tracking-tight">{{ $title }}</h2>
     </div>

diff --git a/resources/views/components/theme-toggle.blade.php b/resources/views/components/theme-toggle.blade.php
@@ -0,0 +1,4 @@
+<button x-data="themeToggle" x-cloak type="button" class="bg-white text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 rounded-lg text-sm p-2 dark:focus:ring-gray-700 dark:bg-gray-800 dark:border-white/10 dark:border-1">
+    <svg x-show="theme === 'light'" x-on:click="setTheme('dark')" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
+    <svg x-show="theme === 'dark'" x-on:click="setTheme('light')" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
+</button>
diff --git a/resources/views/filament/widgets/system-info.blade.php b/resources/views/filament/widgets/system-info.blade.php
@@ -10,11 +10,11 @@
                 <dd class="order-1 text-2xl font-extrabold text-primary-600">{{ $version['currentVersion'] }}</dd>
             </div>
             <div
-                class="flex flex-col border-t border-b border-gray-100 dark:border-gray-700 p-6 text-center md:border-0 md:border-r">
+                class="flex flex-col border-t border-b border-gray-100 dark:border-gray-700 p-6 text-center md:border-0 md:border-r dark:border-white/10">
                 <dt class="order-2 mt-2 text-md leading-6 font-medium text-gray-500">{{ trans('system.remote-version') }}</dt>
                 <dd class="order-1 text-2xl font-extrabold text-primary-600">{{ $version['remoteVersion'] }}</dd>
             </div>
-            <div class="flex flex-col border-t border-gray-100 p-6 text-center md:border-0">
+            <div class="flex flex-col border-t border-gray-100 p-6 text-center md:border-0 dark:border-white/10">
                 <dt class="order-2 mt-2 text-md leading-6 font-medium text-gray-500">
                     @if($isOutOfDate)
                         <a class="border-b border-dotted border-gray-500"
@@ -43,7 +43,7 @@ class="flex flex-col border-t border-b border-gray-100 dark:border-gray-700 p-6
                 </dd>
             </div>
 
-            <div class="flex flex-col border-t border-gray-100 dark:border-gray-700 p-6 text-center md:border-0 md:border-l">
+            <div class="flex flex-col border-t border-gray-100 dark:border-gray-700 p-6 text-center md:border-0 md:border-l dark:border-white/10">
                 <dt class="order-2 mt-2 text-md leading-6 font-medium text-gray-500">{{ trans('system.php-version') }}</dt>
                 <dd class="order-1 text-2xl font-extrabold text-primary-600">{{ $phpVersion }}</dd>
             </div>

diff --git a/resources/views/item.blade.php b/resources/views/item.blade.php
@@ -37,7 +37,7 @@
                                         <select name="board_id"
                                                 x-data
                                                 x-on:change.debounce="$event.target.form.submit()"
-                                                class="float-right inline-flex items-center justify-center h-8 px-3 pt-1.5 pr-8 text-sm tracking-tight font-bold text-gray-700 border border-gray-400 rounded-lg bg-white">
+                                                class="float-right inline-flex items-center justify-center h-8 px-3 pt-1.5 pr-8 text-sm tracking-tight font-bold text-gray-700 border border-gray-400 rounded-lg bg-white dark:text-white dark:bg-white/5 dark:border-white/20">
                                             @foreach($item->project->boards as $board)
                                                 <option value="{{ $board->id }}" @selected($board->is($item->board))>{{ $board->title }}</option>
                                             @endforeach
@@ -53,9 +53,9 @@ class="float-right inline-flex items-center justify-center h-8 px-3 pt-1.5 pr-8
                     </div>
                 </header>
 
-                <div class="border-t"></div>
+                <div class="border-t dark:border-white/10"></div>
 
-                <div class="p-4 prose break-words">
+                <div class="p-4 prose break-words dark:text-gray-600">
                     {!! str($item->content)->markdown()->sanitizeHtml() !!}
                 </div>
             </x-card>
@@ -105,12 +105,12 @@ class="text-gray-500 fill-gray-500 float-right">
                     @endif
                 </header>
 
-                <div class="border-t"></div>
+                <div class="border-t dark:border-white/10"></div>
 
                 <livewire:item.vote-button :model="$item"/>
 
                 @if(auth()->check() && $user && $user->is(auth()->user()))
-                    <div class="border-t mb-2"></div>
+                    <div class="border-t mb-2 dark:border-white/10"></div>
 
                     <div>
                         <a class="text-primary-500 hover:text-primary-700 ml-1"
@@ -120,7 +120,7 @@ class="text-gray-500 fill-gray-500 float-right">
                 @endif
 
                 @if(auth()->check() && auth()->user()->hasAdminAccess())
-                    <div class="border-t mb-2"></div>
+                    <div class="border-t mb-2 dark:border-white/10"></div>
 
                     <div>
                         <a class="text-red-500 hover:text-red-700 ml-1"

diff --git a/resources/views/livewire/board/items.blade.php b/resources/views/livewire/board/items.blade.php
@@ -9,7 +9,7 @@
         <div
             class="flex flex-col items-center justify-center max-w-md p-6 mx-auto space-y-6 text-center border rounded-2xl">
             <div
-                class="flex items-center justify-center w-16 h-16 text-blue-500 bg-white rounded-full shadow">
+                class="flex items-center justify-center w-16 h-16 text-blue-500 bg-white rounded-full shadow dark:bg-gray-900">
                 <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                           stroke-width="1.5"

diff --git a/resources/views/livewire/changelog/index.blade.php b/resources/views/livewire/changelog/index.blade.php
@@ -8,7 +8,7 @@
     <div class="w-full">
         <div class="flex flex-col items-center justify-center max-w-md p-6 mx-auto space-y-6 text-center border rounded-2xl">
             <div
-                class="flex items-center justify-center w-16 h-16 text-brand-500 bg-white rounded-full shadow">
+                class="flex items-center justify-center w-16 h-16 text-brand-500 bg-white rounded-full shadow dark:bg-gray-900">
                 <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                           stroke-width="1.5"

diff --git a/resources/views/livewire/changelog/item.blade.php b/resources/views/livewire/changelog/item.blade.php
@@ -32,7 +32,7 @@
     </div>
 
     @if(app(App\Settings\GeneralSettings::class)->show_changelog_related_items && $changelog->items->count())
-        <div class="w-full bg-gray-100 rounded-lg p-5">
+        <div class="w-full bg-gray-100 rounded-lg p-5 dark:bg-white/5">
             <div class="space-y-5">
                 {{--@foreach($changelog->items()->->get() as $item)
                     <a title="{{ $item->title }}"