From 1bd416002ca9307f1dfc595e77b71713c8a811da Mon Sep 17 00:00:00 2001
From: zsviczian <viczian.zsolt@gmail.com>
Date: Wed, 16 Aug 2023 23:59:37 +0200
Subject: [PATCH] fix: scope `--color-selection` retrieval to given instance
 (#6886)

Co-authored-by: dwelle <luzar.david@gmail.com>
---
 src/components/App.tsx                        |  1 +
 src/components/canvases/InteractiveCanvas.tsx | 10 +++++++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index eccc01743aae..dad7a7b039aa 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1226,6 +1226,7 @@ class App extends React.Component<AppProps, AppState> {
                           }}
                         />
                         <InteractiveCanvas
+                          containerRef={this.excalidrawContainerRef}
                           canvas={this.interactiveCanvas}
                           elements={canvasElements}
                           visibleElements={visibleElements}
diff --git a/src/components/canvases/InteractiveCanvas.tsx b/src/components/canvases/InteractiveCanvas.tsx
index 11bbec24b755..a4ee9ee590c1 100644
--- a/src/components/canvases/InteractiveCanvas.tsx
+++ b/src/components/canvases/InteractiveCanvas.tsx
@@ -16,6 +16,7 @@ import type {
 import type { NonDeletedExcalidrawElement } from "../../element/types";
 
 type InteractiveCanvasProps = {
+  containerRef: React.RefObject<HTMLDivElement>;
   canvas: HTMLCanvasElement | null;
   elements: readonly NonDeletedExcalidrawElement[];
   visibleElements: readonly NonDeletedExcalidrawElement[];
@@ -105,9 +106,12 @@ const InteractiveCanvas = (props: InteractiveCanvasProps) => {
       cursorButton[socketId] = user.button;
     });
 
-    const selectionColor = getComputedStyle(
-      document.querySelector(".excalidraw")!,
-    ).getPropertyValue("--color-selection");
+    const selectionColor =
+      (props.containerRef?.current &&
+        getComputedStyle(props.containerRef.current).getPropertyValue(
+          "--color-selection",
+        )) ||
+      "#6965db";
 
     renderInteractiveScene(
       {