diff --git a/.changeset/lucky-files-bow.md b/.changeset/lucky-files-bow.md
new file mode 100644
index 0000000000..5ecb7d9705
--- /dev/null
+++ b/.changeset/lucky-files-bow.md
@@ -0,0 +1,6 @@
+---
+"@gradio/app": patch
+"gradio": patch
+---
+
+fix:Ensure CSS `.dark` rule selectors are applied
diff --git a/js/app/src/css.ts b/js/app/src/css.ts
index ddb899d3d8..29e1d125f3 100644
--- a/js/app/src/css.ts
+++ b/js/app/src/css.ts
@@ -36,14 +36,18 @@ export function prefix_css(
 	for (let i = 0; i < rules.length; i++) {
 		const rule = rules[i];
 
+		let is_dark_rule = rule.cssText.includes(".dark");
 		if (rule instanceof CSSStyleRule) {
 			const selector = rule.selectorText;
 			if (selector) {
 				const new_selector = selector
+					.replace(".dark", "")
 					.split(",")
 					.map(
 						(s) =>
-							`gradio-app .gradio-container.gradio-container-${version} .contain ${s.trim()}`
+							`${
+								is_dark_rule ? ".dark" : ""
+							} gradio-app .gradio-container.gradio-container-${version} .contain ${s.trim()} `
 					)
 					.join(",");
 
diff --git a/js/imageeditor/ImageEditor.stories.svelte b/js/imageeditor/ImageEditor.stories.svelte
index 8418284682..ef0900a13f 100644
--- a/js/imageeditor/ImageEditor.stories.svelte
+++ b/js/imageeditor/ImageEditor.stories.svelte
@@ -50,7 +50,7 @@
 />
 
 <Story
-	name="Image Editor Interactions"
+	name="Image Editor Drawing Interactions"
 	args={{
 		value: {
 			path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
@@ -196,12 +196,59 @@
 
 		userEvent.click(canvas.getByLabelText("Add Layer"));
 
-		await userEvent.click(canvas.getByLabelText("Image button"));
+		await userEvent.click(canvas.getByLabelText("Clear canvas"));
+	}}
+/>
+
+<Story
+	name="Image Editor Undo/Redo Interactions"
+	args={{
+		value: {
+			path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+			url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+			orig_name: "cheetah.jpg"
+		},
+		type: "pil",
+		sources: ["upload", "webcam"],
+		interactive: "true",
+		brush: {
+			default_size: "auto",
+			colors: ["#ff0000", "#00ff00", "#0000ff"],
+			default_color: "#ff0000",
+			color_mode: "defaults"
+		},
+		eraser: {
+			default_size: "auto"
+		}
+	}}
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+
+		const drawButton = canvas.getAllByLabelText("Draw button")[0];
+
+		userEvent.click(drawButton);
+
+		const drawCanvas = document.getElementsByTagName("canvas")[0];
+		if (!drawCanvas) {
+			throw new Error("Could not find canvas");
+		}
+
+		await new Promise((r) => setTimeout(r, 1000));
+
+		await userEvent.pointer({
+			keys: "[MouseLeft][MouseRight]",
+			target: drawCanvas,
+			coords: { clientX: 300, clientY: 100 }
+		});
+
+		await userEvent.pointer({
+			keys: "[MouseLeft][MouseRight]",
+			target: drawCanvas,
+			coords: { clientX: 400, clientY: 200 }
+		});
 
 		await userEvent.click(canvas.getByLabelText("Undo"));
 
 		await userEvent.click(canvas.getByLabelText("Redo"));
-
-		await userEvent.click(canvas.getByLabelText("Erase button"));
 	}}
 />