11<!DOCTYPE html>
22<html lang =" {{ str_replace (' _' , ' -' , app ()-> getLocale ()) } }" @class ([' dark' => ($appearance ?? ' system' ) == ' dark' ] )>
3- <head >
4- <meta charset =" utf-8" >
5- <meta name =" viewport" content =" width=device-width, initial-scale=1" >
6- <link rel =" icon" href =" favicon.ico" >
7-
8- {{-- Inline script to detect system dark mode preference and apply it immediately --}}
9- <script >
10- (function () {
11- const appearance = ' {{ $appearance ?? " system" } }' ;
12-
13- if (appearance === ' system' ) {
14- const prefersDark = window .matchMedia (' (prefers-color-scheme: dark)' ).matches ;
15-
16- if (prefersDark) {
17- document .documentElement .classList .add (' dark' );
18- }
19- }
20- })();
21- </script >
223
23- {{-- Inline style to set the HTML background color based on our theme in app.css --}}
24- <style >
25- html {
26- background-color : oklch(1 0 0 );
27- }
4+ <head >
5+ <meta charset =" utf-8" >
6+ <meta name =" viewport" content =" width=device-width, initial-scale=1" >
7+ <link rel =" icon" href =" favicon.ico" >
8+
9+ {{-- Inline script to detect system dark mode preference and apply it immediately --}}
10+ <script >
11+ (function () {
12+ const appearance = ' {{ $appearance ?? " system" } }' ;
2813
29- html .dark {
30- background-color : oklch(0.145 0 0 );
14+ if (appearance === ' system' ) {
15+ const prefersDark = window .matchMedia (' (prefers-color-scheme: dark)' ).matches ;
16+
17+ if (prefersDark) {
18+ document .documentElement .classList .add (' dark' );
19+ }
3120 }
32- </style >
33-
34- <title inertia >{{ config (' app.name' , ' Laravel' ) } } </title >
35-
36- <link rel =" preconnect" href =" https://fonts.bunny.net" >
37- <link href =" https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel =" stylesheet" />
38-
39- @routes
40- @viteReactRefresh
41- @vite ([' resources/js/app.tsx' , " resources/js/pages/{$page [' component' ]}.tsx" ] )
42- @inertiaHead
43- </head >
44- <body class =" font-sans antialiased" >
45- @inertia
46- </body >
47- </html >
21+ })();
22+ </script >
23+
24+ {{-- Inline style to set the HTML background color based on our theme in app.css --}}
25+ <style >
26+ html {
27+ background-color : oklch(1 0 0 );
28+ }
29+
30+ html .dark {
31+ background-color : oklch(0.145 0 0 );
32+ }
33+ </style >
34+
35+ <title inertia >{{ config (' app.name' , ' DropMixr' ) } } </title >
36+
37+ <link rel =" preconnect" href =" https://fonts.bunny.net" >
38+ <link href =" https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel =" stylesheet" />
39+
40+ @routes
41+ @viteReactRefresh
42+ @vite ([' resources/js/app.tsx' , " resources/js/pages/{$page [' component' ]}.tsx" ] )
43+ @inertiaHead
44+ </head >
45+
46+ <body class =" font-sans antialiased" >
47+ @inertia
48+ </body >
49+
50+ </html >
0 commit comments