2024-11-17 17:17:40 +08:00
|
|
|
import {
|
|
|
|
|
Links,
|
|
|
|
|
Meta,
|
|
|
|
|
Outlet,
|
2024-11-27 19:52:49 +08:00
|
|
|
Scripts,
|
2024-11-17 17:17:40 +08:00
|
|
|
ScrollRestoration,
|
|
|
|
|
} from "@remix-run/react";
|
|
|
|
|
|
2024-11-27 01:02:05 +08:00
|
|
|
import { BaseProvider } from "hooks/servicesProvider";
|
2024-11-30 02:15:46 +08:00
|
|
|
import { MessageProvider } from "hooks/message";
|
|
|
|
|
import { MessageContainer } from "hooks/message";
|
2024-11-17 17:17:40 +08:00
|
|
|
|
2024-11-27 19:52:49 +08:00
|
|
|
import "~/index.css";
|
2024-11-17 17:17:40 +08: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" />
|
2024-11-27 01:02:05 +08:00
|
|
|
<meta name="generator" content="echoes" />
|
2024-11-17 17:17:40 +08:00
|
|
|
<Meta />
|
|
|
|
|
<Links />
|
|
|
|
|
</head>
|
2024-11-27 19:52:49 +08:00
|
|
|
<body suppressHydrationWarning={true}>
|
|
|
|
|
<BaseProvider>
|
2024-11-30 02:15:46 +08:00
|
|
|
<MessageProvider>
|
|
|
|
|
<MessageContainer />
|
|
|
|
|
<Outlet />
|
|
|
|
|
</MessageProvider>
|
2024-11-27 19:52:49 +08:00
|
|
|
</BaseProvider>
|
2024-11-17 17:17:40 +08:00
|
|
|
<ScrollRestoration />
|
2024-11-27 19:52:49 +08:00
|
|
|
<script
|
|
|
|
|
dangerouslySetInnerHTML={{
|
|
|
|
|
__html: `
|
|
|
|
|
(function() {
|
|
|
|
|
function getInitialColorMode() {
|
|
|
|
|
const persistedColorPreference = window.localStorage.getItem('theme');
|
|
|
|
|
const hasPersistedPreference = typeof persistedColorPreference === 'string';
|
|
|
|
|
if (hasPersistedPreference) {
|
|
|
|
|
return persistedColorPreference;
|
|
|
|
|
}
|
|
|
|
|
const mql = window.matchMedia('(prefers-color-scheme: dark)');
|
|
|
|
|
const hasMediaQueryPreference = typeof mql.matches === 'boolean';
|
|
|
|
|
if (hasMediaQueryPreference) {
|
|
|
|
|
return mql.matches ? 'dark' : 'light';
|
|
|
|
|
}
|
|
|
|
|
return 'light';
|
|
|
|
|
}
|
|
|
|
|
const colorMode = getInitialColorMode();
|
|
|
|
|
document.documentElement.classList.toggle('dark', colorMode === 'dark');
|
|
|
|
|
|
|
|
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
|
|
|
|
|
const newColorMode = e.matches ? 'dark' : 'light';
|
|
|
|
|
document.documentElement.classList.toggle('dark', newColorMode === 'dark');
|
|
|
|
|
localStorage.setItem('theme', newColorMode);
|
|
|
|
|
});
|
|
|
|
|
})()
|
|
|
|
|
`,
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
<Scripts />
|
2024-11-17 17:17:40 +08:00
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
export default function App() {
|
2024-11-27 01:02:05 +08:00
|
|
|
return (
|
2024-11-27 19:52:49 +08:00
|
|
|
<Layout>
|
|
|
|
|
<Outlet />
|
|
|
|
|
</Layout>
|
2024-11-27 01:02:05 +08:00
|
|
|
);
|
2024-11-17 17:17:40 +08:00
|
|
|
}
|
