fix: update tldraw to respond to dark mode prop (#659)

* fix: update tldraw to respond to darkMode prop

* fix: update dark mode route in examples

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 {
 
         <Route path="/basic" element={<Basic />} />
 
+        <Route path="/dark-mode" element={<DarkMode />} />
+
         <Route path="/ui-options" element={<UIOptions />} />
 
         <Route path="/persisted" element={<Persisted />} />
@@ -63,6 +66,9 @@ export default function App(): JSX.Element {
                 <li>
                   <Link to="/basic">Basic</Link>
                 </li>
+                <li>
+                  <Link to="/dark-mode">Dark Mode</Link>
+                </li>
                 <li>
                   <Link to="/ui-options">UI Options</Link>
                 </li>

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 (
+    <div className="tldraw">
+      <Tldraw darkMode />
+    </div>
+  )
+}

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 = {