Accommodate Diagram colors to VSCode theme

18ea4ecd · Nadim Kobeissi · bacfb1ff · 18ea4ecd · 18ea4ecd
Unverified Commit 18ea4ecd authored Apr 28, 2020 by Nadim Kobeissi 💾
--- a/res/diagram.html
+++ b/res/diagram.html
@@ -8,38 +8,62 @@
 	<script src="$$EXTPATH2$$"></script>
 	<script src="$$EXTPATH3$$"></script>
 	<script src="$$EXTPATH4$$"></script>
+	<script src="$$EXTPATH5$$"></script>
 	<style type="text/css">
 		body {
 			padding: 10px;
+			background-color: var(--vscode-editor-background);
 		}
-		div#header {
-		}
-		img#icon {
-			float: left;
-			width: 50px;
-			height: auto;
-			border-radius: 5px;
-		}
-		h2 {
-			float: left;
-			margin-left: 20px;
-		}
+		
 		span#diagramText {
 			display: none;
 		}
+
 		div#diagram {
 			margin: 0 auto;
 			width: 80%;
 		}
+
+		.title rect,
+		.title path {
+			fill: var(--vscode-editor-findMatchBackground);
+			stroke: var(--vscode-editor-findMatchBorder);
+		}
+
+		.title text {
+			fill: var(--vscode-editor-foreground);
+		}
+
+		line,
+		#markerArrowBlock {
+			stroke: var(--vscode-editor-foreground);
+			fill: var(--vscode-editor-foreground);
+		}
+
+		.actor rect,
+		.actor path {
+			fill: var(--vscode-editor-foreground);
+			stroke: var(--vscode-editor-foreground);
+		}
+
+		.actor text {
+			fill: var(--vscode-editor-background);
+		}
+
+		.note rect,
+		.note path {
+			fill: var(--vscode-editor-selectionHighlightBackground);
+			stroke: var(--vscode-editor-foreground);
+		}
+		
+		.note text,
+		.signal text {
+			fill: var(--vscode-editor-foreground);
+		}
 	</style>
 </head>

 <body>
-	<!--
-	<div id="header">
-		<img id="icon" src="$$ICON$$" alt="" />
-	</div>
-	-->
 	<span id="diagramText">
 		Title:$$MODELNAME$$
 		$$DIAGRAM$$

--- a/src/DiagramProvider.ts
+++ b/src/DiagramProvider.ts
@@ -32,14 +32,10 @@ export default class DiagramProvider {
 			let ep4 = this.webviewPanel.webview.asWebviewUri(vscode.Uri.file(
 				path.join(extensionPath, "res", "sequence-diagram-min.js")
 			));
-			let icon = this.webviewPanel.webview.asWebviewUri(vscode.Uri.file(
-				path.join(extensionPath, "res", "icon.png")
-			));
 			diagramHtml = diagramHtml.replace("$$EXTPATH1$$", ep1);
 			diagramHtml = diagramHtml.replace("$$EXTPATH2$$", ep2);
 			diagramHtml = diagramHtml.replace("$$EXTPATH3$$", ep3);
 			diagramHtml = diagramHtml.replace("$$EXTPATH4$$", ep4);
-			diagramHtml = diagramHtml.replace("$$ICON$$", icon);
 			diagramHtml = diagramHtml.replace("$$MODELNAME$$", modelName);
 			diagramHtml = diagramHtml.replace("$$DIAGRAM$$", result);
 			this.webviewPanel.webview.html = diagramHtml;