dark mode supoport

Modules/Helpdesk/Resources/assets/css/app.css

@@ -1392,3 +1392,50 @@ span.flatpickr-weekday {
         flex: 1 1 8rem;
     }
 }
+
+
+/* Complete light-mode counterpart to the module's dark control rules. */
+html:not(.dark) .hd-helpdesk-surface .hd-select,
+html:not(.dark) .hd-select,
+html:not(.dark) .helpdesk-ticket-form input,
+html:not(.dark) .helpdesk-ticket-form textarea,
+html:not(.dark) .helpdesk-ticket-form select,
+html:not(.dark) .helpdesk-ticket-form .select2-container--default .select2-selection--single,
+html:not(.dark) .helpdesk-ticket-form .select2-container--default .select2-selection--multiple,
+html:not(.dark) .helpdesk-ticket-form .select2-container--default .select2-selection__rendered,
+html:not(.dark) .helpdesk-ticket-form .select2-container--default .select2-selection__choice {
+    background: #ffffff !important;
+    background-color: #ffffff !important;
+    color: #1f2937 !important;
+    border-color: #c9d1dc !important;
+    caret-color: #1f2937 !important;
+}
+
+html:not(.dark) .helpdesk-ticket-form input:disabled,
+html:not(.dark) .helpdesk-ticket-form textarea:disabled,
+html:not(.dark) .helpdesk-ticket-form select:disabled,
+html:not(.dark) .helpdesk-ticket-form .select2-container--disabled .select2-selection--single,
+html:not(.dark) .helpdesk-ticket-form .select2-container--disabled .select2-selection--multiple,
+html:not(.dark) .helpdesk-ticket-form [disabled],
+html:not(.dark) .helpdesk-ticket-form [aria-disabled="true"] {
+    background: #eef2f7 !important;
+    background-color: #eef2f7 !important;
+    color: #667085 !important;
+}
+
+html:not(.dark) .helpdesk-ticket-form input:-webkit-autofill,
+html:not(.dark) .helpdesk-ticket-form input:-webkit-autofill:hover,
+html:not(.dark) .helpdesk-ticket-form input:-webkit-autofill:focus,
+html:not(.dark) .helpdesk-ticket-form textarea:-webkit-autofill,
+html:not(.dark) .helpdesk-ticket-form textarea:-webkit-autofill:hover,
+html:not(.dark) .helpdesk-ticket-form textarea:-webkit-autofill:focus,
+html:not(.dark) .helpdesk-ticket-form select:-webkit-autofill,
+html:not(.dark) .helpdesk-ticket-form select:-webkit-autofill:hover,
+html:not(.dark) .helpdesk-ticket-form select:-webkit-autofill:focus {
+    -webkit-text-fill-color: #1f2937 !important;
+    box-shadow: 0 0 0 1000px #ffffff inset !important;
+}
+
+html:not(.dark) .hd-helpdesk-surface {
+    color: #1f2937;
+}

resources/themes/backend/assets/css/helpdesk.css

@@ -1586,3 +1586,220 @@ span.flatpickr-weekday {
 .hd-account-settings [data-flux-text] {
     color: #9ca3af !important;
 }
+
+
+/* ============================================================
+   COMPLETE APPEARANCE SUPPORT
+   Flux owns the root .dark class through @fluxAppearance.
+   Light/System-light is therefore html:not(.dark).
+   ============================================================ */
+
+html {
+    color-scheme: light;
+}
+
+html.dark {
+    color-scheme: dark;
+}
+
+html:not(.dark) .hd-app-body {
+    background: #f4f6f8 !important;
+    color: #1f2937 !important;
+}
+
+html:not(.dark) .hd-topbar {
+    background: linear-gradient(90deg, #ffffff, #f8fafc) !important;
+    border-bottom-color: #d8dee7 !important;
+    box-shadow: 0 8px 24px rgba(15, 23, 42, .08) !important;
+}
+
+html:not(.dark) .hd-topbar-brand {
+    border-right-color: #d8dee7 !important;
+}
+
+html:not(.dark) .hd-brand-name,
+html:not(.dark) .hd-account-button,
+html:not(.dark) .hd-account-copy strong {
+    color: #1f2937 !important;
+}
+
+html:not(.dark) .hd-account-copy small,
+html:not(.dark) .hd-top-search,
+html:not(.dark) .hd-top-search i {
+    color: #667085 !important;
+}
+
+html:not(.dark) .hd-top-search {
+    background: #f8fafc !important;
+    border-color: #d8dee7 !important;
+}
+
+html:not(.dark) .hd-top-search input {
+    color: #1f2937 !important;
+}
+
+html:not(.dark) .hd-shell-sidebar {
+    background: linear-gradient(180deg, #ffffff, #f7f9fc) !important;
+    border-right-color: #d8dee7 !important;
+}
+
+html:not(.dark) .hd-nav-heading {
+    color: #7a8492 !important;
+}
+
+html:not(.dark) .hd-nav-link {
+    color: #596579 !important;
+}
+
+html:not(.dark) .hd-nav-link i {
+    color: #7a8492 !important;
+}
+
+html:not(.dark) .hd-nav-link:hover {
+    background: #eef2f7 !important;
+    color: #111827 !important;
+}
+
+html:not(.dark) .hd-nav-link.is-active {
+    background: linear-gradient(90deg, #e7edf6, #eef2f7) !important;
+    color: #111827 !important;
+}
+
+html:not(.dark) .hd-nav-link.is-active i {
+    color: #2563eb !important;
+}
+
+html:not(.dark) .hd-shell-main {
+    background:
+        radial-gradient(circle at 75% 0, rgba(37, 99, 235, .055), transparent 35%),
+        #f4f6f8 !important;
+    color: #1f2937 !important;
+}
+
+html:not(.dark) .hd-account-menu[open] .hd-account-button,
+html:not(.dark) .hd-account-button:hover {
+    background: #eef2f7 !important;
+    border-color: #d8dee7 !important;
+}
+
+html:not(.dark) .hd-account-dropdown {
+    background: #ffffff !important;
+    border-color: #d8dee7 !important;
+    color: #1f2937 !important;
+    box-shadow: 0 24px 60px rgba(15, 23, 42, .16) !important;
+}
+
+html:not(.dark) .hd-account-dropdown-user {
+    background: #f8fafc !important;
+}
+
+html:not(.dark) .hd-account-dropdown-copy strong,
+html:not(.dark) .hd-account-dropdown-nav a,
+html:not(.dark) .hd-account-logout {
+    color: #1f2937 !important;
+}
+
+html:not(.dark) .hd-account-dropdown-copy span,
+html:not(.dark) .hd-account-dropdown-copy small,
+html:not(.dark) .hd-account-dropdown-nav a i,
+html:not(.dark) .hd-account-logout i {
+    color: #667085 !important;
+}
+
+html:not(.dark) .hd-account-dropdown-divider {
+    background: #e2e8f0 !important;
+}
+
+html:not(.dark) .hd-account-dropdown-nav a:hover,
+html:not(.dark) .hd-account-dropdown-nav a:focus-visible {
+    background: #eef2f7 !important;
+    border-color: #d8dee7 !important;
+}
+
+/* Backend forms, settings and auth controls */
+html:not(.dark) .hd-select,
+html:not(.dark) .helpdesk-ticket-form input,
+html:not(.dark) .helpdesk-ticket-form textarea,
+html:not(.dark) .helpdesk-ticket-form select,
+html:not(.dark) .hd-account-settings input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
+html:not(.dark) .hd-account-settings textarea,
+html:not(.dark) .hd-account-settings select,
+html:not(.dark) .hd-auth-surface input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
+html:not(.dark) .hd-auth-surface textarea,
+html:not(.dark) .hd-auth-surface select {
+    background: #ffffff !important;
+    background-color: #ffffff !important;
+    color: #1f2937 !important;
+    border-color: #c9d1dc !important;
+    caret-color: #1f2937 !important;
+}
+
+html:not(.dark) .helpdesk-ticket-form input:disabled,
+html:not(.dark) .helpdesk-ticket-form textarea:disabled,
+html:not(.dark) .helpdesk-ticket-form select:disabled {
+    background: #eef2f7 !important;
+    color: #667085 !important;
+}
+
+html:not(.dark) .helpdesk-ticket-form input:-webkit-autofill,
+html:not(.dark) .helpdesk-ticket-form textarea:-webkit-autofill,
+html:not(.dark) .helpdesk-ticket-form select:-webkit-autofill {
+    -webkit-text-fill-color: #1f2937 !important;
+    box-shadow: 0 0 0 1000px #ffffff inset !important;
+}
+
+/* Select2 / popovers */
+html:not(.dark) .select2-dropdown,
+html:not(.dark) .flatpickr-calendar {
+    background: #ffffff !important;
+    color: #1f2937 !important;
+    border-color: #cfd6e1 !important;
+}
+
+html:not(.dark) .select2-container--default .select2-results__option {
+    color: #1f2937 !important;
+}
+
+/* Catch legacy Helpdesk views that still contain dark-only utility classes. */
+html:not(.dark) .bg-zinc-950,
+html:not(.dark) .bg-zinc-950\/80,
+html:not(.dark) .bg-zinc-950\/70,
+html:not(.dark) .bg-zinc-950\/60,
+html:not(.dark) .bg-zinc-950\/55,
+html:not(.dark) .bg-zinc-900,
+html:not(.dark) .bg-zinc-900\/80,
+html:not(.dark) .bg-zinc-900\/70,
+html:not(.dark) .bg-zinc-800 {
+    background-color: #ffffff !important;
+}
+
+html:not(.dark) .border-zinc-800,
+html:not(.dark) .border-zinc-700,
+html:not(.dark) .border-zinc-600 {
+    border-color: #d8dee7 !important;
+}
+
+html:not(.dark) .text-zinc-100,
+html:not(.dark) .text-zinc-200 {
+    color: #1f2937 !important;
+}
+
+html:not(.dark) .text-zinc-300 {
+    color: #374151 !important;
+}
+
+html:not(.dark) .text-zinc-400,
+html:not(.dark) .text-zinc-500 {
+    color: #667085 !important;
+}
+
+/* Do not wash out coloured action buttons/hero areas. */
+html:not(.dark) .hd-btn,
+html:not(.dark) [class*="bg-blue-"],
+html:not(.dark) [class*="bg-green-"],
+html:not(.dark) [class*="bg-emerald-"],
+html:not(.dark) [class*="bg-red-"],
+html:not(.dark) [class*="bg-amber-"],
+html:not(.dark) [class*="bg-violet-"] {
+    /* their own utility/button colour remains authoritative */
+}

resources/themes/backend/views/components/helpdesk/layouts/app.blade.php

@@ -0,0 +1,158 @@
+@props([
+    'title' => null,
+])
+
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<head>
+    @include('partials.head')
+    @if(!empty($title))
+        <title>{{ $title }} · {{ config('app.name', 'Laravel') }}</title>
+    @endif
+</head>
+<body class="hd-app-body">
+@php
+    $user = auth()->user();
+    $isAdmin = $user !== null && (
+        (bool) ($user->helpdesk_admin ?? false)
+        || (method_exists($user, 'isHelpdeskAdmin') && $user->isHelpdeskAdmin())
+    );
+    $roleLabel = $isAdmin ? 'Administrator' : ((method_exists($user, 'isHelpdeskAgent') && $user->isHelpdeskAgent()) || (bool) ($user->helpdesk_agent ?? false) ? 'Agent' : 'User');
+@endphp
+<div class="hd-app-shell" data-hd-shell>
+    <header class="hd-topbar">
+        <div class="hd-topbar-brand">
+            <button class="hd-icon-button hd-mobile-menu-button" type="button" data-hd-sidebar-toggle aria-label="Toggle navigation"><i class="fa-solid fa-bars"></i></button>
+            <a href="{{ route('dashboard') }}" wire:navigate class="hd-brand-name">{{ config('app.name', 'Laravel') }}</a>
+        </div>
+        <div class="hd-topbar-main">
+            @if(Route::has('helpdesk.tickets.index'))
+            <form method="GET" action="{{ route('helpdesk.tickets.index') }}" class="hd-top-search">
+                <i class="fa-solid fa-magnifying-glass"></i><input name="search" placeholder="Search tickets" aria-label="Search tickets">
+            </form>
+            @endif
+            <div class="hd-topbar-spacer"></div>
+            <details class="hd-account-menu">
+                <summary class="hd-account-button">
+                    <span class="hd-user-avatar hd-user-avatar--gravatar">
+                        <span class="hd-user-avatar-fallback">{{ $user->initials() }}</span>
+                        <img
+                            src="{{ $user->gravatarUrl(160) }}"
+                            alt="{{ $user->name }}"
+                            loading="lazy"
+                            referrerpolicy="no-referrer"
+                            onerror="this.style.display='none'"
+                        >
+                    </span>
+
+                    <span class="hd-account-copy">
+                        <strong>{{ $user->name }}</strong>
+                        <small>{{ $roleLabel }}</small>
+                    </span>
+
+                    <i class="fa-solid fa-chevron-down hd-account-chevron"></i>
+                </summary>
+
+                <div class="hd-account-dropdown" role="menu">
+                    <div class="hd-account-dropdown-user">
+                        <span class="hd-user-avatar hd-user-avatar--gravatar hd-user-avatar--large">
+                            <span class="hd-user-avatar-fallback">{{ $user->initials() }}</span>
+                            <img
+                                src="{{ $user->gravatarUrl(160) }}"
+                                alt="{{ $user->name }}"
+                                loading="lazy"
+                                referrerpolicy="no-referrer"
+                                onerror="this.style.display='none'"
+                            >
+                        </span>
+
+                        <div class="hd-account-dropdown-copy">
+                            <strong>{{ $user->name }}</strong>
+                            <span>{{ $user->email }}</span>
+                            <small>{{ $roleLabel }}</small>
+                        </div>
+                    </div>
+
+                    <div class="hd-account-dropdown-divider"></div>
+
+                    <nav class="hd-account-dropdown-nav" aria-label="Account">
+                        @if(Route::has('profile.edit'))
+                            <a href="{{ route('profile.edit') }}" wire:navigate role="menuitem">
+                                <i class="fa-regular fa-user"></i>
+                                <span>Profile</span>
+                            </a>
+                        @endif
+
+                        @if(Route::has('helpdesk.settings'))
+                            <a href="{{ route('helpdesk.settings') }}" wire:navigate role="menuitem">
+                                <i class="fa-solid fa-gear"></i>
+                                <span>Helpdesk Settings</span>
+                            </a>
+                        @endif
+
+                        @if($isAdmin)
+                            <a href="{{ url('/admin/users') }}" wire:navigate role="menuitem">
+                                <i class="fa-solid fa-users"></i>
+                                <span>User Management</span>
+                            </a>
+                        @endif
+                    </nav>
+
+                    <div class="hd-account-dropdown-divider"></div>
+
+                    <form method="POST" action="{{ route('logout') }}">
+                        @csrf
+                        <button class="hd-account-logout" type="submit" role="menuitem">
+                            <i class="fa-solid fa-arrow-right-from-bracket"></i>
+                            <span>Log out</span>
+                        </button>
+                    </form>
+                </div>
+            </details>
+        </div>
+    </header>
+
+    <aside class="hd-shell-sidebar" data-hd-sidebar>
+        <nav class="hd-shell-nav" aria-label="Primary navigation">
+            <div class="hd-nav-section">
+                <div class="hd-nav-heading">Platform</div>
+
+                <a
+                    class="hd-nav-link {{ request()->routeIs('dashboard') ? 'is-active' : '' }}"
+                    href="{{ route('dashboard') }}"
+                    wire:navigate
+                >
+                    <i class="fa-solid fa-house"></i>
+                    <span>Dashboard</span>
+                </a>
+            </div>
+
+            <div class="hd-nav-section"><div class="hd-nav-heading">Helpdesk</div>
+                @if(Route::has('helpdesk.tickets.index'))<a class="hd-nav-link {{ request()->routeIs('helpdesk.tickets.*') ? 'is-active' : '' }}" href="{{ route('helpdesk.tickets.index') }}" wire:navigate><i class="fa-solid fa-ticket"></i><span>Tickets</span></a>@endif
+                @if(Route::has('helpdesk.kanban'))<a class="hd-nav-link {{ request()->routeIs('helpdesk.kanban') ? 'is-active' : '' }}" href="{{ route('helpdesk.kanban') }}" wire:navigate><i class="fa-solid fa-table-columns"></i><span>Kanban</span></a>@endif
+                @if(Route::has('helpdesk.settings'))<a class="hd-nav-link {{ request()->routeIs('helpdesk.settings*') ? 'is-active' : '' }}" href="{{ route('helpdesk.settings') }}" wire:navigate><i class="fa-solid fa-gear"></i><span>Settings</span></a>@endif
+            </div>
+            @if(Route::has('documentation.index') || Route::has('documentation.documents.index'))
+            <div class="hd-nav-section"><div class="hd-nav-heading">Documentation</div>
+                <a class="hd-nav-link {{ request()->routeIs('documentation.documents.*') || request()->routeIs('documentation.index') ? 'is-active' : '' }}" href="{{ Route::has('documentation.documents.index') ? route('documentation.documents.index') : route('documentation.index') }}" wire:navigate><i class="fa-regular fa-file-lines"></i><span>Documents</span></a>
+                @if(Route::has('documentation.categories.index'))<a class="hd-nav-link {{ request()->routeIs('documentation.categories.*') ? 'is-active' : '' }}" href="{{ route('documentation.categories.index') }}" wire:navigate><i class="fa-regular fa-folder"></i><span>Categories</span></a>@endif
+            </div>
+            @endif
+            @if($isAdmin && Route::has('user-management.index'))
+            <div class="hd-nav-section"><div class="hd-nav-heading">Users</div>
+                <a class="hd-nav-link {{ request()->routeIs('user-management.index') || request()->routeIs('user-management.create') || request()->routeIs('user-management.edit') ? 'is-active' : '' }}" href="{{ route('user-management.index') }}" wire:navigate><i class="fa-solid fa-users"></i><span>Users</span></a>
+                <a class="hd-nav-link {{ request()->routeIs('user-management.roles') ? 'is-active' : '' }}" href="{{ route('user-management.roles') }}" wire:navigate><i class="fa-solid fa-shield-halved"></i><span>Roles & Permissions</span></a>
+            </div>
+            @endif
+        </nav>
+        <div class="hd-sidebar-resizer" data-hd-sidebar-resizer title="Drag to resize sidebar"><span></span></div>
+    </aside>
+    <button type="button" class="hd-sidebar-backdrop" data-hd-sidebar-toggle aria-label="Close navigation"></button>
+
+    <main class="hd-shell-main">{{ $slot }}</main>
+</div>
+
+@persist('toast')<flux:toast.group><flux:toast /></flux:toast.group>@endpersist
+@fluxScripts
+</body>
+</html>

resources/themes/backend/views/components/layouts/app.blade.php

@@ -3,7 +3,7 @@
 ])
 
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 <head>
     @include('partials.head')
     @if(!empty($title))

resources/themes/backend/views/layouts/app.blade.php

@@ -3,7 +3,7 @@
 @endphp
 
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 <head>
     @include('partials.head')
     @if(!empty($title))

resources/themes/backend/views/layouts/app/header.blade.php

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
     <head>
         @include('partials.head')
     </head>

resources/themes/backend/views/layouts/auth/card.blade.php

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
     <head>
         @include('partials.head')
     </head>

resources/themes/backend/views/layouts/auth/simple.blade.php

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
     <head>
         @include('partials.head')
     </head>

resources/themes/backend/views/layouts/auth/split.blade.php

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
     <head>
         @include('partials.head')
     </head>