Dark mode

Start the editor in dark mode with the colorScheme prop.

import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'

export default function DarkModeExample() {
	return (
		<div className="tldraw__editor">
			<Tldraw colorScheme="dark" />
		</div>
	)
}

/*
The `colorScheme` prop sets the editor's default color scheme: 'light' (the default),
'dark', or 'system' to follow the OS preference. A user preference set via
`editor.user.updateUserPreferences({ colorScheme })` takes priority over this prop,
so a persisted user preference from another example may override it. See the
dark-mode-toggle example for switching at runtime.
*/

Pass colorScheme="dark" to <Tldraw> to render in dark mode. The prop accepts 'light' (the default), 'dark', or 'system', which follows the operating system's preference.

The prop only sets the default. If the user has a colorScheme set in their preferences (for example via editor.user.updateUserPreferences), that preference wins. To let users switch at runtime, see the toggle dark mode example.

Is this page helpful?
Prev
Stroke size picker
Next
Force mobile layout