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:
parent
5493403663
commit
eff858d0a7
3 changed files with 24 additions and 0 deletions
|
@ -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>
|
||||
|
|
10
examples/tldraw-example/src/dark-mode.tsx
Normal file
10
examples/tldraw-example/src/dark-mode.tsx
Normal 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>
|
||||
)
|
||||
}
|
|
@ -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 = {
|
||||
|
|
Loading…
Reference in a new issue