refactor: make dark theme the default

This commit is contained in:
iCrawl
2022-08-23 09:36:19 +02:00
parent 28422eea58
commit ffafde0b6b
2 changed files with 11 additions and 20 deletions

View File

@@ -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<ColorScheme>(preferredColorScheme);
const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
key: 'theme',
defaultValue: 'dark',
getInitialValueInEffect: true,
});
const toggleColorScheme = (value?: ColorScheme) =>
setColorScheme(value ?? (colorScheme === 'dark' ? 'light' : 'dark'));
useEffect(() => {
setColorScheme(preferredColorScheme);
}, [preferredColorScheme]);
return (
<>
<Head>

View File

@@ -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<DocumentInitialProps> {
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: [initialProps.styles, <ServerStyles html={initialProps.html} server={stylesServer} key="styles" />],
};
}
public static override getInitialProps = getInitialProps;
public override render() {
return (