Skip to content

Commit 927b615

Browse files
michaelnabil230michaelnabil230
committed
Implement appearance handling and theme management improvements
1 parent 8b851e4 commit 927b615

6 files changed

Lines changed: 69 additions & 20 deletions

File tree

‎app/Bootstrap/MiddlewareBootstrapper.php‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ final class MiddlewareBootstrapper
1111
public function __invoke(Middleware $middleware): void
1212
{
1313
$middleware
14+
->encryptCookies(['appearance'])
1415
->web(append: [
16+
\App\Http\Middleware\HandleAppearance::class,
1517
\Illuminate\Http\Middleware\AddLinkHeadersForPreloadedAssets::class,
1618
])
1719
->alias([

‎app/Http/Middleware/HandleAppearance.php‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<?php
2+
3+
declare(strict_types=1);
4+
5+
namespace App\Http\Middleware;
6+
7+
use Closure;
8+
use Illuminate\Http\Request;
9+
use Illuminate\Support\Facades\View;
10+
use Symfony\Component\HttpFoundation\Response;
11+
12+
final class HandleAppearance
13+
{
14+
/**
15+
* Handle an incoming request.
16+
*
17+
* @param Closure(Request): (Response) $next
18+
*/
19+
public function handle(Request $request, Closure $next): Response
20+
{
21+
View::share('appearance', $request->cookie('appearance', 'system'));
22+
23+
return $next($request);
24+
}
25+
}

‎resources/js/dashboard/composables/useAppearance.ts‎

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
1+
import { setCookie } from '@/dashboard/lib/cookie';
12
import { onMounted, ref } from 'vue';
23

34
type Appearance = 'light' | 'dark' | 'system';
45

56
export function updateTheme(value: Appearance) {
6-
if (typeof window === 'undefined') {
7+
const systemTheme = mediaQuery().matches ? 'dark' : 'light';
8+
const desiredTheme = value === 'system' ? systemTheme : value;
9+
const currentTheme = getCurrentTheme();
10+
11+
if (currentTheme === desiredTheme) {
712
return;
813
}
914

@@ -24,19 +29,15 @@ export function updateTheme(value: Appearance) {
2429
}
2530
}
2631

27-
const mediaQuery = () => {
28-
if (typeof window === 'undefined') {
29-
return null;
30-
}
32+
const getCurrentTheme = (): Appearance => {
33+
return document.documentElement.classList.contains('dark') ? 'dark' : 'light';
34+
};
3135

36+
const mediaQuery = () => {
3237
return window.matchMedia('(prefers-color-scheme: dark)');
3338
};
3439

3540
const getStoredAppearance = () => {
36-
if (typeof window === 'undefined') {
37-
return null;
38-
}
39-
4041
return localStorage.getItem('appearance') as Appearance | null;
4142
};
4243

@@ -46,23 +47,17 @@ const handleSystemThemeChange = () => {
4647
updateTheme(currentAppearance || 'system');
4748
};
4849

49-
export function initializeTheme() {
50-
if (typeof window === 'undefined') {
51-
return;
52-
}
53-
50+
export const initializeTheme = () => {
5451
const savedAppearance = getStoredAppearance();
5552
updateTheme(savedAppearance || 'system');
5653

57-
mediaQuery()?.addEventListener('change', handleSystemThemeChange);
58-
}
54+
mediaQuery().addEventListener('change', handleSystemThemeChange);
55+
};
5956

6057
export function useAppearance() {
6158
const appearance = ref<Appearance>('system');
6259

6360
onMounted(() => {
64-
initializeTheme();
65-
6661
const savedAppearance = localStorage.getItem('appearance') as Appearance | null;
6762

6863
if (savedAppearance) {
@@ -75,6 +70,8 @@ export function useAppearance() {
7570

7671
localStorage.setItem('appearance', value);
7772

73+
setCookie('appearance', value);
74+
7875
updateTheme(value);
7976
}
8077

‎resources/js/dashboard/lib/cookie.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export const setCookie = (name: string, value: string, days = 365) => {
2+
if (typeof document === 'undefined') {
3+
return;
4+
}
5+
6+
const maxAge = days * 24 * 60 * 60;
7+
8+
document.cookie = `${name}=${value};path=/;max-age=${maxAge};SameSite=Lax`;
9+
};

‎resources/js/dashboard/lib/utils.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { clsx, type ClassValue } from 'clsx';
22
import { twMerge } from 'tailwind-merge';
33

4-
export function cn(...inputs: ClassValue[]) {
4+
export const cn = (...inputs: ClassValue[]) => {
55
return twMerge(clsx(inputs));
6-
}
6+
};

‎resources/views/layouts/dashboard/app.blade.php‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html
33
lang="{{ LaravelLocalization::getCurrentLocale() }}"
44
dir="{{ LaravelLocalization::getCurrentLocaleDirection() }}"
5+
@class(['dark' => ($appearance ?? 'system') == 'dark'])
56
>
67
<head>
78
<meta charset="UTF-8" />
@@ -41,6 +42,21 @@
4142

4243
<title inertia>{{ config('app.name', 'Laravel') }}</title>
4344

45+
{{-- Inline script to detect system dark mode preference and apply it immediately --}}
46+
<script>
47+
(function () {
48+
const appearance = '{{ $appearance }}' ?? 'system';
49+
50+
if (appearance === 'system') {
51+
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
52+
53+
if (prefersDark) {
54+
document.documentElement.classList.add('dark');
55+
}
56+
}
57+
})();
58+
</script>
59+
4460
<!-- Scripts -->
4561
@routes
4662
<x-dashboard.initial-shared-data />

0 commit comments

Comments
 (0)