44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import "../styles/globals.css";
|
|
import "tailwindcss/tailwind.css";
|
|
import React from "react";
|
|
import { GlobalSidebar } from "../components/layouts/global-sidebar";
|
|
import styles from "./_app.module.css";
|
|
import { ApolloProvider } from "@apollo/client";
|
|
import { client } from "../commons/graphql/client";
|
|
|
|
function MyApp({ Component, pageProps }) {
|
|
return (
|
|
<ApolloProvider client={client}>
|
|
<div className={styles.page}>
|
|
<GlobalSidebar className={styles.sidebar} />
|
|
<div className={styles.primary}>
|
|
<header className={styles.pageHeader}>
|
|
<h1>{"Ivan Li 的个人博客"}</h1>
|
|
<div className={styles.actions}>
|
|
<button onClick={() => switchTheme("light")}>亮色</button>
|
|
<button onClick={() => switchTheme("dark")}>暗色</button>
|
|
</div>
|
|
</header>
|
|
<div className={styles.wrapper}>
|
|
<Component {...pageProps} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ApolloProvider>
|
|
);
|
|
}
|
|
|
|
function switchTheme(mode: "light" | "dark" | "auto") {
|
|
if (mode === "auto") {
|
|
mode = "light";
|
|
}
|
|
|
|
if (mode === "dark") {
|
|
document.documentElement.classList.add("dark");
|
|
} else {
|
|
document.documentElement.classList.remove("dark");
|
|
}
|
|
}
|
|
|
|
export default MyApp;
|