Fine-tune darkmode options

Author: Cannonb4ll

app/Filament/Pages/Colors.php

@@ -3,6 +3,7 @@
 namespace App\Filament\Pages;
 
 use App\Enums\UserRole;
+use Filament\Forms\Components\Toggle;
 use Filament\Forms\Form;
 use App\Settings\ColorSettings;
 use Filament\Pages\SettingsPage;
@@ -53,55 +54,57 @@ public function form(Form $form): Form
     {
         return $form->schema(
             [
-            Section::make()
-                ->schema(
-                    [
-                    FileUpload::make('logo')
-                        ->label(trans('theme.logo'))
-                        ->image()
-                        ->helperText(trans('theme.logo-helper-text'))
-                        ->disk('public')
-                    //                    ->imageResizeTargetHeight('64')
-                        ->maxSize(1024)
-                        ->getUploadedFileNameForStorageUsing(
-                            function (TemporaryUploadedFile $file): string {
-                                return (string) str($file->getClientOriginalName())->prepend('logo-');
-                            }
-                        )
-                    ->getUploadedFileNameForStorageUsing(
-                        function ($record) {
-                            return storage_path('app/public/'.app(ColorSettings::class)->logo);
-                        }
-                    ),
-                    FileUpload::make('favicon')
-                        ->label(trans('theme.favicon'))
-                        ->image()
-                        ->disk('public')
-                    //                    ->imageResizeTargetHeight('64')
-                    //                    ->imageResizeTargetWidth('64')
-                        ->maxSize(1024)
-                        ->getUploadedFileNameForStorageUsing(
-                            function ($record) {
-                                return storage_path('app/public/favicon.png');
-                            }
-                        )
-                    ->getUploadedFileNameForStorageUsing(
-                        function (TemporaryUploadedFile $file): string {
-                            return (string)'favicon.png';
-                        }
-                    ),
-                    TextInput::make('fontFamily')
-                        ->label(trans('theme.font-family'))
-                        ->placeholder('e.g. Roboto')
-                        ->required()
-                        ->helperText(new HtmlString(trans('theme.font-family-helper-text'))),
+                Section::make()
+                    ->schema(
+                        [
+                            FileUpload::make('logo')
+                                ->label(trans('theme.logo'))
+                                ->image()
+                                ->helperText(trans('theme.logo-helper-text'))
+                                ->disk('public')
+                                //                    ->imageResizeTargetHeight('64')
+                                ->maxSize(1024)
+                                ->getUploadedFileNameForStorageUsing(
+                                    function (TemporaryUploadedFile $file): string {
+                                        return (string)str($file->getClientOriginalName())->prepend('logo-');
+                                    }
+                                )
+                                ->getUploadedFileNameForStorageUsing(
+                                    function ($record) {
+                                        return storage_path('app/public/' . app(ColorSettings::class)->logo);
+                                    }
+                                ),
+                            FileUpload::make('favicon')
+                                ->label(trans('theme.favicon'))
+                                ->image()
+                                ->disk('public')
+                                //                    ->imageResizeTargetHeight('64')
+                                //                    ->imageResizeTargetWidth('64')
+                                ->maxSize(1024)
+                                ->getUploadedFileNameForStorageUsing(
+                                    function ($record) {
+                                        return storage_path('app/public/favicon.png');
+                                    }
+                                )
+                                ->getUploadedFileNameForStorageUsing(
+                                    function (TemporaryUploadedFile $file): string {
+                                        return (string)'favicon.png';
+                                    }
+                                ),
+                            TextInput::make('fontFamily')
+                                ->label(trans('theme.font-family'))
+                                ->placeholder('e.g. Roboto')
+                                ->required()
+                                ->helperText(new HtmlString(trans('theme.font-family-helper-text'))),
 
-                    ColorPicker::make('primary')
-                        ->label(trans('theme.primary-color'))
-                        ->default('#2563EB'),
+                            ColorPicker::make('primary')
+                                ->label(trans('theme.primary-color'))
+                                ->default('#2563EB'),
 
-                    ]
-                )->columns(),
+                            Toggle::make('darkmode')
+                                ->helperText('Allow darkmode on the frontend')
+                        ]
+                    )->columns(),
             ]
         );
     }

app/Settings/ColorSettings.php

@@ -10,6 +10,7 @@ class ColorSettings extends Settings
     public string|null $favicon;
     public string|null $logo;
     public string|null $fontFamily;
+    public bool $darkmode;
 
     public static function group(): string
     {

database/settings/2024_09_23_062400_add_darkmode.php

@@ -0,0 +1,11 @@
+<?php
+
+use Spatie\LaravelSettings\Migrations\SettingsMigration;
+
+return new class extends SettingsMigration
+{
+    public function up(): void
+    {
+        $this->migrator->add('colors.darkmode', true);
+    }
+};

resources/views/components/app.blade.php

@@ -67,7 +67,7 @@ function updateTheme() {
 
     <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">
+            <ul class="flex items-center space-x-0.5 text-sm font-medium text-gray-600 dark:text-gray-500">
                 @foreach(array_filter($breadcrumbs) as $breadcrumb)
                     @if(!$loop->first)
                         <li>

resources/views/item.blade.php

@@ -55,7 +55,7 @@ class="float-right inline-flex items-center justify-center h-8 px-3 pt-1.5 pr-8
 
                 <div class="border-t dark:border-white/10"></div>
 
-                <div class="p-4 prose break-words dark:text-gray-600">
+                <div class="p-4 prose break-words dark:text-gray-400">
                     {!! str($item->content)->markdown()->sanitizeHtml() !!}
                 </div>
             </x-card>
@@ -144,7 +144,7 @@ class="text-gray-500 fill-gray-500 float-right">
                     @foreach($activities as $activity)
                         <li class="flex space-x-3">
                             <div
-                                class="relative flex items-center justify-center flex-shrink-0 w-8 h-8 text-gray-400 border border-gray-200 rounded-full bg-gray-50">
+                                class="relative flex items-center justify-center flex-shrink-0 w-8 h-8 text-gray-400 border border-gray-200 dark:border-gray-600 rounded-full bg-gray-50 dark:bg-gray-800">
                                 <svg class="w-6 h-6" 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"

resources/views/livewire/header.blade.php

@@ -5,7 +5,8 @@
             <a class="text-2xl font-semibold tracking-tight"
                href="{{ route('home') }}">
                 @if(!is_null($logo) && file_exists($logoFile = storage_path('app/public/'.$logo)))
-                    <img src="{{ asset('storage/'.$logo) }}?v={{ md5_file($logoFile) }}" alt="{{ config('app.name') }}" class="h-8"/>
+                    <img src="{{ asset('storage/'.$logo) }}?v={{ md5_file($logoFile) }}" alt="{{ config('app.name') }}"
+                         class="h-8"/>
                 @else
                     {{ config('app.name') }}
                 @endif
@@ -58,17 +59,19 @@
                     {{ $this->submitItemAction }}
                 </li>
 
-                <li>
-                    <x-theme-toggle />
-                </li>
+                @if(app(\App\Settings\ColorSettings::class)->darkmode)
+                    <li>
+                        <x-theme-toggle/>
+                    </li>
+                @endif
             </ul>
 
             <!-- Hamburger -->
             <div class="lg:hidden">
                 <button
-                    class="text-white flex items-center justify-center w-10 h-10 -mr-2 transition rounded-full focus:outline-none"
-                    x-on:click="open = !open"
-                    type="button">
+                        class="text-white flex items-center justify-center w-10 h-10 -mr-2 transition rounded-full focus:outline-none"
+                        x-on:click="open = !open"
+                        type="button">
                     <svg class="w-7 h-7" 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="M4.75 5.75H19.25"/>

resources/views/partials/navbar.blade.php

@@ -6,7 +6,7 @@
                     <a
                         @class([
                                 'flex items-center h-10 px-2 space-x-2 transition rounded-lg',
-                                'text-white bg-brand-500 dark:bg-white/5 dark:hover:bg-white/5 dark:text-brand-500' => request()->is('/'),
+                                'text-white bg-brand-500 dark:bg-white/5 dark:hover:bg-white/5 dark:text-brand-400' => request()->is('/'),
                                 'hover:bg-gray-500/5 focus:bg-brand-500/10 focus:text-brand-600 focus:outline-none dark:hover:bg-white/5 dark:text-brand-500' => !request()->is('/')
                             ])
                         href="{{ route('home') }}">
@@ -22,7 +22,7 @@ class="font-normal {{ !request()->is('/') ? 'text-gray-900 dark:text-gray-200' :
                     <a
                         @class([
                             'flex items-center h-10 px-2 space-x-2 transition rounded-lg',
-                            'text-white bg-brand-500 dark:bg-white/5 dark:hover:bg-white/5 dark:text-brand-500' => request()->is('my'),
+                            'text-white bg-brand-500 dark:bg-white/5 dark:hover:bg-white/5 dark:text-brand-400' => request()->is('my'),
                             'hover:bg-gray-500/5 focus:bg-brand-500/10 focus:text-brand-600 focus:outline-none dark:hover:bg-white/5 dark:focus:text-gray-200 dark:text-gray-200' => !request()->is('my')
                         ])
                         href="{{ route('my') }}">
@@ -36,7 +36,7 @@ class="font-normal {{ !request()->is('/') ? 'text-gray-900 dark:text-gray-200' :
                     <a
                         @class([
                             'flex items-center h-10 px-2 space-x-2 transition rounded-lg',
-                            'text-white bg-brand-500 dark:bg-white/5 dark:hover:bg-white/5 dark:text-brand-500' => request()->is('profile'),
+                            'text-white bg-brand-500 dark:bg-white/5 dark:hover:bg-white/5 dark:text-brand-400' => request()->is('profile'),
                             'hover:bg-gray-500/5 focus:bg-brand-500/10 focus:text-brand-600 focus:outline-none dark:hover:bg-white/5 dark:focus:text-gray-200 dark:text-gray-200' => !request()->is('profile')
                         ])
                         href="{{ route('profile') }}">
@@ -51,7 +51,7 @@ class="font-normal {{ !request()->is('/') ? 'text-gray-900 dark:text-gray-200' :
                         <a
                             @class([
                                 'flex items-center h-10 px-2 space-x-2 transition rounded-lg',
-                                'text-white bg-brand-500 dark:bg-white/5 dark:hover:bg-white/5 dark:text-brand-500' => request()->is('changelog*'),
+                                'text-white bg-brand-500 dark:bg-white/5 dark:hover:bg-white/5 dark:text-brand-400' => request()->is('changelog*'),
                                 'hover:bg-gray-500/5 focus:bg-brand-500/10 focus:text-brand-600 focus:outline-none dark:hover:bg-white/5 dark:focus:text-gray-200 dark:text-gray-200' => !request()->is('changelog*')
                             ])
                             href="{{ route('changelog') }}">
@@ -85,7 +85,7 @@ class="flex items-center h-2 px-2 space-x-2 transition rounded-lg mt-5"
                                         title="{{ $project->title }}"
                                         @class([
                                        'flex items-center h-10 px-2 space-x-2 transition rounded-lg',
-                                       'text-white bg-brand-500 dark:bg-white/5 dark:hover:bg-white/5 dark:text-brand-500' => request()->segment(2) === $project->slug,
+                                       'text-white bg-brand-500 dark:bg-white/5 dark:hover:bg-white/5 dark:text-brand-400' => request()->segment(2) === $project->slug,
                                        'hover:bg-gray-500/5 focus:bg-brand-500/10 focus:text-brand-600 focus:outline-none dark:hover:bg-white/5 dark:focus:text-gray-200 dark:text-gray-200' => request()->segment(2) !== $project->slug
                                    ])
                                         href="{{ route('projects.show', $project) }}">
@@ -113,7 +113,7 @@ class="w-4 h-4 {{ request()->segment(2) == $project->slug ? '' : 'text-primary'
             </div>
 
             <div id="dropdown-cta" class="p-4 mt-6 bg-gray-100 rounded-lg dark:bg-white/5" role="alert">
-                <p class="text-sm text-gray-500">
+                <p class="text-sm text-gray-500 dark:text-gray-400">
                     <a href="https://github.com/ploi/roadmap" target="_blank"
                        class="font-semibold border-b border-dotted">Open-source</a>
                     roadmapping software by

resources/views/welcome.blade.php

@@ -2,7 +2,7 @@
 
 <x-app>
     @if($text = app(\App\Settings\GeneralSettings::class)->welcome_text)
-        <div class="prose mb-4 dark:text-gray-600">{!! $text !!}</div>
+        <div class="prose mb-4 dark:text-gray-500">{!! $text !!}</div>
     @endif
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
         @foreach(app(\App\Settings\GeneralSettings::class)->dashboard_items as $item)