src/pages/_app.tsx

import { GetServerSidePropsContext } from 'next';
import { useState } from 'react';
import { AppProps } from 'next/app';
import { getCookie, setCookie } from 'cookies-next';
import Head from 'next/head';
import { MantineProvider, ColorScheme, ColorSchemeProvider, MantineTheme } from '@mantine/core';
import { NotificationsProvider } from '@mantine/notifications';
import { useHotkeys } from '@mantine/hooks';
import { ModalsProvider } from '@mantine/modals';
import { ConfigProvider } from '../tools/state';
import { theme } from '../tools/theme';
import { ColorTheme } from '../tools/color';
import { I18nextProvider } from 'react-i18next';
import { loadI18n } from '../translations/i18n';
import { TranslationProvider } from '../providers/translation.provider';

export default function App(this: any, props: AppProps & { colorScheme: ColorScheme }) {
  const { Component, pageProps } = props;
  const [colorScheme, setColorScheme] = useState<ColorScheme>(props.colorScheme);

  const [primaryColor, setPrimaryColor] = useState<MantineTheme['primaryColor']>('red');
  const [secondaryColor, setSecondaryColor] = useState<MantineTheme['primaryColor']>('orange');
  const [primaryShade, setPrimaryShade] = useState<MantineTheme['primaryShade']>(6);
  const colorTheme = {
    primaryColor,
    secondaryColor,
    setPrimaryColor,
    setSecondaryColor,
    primaryShade,
    setPrimaryShade,
  };

  const toggleColorScheme = (value?: ColorScheme) => {
    const nextColorScheme = value || (colorScheme === 'dark' ? 'light' : 'dark');
    setColorScheme(nextColorScheme);
    setCookie('color-scheme', nextColorScheme, { maxAge: 60 * 60 * 24 * 30 });
  };
  useHotkeys([['mod+J', () => toggleColorScheme()]]);

  return (
    <>
      <Head>
        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
      </Head>

      <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
        <ColorTheme.Provider value={colorTheme}>
          <MantineProvider
            theme={{
              ...theme,
              components: {
                Checkbox: {
                  styles: {
                    input: { cursor: 'pointer' },
                    label: { cursor: 'pointer' },
                  },
                },
                Switch: {
                  styles: {
                    input: { cursor: 'pointer' },
                    label: { cursor: 'pointer' },
                  },
                },
              },
              primaryColor,
              primaryShade,
              colorScheme,
            }}
            withGlobalStyles
            withNormalizeCSS
          >
            <NotificationsProvider limit={4} position="bottom-left">
              <ModalsProvider>
                <ConfigProvider>
                  <TranslationProvider>
                    <Component {...pageProps} />
                  </TranslationProvider>
                </ConfigProvider>
              </ModalsProvider>
            </NotificationsProvider>
          </MantineProvider>
        </ColorTheme.Provider>
      </ColorSchemeProvider>
    </>
  );
}

App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => ({
  colorScheme: getCookie('color-scheme', ctx) || 'light',
});
Initial commit 2022-04-24 22:36:47 +02:00			`import { GetServerSidePropsContext } from 'next';`
			`import { useState } from 'react';`
			`import { AppProps } from 'next/app';`
:truck: Change setCookies to setCookie 2022-07-22 16:20:47 +02:00			`import { getCookie, setCookie } from 'cookies-next';`
Initial commit 2022-04-24 22:36:47 +02:00			`import Head from 'next/head';`
:sparkles: Added a shade selector Added a popover shade selector similar to the color selector, but shows primary and secondary colors to pick the desired Mantine primaryShade 2022-06-08 15:36:54 +00:00			`import { MantineProvider, ColorScheme, ColorSchemeProvider, MantineTheme } from '@mantine/core';`
Initial commit 2022-04-24 22:36:47 +02:00			`import { NotificationsProvider } from '@mantine/notifications';`
:rewind: Rever b7e8c51b29533760eec04b41899f0e438e7bdead Does not work. Apparently 2022-05-17 04:19:59 +02:00			`import { useHotkeys } from '@mantine/hooks';`
:zap: Add ModalsProvider to the App 2022-08-07 12:14:37 +02:00			`import { ModalsProvider } from '@mantine/modals';`
:art: Made color switcher change Mantine styles Moved the color switcher's functions to a context provider and made Mantine's styles derived off of that context. 2022-06-08 14:58:32 +00:00			`import { ConfigProvider } from '../tools/state';`
Use custom theme This is a step thowards personalisation for Changeable wallpaper feature. #32 2022-05-10 18:57:41 +02:00			`import { theme } from '../tools/theme';`
:art: Made color switcher change Mantine styles Moved the color switcher's functions to a context provider and made Mantine's styles derived off of that context. 2022-06-08 14:58:32 +00:00			`import { ColorTheme } from '../tools/color';`
🚧 wip extract to translations file 2022-08-18 21:46:46 +02:00			`import { I18nextProvider } from 'react-i18next';`
			`import { loadI18n } from '../translations/i18n';`
			`import { TranslationProvider } from '../providers/translation.provider';`
Initial commit 2022-04-24 22:36:47 +02:00
:art: Made color switcher change Mantine styles Moved the color switcher's functions to a context provider and made Mantine's styles derived off of that context. 2022-06-08 14:58:32 +00:00			`export default function App(this: any, props: AppProps & { colorScheme: ColorScheme }) {`
Initial commit 2022-04-24 22:36:47 +02:00			`const { Component, pageProps } = props;`
:rewind: Rever b7e8c51b29533760eec04b41899f0e438e7bdead Does not work. Apparently 2022-05-17 04:19:59 +02:00			`const [colorScheme, setColorScheme] = useState<ColorScheme>(props.colorScheme);`
Initial commit 2022-04-24 22:36:47 +02:00
:sparkles: Added a shade selector Added a popover shade selector similar to the color selector, but shows primary and secondary colors to pick the desired Mantine primaryShade 2022-06-08 15:36:54 +00:00			`const [primaryColor, setPrimaryColor] = useState<MantineTheme['primaryColor']>('red');`
			`const [secondaryColor, setSecondaryColor] = useState<MantineTheme['primaryColor']>('orange');`
			`const [primaryShade, setPrimaryShade] = useState<MantineTheme['primaryShade']>(6);`
:art: Made color switcher change Mantine styles Moved the color switcher's functions to a context provider and made Mantine's styles derived off of that context. 2022-06-08 14:58:32 +00:00			`const colorTheme = {`
			`primaryColor,`
			`secondaryColor,`
			`setPrimaryColor,`
			`setSecondaryColor,`
:sparkles: Added a shade selector Added a popover shade selector similar to the color selector, but shows primary and secondary colors to pick the desired Mantine primaryShade 2022-06-08 15:36:54 +00:00			`primaryShade,`
			`setPrimaryShade,`
:art: Made color switcher change Mantine styles Moved the color switcher's functions to a context provider and made Mantine's styles derived off of that context. 2022-06-08 14:58:32 +00:00			`};`

Initial commit 2022-04-24 22:36:47 +02:00			`const toggleColorScheme = (value?: ColorScheme) => {`
			`const nextColorScheme = value \|\| (colorScheme === 'dark' ? 'light' : 'dark');`
			`setColorScheme(nextColorScheme);`
:truck: Change setCookies to setCookie 2022-07-22 16:20:47 +02:00			`setCookie('color-scheme', nextColorScheme, { maxAge: 60 * 60 * 24 * 30 });`
Initial commit 2022-04-24 22:36:47 +02:00			`};`
:bento: Update logo and favicon 2022-05-15 12:42:53 +02:00			`useHotkeys([['mod+J', () => toggleColorScheme()]]);`
Initial commit 2022-04-24 22:36:47 +02:00
			`return (`
			`<>`
			`<Head>`
			`<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />`
			`</Head>`

			`<ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>`
:art: Made color switcher change Mantine styles Moved the color switcher's functions to a context provider and made Mantine's styles derived off of that context. 2022-06-08 14:58:32 +00:00			`<ColorTheme.Provider value={colorTheme}>`
			`<MantineProvider`
			`theme={{`
			`...theme,`
:art: Small styling changes 2022-08-08 15:43:04 +02:00			`components: {`
			`Checkbox: {`
			`styles: {`
			`input: { cursor: 'pointer' },`
			`label: { cursor: 'pointer' },`
			`},`
			`},`
			`Switch: {`
			`styles: {`
			`input: { cursor: 'pointer' },`
			`label: { cursor: 'pointer' },`
			`},`
			`},`
			`},`
:art: Made color switcher change Mantine styles Moved the color switcher's functions to a context provider and made Mantine's styles derived off of that context. 2022-06-08 14:58:32 +00:00			`primaryColor,`
:sparkles: Added a shade selector Added a popover shade selector similar to the color selector, but shows primary and secondary colors to pick the desired Mantine primaryShade 2022-06-08 15:36:54 +00:00			`primaryShade,`
:art: Made color switcher change Mantine styles Moved the color switcher's functions to a context provider and made Mantine's styles derived off of that context. 2022-06-08 14:58:32 +00:00			`colorScheme,`
			`}}`
			`withGlobalStyles`
			`withNormalizeCSS`
			`>`
			`<NotificationsProvider limit={4} position="bottom-left">`
:zap: Add ModalsProvider to the App 2022-08-07 12:14:37 +02:00			`<ModalsProvider>`
			`<ConfigProvider>`
🚧 wip extract to translations file 2022-08-18 21:46:46 +02:00			`<TranslationProvider>`
			`<Component {...pageProps} />`
			`</TranslationProvider>`
:zap: Add ModalsProvider to the App 2022-08-07 12:14:37 +02:00			`</ConfigProvider>`
			`</ModalsProvider>`
:art: Made color switcher change Mantine styles Moved the color switcher's functions to a context provider and made Mantine's styles derived off of that context. 2022-06-08 14:58:32 +00:00			`</NotificationsProvider>`
			`</MantineProvider>`
			`</ColorTheme.Provider>`
Initial commit 2022-04-24 22:36:47 +02:00			`</ColorSchemeProvider>`
			`</>`
			`);`
			`}`

			`App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => ({`
Basic backend support and config loading from file 2022-05-12 19:28:10 +02:00			`colorScheme: getCookie('color-scheme', ctx) \|\| 'light',`
Initial commit 2022-04-24 22:36:47 +02:00			`});`