WIP

mix-manifest.json

@@ -0,0 +1 @@
+{}

packages/admin/config/filament.php

@@ -164,6 +164,7 @@
                 'type' => \Filament\Tables\Actions\LinkAction::class,
             ],
         ],
+        'darkmode' => true,
     ],
 
     /*

packages/admin/dist/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/app.js": "/app.js?id=8de9abb9627222f29679",
-    "/app.css": "/app.css?id=7a0f37dedfcad88bfae8"
+    "/app.js": "/app.js?id=9183c65b7bb2ee93160c",
+    "/app.css": "/app.css?id=82b41e30790f34c8f696"
 }

packages/admin/resources/css/app.css

@@ -12,3 +12,11 @@
         padding-right: 0.75rem;
     }
 }
+
+.trix-button {
+    @apply dark:bg-dark-700 dark:border-dark-600 dark:fill-dark-200
+}
+
+.trix-button-group {
+    @apply dark:text-dark-200
+}

packages/admin/resources/js/app.js

@@ -6,12 +6,15 @@ import FormsAlpinePlugin from '../../../forms/dist/module.esm'
 import Focus from '@alpinejs/focus'
 import Persist from '@alpinejs/persist'
 import Collapse from '@alpinejs/collapse'
+import darkmode from "./components/darkmode";
 
 Alpine.plugin(FormsAlpinePlugin)
 Alpine.plugin(Focus)
 Alpine.plugin(Persist)
 Alpine.plugin(Collapse)
 
+Alpine.data('darkmode', darkmode)
+
 Alpine.store('sidebar', {
     isOpen: false,
 

packages/admin/resources/js/components/darkmode.js

@@ -0,0 +1,57 @@
+export default () => ({
+    theme: null,
+
+    switchTheme(theme) {
+        this.theme = theme
+
+        window.localStorage.setItem('theme', theme)
+
+        if (theme !== 'system') {
+            this.setDocumentClass(theme)
+        } else {
+            this.setDocumentClass(this.browserTheme())
+        }
+    },
+
+    browserTheme() {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+    },
+
+    setDocumentClass(theme) {
+        if (theme === 'dark') {
+            if (! document.documentElement.classList.contains('dark')) {
+                document.documentElement.classList.add('dark');
+            }
+        } else {
+            if (document.documentElement.classList.contains('dark')) {
+                document.documentElement.classList.remove('dark');
+            }
+        }
+    },
+
+    registerListener() {
+        window.matchMedia('(prefers-color-scheme: dark)')
+            .addEventListener('change', () => {
+                if (!this.theme) {
+                    this.setDocumentClass(this.browserTheme());
+                }
+            })
+    },
+
+    storedTheme() {
+        return window.localStorage.getItem('theme')
+    },
+
+    loadStoredTheme() {
+        if (this.storedTheme()) {
+            this.switchTheme(this.storedTheme())
+        } else {
+            this.switchTheme(this.browserTheme())
+        }
+    },
+
+    init() {
+        this.loadStoredTheme()
+        this.registerListener()
+    }
+})

packages/admin/resources/views/components/brand.blade.php

@@ -1,3 +1,3 @@
-<div class="text-xl font-bold tracking-tight">
+<div class="text-xl font-bold tracking-tight dark:text-white">
     {{ config('app.name') }}
 </div>

packages/admin/resources/views/components/button.blade.php

@@ -11,12 +11,12 @@
 
 @php
     $buttonClasses = [
-        'inline-flex items-center justify-center font-medium tracking-tight rounded-lg focus:outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset',
+        'inline-flex items-center justify-center font-medium tracking-tight rounded-lg focus:outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset dark:focus:ring-offset-0',
         'bg-primary-600 hover:bg-primary-500 focus:bg-primary-700 focus:ring-offset-primary-700' => $color === 'primary',
         'h-9 px-4' => $size === 'md',
         'text-white shadow focus:ring-white' => $color !== 'secondary',
         'bg-danger-600 hover:bg-danger-500 focus:bg-danger-700 focus:ring-offset-danger-700' => $color === 'danger',
-        'text-gray-800 bg-white border border-gray-300 hover:bg-gray-50 focus:ring-primary-600 focus:text-primary-600 focus:bg-primary-50 focus:border-primary-600' => $color === 'secondary',
+        'text-gray-800 bg-white border border-gray-300 hover:bg-gray-50 focus:ring-primary-600 focus:text-primary-600 focus:bg-primary-50 focus:border-primary-600 dark:bg-dark-800 dark:border-dark-600 dark:hover:border-dark-500 dark:text-dark-200 dark:focus:text-primary-400 dark:focus:border-primary-400 dark:focus:bg-dark-800' => $color === 'secondary',
         'bg-success-600 hover:bg-success-500 focus:bg-success-700 focus:ring-offset-success-700' => $color === 'success',
         'bg-warning-600 hover:bg-warning-500 focus:bg-warning-700 focus:ring-offset-warning-700' => $color === 'warning',
         'opacity-75 cursor-not-allowed' => $disabled,

packages/admin/resources/views/components/card/index.blade.php

@@ -5,7 +5,7 @@
     'heading' => null,
 ])
 
-<div {{ $attributes->class(['p-2 space-y-2 bg-white shadow rounded-xl']) }}>
+<div {{ $attributes->class(['p-2 space-y-2 bg-white shadow rounded-xl dark:bg-dark-800']) }}>
     @if ($actions || $header || $heading)
         <div class="px-4 py-2">
             @if ($header)

packages/admin/resources/views/components/global-search/input.blade.php

@@ -4,7 +4,7 @@
     </label>
 
     <div class="relative group max-w-md">
-        <span class="absolute inset-y-0 left-0 flex items-center justify-center w-10 h-10 text-gray-500 pointer-events-none group-focus-within:text-primary-500">
+        <span class="absolute inset-y-0 left-0 flex items-center justify-center w-10 h-10 text-gray-500 pointer-events-none group-focus-within:text-primary-500 dark:text-dark-400">
             <x-heroicon-o-search class="w-5 h-5" />
         </span>
 
@@ -14,7 +14,7 @@
             placeholder="{{ __('filament::global-search.field.placeholder') }}"
             type="search"
             autocomplete="off"
-            class="block w-full h-10 pl-10 lg:text-lg bg-gray-400/10 placeholder-gray-500 border-transparent transition duration-75 rounded-lg focus:bg-white focus:placeholder-gray-400 focus:border-primary-600 focus:ring-1 focus:ring-inset focus:ring-primary-600"
+            class="block w-full h-10 pl-10 lg:text-lg bg-gray-400/10 placeholder-gray-500 border-transparent transition duration-75 rounded-lg focus:bg-white focus:placeholder-gray-400 focus:border-primary-600 focus:ring-1 focus:ring-inset focus:ring-primary-600 dark:bg-dark-700 dark:text-dark-200 dark:placeholder-dark-400"
         >
     </div>
 </div>

packages/admin/resources/views/components/global-search/no-results-message.blade.php

@@ -1,3 +1,3 @@
-<div {{ $attributes->class(['px-6 py-4']) }}>
+<div {{ $attributes->class(['px-6 py-4 dark:text-dark-200']) }}>
     {{ __('filament::global-search.no_results_message') }}
 </div>

packages/admin/resources/views/components/global-search/result-group.blade.php

@@ -3,10 +3,10 @@
     'results',
 ])
 
-<ul {{ $attributes->class(['divide-y']) }}>
+<ul {{ $attributes->class(['divide-y dark:divide-dark-700']) }}>
     <li class="sticky top-0 z-10">
-        <header class="px-6 py-2 bg-gray-50/80 backdrop-blur-xl backdrop-saturate-150">
-            <p class="text-xs font-bold tracking-wider text-gray-500 uppercase">
+        <header class="px-6 py-2 bg-gray-50/80 backdrop-blur-xl backdrop-saturate-150 dark:bg-dark-700">
+            <p class="text-xs font-bold tracking-wider text-gray-500 uppercase dark:text-dark-400">
                 {{ $label }}
             </p>
         </header>

packages/admin/resources/views/components/global-search/result.blade.php

@@ -6,12 +6,12 @@
 
 <li {{ $attributes }}>
     <a href="{{ $url }}" class="relative block px-6 py-4 focus:bg-gray-500/5 hover:bg-gray-500/5 focus:ring-1 focus:ring-gray-300">
-        <p class="font-medium">{{ $title }}</p>
+        <p class="font-medium dark:text-dark-200">{{ $title }}</p>
 
-        <p class="text-sm space-x-2 font-medium text-gray-500">
+        <p class="text-sm space-x-2 font-medium text-gray-500 dark:text-dark-400">
             @foreach ($details as $label => $value)
                 <span>
-                    <span class="font-medium text-gray-700">{{ $label }}:</span> <span>{{ $value }}</span>
+                    <span class="font-medium text-gray-700 dark:text-dark-200">{{ $label }}:</span> <span>{{ $value }}</span>
                 </span>
             @endforeach
         </p>

packages/admin/resources/views/components/global-search/results-container.blade.php

@@ -10,7 +10,7 @@
     x-on:open-global-search-results.window="isOpen = true"
     {{ $attributes->class(['absolute right-0 rtl:right-auto rtl:left-0 top-auto z-10 mt-2 shadow-xl overflow-hidden rounded-xl w-screen max-w-xs sm:max-w-lg']) }}
 >
-    <div class="overflow-y-scroll overflow-x-hidden max-h-96 bg-white shadow rounded-xl">
+    <div class="overflow-y-scroll overflow-x-hidden max-h-96 bg-white shadow rounded-xl dark:bg-dark-800">
         @forelse ($results as $group => $groupedResults)
             <x-filament::global-search.result-group :label="$group" :results="$groupedResults" />
         @empty

packages/admin/resources/views/components/hr.blade.php

@@ -1 +1 @@
-<div aria-hidden="true" {{ $attributes->class(['border-t']) }}></div>
+<div aria-hidden="true" {{ $attributes->class(['border-t dark:border-dark-700']) }}></div>

packages/admin/resources/views/components/layouts/app.blade.php

@@ -1,5 +1,5 @@
 <x-filament::layouts.base :title="$title">
-    <div class="flex min-h-screen w-full bg-gray-50 text-gray-900">
+    <div class="flex min-h-screen w-full">
         <div
             x-data="{}"
             x-cloak
@@ -12,7 +12,7 @@ class="fixed inset-0 z-20 w-full h-full bg-gray-900/50 lg:hidden"
         <x-filament::layouts.app.sidebar />
 
         <div class="w-screen space-y-6 flex-1 flex flex-col lg:pl-80 rtl:lg:pl-0 rtl:lg:pr-80">
-            <header class="h-[4rem] shrink-0 w-full border-b flex items-center">
+            <header class="h-[4rem] shrink-0 w-full border-b flex items-center dark:bg-dark-800 dark:border-dark-700">
                 <div @class([
                     'flex items-center w-full px-2 mx-auto sm:px-4 md:px-6 lg:px-8',
                     match (config('filament.layout.max_content_width')) {
@@ -32,27 +32,51 @@ class="fixed inset-0 z-20 w-full h-full bg-gray-900/50 lg:hidden"
 
                     <div class="flex-1 flex items-center justify-between">
                         <div>
-                            <ul class="hidden gap-4 items-center font-medium text-sm lg:flex">
+                            <ul class="hidden gap-4 items-center font-medium text-sm lg:flex dark:text-white">
                                 @foreach ($breadcrumbs as $url => $label)
                                     <li>
                                         <a
                                             href="{{ is_int($url) ? '#' : $url }}"
                                             @class([
-                                                'text-gray-500' => $loop->last,
+                                                'text-gray-500 dark:text-dark-400' => $loop->last,
                                             ])
                                         >
                                             {{ $label }}
                                         </a>
                                     </li>
 
                                     @if (! $loop->last)
-                                        <li class="h-6 border-r border-gray-300 -skew-x-12"></li>
+                                        <li class="h-6 border-r border-gray-300 -skew-x-12 dark:border-dark-500"></li>
                                     @endif
                                 @endforeach
                             </ul>
                         </div>
 
                         @livewire('filament.core.global-search')
+
+                        @if(config('filament.layout.darkmode'))
+                        <div class="flex justify-center" x-data="darkmode">
+                            <button x-show="theme === 'dark'" x-on:click="switchTheme('system')">
+                                    <svg class="p-2 ml-3 w-8 h-8 text-gray-100 bg-dark-700 rounded-md transition cursor-pointer dark:hover:bg-dark-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                    <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+                                </svg>    </button>
+
+                            <button x-show="theme === 'light'" x-on:click="switchTheme('dark')" x-cloak>
+                                <svg class="p-2 ml-3 w-8 h-8 text-gray-700 bg-gray-200 rounded-md transition cursor-pointer hover:bg-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                    <path fill-rule="evenodd" 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" clip-rule="evenodd"></path>
+                                </svg>
+                            </button>
+
+                            <button x-show="theme === 'system'" x-on:click="window.matchMedia('(prefers-color-scheme: dark)').matches ? switchTheme('light') : switchTheme('dark')" x-cloak>
+                                <svg x-show="! window.matchMedia('(prefers-color-scheme: dark)').matches" class="p-2 ml-3 w-8 h-8 text-gray-700 bg-gray-100 rounded-md transition cursor-pointer hover:bg-gray-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" style="display: none;">
+                                    <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path>
+                                </svg>
+                                <svg x-show="window.matchMedia('(prefers-color-scheme: dark)').matches" class="p-2 ml-3 w-8 h-8 text-gray-100 bg-dark-700 rounded-md transition cursor-pointer dark:hover:bg-dark-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                    <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path>
+                                </svg>
+                            </button>
+                        </div>
+                        @endif
                     </div>
                 </div>
             </header>

packages/admin/resources/views/components/layouts/app/sidebar/footer.blade.php

@@ -1,4 +1,4 @@
-<footer class="border-t px-6 py-3 flex shrink-0 items-center gap-3">
+<footer class="border-t px-6 py-3 flex shrink-0 items-center gap-3 dark:border-dark-700">
     @php
         $user = \Filament\Facades\Filament::auth()->user();
     @endphp
@@ -13,7 +13,7 @@ class="w-11 h-11 rounded-full bg-gray-200 bg-cover bg-center"
             {{ \Filament\Facades\Filament::getUserName($user) }}
         </p>
 
-        <p class="text-xs text-gray-500 hover:text-gray-700 focus:text-gray-700">
+        <p class="text-xs text-gray-500 hover:text-gray-700 focus:text-gray-700 dark:text-dark-300 dark:hover:text-dark-200">
             <a href="{{ route('filament.auth.logout') }}">
                 {{ __('filament::layout.buttons.logout.label') }}
             </a>

packages/admin/resources/views/components/layouts/app/sidebar/group.blade.php

@@ -8,12 +8,12 @@
             x-on:click.prevent="$store.sidebar.toggleCollapsedGroup(label)"
             class="flex items-center justify-between w-full"
         >
-            <p class="font-bold uppercase text-gray-600 text-xs tracking-wider">
+            <p class="font-bold uppercase text-gray-600 text-xs tracking-wider dark:text-dark-300">
                 {{ $label }}
             </p>
 
-            <x-heroicon-o-chevron-down class="w-3 h-3 text-gray-600" x-show="$store.sidebar.groupIsCollapsed(label)" />
-            <x-heroicon-o-chevron-up class="w-3 h-3 text-gray-600" x-show="! $store.sidebar.groupIsCollapsed(label)" />
+            <x-heroicon-o-chevron-down class="w-3 h-3 text-gray-600 dark:text-dark-300" x-show="$store.sidebar.groupIsCollapsed(label)" />
+            <x-heroicon-o-chevron-up class="w-3 h-3 text-gray-600 dark:text-dark-300" x-show="! $store.sidebar.groupIsCollapsed(label)" />
         </button>
     @endif
 

packages/admin/resources/views/components/layouts/app/sidebar/index.blade.php

@@ -2,9 +2,9 @@
     x-data="{}"
     x-cloak
     x-bind:class="$store.sidebar.isOpen ? 'translate-x-0' : '-translate-x-full rtl:lg:-translate-x-0 rtl:translate-x-full'"
-    class="fixed inset-y-0 left-0 rtl:left-auto rtl:right-0 z-20 flex flex-col h-screen overflow-hidden shadow-2xl transition duration-300 bg-white lg:border-r w-80 lg:z-0 lg:translate-x-0"
+    class="fixed inset-y-0 left-0 rtl:left-auto rtl:right-0 z-20 flex flex-col h-screen overflow-hidden shadow-2xl transition duration-300 bg-white lg:border-r w-80 lg:z-0 lg:translate-x-0 dark:bg-dark-800 dark:border-dark-700"
 >
-    <header class="border-b h-[4rem] shrink-0 px-6 flex items-center">
+    <header class="border-b h-[4rem] shrink-0 px-6 flex items-center dark:border-dark-700">
         <a href="{{ config('filament.home_url') }}">
             <x-filament::brand />
         </a>
@@ -29,7 +29,7 @@ class="fixed inset-y-0 left-0 rtl:left-auto rtl:right-0 z-20 flex flex-col h-scr
 
                 @if (! $loop->last)
                     <li>
-                        <div class="border-t -mr-6"></div>
+                        <div class="border-t -mr-6 dark:border-dark-700"></div>
                     </li>
                 @endif
             @endforeach

packages/admin/resources/views/components/layouts/app/sidebar/item.blade.php

@@ -9,7 +9,7 @@
         href="{{ $url }}"
         @class([
             'flex items-center gap-3 px-3 py-2 rounded-lg font-medium transition',
-            'hover:bg-gray-500/5 focus:bg-gray-500/5' => ! $active,
+            'hover:bg-gray-500/5 focus:bg-gray-500/5 dark:text-slate-300 dark:hover:bg-slate-700' => ! $active,
             'bg-primary-500 text-white' => $active,
         ])
     >

packages/admin/resources/views/components/layouts/base.blade.php

@@ -3,7 +3,7 @@
 ])
 
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ __('filament::layout.direction') ?? 'ltr' }}" class="antialiased bg-gray-100 js-focus-visible">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ __('filament::layout.direction') ?? 'ltr' }}" class="antialiased js-focus-visible">
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -32,7 +32,7 @@
         <link rel="stylesheet" href="{{ \Filament\Facades\Filament::getThemeUrl() }}" />
     </head>
 
-    <body>
+    <body class="bg-gray-100 text-gray-900 dark:text-dark-100 dark:bg-dark-900">
         {{ $slot }}
 
         @livewireScripts
@@ -57,5 +57,15 @@
         @endforeach
 
         @stack('scripts')
+
+        @if(config('filament.layout.darkmode'))
+        <script>
+            if (localStorage.theme === 'dark' || (localStorage.theme === null && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                document.documentElement.classList.add('dark')
+            } else {
+                document.documentElement.classList.remove('dark')
+            }
+        </script>
+        @endif
     </body>
 </html>