Respect OS color scheme

client/src/app/App.tsx

@@ -1,15 +1,14 @@
-import React from 'react'
 import { Button, createTheme, MantineProvider } from '@mantine/core'
 import { Notifications } from '@mantine/notifications'
 import '../../public/favicon.svg'
-import AppRoutes from './Routes'
 import AuthenticationProvider from '../providers/AuthenticationContext/AuthenticationProvider'
+import AppRoutes from './Routes'
 
 import '@mantine/core/styles.layer.css'
 import '@mantine/dates/styles.layer.css'
+import '@mantine/dropzone/styles.css'
 import '@mantine/notifications/styles.css'
 import '@mantine/tiptap/styles.css'
-import '@mantine/dropzone/styles.css'
 import 'mantine-datatable/styles.layer.css'
 
 import * as buttonClasses from './styles/Buttons.module.css'
@@ -41,7 +40,7 @@ const theme = createTheme({
 
 const App = () => {
   return (
-    <MantineProvider defaultColorScheme='dark' theme={theme}>
+    <MantineProvider defaultColorScheme='auto' theme={theme}>
       <AuthenticationProvider>
         <AppRoutes />
         <Notifications limit={5} position='top-right' />

client/src/components/ColorSchemeToggleButton/ColorSchemeToggleButton.tsx

@@ -1,20 +1,33 @@
-import { Moon, Sun } from 'phosphor-react'
 import { ActionIcon, useMantineColorScheme } from '@mantine/core'
-import React from 'react'
 import { BoxProps } from '@mantine/core/lib/core'
+import { useMediaQuery } from '@mantine/hooks'
+import { Moon, Sun } from 'phosphor-react'
 
 const ColorSchemeToggleButton = (props: BoxProps) => {
-  const { colorScheme, toggleColorScheme } = useMantineColorScheme()
+  const { colorScheme, toggleColorScheme, clearColorScheme } = useMantineColorScheme()
+  const prefersDarkColorScheme = useMediaQuery('(prefers-color-scheme: dark)')
+
+  const showSunIcon = (colorScheme === 'auto' && prefersDarkColorScheme) || colorScheme === 'dark'
 
   return (
     <ActionIcon
       variant='outline'
       color={colorScheme === 'dark' ? 'yellow' : 'pale-purple'}
-      onClick={() => toggleColorScheme()}
+      onClick={() => {
+        // Reset to "auto" if the preferred value is reached again
+        if (
+          (colorScheme === 'dark' && !prefersDarkColorScheme) ||
+          (colorScheme === 'light' && prefersDarkColorScheme)
+        ) {
+          clearColorScheme()
+        } else {
+          toggleColorScheme()
+        }
+      }}
       title='Toggle color scheme'
       {...props}
     >
-      {colorScheme === 'dark' ? <Sun size='1.1rem' /> : <Moon size='1.1rem' />}
+      {showSunIcon ? <Sun size='1.1rem' /> : <Moon size='1.1rem' />}
     </ActionIcon>
   )
 }