diff options
Diffstat (limited to 'src/pages')
| -rw-r--r-- | src/pages/_app.tsx | 7 | ||||
| -rw-r--r-- | src/pages/_document.tsx | 9 |
2 files changed, 12 insertions, 4 deletions
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index c332432..0c92c93 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,5 +1,4 @@ import { useRouter } from 'next/router'; -import { ThemeProvider } from 'next-themes'; import { IntlProvider } from 'react-intl'; import '../styles/globals.scss'; import type { AppPropsWithLayout } from '../types'; @@ -9,6 +8,7 @@ import { AckeeProvider, MotionProvider, PrismThemeProvider, + ThemeProvider, } from '../utils/providers'; const App = ({ Component, pageProps }: AppPropsWithLayout) => { @@ -34,9 +34,8 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => { messages={translation} > <ThemeProvider - defaultTheme="system" - enableColorScheme={true} - enableSystem={true} + attribute={STORAGE_KEY.THEME} + storageKey={STORAGE_KEY.THEME} > <PrismThemeProvider> {getLayout(<Component {...componentProps} />, {})} diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 317d3af..7e3b5e6 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -16,6 +16,15 @@ export default function Document() { // eslint-disable-next-line react/jsx-no-literals strategy="beforeInteractive" /> + <Script + dangerouslySetInnerHTML={{ + __html: `!function(){const e=localStorage.getItem("${STORAGE_KEY.THEME}"),t="string"==typeof e?JSON.parse(e):void 0,o=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light",c=e&&["dark","light"].includes(t)?t:o;document.documentElement.setAttribute("data-${STORAGE_KEY.THEME}",c),document.documentElement.style.colorScheme=o}();`, + }} + // eslint-disable-next-line react/jsx-no-literals + id="theme-hydration" + // eslint-disable-next-line react/jsx-no-literals + strategy="beforeInteractive" + /> </Head> <body> <Main /> |