{mainNavItems.map((item) => (
diff --git a/resources/js/hooks/use-appearance.tsx b/resources/js/hooks/use-appearance.tsx
index e4194fee..c9ede816 100644
--- a/resources/js/hooks/use-appearance.tsx
+++ b/resources/js/hooks/use-appearance.tsx
@@ -2,7 +2,22 @@ import { useCallback, useEffect, useState } from 'react';
export type Appearance = 'light' | 'dark' | 'system';
-const prefersDark = () => window.matchMedia('(prefers-color-scheme: dark)').matches;
+const prefersDark = () => {
+ if (typeof window === 'undefined') {
+ return false;
+ }
+
+ return window.matchMedia('(prefers-color-scheme: dark)').matches;
+};
+
+const setCookie = (name: string, value: string, days = 365) => {
+ if (typeof document === 'undefined') {
+ return;
+ }
+
+ const maxAge = days * 24 * 60 * 60;
+ document.cookie = `${name}=${value};path=/;max-age=${maxAge};SameSite=Lax`;
+};
const applyTheme = (appearance: Appearance) => {
const isDark = appearance === 'dark' || (appearance === 'system' && prefersDark());
@@ -10,7 +25,13 @@ const applyTheme = (appearance: Appearance) => {
document.documentElement.classList.toggle('dark', isDark);
};
-const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+const mediaQuery = () => {
+ if (typeof window === 'undefined') {
+ return null;
+ }
+
+ return window.matchMedia('(prefers-color-scheme: dark)');
+};
const handleSystemThemeChange = () => {
const currentAppearance = localStorage.getItem('appearance') as Appearance;
@@ -23,7 +44,7 @@ export function initializeTheme() {
applyTheme(savedAppearance);
// Add the event listener for system theme changes...
- mediaQuery.addEventListener('change', handleSystemThemeChange);
+ mediaQuery()?.addEventListener('change', handleSystemThemeChange);
}
export function useAppearance() {
@@ -31,7 +52,13 @@ export function useAppearance() {
const updateAppearance = useCallback((mode: Appearance) => {
setAppearance(mode);
+
+ // Store in localStorage for client-side persistence...
localStorage.setItem('appearance', mode);
+
+ // Store in cookie for SSR...
+ setCookie('appearance', mode);
+
applyTheme(mode);
}, []);
@@ -39,7 +66,7 @@ export function useAppearance() {
const savedAppearance = localStorage.getItem('appearance') as Appearance | null;
updateAppearance(savedAppearance || 'system');
- return () => mediaQuery.removeEventListener('change', handleSystemThemeChange);
+ return () => mediaQuery()?.removeEventListener('change', handleSystemThemeChange);
}, [updateAppearance]);
return { appearance, updateAppearance } as const;
diff --git a/resources/js/layouts/settings/layout.tsx b/resources/js/layouts/settings/layout.tsx
index 0c35cfa4..9246b781 100644
--- a/resources/js/layouts/settings/layout.tsx
+++ b/resources/js/layouts/settings/layout.tsx
@@ -25,6 +25,11 @@ const sidebarNavItems: NavItem[] = [
];
export default function SettingsLayout({ children }: PropsWithChildren) {
+ // When server-side rendering, we only render the layout on the client...
+ if (typeof window === 'undefined') {
+ return null;
+ }
+
const currentPath = window.location.pathname;
return (
diff --git a/resources/js/pages/auth/login.tsx b/resources/js/pages/auth/login.tsx
index c53508cb..f0705e72 100644
--- a/resources/js/pages/auth/login.tsx
+++ b/resources/js/pages/auth/login.tsx
@@ -80,7 +80,13 @@ export default function Login({ status, canResetPassword }: LoginProps) {
- setData('remember', !data.remember)} tabIndex={3} />
+ setData('remember', !data.remember)}
+ tabIndex={3}
+ />
diff --git a/resources/js/ssr.jsx b/resources/js/ssr.jsx
deleted file mode 100644
index 94c82702..00000000
--- a/resources/js/ssr.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/* prettier-ignore */
-import {
-createInertiaApp
-} from '@inertiajs/react';
-import createServer from '@inertiajs/react/server';
-import ReactDOMServer from 'react-dom/server';
-
-createServer((page) =>
- createInertiaApp({
- page,
- render: ReactDOMServer.renderToString,
- resolve: (name) => {
- const pages = import.meta.glob('./pages/**/*.tsx', {
- eager: true,
- });
- return pages[`./pages/${name}.tsx`];
- },
- // prettier-ignore
- setup: ({ App, props }) =>
,
- }),
-);
diff --git a/resources/js/ssr.tsx b/resources/js/ssr.tsx
new file mode 100644
index 00000000..c6cd25a4
--- /dev/null
+++ b/resources/js/ssr.tsx
@@ -0,0 +1,30 @@
+import { createInertiaApp } from '@inertiajs/react';
+import createServer from '@inertiajs/react/server';
+import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
+import ReactDOMServer from 'react-dom/server';
+import { type RouteName, route } from 'ziggy-js';
+
+const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
+
+createServer((page) =>
+ createInertiaApp({
+ page,
+ render: ReactDOMServer.renderToString,
+ title: (title) => `${title} - ${appName}`,
+ resolve: (name) => resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob('./pages/**/*.tsx')),
+ setup: ({ App, props }) => {
+ /* eslint-disable */
+ // @ts-expect-error
+ global.route
= (name, params, absolute) =>
+ route(name, params as any, absolute, {
+ // @ts-expect-error
+ ...page.props.ziggy,
+ // @ts-expect-error
+ location: new URL(page.props.ziggy.location),
+ });
+ /* eslint-enable */
+
+ return ;
+ },
+ }),
+);
diff --git a/resources/js/types/global.d.ts b/resources/js/types/global.d.ts
new file mode 100644
index 00000000..b3c9b786
--- /dev/null
+++ b/resources/js/types/global.d.ts
@@ -0,0 +1,5 @@
+import type { route as routeFn } from 'ziggy-js';
+
+declare global {
+ const route: typeof routeFn;
+}
diff --git a/resources/js/types/index.ts b/resources/js/types/index.d.ts
similarity index 90%
rename from resources/js/types/index.ts
rename to resources/js/types/index.d.ts
index 9929c24d..2c03ad9c 100644
--- a/resources/js/types/index.ts
+++ b/resources/js/types/index.d.ts
@@ -1,4 +1,5 @@
import { LucideIcon } from 'lucide-react';
+import type { Config } from 'ziggy-js';
export interface Auth {
user: User;
@@ -25,6 +26,7 @@ export interface SharedData {
name: string;
quote: { message: string; author: string };
auth: Auth;
+ ziggy: Config & { location: string };
[key: string]: unknown;
}
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index 8560cbc0..30938355 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -1,9 +1,35 @@
-
+ ($appearance ?? 'system') == 'dark'])>
+ {{-- Inline script to detect system dark mode preference and apply it immediately --}}
+
+
+ {{-- Inline style to set the HTML background color based on our theme in app.css --}}
+
+
{{ config('app.name', 'Laravel') }}
diff --git a/tsconfig.json b/tsconfig.json
index cdfd267f..f905a3ee 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -114,5 +114,9 @@
},
"jsx": "react-jsx"
},
- "include": ["resources/js/**/*.ts", "resources/js/**/*.tsx"]
+ "include": [
+ "resources/js/**/*.ts",
+ "resources/js/**/*.d.ts",
+ "resources/js/**/*.tsx",
+ ]
}
diff --git a/vite.config.js b/vite.config.ts
similarity index 55%
rename from vite.config.js
rename to vite.config.ts
index fc3be2fd..290d90e8 100644
--- a/vite.config.js
+++ b/vite.config.ts
@@ -1,15 +1,14 @@
+import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react';
import laravel from 'laravel-vite-plugin';
-import {
- defineConfig
-} from 'vite';
-import tailwindcss from "@tailwindcss/vite";
+import { resolve } from 'node:path';
+import { defineConfig } from 'vite';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.tsx'],
- ssr: 'resources/js/ssr.jsx',
+ ssr: 'resources/js/ssr.tsx',
refresh: true,
}),
react(),
@@ -18,4 +17,9 @@ export default defineConfig({
esbuild: {
jsx: 'automatic',
},
-});
\ No newline at end of file
+ resolve: {
+ alias: {
+ 'ziggy-js': resolve(__dirname, 'vendor/tightenco/ziggy'),
+ },
+ },
+});