🚑 Hotfix v0.11.4

src/components/ColorSchemeToggle/ColorSchemeSwitch.tsx

@@ -1,8 +1,14 @@
 import React from 'react';
-import { createStyles, Switch, Group, useMantineColorScheme, Kbd } from '@mantine/core';
-import { IconSun as Sun, IconMoonStars as MoonStars } from '@tabler/icons';
+import {
+  createStyles,
+  Switch,
+  Group,
+  useMantineColorScheme,
+  Kbd,
+  useMantineTheme,
+} from '@mantine/core';
+import { IconMoonStars, IconSun } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
-import { useConfig } from '../../tools/state';
 
 const useStyles = createStyles((theme) => ({
   root: {
@@ -31,18 +37,18 @@ const useStyles = createStyles((theme) => ({
 }));
 
 export function ColorSchemeSwitch() {
-  const { config } = useConfig();
   const { colorScheme, toggleColorScheme } = useMantineColorScheme();
-  const { classes, cx } = useStyles();
   const { t } = useTranslation('settings/general/theme-selector');
-
+  const theme = useMantineTheme();
   return (
     <Group>
-      <div className={classes.root}>
-        <Sun className={cx(classes.icon, classes.iconLight)} size={18} />
-        <MoonStars className={cx(classes.icon, classes.iconDark)} size={18} />
-        <Switch checked={colorScheme === 'dark'} onChange={() => toggleColorScheme()} size="md" />
-      </div>
+      <Switch
+        checked={colorScheme === 'dark'}
+        onChange={() => toggleColorScheme()}
+        size="md"
+        onLabel={<IconSun color={theme.white} size={20} stroke={1.5} />}
+        offLabel={<IconMoonStars color={theme.colors.gray[6]} size={20} stroke={1.5} />}
+      />
       {t('label', {
         theme: colorScheme === 'dark' ? 'light' : 'dark',
       })}

src/pages/_app.tsx

@@ -1,11 +1,11 @@
 import { GetServerSidePropsContext } from 'next';
 import { useState } from 'react';
 import { AppProps } from 'next/app';
-import { getCookie, setCookie } from 'cookies-next';
+import { getCookie } from 'cookies-next';
 import Head from 'next/head';
 import { MantineProvider, ColorScheme, ColorSchemeProvider, MantineTheme } from '@mantine/core';
 import { NotificationsProvider } from '@mantine/notifications';
-import { useColorScheme, useHotkeys } from '@mantine/hooks';
+import { useColorScheme, useHotkeys, useLocalStorage } from '@mantine/hooks';
 import { ModalsProvider } from '@mantine/modals';
 import { appWithTranslation } from 'next-i18next';
 import { QueryClientProvider } from '@tanstack/react-query';
@@ -16,9 +16,6 @@ import { queryClient } from '../tools/queryClient';
 
 function App(this: any, props: AppProps & { colorScheme: ColorScheme }) {
   const { Component, pageProps } = props;
-  const preferredColorScheme = useColorScheme();
-  const [colorScheme, setColorScheme] = useState<ColorScheme>(preferredColorScheme);
-
   const [primaryColor, setPrimaryColor] = useState<MantineTheme['primaryColor']>('red');
   const [secondaryColor, setSecondaryColor] = useState<MantineTheme['primaryColor']>('orange');
   const [primaryShade, setPrimaryShade] = useState<MantineTheme['primaryShade']>(6);
@@ -31,11 +28,18 @@ function App(this: any, props: AppProps & { colorScheme: ColorScheme }) {
     setPrimaryShade,
   };
 
-  const toggleColorScheme = (value?: ColorScheme) => {
-    const nextColorScheme = value || (colorScheme === 'dark' ? 'light' : 'dark');
-    setColorScheme(nextColorScheme);
-    setCookie('color-scheme', nextColorScheme, { maxAge: 60 * 60 * 24 * 30 });
-  };
+  // hook will return either 'dark' or 'light' on client
+  // and always 'light' during ssr as window.matchMedia is not available
+  const preferredColorScheme = useColorScheme();
+  const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
+    key: 'mantine-color-scheme',
+    defaultValue: preferredColorScheme,
+    getInitialValueInEffect: true,
+  });
+
+  const toggleColorScheme = (value?: ColorScheme) =>
+    setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'));
+
   useHotkeys([['mod+J', () => toggleColorScheme()]]);
 
   return (