Pick up VS Code theme, fixes #228 (#267)

* Pick up VS Code theme, fixes #228

* Comments

resources/graphClient/graphClient.css

@@ -12,12 +12,26 @@
 html {
     width: 100%;
     height: 100%;
+
+    /*
+    NOTE:
+
+        var(--background-color) and var(--color)
+            - Picked up at runtime and represent the theme background and foreground colors
+        var(--graph-background-color) and var(--graph-color):
+            Specifically just for the graph itself, regardless of theme
+    */
+
+    --graph-background-color: black;
+    --graph-color: #ccc;
+    --graph-border:  #454545 1px solid;
+    --button-background-color: #0e639c;
+    --button-color: white;
+    --tab-underline-color: #0072c6;
 }
 
 body {
     font-family: Arial, Helvetica, sans-serif;
-    background: #1e1e1e;
-    color: #cccccc;
     font-size: 16px;
     box-sizing: border-box;
     padding: 0px 10px 10px;
@@ -43,7 +57,7 @@ body {
 }
 
 h1 {
-    color: white;
+    color: var(--color);
     font-weight: 100;
 }
 
@@ -69,7 +83,6 @@ h1 span {
 
 #debug {
     margin-bottom: 0;
-    color: white;
 }
 
 .vertex {
@@ -101,7 +114,7 @@ h1 span {
 #resultsBackground {
     width: 100%;
     height: calc(100% - 198px);
-    background: #222;
+    background: var(--graph-background-color);
 }
 
 .error {
@@ -121,6 +134,7 @@ h1 span {
 }
 
 #debug h2 {
+    background: white;
     color: red;
 }
 
@@ -130,13 +144,15 @@ h1 span {
     height: 25px;
     border: 0;
     padding: 10px 15px;
-    background: #333;
-    color: white;
+
+    /* Intentionally inverted*/
+    color: var(--background-color);
+    background-color: var(--color);
 }
 
 button {
-    background: #0e639c;
-    color: white;
+    background: var(--button-background-color);
+    color: var(--button-color);
     padding: 10px 25px;
     border: 0;
     height: 25px;
@@ -158,11 +174,17 @@ button:active {
 textarea {
     resize: none;
     font-size: 14px;
+    color: var(--background-color);
+    background-color: var(--color);
 }
 
 #jsonResults {
     width: 100%;
     height: 100%;
+    height: -webkit-fill-available;
+    color: var(--background-color);
+    background-color: var(--color);
+    border: 0;
 }
 
 /* Style radio buttons to look like underlined toggles */
@@ -181,7 +203,6 @@ textarea {
 }
 
 .toggle-radio-buttons label {
-    color:#aaa;
     padding-bottom: 3px;
     border-bottom: 3px transparent solid;
     margin-right: 18px;
@@ -194,16 +215,9 @@ textarea {
 }
 
 .toggle-radio-buttons input[type="radio"]:checked:not([disabled]) + label {
-    color:white;
+    color: var(--color);
     padding-bottom: 3px;
-    border-bottom-color:  #0072c6;
-}
-
-#jsonResults {
-    height: -webkit-fill-available;
-    background: transparent;
-    color: #cccccc;
-    border: 0;
+    border-bottom-color:  var(--tab-underline-color);
 }
 
 #queryWatermark, #graphWatermark {
@@ -214,9 +228,9 @@ textarea {
     height: 38px;
     box-sizing: border-box;
     padding: 12px 15px;
-    color: #cccccc;
-    background: #222;
-    border-top: #454545 1px solid;
+    background: var(--graph-background-color);
+    color: var(--graph-color);
+    border-top: var(--graph-border);
     font-size: 10pt;
 }
 

resources/graphClient/graphClient.html

@@ -94,6 +94,7 @@
 
             window.onload = () => {
                 graphClient.getPageState();
+                graphClient.copyParentStyleSheets();
             }
 
             queryInput.onchange = () => {

src/graph/client/graphClient.ts

@@ -199,6 +199,15 @@ export class GraphClient {
     this._socket.emitToHost('getPageState');
   }
 
+  public copyParentStyleSheets() {
+    // Copy style sheets from parent to pick up theme colors
+    var head = document.getElementsByTagName("head")[0];
+    var styleSheets = parent.document.getElementsByTagName("style");
+    for (var i = 0; i < styleSheets.length; ++i) {
+      head.insertBefore(styleSheets[i].cloneNode(true), head.firstChild);
+    }
+  }
+
   public query(gremlin: string) {
     this._currentQueryId += 1;
     this._socket.emitToHost("query", this._currentQueryId, gremlin);