Start implementing fallback colors

2025-12-07 09:36:11 -08:00 · 2017-03-22 23:02:19 -07:00
parent e9f5bc13ab
commit c9e5b483fc
6 changed files with 72 additions and 101 deletions
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,50 +1,11 @@
 import * as fs from 'fs';
 import * as path from 'path';
-import { IColorSet } from './themeGenerator'
+import { IColorSet } from './interfaces'
 import { VscodeThemeGenerator } from './vscodeThemeGenerator'

-const colorSet1: IColorSet = {
-  syntax: {
-    identifier: '#ffffff',
-    boolean: '#be84ff',
-    string: '#87d75f',
-    number: '#ffcc66',
-    keyword: '#ff8f7e',
-    functionCall: '#cae682',
-    storage: '#88b8f6',
-    comment: '#989898',
-    class: '#cae682',
-    type: '#88b8f6'
-  },
-  ui: {
-    background: '#151515'
-  }
-};
-
-const glacierColorSet: IColorSet = {
-  syntax: {
-    identifier: '#d73c4d', // Should be bold in Glacier
-    // boolean: '#',
-    string: '#ffe792',
-    // number: '#',
-    keyword: '#d7503c',
-    // functionCall: '#',
-    storage: '#3cadd7',
-    comment: '#515c68',
-    // class: '#',
-    // type: '#',
-    modifier: '#3cadd7'
-  },
-  ui: {
-    background: '#0e151b',
-    foreground: '#efefef',
-    cursor: '#ffe792'
-  }
-};
-
 export function generateTheme(themeName: string, colorSet: IColorSet, outputFile: string) {
  const themeJson = new VscodeThemeGenerator().generateTheme(themeName, colorSet);
  fs.writeFileSync(outputFile, themeJson);
 }

-export { IColorSet } from './themeGenerator';
+export { IColorSet } from './interfaces';
--- a/src/themeGenerator.ts
+++ b/src/themeGenerator.ts
@@ -3,6 +3,16 @@ export interface IThemeGenerator {
 }

 export interface IColorSet {
+  base: {
+    /** The default background color */
+    background: string;
+    /** The default foreground color */
+    foreground: string;
+    accent1: string;
+    accent2: string;
+    accent3: string;
+    accent4: string;
+  },
  syntax?: {
    boolean?: string;
    function?: string;
@@ -24,12 +34,6 @@ export interface IColorSet {
    markdownQuote?: string;
  }
  ui?: {
-    /** The default background color */
-    background?: string;
-    /** The default foreground color */
-    foreground?: string;
-    /** The accent color */
-    accent?: string;
    /** The color of the editor cursor/caret */
    cursor?: string;
    /** Visible whitespace (editor.renderWhitespace) */
@@ -51,22 +55,23 @@ export interface IColorSet {
    wordHighlight?: string;
    wordHighlightStrong?: string;
    activeLinkForeground?: string;
-
-    ansiBlack?: string;
-    ansiRed?: string;
-    ansiGreen?: string;
-    ansiYellow?: string;
-    ansiBlue?: string;
-    ansiMagenta?: string;
-    ansiCyan?: string;
-    ansiWhite?: string;
-    ansiBrightBlack?: string;
-    ansiBrightRed?: string;
-    ansiBrightGreen?: string;
-    ansiBrightYellow?: string;
-    ansiBrightBlue?: string;
-    ansiBrightMagenta?: string;
-    ansiBrightCyan?: string;
-    ansiBrightWhite?: string;
+  },
+  terminal: {
+    black?: string;
+    red?: string;
+    green?: string;
+    yellow?: string;
+    blue?: string;
+    magenta?: string;
+    cyan?: string;
+    white?: string;
+    brightBlack?: string;
+    brightRed?: string;
+    brightGreen?: string;
+    brightYellow?: string;
+    brightBlue?: string;
+    brightMagenta?: string;
+    brightCyan?: string;
+    brightWhite?: string;
  }
 }
--- a/src/vscodeThemeGenerator.ts
+++ b/src/vscodeThemeGenerator.ts
@@ -1,4 +1,4 @@
-import { IColorSet, IThemeGenerator } from './themeGenerator'
+import { IColorSet, IThemeGenerator } from './interfaces'

 export interface IVscodeJsonTheme {
  name?: string;
@@ -94,13 +94,13 @@ function getFontStyleGenerator(name: string, scope: string, fontStyle: number =

 const vscodeJsonGlobalThemeRules: IRuleGenerator[] = [
  // Global settings
-  { source: set => set.ui.background, generate: getGlobalSettingGenerator('background') },
-  { source: set => set.ui.foreground, generate: getGlobalSettingGenerator('foreground') }
+  { source: set => set.base.background, generate: getGlobalSettingGenerator('background') },
+  { source: set => set.base.foreground, generate: getGlobalSettingGenerator('foreground') }
 ];

 const vscodeColorRules: IRuleGenerator[] = [
-  { source: set => set.ui.background, generate: getGlobalSettingGenerator('editorBackground') },
-  { source: set => set.ui.foreground, generate: getGlobalSettingGenerator('editorForeground') },
+  { source: set => set.base.background, generate: getGlobalSettingGenerator('editorBackground') },
+  { source: set => set.base.foreground, generate: getGlobalSettingGenerator('editorForeground') },
  { source: set => set.ui.cursor, generate: getGlobalSettingGenerator('editorCaret') },
  { source: set => set.ui.guide, generate: getGlobalSettingGenerator('editorGuide') },
  { source: set => set.ui.invisibles, generate: getGlobalSettingGenerator('editorInvisibles') },
@@ -113,22 +113,23 @@ const vscodeColorRules: IRuleGenerator[] = [
  { source: set => set.ui.wordHighlight, generate: getGlobalSettingGenerator('editorWordHighlight') },
  { source: set => set.ui.wordHighlightStrong, generate: getGlobalSettingGenerator('editorWordHighlightStrong') },
  { source: set => set.ui.activeLinkForeground, generate: getGlobalSettingGenerator('editorActiveLinkForeground') },
-  { source: set => set.ui.ansiBlack, generate: getGlobalSettingGenerator('terminalAnsiBlack') },
-  { source: set => set.ui.ansiRed, generate: getGlobalSettingGenerator('terminalAnsiRed') },
-  { source: set => set.ui.ansiGreen, generate: getGlobalSettingGenerator('terminalAnsiGreen') },
-  { source: set => set.ui.ansiYellow, generate: getGlobalSettingGenerator('terminalAnsiYellow') },
-  { source: set => set.ui.ansiBlue, generate: getGlobalSettingGenerator('terminalAnsiBlue') },
-  { source: set => set.ui.ansiMagenta, generate: getGlobalSettingGenerator('terminalAnsiMagenta') },
-  { source: set => set.ui.ansiCyan, generate: getGlobalSettingGenerator('terminalAnsiCyan') },
-  { source: set => set.ui.ansiWhite, generate: getGlobalSettingGenerator('terminalAnsiWhite') },
-  { source: set => set.ui.ansiBrightBlack, generate: getGlobalSettingGenerator('terminalAnsiBrightBlack') },
-  { source: set => set.ui.ansiBrightRed, generate: getGlobalSettingGenerator('terminalAnsiBrightRed') },
-  { source: set => set.ui.ansiBrightGreen, generate: getGlobalSettingGenerator('terminalAnsiBrightGreen') },
-  { source: set => set.ui.ansiBrightYellow, generate: getGlobalSettingGenerator('terminalAnsiBrightYellow') },
-  { source: set => set.ui.ansiBrightBlue, generate: getGlobalSettingGenerator('terminalAnsiBrightBlue') },
-  { source: set => set.ui.ansiBrightMagenta, generate: getGlobalSettingGenerator('terminalAnsiBrightMagenta') },
-  { source: set => set.ui.ansiBrightCyan, generate: getGlobalSettingGenerator('terminalAnsiBrightCyan') },
-  { source: set => set.ui.ansiBrightWhite, generate: getGlobalSettingGenerator('terminalAnsiBrightWhite') },
+  // Terminal
+  { source: set => set.terminal.black, generate: getGlobalSettingGenerator('terminalAnsiBlack') },
+  { source: set => set.terminal.red, generate: getGlobalSettingGenerator('terminalAnsiRed') },
+  { source: set => set.terminal.green, generate: getGlobalSettingGenerator('terminalAnsiGreen') },
+  { source: set => set.terminal.yellow, generate: getGlobalSettingGenerator('terminalAnsiYellow') },
+  { source: set => set.terminal.blue, generate: getGlobalSettingGenerator('terminalAnsiBlue') },
+  { source: set => set.terminal.magenta, generate: getGlobalSettingGenerator('terminalAnsiMagenta') },
+  { source: set => set.terminal.cyan, generate: getGlobalSettingGenerator('terminalAnsiCyan') },
+  { source: set => set.terminal.white, generate: getGlobalSettingGenerator('terminalAnsiWhite') },
+  { source: set => set.terminal.brightBlack, generate: getGlobalSettingGenerator('terminalAnsiBrightBlack') },
+  { source: set => set.terminal.brightRed, generate: getGlobalSettingGenerator('terminalAnsiBrightRed') },
+  { source: set => set.terminal.brightGreen, generate: getGlobalSettingGenerator('terminalAnsiBrightGreen') },
+  { source: set => set.terminal.brightYellow, generate: getGlobalSettingGenerator('terminalAnsiBrightYellow') },
+  { source: set => set.terminal.brightBlue, generate: getGlobalSettingGenerator('terminalAnsiBrightBlue') },
+  { source: set => set.terminal.brightMagenta, generate: getGlobalSettingGenerator('terminalAnsiBrightMagenta') },
+  { source: set => set.terminal.brightCyan, generate: getGlobalSettingGenerator('terminalAnsiBrightCyan') },
+  { source: set => set.terminal.brightWhite, generate: getGlobalSettingGenerator('terminalAnsiBrightWhite') },
 ];

 // An ordered list of rules to be applied if the source conditions are met
@@ -220,7 +221,7 @@ const vscodeJsonThemeRules: IRuleGenerator[] = [
  { source: set => set.syntax.type,         generate: getSimpleColorGenerator('C# type',          'source.cs storage.type') },
  { source: set => set.syntax.type,         generate: getSimpleColorGenerator('C# return type',   'source.cs meta.method.return-type') }, // Lambda function returns do not use storage.type scope
  { source: set => set.syntax.comment,      generate: getSimpleColorGenerator('C# preprocessor',  'source.cs meta.preprocessor') },
-  { source: set => set.ui.foreground,       generate: getSimpleColorGenerator('C# namespace',     'source.cs entity.name.type.namespace') } // Override generic entity.name.type rule
+  { source: set => set.base.foreground,     generate: getSimpleColorGenerator('C# namespace',     'source.cs entity.name.type.namespace') } // Override generic entity.name.type rule
 ];

 export class VscodeThemeGenerator implements IThemeGenerator {
@@ -258,16 +259,14 @@ export class VscodeThemeGenerator implements IThemeGenerator {
      }
    });

-    if (colorSet.ui.background) {
-      theme.colors['tabsContainerBackground'] = this._lighten(colorSet.ui.background, 0.2);
-      theme.colors['inactiveTabBackground'] = this._lighten(colorSet.ui.background, 0.4);
-      theme.colors['sideBarBackground'] = this._lighten(colorSet.ui.background, 0.2);
-      theme.colors['panelBackground'] = this._lighten(colorSet.ui.background, 0.2);
-      theme.colors['activityBarBackground'] = this._lighten(colorSet.ui.background, 0.4);
-      theme.colors['statusBarBackground'] = this._darken(colorSet.ui.background, 0.2);
-      // Peek editor
-      theme.colors['editorPeekEditorBackground'] = this._darken(colorSet.ui.background, 0.2);
-    }
+    theme.colors['tabsContainerBackground'] = this._lighten(colorSet.base.background, 0.2);
+    theme.colors['inactiveTabBackground'] = this._lighten(colorSet.base.background, 0.4);
+    theme.colors['sideBarBackground'] = this._lighten(colorSet.base.background, 0.2);
+    theme.colors['panelBackground'] = this._lighten(colorSet.base.background, 0.2);
+    theme.colors['activityBarBackground'] = this._lighten(colorSet.base.background, 0.4);
+    theme.colors['statusBarBackground'] = this._darken(colorSet.base.background, 0.2);
+    // Peek editor
+    theme.colors['editorPeekEditorBackground'] = this._darken(colorSet.base.background, 0.2);

    return JSON.stringify(theme);
  }