Respect OS color scheme preference

[krusche]

Summary

• Default to auto color scheme instead of hardcoded dark, so the app respects the user's prefers-color-scheme OS setting
• Update the color scheme toggle button to intelligently reset to auto when cycling back to the OS-preferred theme, instead of always alternating between dark and light
• Show the correct sun/moon icon based on the effective color scheme (including auto mode)

Inspired by #437 — thanks to @twihno for the original contribution idea.

Test plan

• Verify the app defaults to the OS color scheme on first load (light OS → light app, dark OS → dark app)
• Toggle the color scheme button and verify it cycles correctly: auto → opposite → auto
• Verify the toggle icon (sun/moon) matches the currently displayed theme

Summary by CodeRabbit

• Bug Fixes

  • App now respects system color scheme preference by default instead of forcing dark mode.

• New Features

  • Color scheme toggle intelligently detects and follows system theme, offering clearer sun/moon visuals and smarter toggle behavior.
  • Toggle button accepts an optional size prop for flexible sizing.

[coderabbitai]

Walkthrough

Mantine color-scheme handling was changed to support automatic system detection: defaultColorScheme set to "auto" in App, and the ColorSchemeToggleButton now detects system preference, exposes a new size prop, and conditionally clears or toggles the stored scheme and icon state.

Changes

Cohort / File(s)	Summary
App configuration client/src/app/App.tsx	Changed MantineProvider defaultColorScheme from 'dark' to 'auto'.
Color scheme toggle component client/src/components/ColorSchemeToggleButton/ColorSchemeToggleButton.tsx	Added useMediaQuery to detect prefers-color-scheme. Introduced clearColorScheme, showSunIcon computed state, updated onClick to conditionally clear or toggle scheme based on current scheme and system preference, swapped rendered icons accordingly, and added `size?: 'xs'

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately captures the main objective of the PR—respecting OS color scheme preference through the 'auto' setting and intelligent toggle behavior.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/respect-os-color-scheme

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

client/src/components/ColorSchemeToggleButton/ColorSchemeToggleButton.tsx (1)

18-18: Optional: use useComputedColorScheme for showSunIcon instead of deriving it from useMediaQuery.

Mantine's useMantineColorScheme returns colorScheme as 'dark' | 'light' | 'auto'; useComputedColorScheme resolves the 'auto' value to 'dark' or 'light' based on the user's system preference. Using it here would simplify showSunIcon and eliminate the dependency on useMediaQuery for icon display:

♻️ Proposed refactor

-import { useMediaQuery } from '@mantine/hooks'
+import { useComputedColorScheme } from '@mantine/core'
 import { ActionIcon, useMantineColorScheme, type BoxProps } from '@mantine/core'
+import { useMediaQuery } from '@mantine/hooks'

 const { colorScheme, toggleColorScheme, clearColorScheme } = useMantineColorScheme()
+const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: false })
 const prefersDarkColorScheme = useMediaQuery('(prefers-color-scheme: dark)', undefined, {
   getInitialValueInEffect: false,
 })

-const showSunIcon = (colorScheme === 'auto' && prefersDarkColorScheme) || colorScheme === 'dark'
+const showSunIcon = computedColorScheme === 'dark'

prefersDarkColorScheme is still needed for the clearColorScheme decision in onClick.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@client/src/components/ColorSchemeToggleButton/ColorSchemeToggleButton.tsx` at
line 18, The showSunIcon boolean is derived manually using
prefersDarkColorScheme; instead use Mantine's useComputedColorScheme to resolve
'auto' into 'dark' or 'light' and compute showSunIcon from that value. Replace
the current expression that uses colorScheme and prefersDarkColorScheme with a
computedScheme from useComputedColorScheme and set showSunIcon = (computedScheme
=== 'dark'), keeping prefersDarkColorScheme in place for the onClick logic that
decides clearColorScheme. Update references: ColorSchemeToggleButton,
showSunIcon, useMantineColorScheme/useComputedColorScheme, and the onClick
handler that checks clearColorScheme.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@client/src/components/ColorSchemeToggleButton/ColorSchemeToggleButton.tsx`:
- Line 16: The media-query hook initializes asynchronously causing a flash;
change the initialization of prefersDarkColorScheme (the const using
useMediaQuery) to evaluate synchronously by passing the options object {
getInitialValueInEffect: false } to useMediaQuery so the correct dark-mode value
is used on first render and the icon no longer flashes.

---

Nitpick comments:
In `@client/src/components/ColorSchemeToggleButton/ColorSchemeToggleButton.tsx`:
- Line 18: The showSunIcon boolean is derived manually using
prefersDarkColorScheme; instead use Mantine's useComputedColorScheme to resolve
'auto' into 'dark' or 'light' and compute showSunIcon from that value. Replace
the current expression that uses colorScheme and prefersDarkColorScheme with a
computedScheme from useComputedColorScheme and set showSunIcon = (computedScheme
=== 'dark'), keeping prefersDarkColorScheme in place for the onClick logic that
decides clearColorScheme. Update references: ColorSchemeToggleButton,
showSunIcon, useMantineColorScheme/useComputedColorScheme, and the onClick
handler that checks clearColorScheme.

[Claudia-Anthropica]

@krusche Clean and well-thought-out implementation. The toggle cycling logic that skips redundant explicit states matching the OS preference is a nice touch. Looks good!