From f9d4030b82d960a34890f8648d13955e3ae72d15 Mon Sep 17 00:00:00 2001
From: feng <fengsight@gmail.com>
Date: Sat, 12 Apr 2025 20:53:09 +0900
Subject: [PATCH 1/4] feat: add top picks to appProps for both stoke color and
 background color

---
 packages/excalidraw/actions/actionProperties.tsx | 6 ++++--
 packages/excalidraw/types.ts                     | 3 +++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/excalidraw/actions/actionProperties.tsx b/packages/excalidraw/actions/actionProperties.tsx
index 5a309b677..78c454cb3 100644
--- a/packages/excalidraw/actions/actionProperties.tsx
+++ b/packages/excalidraw/actions/actionProperties.tsx
@@ -326,7 +326,7 @@ export const actionChangeStrokeColor = register({
     <>
       <h3 aria-hidden="true">{t("labels.stroke")}</h3>
       <ColorPicker
-        topPicks={DEFAULT_ELEMENT_STROKE_PICKS}
+        topPicks={appProps.strokeColorTopPicks ?? DEFAULT_ELEMENT_STROKE_PICKS}
         palette={DEFAULT_ELEMENT_STROKE_COLOR_PALETTE}
         type="elementStroke"
         label={t("labels.stroke")}
@@ -372,7 +372,9 @@ export const actionChangeBackgroundColor = register({
     <>
       <h3 aria-hidden="true">{t("labels.background")}</h3>
       <ColorPicker
-        topPicks={DEFAULT_ELEMENT_BACKGROUND_PICKS}
+        topPicks={
+          appProps.backgroundColorTopPicks ?? DEFAULT_ELEMENT_BACKGROUND_PICKS
+        }
         palette={DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE}
         type="elementBackground"
         label={t("labels.background")}
diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts
index 717993b43..f6047f80d 100644
--- a/packages/excalidraw/types.ts
+++ b/packages/excalidraw/types.ts
@@ -43,6 +43,7 @@ import type {
   MakeBrand,
 } from "@excalidraw/common/utility-types";
 
+import type { ColorTuple } from "./colors";
 import type { Action } from "./actions/types";
 import type { Spreadsheet } from "./charts";
 import type { ClipboardData } from "./clipboard";
@@ -601,6 +602,8 @@ export interface ExcalidrawProps {
   ) => JSX.Element | null;
   aiEnabled?: boolean;
   showDeprecatedFonts?: boolean;
+  strokeColorTopPicks?: ColorTuple;
+  backgroundColorTopPicks?: ColorTuple;
 }
 
 export type SceneData = {

From d5c9754d0985e8d73aac614ac127ea686c43b5c9 Mon Sep 17 00:00:00 2001
From: feng <fengsight@gmail.com>
Date: Sat, 12 Apr 2025 20:59:47 +0900
Subject: [PATCH 2/4] fix: incorrect import for color (was moved to common)

---
 packages/excalidraw/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts
index f6047f80d..2862094dc 100644
--- a/packages/excalidraw/types.ts
+++ b/packages/excalidraw/types.ts
@@ -3,6 +3,7 @@ import type {
   UserIdleState,
   throttleRAF,
   MIME_TYPES,
+  ColorTuple,
 } from "@excalidraw/common";
 
 import type { SuggestedBinding } from "@excalidraw/element/binding";
@@ -43,7 +44,6 @@ import type {
   MakeBrand,
 } from "@excalidraw/common/utility-types";
 
-import type { ColorTuple } from "./colors";
 import type { Action } from "./actions/types";
 import type { Spreadsheet } from "./charts";
 import type { ClipboardData } from "./clipboard";

From 7ca5f4b11cb3036fecfa4cdc529b63b1f6e1a4de Mon Sep 17 00:00:00 2001
From: feng <fengsight@gmail.com>
Date: Sat, 12 Apr 2025 22:12:03 +0900
Subject: [PATCH 3/4] fix: pass the new top pick color props properly

---
 packages/excalidraw/components/App.tsx | 2 ++
 packages/excalidraw/index.tsx          | 4 ++++
 2 files changed, 6 insertions(+)

diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index 276cde027..e75753b7d 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -741,6 +741,8 @@ class App extends React.Component<AppProps, AppState> {
       objectsSnapModeEnabled = false,
       theme = defaultAppState.theme,
       name = `${t("labels.untitled")}-${getDateTime()}`,
+      strokeColorTopPicks,
+      backgroundColorTopPicks,
     } = props;
     this.state = {
       ...defaultAppState,
diff --git a/packages/excalidraw/index.tsx b/packages/excalidraw/index.tsx
index 5ea746754..6e42ab628 100644
--- a/packages/excalidraw/index.tsx
+++ b/packages/excalidraw/index.tsx
@@ -53,6 +53,8 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
     renderEmbeddable,
     aiEnabled,
     showDeprecatedFonts,
+    strokeColorTopPicks,
+    backgroundColorTopPicks,
   } = props;
 
   const canvasActions = props.UIOptions?.canvasActions;
@@ -143,6 +145,8 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
           renderEmbeddable={renderEmbeddable}
           aiEnabled={aiEnabled !== false}
           showDeprecatedFonts={showDeprecatedFonts}
+          strokeColorTopPicks={strokeColorTopPicks}
+          backgroundColorTopPicks={backgroundColorTopPicks}
         >
           {children}
         </App>

From e707279c37dac2dba56a60ba980a12445941ce1a Mon Sep 17 00:00:00 2001
From: feng <fengsight@gmail.com>
Date: Sat, 12 Apr 2025 22:15:15 +0900
Subject: [PATCH 4/4] fix: remove unused variables

---
 packages/excalidraw/components/App.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index e75753b7d..276cde027 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -741,8 +741,6 @@ class App extends React.Component<AppProps, AppState> {
       objectsSnapModeEnabled = false,
       theme = defaultAppState.theme,
       name = `${t("labels.untitled")}-${getDateTime()}`,
-      strokeColorTopPicks,
-      backgroundColorTopPicks,
     } = props;
     this.state = {
       ...defaultAppState,