From 85c5210cd1a6149ba65f0b05dbe333ec39d4a2ea Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Thu, 4 Jan 2024 10:06:01 +0000
Subject: [PATCH] [example] Changing the default tldraw colors (#2402)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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]
---
 .../ChangingDefaultColorsExample.tsx          | 32 +++++++++++++++++++
 .../changing-default-colors/README.md         | 12 +++++++
 packages/tldraw/api/api.json                  |  3 +-
 3 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 apps/examples/src/examples/changing-default-colors/ChangingDefaultColorsExample.tsx
 create mode 100644 apps/examples/src/examples/changing-default-colors/README.md

diff --git a/apps/examples/src/examples/changing-default-colors/ChangingDefaultColorsExample.tsx b/apps/examples/src/examples/changing-default-colors/ChangingDefaultColorsExample.tsx
new file mode 100644
index 000000000..83867724f
--- /dev/null
+++ b/apps/examples/src/examples/changing-default-colors/ChangingDefaultColorsExample.tsx
@@ -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!
+*/
diff --git a/apps/examples/src/examples/changing-default-colors/README.md b/apps/examples/src/examples/changing-default-colors/README.md
new file mode 100644
index 000000000..071f909d0
--- /dev/null
+++ b/apps/examples/src/examples/changing-default-colors/README.md
@@ -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!
diff --git a/packages/tldraw/api/api.json b/packages/tldraw/api/api.json
index e4aaed3b1..9d6fc6317 100644
--- a/packages/tldraw/api/api.json
+++ b/packages/tldraw/api/api.json
@@ -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",