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]
 	)