[example] Changing the default tldraw colors (#2402)

This PR adds an example that shows how a user could customize tldraw's
default color theme.

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]
This commit is contained in:
Steve Ruiz 2024-01-04 10:06:01 +00:00 committed by GitHub
parent 85389551e6
commit 85c5210cd1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 46 additions and 1 deletions

View file

@ -0,0 +1,32 @@
import { DefaultColorThemePalette, Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
// There's a guide at the bottom of this file!
// [1]
DefaultColorThemePalette.lightMode.black.solid = 'aqua'
export default function ChangingDefaultColorsExample() {
return (
<div className="tldraw__editor">
<Tldraw persistenceKey="tldraw_example" />
</div>
)
}
/*
[1]
The default color theme is exported from the tldraw library. You can
modify it directly outside of the React lifecycle, so that your changes
are used when the component mounts.
Remember that you can't add or remove colors here yet. These colors are
used by our default shapes and we need to make sure that we don't end
up with a color that we can't handle, or else this could get propagated
to other users in a multiplayer session.
At the moment, if you want to create new colors, you will need to create
your own shapes that understand those colors. We're working on making
this easier!
*/

View file

@ -0,0 +1,12 @@
---
title: Changing default colors
component: ./ChangingDefaultColorsExample.tsx
---
Change the tldraw theme colors.
---
While there's currently no way to add or remove our colors from our default shapes' colors, this example shows how you can adjust the values for the default color styles.
Note that this will change the colors for ALL instances of tldraw. For example, try loading this example and then loading another example—the changes will be present there too until you reload!

View file

@ -15722,7 +15722,7 @@
"text": "export interface TLUiContextMenuProps "
}
],
"fileUrlPath": "packages/tldraw/src/lib/ui/components/ContextMenu.tsx",
"fileUrlPath": "packages/tldraw/.tsbuild-api/lib/ui/components/ContextMenu.d.ts",
"releaseTag": "Public",
"name": "TLUiContextMenuProps",
"preserveMemberOrder": false,
@ -15745,6 +15745,7 @@
"text": ";"
}
],
"fileUrlPath": "packages/tldraw/src/lib/ui/components/ContextMenu.tsx",
"isReadonly": false,
"isOptional": false,
"releaseTag": "Public",