#161 added support for new vaporwave hight contrast blue data view UI…

… theme

README.md

@@ -29,7 +29,7 @@
 - Quick Launch new Data Preview input box for data files in open workspace
 - Save Filtered Data Grid || Chart 📊 Data in `.arrow` `.csv` `.json(s)` `.yml` & `.properties` formats
 - Save & Load Data View `.config` options
-- Dark & Light Data Preview 🈸 Panel Themes
+- Dark, Light & High Contrast Blue Data Preview 🈸 Panel Themes
 
 # Next V.
 
@@ -54,7 +54,7 @@ List of Data Preview 🈸 extension config Settings, `data.preview` command(s),
 
 | Setting | Type | Default Value | Description |
 | ------- | ---- | ------------- | ----------- |
-| data.preview.theme | string | dark | Data Preview UI Theme: `dark` or `light` |
+| data.preview.theme | string | dark | Data Preview UI Theme: `dark`, `light`, or `vaporwave` (hight contrast blue theme) |
 | data.preview.charts.plugin | string | d3fc | Data Preview Charts 📊 library to use for built-in charts: [d3fc](https://d3fc.io/) or [highcharts](https://www.highcharts.com/demo) |
 | data.preview.create.json.files | boolean | false | Creates `.json` data files for Arrow, Avro & Excel binary data formats |
 | data.preview.create.json.schema | boolean | true | Creates `.schema.json` files for Arrow & Avro metadata binary data formats |

package.json

@@ -317,10 +317,11 @@
           "type": "string",
           "enum": [
             "light",
-            "dark"
+            "dark",
+            "vaporwave"
           ],
           "default": "dark",
-          "description": "Data Preview UI Theme: light || dark"
+          "description": "Data Preview UI Theme: light, dark || vaporwave (hight constrast blue theme)"
         },
         "data.preview.charts.plugin": {
           "type": "string",

src/data.preview.ts

@@ -179,7 +179,7 @@ export class DataPreview {
       scripts: scriptsPath,
       styles: stylesPath,
       theme: this.theme,
-      themeColor: (this.theme === '.dark') ? '#2f3136': '#eee', // for viewer dropdowns background
+      themeColor: (this.theme === 'material') ? '#eee' : '#2f3136', // light/dark themes viewer background color
       charts: this._charts
     });
 
@@ -820,7 +820,13 @@ export class DataPreview {
    */
   get theme(): string {
     const uiTheme: string = <string>workspace.getConfiguration('data.preview').get('theme');
-    return (uiTheme === 'dark' || uiTheme === '.dark') ? '.dark': ''; // blank for light theme css loading
+    let dataViewTheme: string = 'material'; // default light theme
+    if (uiTheme === 'dark' || uiTheme === '.dark') {
+      dataViewTheme += '.dark'; // material dark theme
+    } else {
+      dataViewTheme = uiTheme; // custom data view theme
+    }
+    return dataViewTheme;
   }
 
   /**

templates/data.view.html

@@ -18,7 +18,7 @@
     <script src="https://unpkg.com/@finos/[email protected]/dist/umd/perspective-viewer.js"></script>
     <script src="{scripts}/perspective-viewer-hypergrid.js"></script>
     <script src="{scripts}/perspective-viewer-{charts}.js"></script>
-    <link rel="stylesheet" href="https://unpkg.com/@finos/[email protected]/dist/umd/material{theme}.css">
+    <link rel="stylesheet" href="https://unpkg.com/@finos/[email protected]/dist/umd/{theme}.css">
     <style>
       body {
         margin: 0px;