From e60bdd5c9280ec73b7df8749d51bd9c179cf9816 Mon Sep 17 00:00:00 2001
From: Thomas Schuster <twihno@gmail.com>
Date: Sat, 1 Mar 2025 21:44:54 +0100
Subject: [PATCH 1/2] set default color scheme to auto

---
 client/src/app/App.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/client/src/app/App.tsx b/client/src/app/App.tsx
index 0a9d6a14..0179f0e1 100644
--- a/client/src/app/App.tsx
+++ b/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' />

From 563f1c7c465ba2deb2fc49bbd3f2f73610483fa8 Mon Sep 17 00:00:00 2001
From: Thomas Schuster <twihno@gmail.com>
Date: Sat, 1 Mar 2025 22:00:25 +0100
Subject: [PATCH 2/2] change toggle button to allow resetting the color scheme
 to "auto"

---
 .../ColorSchemeToggleButton.tsx               | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/client/src/components/ColorSchemeToggleButton/ColorSchemeToggleButton.tsx b/client/src/components/ColorSchemeToggleButton/ColorSchemeToggleButton.tsx
index 065f2525..c208bc13 100644
--- a/client/src/components/ColorSchemeToggleButton/ColorSchemeToggleButton.tsx
+++ b/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>
   )
 }