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-30 22:24:35 +08:00
|
|
|
import { HubProvider } from "core/hub";
|
|
|
|
|
import { MessageProvider, 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" />
|
2024-11-30 22:24:35 +08:00
|
|
|
<meta
|
|
|
|
|
name="viewport"
|
|
|
|
|
content="width=device-width, initial-scale=1"
|
|
|
|
|
/>
|
|
|
|
|
<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}>
|
2024-11-30 22:24:35 +08:00
|
|
|
<HubProvider>
|
|
|
|
|
<MessageProvider>
|
|
|
|
|
<MessageContainer />
|
2024-11-30 02:15:46 +08:00
|
|
|
<Outlet />
|
2024-11-30 22:24:35 +08:00
|
|
|
</MessageProvider>
|
|
|
|
|
</HubProvider>
|
|
|
|
|
|
|
|
|
|
<ScrollRestoration />
|
|
|
|
|
<script
|
|
|
|
|
dangerouslySetInnerHTML={{
|
|
|
|
|
__html: `
|
|
|
|
|
(function() {
|
|
|
|
|
// 立即应用系统主题
|
|
|
|
|
function applyTheme(isDark) {
|
|
|
|
|
document.documentElement.classList.toggle('dark', isDark);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 获取系统主题并立即应用
|
|
|
|
|
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
|
|
|
applyTheme(darkModeMediaQuery.matches);
|
2024-11-30 14:03:32 +08:00
|
|
|
|
2024-11-30 22:24:35 +08:00
|
|
|
// 添加主题变化监听
|
|
|
|
|
try {
|
|
|
|
|
// 现代浏览器的方式
|
|
|
|
|
darkModeMediaQuery.addEventListener('change', (e) => {
|
|
|
|
|
applyTheme(e.matches);
|
|
|
|
|
});
|
|
|
|
|
} catch (e) {
|
|
|
|
|
// 兼容旧版浏览器
|
|
|
|
|
darkModeMediaQuery.addListener((e) => {
|
|
|
|
|
applyTheme(e.matches);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
})()
|
|
|
|
|
`,
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
<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
|
|
|
}
|
