diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 3b2271307..767597a45 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -5,14 +5,15 @@ import { getCookie, setCookies } from 'cookies-next';
 import Head from 'next/head';
 import { MantineProvider, ColorScheme, ColorSchemeProvider } from '@mantine/core';
 import { NotificationsProvider } from '@mantine/notifications';
-import { useHotkeys } from '@mantine/hooks';
+import { useColorScheme, useHotkeys } from '@mantine/hooks';
 import Layout from '../components/layout/Layout';
 import { ConfigProvider } from '../tools/state';
 import { theme } from '../tools/theme';
 
 export default function App(props: AppProps & { colorScheme: ColorScheme }) {
   const { Component, pageProps } = props;
-  const [colorScheme, setColorScheme] = useState<ColorScheme>(props.colorScheme);
+  const preferredColorScheme = useColorScheme();
+  const [colorScheme, setColorScheme] = useState<ColorScheme>(preferredColorScheme);
 
   const toggleColorScheme = (value?: ColorScheme) => {
     const nextColorScheme = value || (colorScheme === 'dark' ? 'light' : 'dark');