2024-09-06 09:44:02 +02:00
|
|
|
import {
|
2024-09-06 12:28:50 +02:00
|
|
|
Links,
|
|
|
|
|
Meta,
|
|
|
|
|
Outlet,
|
|
|
|
|
Scripts,
|
|
|
|
|
ScrollRestoration,
|
|
|
|
|
useLoaderData
|
|
|
|
|
} from '@remix-run/react';
|
|
|
|
|
import './tailwind.css';
|
|
|
|
|
import clsx from 'clsx';
|
|
|
|
|
import {
|
|
|
|
|
PreventFlashOnWrongTheme,
|
|
|
|
|
ThemeProvider,
|
|
|
|
|
useTheme
|
|
|
|
|
} from 'remix-themes';
|
|
|
|
|
import { LoaderFunctionArgs } from '@remix-run/node';
|
|
|
|
|
import { themeSessionResolver } from './sessions.server';
|
|
|
|
|
|
|
|
|
|
export async function loader({ request }: LoaderFunctionArgs) {
|
|
|
|
|
const { getTheme } = await themeSessionResolver(request);
|
2024-09-06 09:44:02 +02:00
|
|
|
|
2024-09-06 12:28:50 +02:00
|
|
|
return {
|
|
|
|
|
theme: getTheme()
|
|
|
|
|
};
|
2024-09-06 09:44:02 +02:00
|
|
|
}
|
|
|
|
|
|
2024-09-06 12:28:50 +02:00
|
|
|
// export function Layout({ children }: { children: React.ReactNode }) {
|
|
|
|
|
// return (
|
|
|
|
|
// <html lang="en">
|
|
|
|
|
// <head>
|
|
|
|
|
// <meta charSet="utf-8" />
|
|
|
|
|
// <meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
|
// <Meta />
|
|
|
|
|
// <Links />
|
|
|
|
|
// </head>
|
|
|
|
|
// <body>
|
|
|
|
|
// {children}
|
|
|
|
|
// <ScrollRestoration />
|
|
|
|
|
// <Scripts />
|
|
|
|
|
// </body>
|
|
|
|
|
// </html>
|
|
|
|
|
// );
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
export default function AppWithProviders() {
|
|
|
|
|
const data = useLoaderData<typeof loader>();
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<ThemeProvider
|
|
|
|
|
specifiedTheme={data.theme}
|
|
|
|
|
themeAction="/action/set-theme"
|
|
|
|
|
>
|
|
|
|
|
<App />
|
|
|
|
|
</ThemeProvider>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function App() {
|
|
|
|
|
const data = useLoaderData<typeof loader>();
|
|
|
|
|
const [theme] = useTheme();
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<html lang="en" className={clsx(theme === 'dark' && 'dark')}>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charSet="utf-8" />
|
|
|
|
|
<meta
|
|
|
|
|
name="viewport"
|
|
|
|
|
content="width=device-width, initial-scale=1"
|
|
|
|
|
/>
|
2024-09-09 09:59:50 +02:00
|
|
|
<link rel="icon" type="image/svg" href="/favicon.svg" />
|
2024-09-06 12:28:50 +02:00
|
|
|
<Meta />
|
|
|
|
|
<PreventFlashOnWrongTheme ssrTheme={Boolean(data.theme)} />
|
|
|
|
|
<Links />
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<Outlet />
|
|
|
|
|
<ScrollRestoration />
|
|
|
|
|
<Scripts />
|
|
|
|
|
{/* <LiveReload /> */}
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
);
|
2024-09-06 09:44:02 +02:00
|
|
|
}
|
