Start light theme support, improve launch.json

Part of #22

.vscode/launch.json

@@ -1,14 +1,22 @@
-// A launch configuration that launches the extension inside a new window
+// A launch configuration that compiles the extension and then opens it inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 {
-  "version": "0.1.0",
-  "configurations": [
-    {
-      "name": "Launch Extension",
-      "type": "extensionHost",
-      "request": "launch",
-      "runtimeExecutable": "${execPath}",
-      "args": ["--extensionDevelopmentPath=${workspaceRoot}/demo" ],
-      "preLaunchTask": "build"
-    }
-  ]
+	"version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Extension",
+            "type": "extensionHost",
+            "request": "launch",
+            "runtimeExecutable": "${execPath}",
+            "args": [
+                "--extensionDevelopmentPath=${workspaceFolder}/demo"
+            ],
+            "outFiles": [
+                "${workspaceFolder}/out/**/*.js"
+            ],
+            "preLaunchTask": "npm: start"
+        }
+    ]
 }

.vscode/tasks.json

@@ -1,14 +0,0 @@
-{
-  "version": "0.1.0",
-  "command": "npm",
-  "isShellCommand": true,
-  "showOutput": "always",
-  "suppressTaskName": true,
-  "tasks": [
-    {
-      "isBuildCommand": true,
-      "taskName": "build",
-      "args": ["start"]
-    }
-  ]
-}

demo/generate.ts

@@ -12,16 +12,17 @@ const sapphireColors = {
   pink: '#B168DF',
   teal: '#21C5C7',
   grey: '#4A5160'
-}
+};
 
 const sapphireColorSet: IColorSet = {
+  type: 'dark',
   base: {
     background: '#12171f',
     foreground: '#efefef',
     color1: sapphireColors.blue,
     color2: sapphireColors.red,
     color3: sapphireColors.green,
-    color4: sapphireColors.yellow,
+    color4: sapphireColors.yellow
   },
   syntax: {
     identifier: sapphireColors.blueLight,
@@ -56,7 +57,7 @@ const sapphireColorSet: IColorSet = {
     // White with ~10% opacity
     wordHighlight: '#ffffff18',
     wordHighlightStrong: '#ffffff18',
-    activeLinkForeground: sapphireColors.blue,
+    activeLinkForeground: sapphireColors.blue
   },
   terminal: {
     black: '#666666',
@@ -77,32 +78,47 @@ const sapphireColorSet: IColorSet = {
     brightWhite: '#efefef'
   },
   overrides: {
-    "editorError.foreground": "#ff0000"
+    'editorError.foreground': '#ff0000'
   }
 };
 
-const minimalColorSet: IColorSet = {
+const minimalDarkColorSet: IColorSet = {
+  type: 'dark',
   base: {
     background: '#22272f',
     foreground: '#efefef',
     color1: sapphireColors.blue,
     color2: sapphireColors.red,
     color3: sapphireColors.green,
-    color4: sapphireColors.yellow,
-  },
+    color4: sapphireColors.yellow
+  }
+};
+
+const minimalLightColorSet: IColorSet = {
+  type: 'light',
+  base: {
+    background: '#efefff',
+    foreground: '#000011',
+    color1: sapphireColors.blue,
+    color2: sapphireColors.red,
+    color3: sapphireColors.green,
+    color4: sapphireColors.yellow
+  }
 };
 
 const minimalCoverageColorSet: IColorSet = {
+  type: 'dark',
   base: {
     background: '#FF0000',
     foreground: '#0000FF',
     color1: '#00FF00',
     color2: '#00FF00',
     color3: '#00FF00',
-    color4: '#00FF00',
-  },
+    color4: '#00FF00'
+  }
 };
 
 generateTheme('Generated Theme', sapphireColorSet, path.join(__dirname, 'theme.json'));
-generateTheme('Generated Theme (minimal)', minimalColorSet, path.join(__dirname, 'theme-minimal.json'));
+generateTheme('Generated Theme (minimal, dark)', minimalDarkColorSet, path.join(__dirname, 'theme-minimal-dark.json'));
+generateTheme('Generated Theme (minimal, light)', minimalLightColorSet, path.join(__dirname, 'theme-minimal-light.json'));
 generateTheme('Generated Theme (minimal, coverage)', minimalCoverageColorSet, path.join(__dirname, 'theme-minimal-coverage.json'));

demo/package.json

@@ -14,9 +14,14 @@
         "path": "./theme.json"
       },
       {
-        "label": "Generated Theme (Minimal)",
+        "label": "Generated Theme (Minimal, Dark)",
         "uiTheme": "vs-dark",
-        "path": "./theme-minimal.json"
+        "path": "./theme-minimal-dark.json"
+      },
+      {
+        "label": "Generated Theme (Minimal, Light)",
+        "uiTheme": "vs",
+        "path": "./theme-minimal-light.json"
       },
       {
         "label": "Generated Theme (Minimal, coverage)",

src/color.ts

@@ -38,8 +38,9 @@ export function addAlpha(color: string, alpha: number): string {
   return color + alphaHex;
 }
 
-export function generateFallbackColorSet(s: IBaseColorSet): IColorSet {
+export function generateFallbackColorSet(s: IBaseColorSet, type: 'light' | 'dark'): IColorSet {
   return {
+    type,
     base: {
       background: null,
       foreground: null,
@@ -52,12 +53,12 @@ export function generateFallbackColorSet(s: IBaseColorSet): IColorSet {
       boolean: s.color1,
       function: s.color3,
       functionCall: s.color4,
-      identifier: lighten(s.color1, 0.5),
+      identifier: (type === 'light' ? darken : lighten)(s.color1, 0.5),
       keyword: s.color1,
       number: s.color4,
       storage: s.color1,
       string: s.color2,
-      comment: lighten(s.background, 2.0),
+      comment: (type === 'light' ? darken : lighten)(s.background, 2.0),
       class: s.color3,
       classMember: s.color3,
       type: s.color3,
@@ -69,8 +70,8 @@ export function generateFallbackColorSet(s: IBaseColorSet): IColorSet {
     },
     ui: {
       cursor: null,
-      invisibles: lighten(s.background, 0.2),
-      guide: lighten(s.background, 0.2),
+      invisibles: (type === 'light' ? darken : lighten)(s.background, 0.2),
+      guide: (type === 'light' ? darken : lighten)(s.background, 0.2),
       lineHighlight: null,
       findMatchHighlight: null,
       currentFindMatchHighlight: null,

src/interfaces.ts

@@ -14,6 +14,7 @@ export interface IBaseColorSet  {
 }
 
 export interface IColorSet {
+  type: 'light' | 'dark';
   base: IBaseColorSet;
   syntax?: {
     boolean?: string;

src/vscodeThemeGenerator.ts

@@ -16,7 +16,7 @@ export class VscodeThemeGenerator implements IThemeGenerator {
     if (!colorSet.terminal) colorSet.terminal = {};
     if (!colorSet.ui) colorSet.ui = {};
 
-    const fallbackColorSet = generateFallbackColorSet(colorSet.base);
+    const fallbackColorSet = generateFallbackColorSet(colorSet.base, colorSet.type);
 
     const theme: IVscodeJsonTheme = {
       name: name,
@@ -51,11 +51,11 @@ export class VscodeThemeGenerator implements IThemeGenerator {
   }
 
   private _applyWorkbenchColors(theme: IVscodeJsonTheme,  colorSet: IColorSet): void {
-    const background1 = darken(colorSet.base.background, 0.2);
+    const background1 = (colorSet.type === 'light' ? lighten : darken)(colorSet.base.background, 0.2);
     const background2 = colorSet.base.background;
-    const background3 = lighten(colorSet.base.background, 0.2);
-    const background4 = lighten(colorSet.base.background, 0.4);
-    const background5 = lighten(colorSet.base.background, 0.6);
+    const background3 = (colorSet.type === 'light' ? darken : lighten)(colorSet.base.background, 0.2);
+    const background4 = (colorSet.type === 'light' ? darken : lighten)(colorSet.base.background, 0.4);
+    const background5 = (colorSet.type === 'light' ? darken : lighten)(colorSet.base.background, 0.6);
 
     // Contrast colors
     // contrastActiveBorder: An extra border around active elements to separate them from others for greater contrast.