v1.8.0 - Fixes #456

Author: hediet

package.json

@@ -3,7 +3,7 @@
 	"private": true,
 	"displayName": "Draw.io Integration",
 	"description": "This unofficial extension integrates Draw.io into VS Code.",
-	"version": "1.7.0",
+	"version": "1.8.0",
 	"preRelease": false,
 	"license": "GPL-3.0",
 	"publisher": "hediet",
@@ -438,14 +438,25 @@
 					"hediet.vscode-drawio.theme": {
 						"title": "Draw.io Theme",
 						"type": "string",
+						"default": "kennedy",
+						"enum": [
+							"kennedy",
+							"min"
+						],
+						"description": "The theme to use for the Draw.io editor. Use \"automatic\" to automatically choose a Draw.io theme that matches your current VS Code theme."
+					},
+					"hediet.vscode-drawio.appearance": {
+						"title": "Draw.io Appearance",
+						"type": "string",
 						"default": "automatic",
 						"enum": [
 							"automatic",
-							"min",
+							"light",
 							"dark",
-							"kennedy"
+							"high-contrast-light",
+							"high-contrast"
 						],
-						"description": "The theme to use for the Draw.io editor. Use \"automatic\" to automatically choose a Draw.io theme that matches your current VS Code theme."
+						"description": "The appearance to use for the Draw.io editor. Use \"automatic\" to automatically choose a Draw.io theme that matches your current VS Code theme."
 					}
 				}
 			}

src/Config.ts

@@ -12,7 +12,6 @@ import {
 } from "vscode";
 import { Style, ColorScheme, DrawioLibraryData } from "./DrawioClient";
 import { BufferImpl } from "./utils/buffer";
-import { mapObject } from "./utils/mapObject";
 import { SimpleTemplate } from "./utils/SimpleTemplate";
 import {
 	serializerWithDefault,
@@ -360,37 +359,65 @@ export class DiagramConfig {
 
 	private readonly _theme = new VsCodeSetting(`${extensionId}.theme`, {
 		scope: this.uri,
-		serializer: serializerWithDefault("automatic"),
+		serializer: serializerWithDefault("kennedy"),
 	});
 
-	@computed
-	public get theme(): string {
-		const theme = this._theme.get();
+	private readonly _appearance = new VsCodeSetting(`${extensionId}.appearance`, {
+		scope: this.uri,
+		serializer: serializerWithDefault<
+			"automatic" |
+			"light" |
+			"dark" |
+			"highContrastLight" |
+			"highContrast"
+		>("automatic"),
+	});
 
-		if (theme !== "automatic") {
-			return theme;
+	public get resolvedTheme(): ResolvedDrawioTheme {
+		const themeName = this._theme.get().toLowerCase();
+
+		// handle 'dark' and 'automatic' for backwards compat
+		if (themeName === 'dark') {
+			return new ResolvedDrawioTheme('kennedy', ColorThemeKind.Dark);
+		}
+		if (themeName === 'automatic') {
+			return new ResolvedDrawioTheme('kennedy', this.config.vscodeTheme.kind);
 		}
 
-		return {
-			[ColorThemeKind.Light]: "kennedy",
-			[ColorThemeKind.Dark]: "dark",
-			[ColorThemeKind.HighContrast]: "dark",
-			[ColorThemeKind.HighContrastLight]: "kennedy"
-		}[this.config.vscodeTheme.kind];
+		const appearance = this._appearance.get().toLowerCase();
+
+		let resolvedAppearance = themeKindFromString(appearance);
+		if (!resolvedAppearance) {
+			resolvedAppearance = this.config.vscodeTheme.kind;
+		}
+
+		return new ResolvedDrawioTheme(themeName, resolvedAppearance);
+	}
+
+	public getVsCodeAppearance(): string {
+		return themeKindToString(this.config.vscodeTheme.kind);
+	}
+
+	@computed
+	public get theme(): string {
+		const t = this._theme.get().toLowerCase();
+		if (t === 'dark' || t === 'automatic') {
+			return 'kennedy';
+		}
+		return t;
 	}
 
 	@computed
 	public get appearance(): string {
-		return {
-			[ColorThemeKind.Light]: "0",
-			[ColorThemeKind.Dark]: "1",
-			[ColorThemeKind.HighContrastLight]: "2",
-			[ColorThemeKind.HighContrast]: "3"
-		}[this.config.vscodeTheme.kind];
+		return this._appearance.get().toLowerCase();
 	}
 
-	public async setTheme(value: string): Promise<void> {
-		await this._theme.set(value);
+	public async setTheme(themeName: string): Promise<void> {
+		await this._theme.set(themeName);
+	}
+
+	public async setAppearance(appearance: string): Promise<void> {
+		await this._appearance.set(appearance as any);
 	}
 
 	// #endregion
@@ -661,7 +688,7 @@ export class DiagramConfig {
 		public readonly uri: Uri,
 		private readonly config: Config,
 		private readonly memento: Memento
-	) {}
+	) { }
 
 	@computed
 	public get drawioLanguage(): string {
@@ -677,15 +704,67 @@ export class DiagramConfig {
 
 type DrawioCustomLibrary = (
 	| {
-			xml: string;
-	  }
+		xml: string;
+	}
 	| {
-			url: string;
-	  }
+		url: string;
+	}
 	| {
-			json: string;
-	  }
+		json: string;
+	}
 	| {
-			file: string;
-	  }
+		file: string;
+	}
 ) & { libName: string; entryId: string };
+
+export class ResolvedDrawioTheme {
+	public static getThemeNames(): string[] {
+		return [
+			"min",
+			"kennedy",
+		];
+	}
+
+	constructor(
+		public readonly themeName: string,
+		public readonly appearance: ColorThemeKind,
+	) { }
+
+	getAppearanceDrawioValue(): string {
+		return {
+			[ColorThemeKind.Light]: "0",
+			[ColorThemeKind.Dark]: "1",
+			[ColorThemeKind.HighContrastLight]: "2",
+			[ColorThemeKind.HighContrast]: "3"
+		}[this.appearance];
+	}
+
+	getAppearanceStringValue(): string {
+		return themeKindToString(this.appearance);
+	}
+
+	toString(): string {
+		if (this.appearance === ColorThemeKind.Light) {
+			return this.themeName;
+		}
+		return `${this.themeName} - ${this.getAppearanceStringValue()}`;
+	}
+}
+
+function themeKindToString(themeKind: ColorThemeKind): string {
+	return {
+		[ColorThemeKind.Light]: "light",
+		[ColorThemeKind.Dark]: "dark",
+		[ColorThemeKind.HighContrastLight]: "high-contrast-light",
+		[ColorThemeKind.HighContrast]: "high-contrast"
+	}[themeKind];
+}
+
+function themeKindFromString(themeKind: string): ColorThemeKind | undefined {
+	return {
+		"light": ColorThemeKind.Light,
+		"dark": ColorThemeKind.Dark,
+		"high-contrast-light": ColorThemeKind.HighContrastLight,
+		"high-contrast": ColorThemeKind.HighContrast
+	}[themeKind];
+}

src/DrawioClient/DrawioClientFactory.ts

@@ -236,8 +236,8 @@ export class DrawioClientFactory {
 		// Prevent injection attacks by using JSON.stringify.
 		const patchedHtml = html
 			.replace(/\$\$literal-vsuri\$\$/g, vsuri.toString())
-			.replace("$$theme$$", JSON.stringify(config.theme))
-			.replace("$$appearance$$", JSON.stringify(config.appearance))
+			.replace("$$theme$$", JSON.stringify(config.resolvedTheme.themeName))
+			.replace("$$appearance$$", JSON.stringify(config.resolvedTheme.getAppearanceDrawioValue()))
 			.replace("$$lang$$", JSON.stringify(config.drawioLanguage))
 			.replace("$$simpleLabels$$", JSON.stringify(config.simpleLabels))
 			.replace(
@@ -284,7 +284,7 @@ export class DrawioClientFactory {
 				</script>
 
 				<iframe src="${drawioUrl}?embed=1&ui=${encodeURIComponent(
-			config.theme
+			config.resolvedTheme.themeName
 		)}&proto=json&configure=1&noSaveBtn=1&noExitBtn=1&simpleLabels=${encodeURIComponent(
 			config.simpleLabels
 		)}&lang=${encodeURIComponent(config.drawioLanguage)}"></iframe>

src/DrawioEditorService.ts

@@ -4,20 +4,20 @@ import { autorun, computed, observable, ObservableSet } from "mobx";
 import { extname } from "path";
 import {
 	commands,
-	StatusBarAlignment,
+	QuickPickItem, QuickPickItemKind, StatusBarAlignment,
 	TextDocument,
 	Uri,
 	WebviewPanel,
 	window,
-	workspace,
+	workspace
 } from "vscode";
-import { Config, DiagramConfig } from "./Config";
-import { DrawioBinaryDocument } from "./DrawioEditorProviderBinary";
+import { Config, DiagramConfig, ResolvedDrawioTheme } from "./Config";
 import {
 	CustomizedDrawioClient,
-	DrawioClientOptions,
 	DrawioClientFactory,
+	DrawioClientOptions,
 } from "./DrawioClient";
+import { DrawioBinaryDocument } from "./DrawioEditorProviderBinary";
 import { registerFailableCommand } from "./utils/registerFailableCommand";
 
 const drawioChangeThemeCommand = "hediet.vscode-drawio.changeTheme";
@@ -110,7 +110,7 @@ export class DrawioEditorService {
 					this.statusBar.command = drawioChangeThemeCommand;
 
 					if (activeEditor) {
-						this.statusBar.text = `Theme: ${activeEditor.config.theme}`;
+						this.statusBar.text = `Theme: ${activeEditor.config.resolvedTheme.toString()}`;
 						this.statusBar.show();
 					} else {
 						this.statusBar.hide();
@@ -334,39 +334,54 @@ export class DrawioEditor {
 	}
 
 	public async handleChangeThemeCommand(): Promise<void> {
-		let availableThemes = [
-			"automatic",
-			"min",
-			"dark",
-			"kennedy"
-		];
-
 		const originalTheme = this.config.theme;
-		availableThemes = availableThemes.filter((t) => t !== originalTheme);
-		availableThemes.unshift(originalTheme);
-
+		const originalAppearance = this.config.appearance;
+		const availableThemes = withFirstUnique(ResolvedDrawioTheme.getThemeNames(), originalTheme);
+
+		const availableOptions: (QuickPickItem & { onSelect?: (preview: boolean) => void })[] = [];
+
+		const curVsCodeAppearance = this.config.getVsCodeAppearance();
+
+		const appearances = withFirstUnique(["automatic", "light", "dark"], originalAppearance);
+		for (const appearance of appearances) {
+			const appearanceLabel = appearance === "automatic" ? `always match VS Code theme '${curVsCodeAppearance}'` : appearance;
+
+			availableOptions.push({
+				kind: QuickPickItemKind.Separator,
+				label: appearanceLabel,
+			});
+			for (const theme of availableThemes) {
+				availableOptions.push({
+					label: `${theme} - ${appearance}`,
+					onSelect: () => {
+						this.config.setTheme(theme);
+						this.config.setAppearance(appearance);
+					}
+				});
+			}
+		}
 		const result = await window.showQuickPick(
-			availableThemes.map((theme) => ({
-				label: theme,
-				description: `Selects Theme "${theme}"`,
-				theme,
-			})),
+			availableOptions,
 			{
 				onDidSelectItem: async (item) => {
-					await this.config.setTheme((item as any).theme);
+					(item as any).onSelect(true);
 				},
 			}
 		);
-
-		if (!result) {
+		if (!result || !result.onSelect) {
 			await this.config.setTheme(originalTheme);
+			await this.config.setAppearance(originalAppearance);
 			return;
 		}
-
-		await this.config.setTheme(result.theme);
+		result.onSelect(false);
 	}
 }
 
+function withFirstUnique<T>(items: T[], firstItem: T): T[] {
+	const filtered = items.filter(t => t !== firstItem);
+	return [firstItem, ...filtered];
+}
+
 async function fileExists(uri: Uri): Promise<boolean> {
 	try {
 		await workspace.fs.stat(uri);