Add an SVG appearance setting for .drawio.svg files [#217]

The xmlsvg export request sent no theme, so draw.io picked one from the
dark mode of the editor: auto (light-dark() colors) in a dark editor,
light otherwise. A saved .drawio.svg thus depended on the VS Code theme
of whoever saved it last, although the extension meant to always save
light SVGs. The new hediet.vscode-drawio.svgAppearance setting (light,
auto, dark; default light) is now sent as the theme of every svg export:
.drawio.svg saves, Export To... and Convert..., and editable image links
saved from the inline Markdown editor. With the default, files saved in
a dark editor are light again; auto gives SVGs that adapt to the color
scheme of the page that shows them. PNG exports are unchanged, draw.io
always renders them light.

Fixes #217

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: alderg

README.md

@@ -90,6 +90,12 @@ Add this to your VS Code `settings.json` file if you want to associate it with `
 
 You won't be able to edit arbitrary SVG files though - only those that have been created with Draw.io or this extension!
 
+## Light and Dark `.drawio.svg` Files
+
+By default, `.drawio.svg` files are saved with light colors, whatever theme the editor uses.
+Set `hediet.vscode-drawio.svgAppearance` to `auto` to make them adapt to the color scheme of the page that shows them, for example a README on GitHub in dark mode, or to `dark` to always save them with dark colors.
+The setting applies the next time a diagram is saved. Add it to the workspace settings so that everyone on a team saves the same file.
+
 ## Inline Diagrams in VS Code's Markdown Editor (Experimental, Insiders only)
 
 VS Code Insiders ships an experimental WYSIWYG Markdown editor (`View: Reopen Editor With... > Markdown Editor`).

package.json

@@ -286,6 +286,23 @@
 						"description": "When enabled, no ForeignObjects are used in the svg.",
 						"order": 40
 					},
+					"hediet.vscode-drawio.svgAppearance": {
+						"type": "string",
+						"default": "light",
+						"enum": [
+							"light",
+							"auto",
+							"dark"
+						],
+						"enumDescriptions": [
+							"The SVG always uses light colors.",
+							"The SVG adapts to the light or dark color scheme of the page that shows it.",
+							"The SVG always uses dark colors."
+						],
+						"title": "SVG Appearance",
+						"description": "The appearance of `.drawio.svg` files and SVG exports. It does not depend on the theme of the editor.",
+						"order": 45
+					},
 					"hediet.vscode-drawio.zoomFactor": {
 						"type": "number",
 						"default": 1.2,

src/Config.ts

@@ -10,7 +10,12 @@ import {
 	window,
 	workspace,
 } from "vscode";
-import { Style, ColorScheme, DrawioLibraryData } from "./DrawioClient";
+import {
+	Style,
+	ColorScheme,
+	DrawioExportTheme,
+	DrawioLibraryData,
+} from "./DrawioClient";
 import { BufferImpl } from "./utils/buffer";
 import { SimpleTemplate } from "./utils/SimpleTemplate";
 import {
@@ -338,6 +343,28 @@ export class DiagramConfig {
 
 	//#endregion
 
+	//#region SVG Appearance
+
+	private readonly _svgAppearance = new VsCodeSetting(
+		`${extensionId}.svgAppearance`,
+		{
+			scope: this.uri,
+			serializer: serializerWithDefault<DrawioExportTheme>("light"),
+		}
+	);
+
+	/**
+	 * The theme of .drawio.svg files and svg exports. Without it, draw.io
+	 * picks one from the dark mode of the editor, so the saved file would
+	 * depend on the VS Code theme of whoever saved it last.
+	 */
+	@computed
+	public get svgAppearance(): DrawioExportTheme {
+		return this._svgAppearance.get();
+	}
+
+	//#endregion
+
 	//#region Preset Colors
 
 	private readonly _presetColors = new VsCodeSetting(

src/DrawioClient/DrawioClient.ts

@@ -1,6 +1,11 @@
 import { EventEmitter } from "@hediet/std/events";
 import { Disposable } from "@hediet/std/disposable";
-import { DrawioConfig, DrawioEvent, DrawioAction } from "./DrawioTypes";
+import {
+	DrawioConfig,
+	DrawioEvent,
+	DrawioAction,
+	DrawioExportTheme,
+} from "./DrawioTypes";
 import { BufferImpl } from "../utils/buffer";
 
 /**
@@ -35,7 +40,8 @@ export class DrawioClient<
 	constructor(
 		private readonly messageStream: MessageStream,
 		private readonly getConfig: () => Promise<DrawioConfig>,
-		public readonly reloadWebview: () => void
+		public readonly reloadWebview: () => void,
+		private readonly getSvgTheme: () => DrawioExportTheme
 	) {
 		this.dispose.track(
 			messageStream.registerMessageHandler((msg) =>
@@ -280,6 +286,7 @@ export class DrawioClient<
 		const response = await this.sendActionWaitForResponse({
 			action: "export",
 			format: "xmlsvg",
+			theme: this.getSvgTheme(),
 		});
 		if (response.event !== "export") {
 			throw new Error("Unexpected response");

src/DrawioClient/DrawioClientFactory.ts

@@ -135,7 +135,8 @@ export class DrawioClientFactory {
 				runInAction("Force reload", () => {
 					reloadId.id++;
 				});
-			}
+			},
+			() => config.svgAppearance
 		);
 
 		drawioClient.onUnknownMessage.sub(({ message }) => {

src/DrawioClient/DrawioTypes.ts

@@ -47,6 +47,8 @@ export type DrawioAction =
 			format: DrawioFormat;
 			// Exports the visible page instead of the first page (png)
 			currentPage?: boolean;
+			// Colors of the svg (xmlsvg); draw.io ignores it for png
+			theme?: DrawioExportTheme;
 	  }
 	| {
 			action: "configure";
@@ -268,3 +270,9 @@ export interface DrawioResource {
 }
 
 export type DrawioFormat = "html" | "xmlpng" | "png" | "xml" | "xmlsvg";
+
+/**
+ * The colors of an svg export: "auto" adapts to the color scheme of the page
+ * that shows the svg (light-dark() colors).
+ */
+export type DrawioExportTheme = "auto" | "light" | "dark";

src/inline-editor/extension.ts

@@ -2237,6 +2237,12 @@ class MarkdownEditorProvider implements vscode.CustomTextEditorProvider {
 							type: "setDiagramPadding",
 							padding: diagramPadding,
 						});
+						webviewPanel.webview.postMessage({
+							type: "setSvgAppearance",
+							appearance: vscode.workspace
+								.getConfiguration(DRAWIO_CONFIG_SECTION, document.uri)
+								.get<string>("svgAppearance", "light"),
+						});
 						sendContent();
 						{
 							const uriKey = document.uri.toString();

src/inline-editor/webview/inlinePreview.html

@@ -709,6 +709,12 @@
         return /\.drawio\.png(?:[?#]|$)/i.test(target || '') ? 'xmlpng' : 'xmlsvg';
       }
 
+      // Export request for saving an editable image link. theme sets the colors
+      // of the svg (hediet.vscode-drawio.svgAppearance); draw.io ignores it for png.
+      function linkExportRequest(target) {
+        return JSON.stringify({ action: 'export', format: linkExportFormat(target), theme: svgAppearance });
+      }
+
       // Forward intercepted VS Code shortcuts from draw.io iframes.
       // This is a dedicated listener that doesn't depend on iframe source
       // matching, because VS Code's webview iframe nesting can make
@@ -807,6 +813,7 @@
       var isDark = document.body.classList.contains('vscode-dark');
       var minimalUI = true;
       var diagramPadding = 28;
+      var svgAppearance = 'light'; // colors of saved .drawio.svg links; set via setSvgAppearance
 
       var imageBaseUri = '';
       var diagramBlocks = [];
@@ -2051,6 +2058,9 @@
           case 'setDiagramPadding':
             diagramPadding = msg.padding;
             break;
+          case 'setSvgAppearance':
+            svgAppearance = msg.appearance;
+            break;
           case 'sourceConverted':
             handleSourceConverted(msg);
             break;
@@ -2401,7 +2411,7 @@
         if (overlayState.linkTarget) {
           overlayState._pendingLinkSave = true;
           state._linkSaveQuietUntil = Date.now() + 2000;
-          overlayFrame.contentWindow.postMessage(JSON.stringify({ action: 'export', format: linkExportFormat(overlayState.linkTarget) }), '*');
+          overlayFrame.contentWindow.postMessage(linkExportRequest(overlayState.linkTarget), '*');
         }
         else {
           vscode.postMessage({
@@ -3423,7 +3433,7 @@
         if (linkSec && linkSec.linkTarget) {
           if (state.iframe && state.initialized) {
             state._pendingLinkSave = true;
-            state.iframe.contentWindow.postMessage(JSON.stringify({ action: 'export', format: linkExportFormat(linkSec.linkTarget) }), '*');
+            state.iframe.contentWindow.postMessage(linkExportRequest(linkSec.linkTarget), '*');
           }
           return;
         }
@@ -3441,7 +3451,7 @@
         if (overlayState.active && overlayState.dirty) {
           if (overlayState.linkTarget) {
             overlayState._pendingLinkSave = true;
-            overlayFrame.contentWindow.postMessage(JSON.stringify({ action: 'export', format: linkExportFormat(overlayState.linkTarget) }), '*');
+            overlayFrame.contentWindow.postMessage(linkExportRequest(overlayState.linkTarget), '*');
           }
           else {
             vscode.postMessage({