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
This commit is contained in:
Ugbala Valentino 2022-04-29 09:35:20 +01:00 committed by GitHub
parent 5493403663
commit eff858d0a7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 0 deletions

View file

@ -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>

View file

@ -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>
)
}

View file

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