admin/new_malcomm_oline
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

DarkMode

Browse Source
This commit is contained in:
Tomasz Boruc 2026-08-26 14:25:54 +02:00
parent 44c384f33f
commit 6848ed0875
6 changed files with 104 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
resources/js/app.js
View File

@ -5,3 +5,33 @@ import Alpine from 'alpinejs';
window.Alpine = Alpine; window.Alpine = Alpine;
Alpine.start(); Alpine.start();
document.addEventListener('DOMContentLoaded', () => {
const themeToggleBtn = document.getElementById('theme-toggle');
const darkIcon = document.getElementById('theme-toggle-dark-icon');
const lightIcon = document.getElementById('theme-toggle-light-icon');
if (!themeToggleBtn) return;
// Ustawienie odpowiedniej ikony przy starcie
if (document.documentElement.classList.contains('dark')) {
lightIcon.classList.remove('hidden');
} else {
darkIcon.classList.remove('hidden');
}
themeToggleBtn.addEventListener('click', () => {
// Przełączanie ikon
darkIcon.classList.toggle('hidden');
lightIcon.classList.toggle('hidden');
// Przełączanie klasy w <html> i zapis w localStorage
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');
} else {
document.documentElement.classList.add('dark');
localStorage.setItem('color-theme', 'dark');
}
});
});

5
resources/views/components/application-logo.blade.php
View File

@ -2,12 +2,11 @@
<div> <div>
<img src="{{ asset('images/logo.png') }}" <img src="{{ asset('images/logo.png') }}"
alt="Logo" alt="Logo"
style="filter: brightness(0) invert(1);" class="h-9 w-auto block [filter:brightness(0)] dark:[filter:brightness(0)_invert(1)]">
{{ $attributes->merge(['class' => 'h-9 w-auto block']) }}>
</div> </div>
<div class="w-full flex justify-end"> <div class="w-full flex justify-end">
<span class="text-[9px] font-extrabold tracking-widest leading-none mt-1 text-white text-right"> <span class="text-[9px] font-extrabold tracking-widest leading-none mt-1 text-gray-900 dark:text-white text-right">
OnLine OnLine
</span> </span>
</div> </div>

8
resources/views/layouts/app.blade.php
View File

@ -6,7 +6,13 @@
<meta name="csrf-token" content="{{ csrf_token() }}"> <meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title> <title>{{ config('app.name', 'Laravel') }}</title>
<script>
if (localStorage.getItem('color-theme') === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
</script>
<!-- Fonts --> <!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net"> <link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" /> <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

44
resources/views/layouts/navigation.blade.php
View File

@ -1,4 +1,17 @@
<nav x-data="{ open: false }" class="bg-white dark:bg-gray-800 border-b border-gray-100 dark:border-gray-700"> <nav x-data="{
open: false,
darkMode: localStorage.getItem('color-theme') === 'dark',
toggleDarkMode() {
this.darkMode = !this.darkMode;
if (this.darkMode) {
document.documentElement.classList.add('dark');
localStorage.setItem('color-theme', 'dark');
} else {
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');
}
}
}" class="bg-white dark:bg-gray-800 border-b border-gray-100 dark:border-gray-700">
<!-- Primary Navigation Menu --> <!-- Primary Navigation Menu -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16"> <div class="flex justify-between h-16">
@ -42,8 +55,21 @@
</div> </div>
</div> </div>
<!-- Right side items (Desktop) -->
<div class="hidden sm:flex sm:items-center sm:ms-6 sm:space-x-2">
<!-- Dark Mode Toggle Button (Desktop) -->
<button @click="toggleDarkMode()" type="button" class="p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg text-sm focus:outline-none transition duration-150 ease-in-out">
<!-- Ikona słońca (widoczna gdy dark mode jest aktywny) -->
<svg x-show="darkMode" 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 100 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
</svg>
<!-- Ikona księżyca (widoczna gdy light mode jest aktywny) -->
<svg x-show="!darkMode" 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>
</button>
<!-- Settings Dropdown --> <!-- Settings Dropdown -->
<div class="hidden sm:flex sm:items-center sm:ms-6">
<x-dropdown align="right" width="48"> <x-dropdown align="right" width="48">
<x-slot name="trigger"> <x-slot name="trigger">
<button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150"> <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150">
@ -122,11 +148,23 @@
<!-- Responsive Settings Options --> <!-- Responsive Settings Options -->
<div class="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600"> <div class="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600">
<div class="px-4"> <div class="px-4 flex justify-between items-center">
<div>
<div class="font-medium text-base text-gray-800 dark:text-gray-200">{{ Auth::user()->name }}</div> <div class="font-medium text-base text-gray-800 dark:text-gray-200">{{ Auth::user()->name }}</div>
<div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div> <div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div>
</div> </div>
<!-- Dark Mode Toggle Button (Mobile) -->
<button @click="toggleDarkMode()" type="button" class="p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg text-sm focus:outline-none">
<svg x-show="darkMode" 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 100 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
</svg>
<svg x-show="!darkMode" 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>
</button>
</div>
<div class="mt-3 space-y-1"> <div class="mt-3 space-y-1">
<x-responsive-nav-link :href="route('profile.edit')"> <x-responsive-nav-link :href="route('profile.edit')">
{{ __('Profile') }} {{ __('Profile') }}

37
resources/views/users/index.blade.php
View File

@ -1,7 +1,7 @@
<x-app-layout> <x-app-layout>
<x-slot name="header"> <x-slot name="header">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<h2 class="font-semibold text-xl text-white leading-tight"> <h2 class="font-semibold text-xl text-gray-800 dark:text-white leading-tight">
{{ __('Lista użytkowników') }} {{ __('Lista użytkowników') }}
</h2> </h2>
@ -19,6 +19,9 @@
<style> <style>
.custom-table-row:hover { .custom-table-row:hover {
background-color: rgba(0, 0, 0, 0.03) !important;
}
.dark .custom-table-row:hover {
background-color: rgba(255, 255, 255, 0.05) !important; background-color: rgba(255, 255, 255, 0.05) !important;
} }
.role-badge { .role-badge {
@ -32,8 +35,8 @@
<div class="py-12"> <div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg border border-gray-700/50"> <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg border border-gray-200 dark:border-gray-700/50">
<div class="p-6 text-white"> <div class="p-6 text-gray-900 dark:text-white">
{{-- Formularz Wyszukiwania --}} {{-- Formularz Wyszukiwania --}}
<div class="mb-6 flex items-center justify-between gap-4"> <div class="mb-6 flex items-center justify-between gap-4">
@ -72,7 +75,7 @@
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="w-full border-collapse" style="table-layout: fixed;"> <table class="w-full border-collapse" style="table-layout: fixed;">
<thead> <thead>
<tr class="border-b border-gray-700 text-xs font-semibold uppercase tracking-wider text-gray-300"> <tr class="border-b border-gray-200 dark:border-gray-700 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-300">
@php @php
$currentSort = request('sort'); $currentSort = request('sort');
@ -85,10 +88,10 @@
{{-- Imię i nazwisko --}} {{-- Imię i nazwisko --}}
<th scope="col" class="py-3.5 px-4" style="text-align: center !important; width: 25%;"> <th scope="col" class="py-3.5 px-4" style="text-align: center !important; width: 25%;">
<a href="{{ route('users.index', array_merge(request()->query(), ['sort' => 'name', 'direction' => $nextDirName])) }}" <a href="{{ route('users.index', array_merge(request()->query(), ['sort' => 'name', 'direction' => $nextDirName])) }}"
class="inline-flex items-center gap-1 hover:text-white transition"> class="inline-flex items-center gap-1 hover:text-gray-700 dark:hover:text-white transition">
<span>Imię i nazwisko</span> <span>Imię i nazwisko</span>
@if($currentSort === 'name') @if($currentSort === 'name')
<svg class="w-4 h-4 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $currentDir === 'asc' ? 'M19 9l-7 7-7-7' : 'M5 15l7-7 7 7' }}" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $currentDir === 'asc' ? 'M19 9l-7 7-7-7' : 'M5 15l7-7 7 7' }}" />
</svg> </svg>
@endif @endif
@ -98,10 +101,10 @@
{{-- Adres e-mail --}} {{-- Adres e-mail --}}
<th scope="col" class="py-3.5 px-4" style="text-align: center !important; width: 35%;"> <th scope="col" class="py-3.5 px-4" style="text-align: center !important; width: 35%;">
<a href="{{ route('users.index', array_merge(request()->query(), ['sort' => 'email', 'direction' => $nextDirEmail])) }}" <a href="{{ route('users.index', array_merge(request()->query(), ['sort' => 'email', 'direction' => $nextDirEmail])) }}"
class="inline-flex items-center gap-1 hover:text-white transition"> class="inline-flex items-center gap-1 hover:text-gray-700 dark:hover:text-white transition">
<span>Adres e-mail</span> <span>Adres e-mail</span>
@if($currentSort === 'email') @if($currentSort === 'email')
<svg class="w-4 h-4 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $currentDir === 'asc' ? 'M19 9l-7 7-7-7' : 'M5 15l7-7 7 7' }}" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $currentDir === 'asc' ? 'M19 9l-7 7-7-7' : 'M5 15l7-7 7 7' }}" />
</svg> </svg>
@endif @endif
@ -113,32 +116,32 @@
</tr> </tr>
</thead> </thead>
<tbody class="divide-y divide-gray-700/60 text-sm"> <tbody class="divide-y divide-gray-200 dark:divide-gray-700/60 text-sm">
@forelse($users as $user) @forelse($users as $user)
<tr class="custom-table-row transition-colors duration-150"> <tr class="custom-table-row transition-colors duration-150">
<td class="py-4 px-4 font-medium text-white align-middle" style="text-align: center !important;"> <td class="py-4 px-4 font-medium text-gray-900 dark:text-white align-middle" style="text-align: center !important;">
{{ $user->name }} {{ $user->surname }} {{ $user->name }} {{ $user->surname }}
</td> </td>
<td class="py-4 px-4 text-gray-300 align-middle" style="text-align: center !important;"> <td class="py-4 px-4 text-gray-600 dark:text-gray-300 align-middle" style="text-align: center !important;">
{{ $user->email }} {{ $user->email }}
</td> </td>
<td class="py-4 px-4 text-gray-300 align-middle" style="text-align: center !important;"> <td class="py-4 px-4 text-gray-600 dark:text-gray-300 align-middle" style="text-align: center !important;">
<div style="display: flex; justify-content: center; align-items: center; gap: 8px;"> <div style="display: flex; justify-content: center; align-items: center; gap: 8px;">
@forelse($user->roles as $role) @forelse($user->roles as $role)
<span class="role-badge text-xs font-semibold uppercase tracking-wider bg-gray-700 text-gray-100 border border-gray-600 shadow-sm"> <span class="role-badge text-xs font-semibold uppercase tracking-wider bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-100 border border-gray-300 dark:border-gray-600 shadow-sm">
{{ $role->name }} {{ $role->name }}
</span> </span>
@empty @empty
<span class="text-gray-500 text-xs">brak</span> <span class="text-gray-400 dark:text-gray-500 text-xs">brak</span>
@endforelse @endforelse
</div> </div>
</td> </td>
<td class="py-4 px-4 align-middle" style="text-align: center !important;"> <td class="py-4 px-4 align-middle" style="text-align: center !important;">
<a href="{{ route('users.edit', $user) }}" class="text-indigo-400 hover:text-indigo-300 font-medium text-sm transition"> <a href="{{ route('users.edit', $user) }}" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 font-medium text-sm transition">
Edytuj Edytuj
</a> </a>
</td> </td>
@ -146,7 +149,7 @@
</tr> </tr>
@empty @empty
<tr> <tr>
<td colspan="4" class="py-8 text-gray-400" style="text-align: center !important;"> <td colspan="4" class="py-8 text-gray-500 dark:text-gray-400" style="text-align: center !important;">
@if(request('search')) @if(request('search'))
Brak wyników spełniających kryteria wyszukiwania: "<strong>{{ request('search') }}</strong>". Brak wyników spełniających kryteria wyszukiwania: "<strong>{{ request('search') }}</strong>".
@else @else
@ -160,7 +163,7 @@
</div> </div>
@if($users->hasPages()) @if($users->hasPages())
<div class="mt-6 pt-4 border-t border-gray-700"> <div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
{{ $users->links() }} {{ $users->links() }}
</div> </div>
@endif @endif

1
tailwind.config.js
View File

@ -3,6 +3,7 @@ import forms from '@tailwindcss/forms';
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
export default { export default {
darkMode: 'class', // [!code ++]
content: [ content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php', './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php', './storage/framework/views/*.php',