Fixes theme background colors.

playground/src/style.scss

@@ -61,10 +61,7 @@ body {
 @import "./vscode-dark.scss";
 @import "./vscode-light.scss";
 
-.visualization {
-	background: var(--vscode-editor-background);
-}
-
 .themeable {
+	background-color: violet; // To debug backgrounds
 	--visualizer-simple-text-color: var(--vscode-editor-foreground);
 }

visualization-bundle/src/vars.scss

@@ -0,0 +1,6 @@
+.theme-dark {
+	--visualizer-background: #263238;
+}
+.theme-light {
+	--visualizer-background: white;
+}

visualization-bundle/src/visualizers/ast-visualizer/style.scss

@@ -1,3 +1,6 @@
+.themeable {
+	--visualizer-ast-background: var(--visualizer-background);
+}
 .theme-dark {
 	--visualizer-ast-marked-background: rgba(234, 92, 0, 0.33);
 	--visualizer-ast-selected-background: #515c6a;
@@ -8,6 +11,8 @@
 }
 
 .component-AstTree {
+	background: var(--visualizer-ast-background);
+
 	.part-editor {
 		//border-top: solid gray 1px;
 

visualization-bundle/src/visualizers/graph/graph-visjs-visualizer/VisJsGraphViewer.tsx

@@ -26,7 +26,13 @@ export class VisJsGraphViewer extends React.Component<{
 	}>();
 
 	render() {
-		return <div style={{ height: "100%" }} ref={this.divRef} />;
+		return (
+			<div
+				className="component-VisJsGraphViewer"
+				style={{ height: "100%" }}
+				ref={this.divRef}
+			/>
+		);
 	}
 
 	synchronizeData() {

visualization-bundle/src/visualizers/graph/graph-visjs-visualizer/style.scss

@@ -0,0 +1,7 @@
+.themeable {
+	--visualizer-visjs-background: var(--visualizer-background);
+}
+
+.component-VisJsGraphViewer {
+	background-color: var(--visualizer-visjs-background);
+}

visualization-bundle/src/visualizers/grid-visualizer/GridVisualizer.tsx

@@ -78,6 +78,7 @@ export class DecoratedGridComponent extends React.Component<{
 
 		return (
 			<div
+				className="component-GridVisualizer"
 				style={{
 					height: "100%",
 					justifyContent: "center",

visualization-bundle/src/visualizers/grid-visualizer/style.scss

@@ -1,3 +1,6 @@
+.themeable {
+	--visualizer-grid-background: var(--visualizer-background);
+}
 .theme-dark {
 	--visualizer-grid-empty-foreground: #f0f0f0;
 }
@@ -5,6 +8,10 @@
 	--visualizer-grid-empty-foreground: #000000;
 }
 
+.component-GridVisualizer {
+	background-color: var(--visualizer-grid-background);
+}
+
 .component-Grid {
 	.part-data {
 		border: 1px solid lightgray;

visualization-bundle/src/visualizers/monaco-text-diff-visualizer/MonacoEditor.tsx

@@ -109,7 +109,7 @@ export class MonacoEditor extends React.Component<{
 
 	render() {
 		return (
-			<div className="component-monaco-editor">
+			<div className="component-monaco-editor-diff-visualizer">
 				<div className="part-editor" ref={this.setEditorDiv} />
 			</div>
 		);

visualization-bundle/src/visualizers/monaco-text-diff-visualizer/style.scss

@@ -1,4 +1,13 @@
-.component-monaco-editor {
+.themeable {
+	--visualizer-monaco-editor-diff-visualizer-background: var(
+		--visualizer-background
+	);
+}
+
+.component-monaco-editor-diff-visualizer {
+	background-color: var(
+		--visualizer-monaco-editor-diff-visualizer-background
+	);
 	width: 100%;
 	height: 100%;
 	min-width: 0;

visualization-bundle/src/visualizers/monaco-text-visualizer/style.scss

@@ -1,4 +1,9 @@
+.themeable {
+	--visualizer-monaco-editor-background: var(--visualizer-background);
+}
+
 .component-monaco-editor {
+	background-color: var(--visualizer-monaco-editor-background);
 	width: 100%;
 	height: 100%;
 	min-width: 0;

visualization-bundle/src/visualizers/simple-text-visualizer/index.tsx

@@ -46,6 +46,8 @@ export const simpleTextVisualizer = createVisualizer({
 						// Use css vars for theming.
 						// See ./style.scss.
 						color: "var(--visualizer-simple-text-color)",
+						background: "var(--visualizer-simple-text-background)",
+						height: "100%",
 					}}
 				>
 					{data.text}

visualization-bundle/src/visualizers/simple-text-visualizer/style.scss

@@ -1,5 +1,8 @@
 // Provide default colors for both the dark and light theme here!
 
+.themeable {
+	--visualizer-simple-text-background: var(--visualizer-background);
+}
 .theme-dark {
 	--visualizer-simple-text-color: white;
 }

visualization-bundle/src/visualizers/tree-visualizer/style.scss

@@ -1,3 +1,7 @@
+.themeable {
+	--visualizer-tree-background: var(--visualizer-background);
+}
+
 .theme-dark {
 	--visualizer-tree-childOrThisMarked-background: orange;
 	--visualizer-tree-childOrThisSelected-background: white;
@@ -124,6 +128,8 @@
 }
 
 .component-TreeWithPathView {
+	background-color: var(--visualizer-tree-background);
+
 	display: flex;
 	flex-direction: column;
 	height: 100%;

visualization-bundle/style.scss

@@ -1,6 +1,9 @@
+@import "./src/vars.scss";
 @import "./src/visualizers/grid-visualizer/style.scss";
 @import "./src/visualizers/simple-text-visualizer/style.scss";
 @import "./src/visualizers/monaco-text-visualizer/style.scss";
+@import "./src/visualizers/monaco-text-diff-visualizer/style.scss";
 @import "./src/visualizers/tree-visualizer/style.scss";
 @import "./src/visualizers/ast-visualizer/style.scss";
 @import "./src/visualizers/svg-visualizer/style.scss";
+@import "./src/visualizers/graph/graph-visjs-visualizer/style.scss";