tweak binding highlight color

packages/element/src/shape.ts

@@ -21,6 +21,7 @@ import {
   assertNever,
   COLOR_PALETTE,
   LINE_POLYGON_POINT_MERGE_DISTANCE,
+  THEME,
 } from "@excalidraw/common";
 
 import { RoughGenerator } from "roughjs/bin/generator";
@@ -32,6 +33,7 @@ import type { Mutable } from "@excalidraw/common/utility-types";
 import type {
   AppState,
   EmbedsValidationStatus,
+  InteractiveCanvasAppState,
 } from "@excalidraw/excalidraw/types";
 import type {
   ElementShape,
@@ -110,6 +112,7 @@ export class ShapeCache {
     T extends ExcalidrawBindableElement,
   >(
     element: T,
+    appState: Pick<InteractiveCanvasAppState, "theme">,
     renderConfig?: {
       isExporting: boolean;
       canvasBackgroundColor: AppState["viewBackgroundColor"];
@@ -127,7 +130,8 @@ export class ShapeCache {
     ) as Drawable;
 
     shape.options.fill = "transparent";
-    shape.options.stroke = "#ff028d";
+    shape.options.stroke =
+      appState.theme === THEME.DARK ? "#035da1" : "#6abdfc";
     shape.options.strokeWidth = shape.options.strokeWidth * 1.1;
 
     return shape;

packages/excalidraw/renderer/interactiveScene.ts

@@ -189,11 +189,16 @@ const renderSingleLinearPoint = <Point extends GlobalPoint | LocalPoint>(
 const renderBindingHighlightForBindableElement = (
   context: CanvasRenderingContext2D,
   element: ExcalidrawBindableElement,
+  _elementsMap: ElementsMap,
+  appState: Pick<InteractiveCanvasAppState, "theme">,
 ) => {
   context.translate(element.x, element.y);
 
   const rc = rough.canvas(context.canvas);
-  const drawable = ShapeCache.generateBindableElementHighlight(element);
+  const drawable = ShapeCache.generateBindableElementHighlight(
+    element,
+    appState,
+  );
   rc.draw(drawable);
 };
 
@@ -201,6 +206,7 @@ const renderBindingHighlightForSuggestedPointBinding = (
   context: CanvasRenderingContext2D,
   suggestedBinding: SuggestedPointBinding,
   elementsMap: ElementsMap,
+  appState: Pick<InteractiveCanvasAppState, "theme">,
 ) => {
   const [element, startOrEnd] = suggestedBinding;
 
@@ -302,7 +308,7 @@ const renderBindingHighlight = (
 
   context.save();
   context.translate(appState.scrollX, appState.scrollY);
-  renderHighlight(context, suggestedBinding as any, elementsMap);
+  renderHighlight(context, suggestedBinding as any, elementsMap, appState);
 
   context.restore();
 };