[fix] dark mode (#1754)

This PR fixes a bug where dark mode would not immediately cause shapes
to update their colors. Previously, we got the current theme during
render but not in a way that hooked into the change. In this update, we
hook into the change. We also pass the change down to shape fills as
props rather than getting the theme from deeper down.

### Change Type

- [x] `patch`

### Test Plan

1. Use dark mode.
2. Switch colors

### Release Notes

- [fix] dark mode colors not updating

apps/examples/e2e/tests/export-snapshots.spec.ts

@@ -1,4 +1,4 @@
-import test, { expect } from '@playwright/test'
+import test, { Page, expect } from '@playwright/test'
 import { Editor, TLShapeId, TLShapePartial } from '@tldraw/tldraw'
 import { rename, writeFile } from 'fs/promises'
 import { setupPage } from '../shared-e2e'
@@ -174,6 +174,29 @@ test.describe('Export snapshots', () => {
 					.createShapes(shapes)
 			}, shapes as any)
 
+			snapshotTest(page)
+		})
+	}
+
+	for (const [name, shapes] of Object.entries(snapshots)) {
+		test(`Exports with ${name} in dark mode`, async ({ browser }) => {
+			const page = await browser.newPage()
+			await setupPage(page)
+			await page.evaluate((shapes) => {
+				editor.user.updateUserPreferences({ isDarkMode: true })
+				editor
+					.updateInstanceState({ exportBackground: false })
+					.selectAll()
+					.deleteShapes()
+					.createShapes(shapes)
+			}, shapes as any)
+
+			snapshotTest(page)
+		})
+	}
+})
+
+async function snapshotTest(page: Page) {
 	const downloadEvent = page.waitForEvent('download')
 	await page.click('[data-testid="main.menu"]')
 	await page.click('[data-testid="menu-item.edit"]')
@@ -201,6 +224,4 @@ test.describe('Export snapshots', () => {
 		omitBackground: true,
 		clip,
 	})
-		})
-	}
-})
+}