From 593c51065f5fbe89b9a42e7dfc1aaf27b0b15cb0 Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Tue, 16 Jul 2024 11:39:37 +0100
Subject: [PATCH] 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                                   | 1 +
 packages/editor/src/lib/config/TLUserPreferences.ts             | 1 +
 .../editor/src/lib/editor/managers/UserPreferencesManager.ts    | 1 +
 packages/tldraw/src/lib/ui/components/ColorSchemeMenu.tsx       | 2 +-
 4 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/editor/api-report.md b/packages/editor/api-report.md
index bf72e2b4c..aafa07d30 100644
--- a/packages/editor/api-report.md
+++ b/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;
diff --git a/packages/editor/src/lib/config/TLUserPreferences.ts b/packages/editor/src/lib/config/TLUserPreferences.ts
index 139d73ab0..f650de512 100644
--- a/packages/editor/src/lib/config/TLUserPreferences.ts
+++ b/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 */
diff --git a/packages/editor/src/lib/editor/managers/UserPreferencesManager.ts b/packages/editor/src/lib/editor/managers/UserPreferencesManager.ts
index 7dadbc201..168d05f50 100644
--- a/packages/editor/src/lib/editor/managers/UserPreferencesManager.ts
+++ b/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':
diff --git a/packages/tldraw/src/lib/ui/components/ColorSchemeMenu.tsx b/packages/tldraw/src/lib/ui/components/ColorSchemeMenu.tsx
index f0952eded..913bb5ecf 100644
--- a/packages/tldraw/src/lib/ui/components/ColorSchemeMenu.tsx
+++ b/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]
 	)