From 0901714136fa70a92e5533055943759e5a163b0c Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Thu, 26 Apr 2018 12:37:09 -0700 Subject: [PATCH] Start light theme support, improve launch.json Part of #22 --- .vscode/launch.json | 34 +++++++++++++++++++++------------- .vscode/tasks.json | 14 -------------- demo/generate.ts | 36 ++++++++++++++++++++++++++---------- demo/package.json | 9 +++++++-- src/color.ts | 11 ++++++----- src/interfaces.ts | 1 + src/vscodeThemeGenerator.ts | 10 +++++----- 7 files changed, 66 insertions(+), 49 deletions(-) delete mode 100644 .vscode/tasks.json diff --git a/.vscode/launch.json b/.vscode/launch.json index 79f9856..f430e45 100644 --- a/.vscode/launch.json +++ b/.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" + } + ] +} \ No newline at end of file diff --git a/.vscode/tasks.json b/.vscode/tasks.json deleted file mode 100644 index b63b8d6..0000000 --- a/.vscode/tasks.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "version": "0.1.0", - "command": "npm", - "isShellCommand": true, - "showOutput": "always", - "suppressTaskName": true, - "tasks": [ - { - "isBuildCommand": true, - "taskName": "build", - "args": ["start"] - } - ] -} diff --git a/demo/generate.ts b/demo/generate.ts index 0890b04..cf23c04 100644 --- a/demo/generate.ts +++ b/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')); diff --git a/demo/package.json b/demo/package.json index 5fe76b4..a468887 100644 --- a/demo/package.json +++ b/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)", diff --git a/src/color.ts b/src/color.ts index 614443a..61ad505 100644 --- a/src/color.ts +++ b/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, diff --git a/src/interfaces.ts b/src/interfaces.ts index f22d515..2c06932 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -14,6 +14,7 @@ export interface IBaseColorSet { } export interface IColorSet { + type: 'light' | 'dark'; base: IBaseColorSet; syntax?: { boolean?: string; diff --git a/src/vscodeThemeGenerator.ts b/src/vscodeThemeGenerator.ts index 54b3f66..9633806 100644 --- a/src/vscodeThemeGenerator.ts +++ b/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.