xiaoxue_admin
/
xLog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: next themes HydrationWarning

This commit is contained in:
DIYgod 2023-08-23 23:00:41 +01:00
parent 14a2720ae0
commit 7efae2208e
No known key found for this signature in database
3 changed files with 25 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/layout.tsx
View File

@ -1,6 +1,7 @@
import { dir } from "i18next"
import { Metadata } from "next"
import { headers } from "next/headers"
import Script from "next/script"
import { Toaster } from "react-hot-toast"
import "@crossbell/connect-kit/colors.css"
@ -8,9 +9,17 @@ import { updateIndexerFetchOptions } from "@crossbell/indexer"
import "~/css/main.css"
import { getAcceptLang } from "~/lib/accept-lang"
import { APP_DESCRIPTION, APP_NAME, APP_SLOGAN, SITE_URL } from "~/lib/env"
import {
APP_DESCRIPTION,
APP_NAME,
APP_SLOGAN,
SITE_URL,
UMAMI_ID,
UMAMI_SCRIPT,
} from "~/lib/env"
import { getColorScheme } from "~/lib/get-color-scheme"
import { ColorSchemeInjector } from "./ColorSchemeInjector"
import Providers from "./providers"
export const metadata: Metadata = {
@ -102,20 +111,22 @@ export default function RootLayout({
return (
<html lang={lang} dir={dir(lang)} className={colorScheme}>
<head>{/* <ColorSchemeInjector /> */}</head>
<head>
<ColorSchemeInjector />
</head>
<body>
<Providers lang={lang}>
{modal}
{children}
</Providers>
<Toaster />
{/* <Script
<Script
id="xlog-umami-analytics"
strategy="afterInteractive"
async
src={UMAMI_SCRIPT}
data-website-id={UMAMI_ID}
></Script> */}
></Script>
</body>
</html>
)

8
src/app/providers.tsx
View File

@ -1,6 +1,6 @@
"use client"
import { ThemeProvider } from "next-themes"
import dynamic from "next/dynamic"
import { useState } from "react"
import { WagmiConfig } from "wagmi"
@ -23,6 +23,12 @@ import { toGateway } from "~/lib/ipfs-parser"
import { urlComposer } from "~/lib/url-composer"
import { LangProvider } from "~/providers/LangProvider"
// https://github.com/vercel/next.js/discussions/22388#discussioncomment-6329930
const ThemeProvider = dynamic(
() => import("~/components/common/ThemeProvider"),
{ ssr: false },
)
const wagmiConfig = createWagmiConfig({
appName: APP_NAME,
// You can create or find it at https://cloud.walletconnect.com

3
src/components/common/ThemeProvider.tsx Normal file
View File

@ -0,0 +1,3 @@
import { ThemeProvider } from "next-themes"
export default ThemeProvider