[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:
parent
85389551e6
commit
85c5210cd1
3 changed files with 46 additions and 1 deletions
|
@ -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!
|
||||
*/
|
12
apps/examples/src/examples/changing-default-colors/README.md
Normal file
12
apps/examples/src/examples/changing-default-colors/README.md
Normal 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!
|
|
@ -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",
|
||||
|
|
Loading…
Reference in a new issue