Dark mode
Set the editor to dark mode using the colorScheme prop.
import { atom, TLUserPreferences, Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
const userPreferences = atom<TLUserPreferences>('dark-mode-example-prefs', {
id: 'dark-mode-example',
colorScheme: 'dark',
})
const user = {
userPreferences,
setUserPreferences: (prefs: TLUserPreferences) => userPreferences.set(prefs),
}
export default function DarkModeExample() {
return (
<div className="tldraw__editor">
<Tldraw user={user} />
</div>
)
}
Set colorScheme="dark" on the Tldraw component to use dark mode.
Is this page helpful?
Prev
Selection color conditionNext
Force mobile layout