#161 added theme color override for custom themes

+ set grid padding to 2px
+ larger grid scrollbars (18px)

Author: RandomFractals

src/data.preview.ts

@@ -179,7 +179,7 @@ export class DataPreview {
       scripts: scriptsPath,
       styles: stylesPath,
       theme: this.theme,
-      themeColor: (this.theme === 'material') ? '#eee' : '#2f3136', // light/dark themes viewer background color
+      themeColor: this.themeColor,
       charts: this._charts
     });
 
@@ -829,6 +829,20 @@ export class DataPreview {
     return dataViewTheme;
   }
 
+  /** 
+   * Gets UI theme color for the Data View dropdowns background color override.
+   */
+  get themeColor(): string {
+    let themeColor: string = '#eee'; // default light theme color
+    if (this.theme.endsWith('.dark')) {
+      themeColor = '#2f3136';
+    }
+    else {
+      themeColor = 'none'; // for the custom themes
+    }
+    return themeColor;
+  }
+
   /**
    * Gets charts plugin preference for Data Preview display from workspace config.
    * see package.json 'configuration' section for more info.

templates/data.view.html

@@ -98,10 +98,11 @@
         background-color: var(--vscode-editor-background);
       }
       perspective-viewer {
-        --select--color: var(--vscode-editor-foreground);
-        --select--background-color: var(--vscode-editor-background);
+        /* --select--color: var(--vscode-editor-foreground); */
+        /* --select--background-color: var(--vscode-editor-background); */
         --select--padding: 0px 5px 0px 5px;
-        --hypergrid-scrollbar--width: 12px;
+        --hypergrid--padding: 2px;
+        --hypergrid-scrollbar--width: 18px;
         --hypergrid-scrollbar--border-radius: 0px;
       }
     </style>