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] 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 = {