From dda2d279cc2def004098b6d3030a2fc81894a028 Mon Sep 17 00:00:00 2001
From: Alan Huang <huangz4@oregonstate.edu>
Date: Tue, 29 Jul 2025 05:27:06 +0800
Subject: [PATCH] fix issue 9679

---
 packages/common/src/colors.ts                | 9 +++++++++
 packages/excalidraw/actions/actionCanvas.tsx | 3 ++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/common/src/colors.ts b/packages/common/src/colors.ts
index 4dc45616f7..68132c9ea8 100644
--- a/packages/common/src/colors.ts
+++ b/packages/common/src/colors.ts
@@ -107,6 +107,14 @@ export const DEFAULT_ELEMENT_BACKGROUND_PICKS = [
 ] as ColorTuple;
 
 // ORDER matters for positioning in quick picker
+export const DEFAULT_CANVAS_BACKGROUND_PICKS_DARK = [
+  "#121212", // radix slate1
+  "#1e1e1e", // radix slate2
+  "#2c2c2c", // radix slate3
+  "#383838", // radix slate4
+  "#444444", // radix slate5
+] as ColorTuple;
+
 export const DEFAULT_CANVAS_BACKGROUND_PICKS = [
   COLOR_PALETTE.white,
   // radix slate2
@@ -171,3 +179,4 @@ export const rgbToHex = (r: number, g: number, b: number) =>
   `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
 
 // -----------------------------------------------------------------------------
+
diff --git a/packages/excalidraw/actions/actionCanvas.tsx b/packages/excalidraw/actions/actionCanvas.tsx
index 80a9eedaac..99a05dcc9f 100644
--- a/packages/excalidraw/actions/actionCanvas.tsx
+++ b/packages/excalidraw/actions/actionCanvas.tsx
@@ -2,6 +2,7 @@ import { clamp, roundToStep } from "@excalidraw/math";
 
 import {
   DEFAULT_CANVAS_BACKGROUND_PICKS,
+  DEFAULT_CANVAS_BACKGROUND_PICKS_DARK,
   CURSOR_TYPE,
   MAX_ZOOM,
   MIN_ZOOM,
@@ -74,7 +75,7 @@ export const actionChangeViewBackgroundColor = register({
     return (
       <ColorPicker
         palette={null}
-        topPicks={DEFAULT_CANVAS_BACKGROUND_PICKS}
+        topPicks={appState.theme === THEME.DARK ? DEFAULT_CANVAS_BACKGROUND_PICKS_DARK : DEFAULT_CANVAS_BACKGROUND_PICKS}
         label={t("labels.canvasBackground")}
         type="canvasBackground"
         color={appState.viewBackgroundColor}