Fascinated/scoresaber-reloaded-v2
1
2
Fork 0
Code Issues 1 Pull Requests 10 Actions Activity

fix(ssr): attempt to fix theme flashing
All checks were successful
deploy / deploy (push) Successful in 1m2s
Details

Browse Source
This commit is contained in:
Lee 2023-11-08 19:43:19 +00:00
parent 3341f07136
commit 736f286d66
2 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/layout.tsx
View File

@ -1,4 +1,5 @@
import AppProvider from "@/components/AppProvider"; import AppProvider from "@/components/AppProvider";
import { ThemeProvider } from "@/components/ui/theme-provider";
import ssrSettings from "@/ssrSettings.json"; import ssrSettings from "@/ssrSettings.json";
import clsx from "clsx"; import clsx from "clsx";
import { Metadata } from "next"; import { Metadata } from "next";
@ -52,7 +53,14 @@ export default function RootLayout({
/> />
<body className={clsx(font.className, "text-primary")}> <body className={clsx(font.className, "text-primary")}>
<AppProvider>{children}</AppProvider> <ThemeProvider
storageKey="ssr-theme"
attribute="class"
defaultTheme="dark"
enableSystem
>
<AppProvider>{children}</AppProvider>
</ThemeProvider>
</body> </body>
</html> </html>
); );

21
src/components/AppProvider.tsx
View File

@ -5,7 +5,6 @@ import { useSettingsStore } from "@/store/settingsStore";
import React from "react"; import React from "react";
import { ToastContainer } from "react-toastify"; import { ToastContainer } from "react-toastify";
import { TooltipProvider } from "./ui/Tooltip"; import { TooltipProvider } from "./ui/Tooltip";
import { ThemeProvider } from "./ui/theme-provider";
const UPDATE_INTERVAL = 1000 * 60 * 5; // 5 minutes const UPDATE_INTERVAL = 1000 * 60 * 5; // 5 minutes
@ -52,17 +51,15 @@ export default class AppProvider extends React.Component {
const props: any = this.props; const props: any = this.props;
return ( return (
<ThemeProvider attribute="class" defaultTheme="dark" enableSystem> <TooltipProvider>
<TooltipProvider> <ToastContainer
<ToastContainer className="z-50"
className="z-50" position="top-right"
position="top-right" theme="dark"
theme="dark" pauseOnFocusLoss={false}
pauseOnFocusLoss={false} />
/> {props.children}
{props.children} </TooltipProvider>
</TooltipProvider>
</ThemeProvider>
); );
} }
} }