diff --git a/src/App.tsx b/src/App.tsx
index 969d435..b07119e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -20,7 +20,7 @@ const App = React.memo(() => {
   const appTheme = useMemo(() => {
     let mode: 'light' | 'dark';
 
-    if (tldrawPreferences?.colorScheme === 'system') {
+    if (tldrawPreferences?.colorScheme === 'system' || tldrawPreferences == null) {
       mode = prefersDarkMode ? 'dark' : 'light';
     } else {
       mode = tldrawPreferences?.colorScheme === 'dark' ? 'dark' : 'light';
diff --git a/src/utils/tldraw/tldraw.css b/src/utils/tldraw/tldraw.css
index c32e4b4..f69ea8f 100644
--- a/src/utils/tldraw/tldraw.css
+++ b/src/utils/tldraw/tldraw.css
@@ -1,2 +1,12 @@
 @import url("@tldraw/tldraw/tldraw.css");
 @import url('./cc-design-system.css');
+
+.tl-container {
+  --color-panel:       var(--cc-bg-panel);
+  --color-text:        var(--cc-text-primary);
+  --color-muted:       var(--cc-border);
+  --color-muted-1:     var(--cc-border-strong);
+  --color-background:  var(--cc-bg-canvas);
+  --color-selected:    var(--cc-selected);
+  --color-accent:      var(--cc-action-primary);
+}