Show checked theme in color scheme menu (#4184)

This PR accounts (in the UI) for a default case where the `colorScheme`
value is undefined.

### Change type

- [x] `bugfix`

### Test plan

1. Open the editor an incognito tab
2. The Menu > Preferences > Color scheme should have a ticked selection

### Release notes

- Fixed a bug where the user's color scheme was not shown in the menu by
default.

packages/editor/api-report.md

@@ -711,6 +711,7 @@ export const defaultTldrawOptions: {
 export const defaultUserPreferences: Readonly<{
     animationSpeed: 0 | 1;
     color: "#02B1CC" | "#11B3A3" | "#39B178" | "#55B467" | "#7B66DC" | "#9D5BD2" | "#BD54C6" | "#E34BA9" | "#EC5E41" | "#F04F88" | "#F2555A" | "#FF802B";
+    colorScheme: "system";
     edgeScrollSpeed: 1;
     isDynamicSizeMode: false;
     isPasteAtCursorMode: false;

packages/editor/src/lib/config/TLUserPreferences.ts

@@ -138,6 +138,7 @@ export const defaultUserPreferences = Object.freeze({
 	isWrapMode: false,
 	isDynamicSizeMode: false,
 	isPasteAtCursorMode: false,
+	colorScheme: 'system',
 }) satisfies Readonly<Omit<TLUserPreferences, 'id'>>
 
 /** @public */

packages/editor/src/lib/editor/managers/UserPreferencesManager.ts

@@ -44,6 +44,7 @@ export class UserPreferencesManager {
 			isDynamicResizeMode: this.getIsDynamicResizeMode(),
 		}
 	}
+
 	@computed getIsDarkMode() {
 		switch (this.user.userPreferences.get().colorScheme) {
 			case 'dark':

packages/tldraw/src/lib/ui/components/ColorSchemeMenu.tsx

@@ -16,7 +16,7 @@ export function ColorSchemeMenu() {
 	const trackEvent = useUiEvents()
 	const currentColorScheme = useValue(
 		'colorScheme',
-		() => editor.user.getUserPreferences().colorScheme,
+		() => editor.user.getUserPreferences().colorScheme ?? 'system',
 		[editor]
 	)