Repository: gradio-app/gradio
Pull request: ensure the image editor background respects the theme mode
## Description

We weren't handling dark mode, now we are!

<img width="619" alt="Screenshot 2025-04-10 at 12 58 43" src="https://github.com/user-attachments/assets/01612f05-d857-4612-8aac-46a0839c9196" />

Closes: #10978 



Problem statement:
[ImageEditor] - background disrespects dark mode
### Describe the bug

very disrespectful

### Have you searched existing issues?  🔎

- [x] I have searched and found no existing issues

### Reproduction

```python
print("i am very disrepsectful")

```


### Screenshot

_No response_

### Logs

```shell

```

### System Info

```shell
latest
```

### Severity

I can work around it

Hints from issue discussion:

Commit message: Merge branch 'main' into 10978-imed-darkmode

Patch to review:
diff --git a/.changeset/small-moose-join.md b/.changeset/small-moose-join.md
new file mode 100644
index 0000000000..0a571cea2e
--- /dev/null
+++ b/.changeset/small-moose-join.md
@@ -0,0 +1,6 @@
+---
+"@gradio/imageeditor": patch
+"gradio": patch
+---
+
+fix:ensure the image editor background respects the theme mode
diff --git a/js/imageeditor/Index.svelte b/js/imageeditor/Index.svelte
index 9944513dfc..b8650ee14e 100644
--- a/js/imageeditor/Index.svelte
+++ b/js/imageeditor/Index.svelte
@@ -73,6 +73,9 @@
 	}>;
 	export let border_region = 0;
 	export let webcam_options: WebcamOptions;
+	export let theme_mode: "dark" | "light";
+
+	$: console.log({ theme_mode });
 
 	let editor_instance: InteractiveImageEditor;
 	let image_id: null | string = null;
@@ -243,6 +246,7 @@
 			{placeholder}
 			{full_history}
 			{webcam_options}
+			{theme_mode}
 		></InteractiveImageEditor>
 	</Block>
 {/if}
diff --git a/js/imageeditor/InteractiveImageEditor.svelte b/js/imageeditor/InteractiveImageEditor.svelte
index 8126d930e8..f01da8d1ac 100644
--- a/js/imageeditor/InteractiveImageEditor.svelte
+++ b/js/imageeditor/InteractiveImageEditor.svelte
@@ -43,6 +43,7 @@
 	export let label: string | undefined = undefined;
 	export let show_label: boolean;
 	export let changeable = false;
+	export let theme_mode: "dark" | "light";
 
 	export let layers: FileData[];
 	export let composite: FileData | null;
@@ -238,6 +239,7 @@
 	bind:is_dragging
 	bind:has_drawn
 	{webcam_options}
+	{theme_mode}
 >
 	{#if !background_image && current_tool === "image" && !has_drawn}
 		<div class="empty wrap">
diff --git a/js/imageeditor/shared/ImageEditor.svelte b/js/imageeditor/shared/ImageEditor.svelte
index 9ca511f80e..cfe5345894 100644
--- a/js/imageeditor/shared/ImageEditor.svelte
+++ b/js/imageeditor/shared/ImageEditor.svelte
@@ -60,6 +60,7 @@
 	export let layer_options: LayerOptions;
 	export let current_tool: ToolbarTool;
 	export let webcam_options: WebcamOptions;
+	export let theme_mode: "dark" | "light";
 
 	let pixi_target: HTMLDivElement;
 	let pixi_target_crop: HTMLDivElement;
@@ -256,7 +257,8 @@
 			tools: ["image", zoom, new ResizeTool(), brush],
 			fixed_canvas,
 			border_region,
-			layer_options
+			layer_options,
+			theme_mode
 		});
 
 		brush.on("change", () => {
diff --git a/js/imageeditor/shared/core/editor.ts b/js/imageeditor/shared/core/editor.ts
index e57e159d67..55766feb4f 100644
--- a/js/imageeditor/shared/core/editor.ts
+++ b/js/imageeditor/shared/core/editor.ts
@@ -918,6 +918,7 @@ interface ImageEditorOptions {
 	border_region?: number;
 	layer_options?: LayerOptions;
 	pad_bottom?: number;
+	theme_mode?: "dark" | "light";
 }
 
 const core_tool_map = {
@@ -1075,9 +1076,11 @@ export class ImageEditor {
 	private overlay_container!: Container;
 	private overlay_graphics!: Graphics;
 	private pad_bottom: number;
+	private theme_mode: "dark" | "light";
 	constructor(options: ImageEditorOptions) {
 		this.pad_bottom = options.pad_bottom || 0;
 		this.dark = options.dark || false;
+		this.theme_mode = options.theme_mode || "dark";
 		this.target_element = options.target_element;
 		this.width = options.width;
 		this.height = options.height;
@@ -1166,7 +1169,11 @@ export class ImageEditor {
 			width: container_box.width,
 			height: container_box.height,
 			backgroundAlpha: this.dark ? 0 : 1,
-			backgroundColor: this.dark ? 0x333333 : 0xffffff,
+			backgroundColor: this.dark
+				? 0x333333
+				: this.theme_mode === "dark"
+					? "#27272a"
+					: "#ffffff",
 			resolution: window.devicePixelRatio,
 			autoDensity: true,
 			antialias: true,


Code review comments:
diff_hunk: @@ -1166,7 +1169,11 @@ export class ImageEditor {
 			width: container_box.width,
 			height: container_box.height,
 			backgroundAlpha: this.dark ? 0 : 1,
-			backgroundColor: this.dark ? 0x333333 : 0xffffff,
+			backgroundColor: this.dark
path: js/imageeditor/shared/core/editor.ts
text: @user1:
Shouldn't this depend on the theme? 

@author:
No this is somewhat confusing I guess but the 'dark' mode is for the crop view which needs a dark background on the container to make sure that the reduced opacity of the cropped out area looks good.

This parameter might actually be pointless anyway, since we are setting the alpha. let me check.

@author:
Yes, we dont need this branch, will remove.

diff_hunk: @@ -73,6 +73,9 @@
 	}>;
 	export let border_region = 0;
 	export let webcam_options: WebcamOptions;
+	export let theme_mode: "dark" | "light";
+
+	$: console.log({ theme_mode });
path: js/imageeditor/Index.svelte
text: @user1:
I would delete before merge

@author:
ops