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 condition
Next
Force mobile layout