From ffafde0b6b26f3dde788c5cc9392e73ef4f691e4 Mon Sep 17 00:00:00 2001 From: iCrawl Date: Tue, 23 Aug 2022 09:36:19 +0200 Subject: [PATCH] refactor: make dark theme the default --- packages/website/src/pages/_app.tsx | 16 +++++++--------- packages/website/src/pages/_document.tsx | 15 ++++----------- 2 files changed, 11 insertions(+), 20 deletions(-) diff --git a/packages/website/src/pages/_app.tsx b/packages/website/src/pages/_app.tsx index cbf08293c..103435975 100644 --- a/packages/website/src/pages/_app.tsx +++ b/packages/website/src/pages/_app.tsx @@ -1,10 +1,9 @@ -import { ColorScheme, ColorSchemeProvider, MantineProvider } from '@mantine/core'; -import { useColorScheme } from '@mantine/hooks'; +import { type ColorScheme, ColorSchemeProvider, MantineProvider } from '@mantine/core'; +import { useLocalStorage } from '@mantine/hooks'; import { type SpotlightAction, SpotlightProvider } from '@mantine/spotlight'; import type { AppProps } from 'next/app'; import Head from 'next/head'; import { type NextRouter, useRouter } from 'next/router'; -import { useEffect, useState } from 'react'; import { VscPackage } from 'react-icons/vsc'; import { RouterTransition } from '~/components/RouterTransition'; import '../styles/unocss.css'; @@ -69,15 +68,14 @@ const actions: (router: NextRouter) => SpotlightAction[] = (router: NextRouter) export default function MyApp({ Component, pageProps }: AppProps) { const router = useRouter(); - const preferredColorScheme = useColorScheme('dark', { getInitialValueInEffect: true }); - const [colorScheme, setColorScheme] = useState(preferredColorScheme); + const [colorScheme, setColorScheme] = useLocalStorage({ + key: 'theme', + defaultValue: 'dark', + getInitialValueInEffect: true, + }); const toggleColorScheme = (value?: ColorScheme) => setColorScheme(value ?? (colorScheme === 'dark' ? 'light' : 'dark')); - useEffect(() => { - setColorScheme(preferredColorScheme); - }, [preferredColorScheme]); - return ( <> diff --git a/packages/website/src/pages/_document.tsx b/packages/website/src/pages/_document.tsx index c95a42da3..123d1b786 100644 --- a/packages/website/src/pages/_document.tsx +++ b/packages/website/src/pages/_document.tsx @@ -1,17 +1,10 @@ -import { createStylesServer, ServerStyles } from '@mantine/next'; -import Document, { Html, Head, Main, NextScript, type DocumentContext, type DocumentInitialProps } from 'next/document'; +import { createGetInitialProps } from '@mantine/next'; +import Document, { Html, Head, Main, NextScript } from 'next/document'; -const stylesServer = createStylesServer(); +const getInitialProps = createGetInitialProps(); export default class _Document extends Document { - public static override async getInitialProps(ctx: DocumentContext): Promise { - const initialProps = await Document.getInitialProps(ctx); - - return { - ...initialProps, - styles: [initialProps.styles, ], - }; - } + public static override getInitialProps = getInitialProps; public override render() { return (