diff --git a/examples/tldraw-example/src/app.tsx b/examples/tldraw-example/src/app.tsx
index c19dcd27d..a034287ed 100644
--- a/examples/tldraw-example/src/app.tsx
+++ b/examples/tldraw-example/src/app.tsx
@@ -1,6 +1,7 @@
import * as React from 'react'
import { Routes, Route, Link } from 'react-router-dom'
import Basic from './basic'
+import DarkMode from './dark-mode'
import ReadOnly from './readonly'
import PropsControl from './props-control'
import ApiControl from './api-control'
@@ -25,6 +26,8 @@ export default function App(): JSX.Element {
} />
+ } />
+
} />
} />
@@ -63,6 +66,9 @@ export default function App(): JSX.Element {
Basic
+
+ Dark Mode
+
UI Options
diff --git a/examples/tldraw-example/src/dark-mode.tsx b/examples/tldraw-example/src/dark-mode.tsx
new file mode 100644
index 000000000..6bb0499a9
--- /dev/null
+++ b/examples/tldraw-example/src/dark-mode.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react'
+import { Tldraw } from '@tldraw/tldraw'
+
+export default function DarkMode(): JSX.Element {
+ return (
+
+
+
+ )
+}
diff --git a/packages/tldraw/src/Tldraw.tsx b/packages/tldraw/src/Tldraw.tsx
index 3548ceff6..70bcc7f54 100644
--- a/packages/tldraw/src/Tldraw.tsx
+++ b/packages/tldraw/src/Tldraw.tsx
@@ -107,6 +107,7 @@ export function Tldraw({
readOnly = false,
showSponsorLink = false,
disableAssets = false,
+ darkMode = false,
onMount,
onChange,
onChangePresence,
@@ -212,6 +213,13 @@ export function Tldraw({
app.readOnly = readOnly
}, [app, readOnly])
+ // Toggle the app's darkMode when the `darkMode` prop changes.
+ React.useEffect(() => {
+ if (darkMode !== app.settings.isDarkMode){
+ app.toggleDarkMode()
+ }
+ }, [app, darkMode])
+
// Update the app's callbacks when any callback changes.
React.useEffect(() => {
app.callbacks = {