vh/vscode-theme-generator
1
0
Fork 0
mirror of https://github.com/Tyriar/vscode-theme-generator.git synced 2026-03-30 23:03:15 -07:00
Code Issues Actions Packages Projects Releases Wiki Activity

Start implementing fallback colors

Browse Source
This commit is contained in:
Daniel Imms
2017-03-22 23:02:19 -07:00
parent e9f5bc13ab
commit c9e5b483fc
6 changed files with 72 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -29,7 +29,7 @@ Support below means that the editor has explicit support for the languages; the
npm run dev npm run dev
# In another shell # In another shell
npm run demo npm start
``` ```
Them in VS Code press <kbd>F5</kbd> to launch the debugger with the generated theme available to switch to. Them in VS Code press <kbd>F5</kbd> to launch the debugger with the generated theme available to switch to.

11
demo/generate.ts
View File

@@ -15,6 +15,14 @@ const sapphireColors = {
} }
const sapphireColorSet: IColorSet = { const sapphireColorSet: IColorSet = {
base: {
background: '#12171f',
foreground: '#efefef',
accent1: sapphireColors.blue,
accent2: sapphireColors.red,
accent3: sapphireColors.green,
accent4: sapphireColors.yellow,
},
syntax: { syntax: {
identifier: sapphireColors.blueLight, identifier: sapphireColors.blueLight,
string: sapphireColors.red, string: sapphireColors.red,
@@ -35,9 +43,6 @@ const sapphireColorSet: IColorSet = {
markdownQuote: '#c0c0c0' markdownQuote: '#c0c0c0'
}, },
ui: { ui: {
background: '#12171f',
foreground: '#efefef',
accent: '#0a0d12',
cursor: '#ffffff', cursor: '#ffffff',
guide: '#263040', guide: '#263040',
invisibles: '#263040', invisibles: '#263040',

3
package.json
View File

@@ -5,7 +5,8 @@
"main": "dist/index.js", "main": "dist/index.js",
"scripts": { "scripts": {
"dev": "tsc -w", "dev": "tsc -w",
"demo": "tsc demo/generate.ts && node demo/generate.js" "prestart": "tsc demo/generate.ts",
"start": "node demo/generate.js"
}, },
"author": "Tyriar", "author": "Tyriar",
"license": "MIT", "license": "MIT",

43
src/index.ts
View File

@@ -1,50 +1,11 @@
import * as fs from 'fs'; import * as fs from 'fs';
import * as path from 'path'; import * as path from 'path';
import { IColorSet } from './themeGenerator' import { IColorSet } from './interfaces'
import { VscodeThemeGenerator } from './vscodeThemeGenerator' 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) { export function generateTheme(themeName: string, colorSet: IColorSet, outputFile: string) {
const themeJson = new VscodeThemeGenerator().generateTheme(themeName, colorSet); const themeJson = new VscodeThemeGenerator().generateTheme(themeName, colorSet);
fs.writeFileSync(outputFile, themeJson); fs.writeFileSync(outputFile, themeJson);
} }
export { IColorSet } from './themeGenerator'; export { IColorSet } from './interfaces';

51
src/themeGenerator.ts → src/interfaces.ts
View File

@@ -3,6 +3,16 @@ export interface IThemeGenerator {
} }
export interface IColorSet { 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?: { syntax?: {
boolean?: string; boolean?: string;
function?: string; function?: string;
@@ -24,12 +34,6 @@ export interface IColorSet {
markdownQuote?: string; markdownQuote?: string;
} }
ui?: { 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 */ /** The color of the editor cursor/caret */
cursor?: string; cursor?: string;
/** Visible whitespace (editor.renderWhitespace) */ /** Visible whitespace (editor.renderWhitespace) */
@@ -51,22 +55,23 @@ export interface IColorSet {
wordHighlight?: string; wordHighlight?: string;
wordHighlightStrong?: string; wordHighlightStrong?: string;
activeLinkForeground?: string; activeLinkForeground?: string;
},
ansiBlack?: string; terminal: {
ansiRed?: string; black?: string;
ansiGreen?: string; red?: string;
ansiYellow?: string; green?: string;
ansiBlue?: string; yellow?: string;
ansiMagenta?: string; blue?: string;
ansiCyan?: string; magenta?: string;
ansiWhite?: string; cyan?: string;
ansiBrightBlack?: string; white?: string;
ansiBrightRed?: string; brightBlack?: string;
ansiBrightGreen?: string; brightRed?: string;
ansiBrightYellow?: string; brightGreen?: string;
ansiBrightBlue?: string; brightYellow?: string;
ansiBrightMagenta?: string; brightBlue?: string;
ansiBrightCyan?: string; brightMagenta?: string;
ansiBrightWhite?: string; brightCyan?: string;
brightWhite?: string;
} }
} }

63
src/vscodeThemeGenerator.ts
View File

@@ -1,4 +1,4 @@
import { IColorSet, IThemeGenerator } from './themeGenerator' import { IColorSet, IThemeGenerator } from './interfaces'
export interface IVscodeJsonTheme { export interface IVscodeJsonTheme {
name?: string; name?: string;
@@ -94,13 +94,13 @@ function getFontStyleGenerator(name: string, scope: string, fontStyle: number =
const vscodeJsonGlobalThemeRules: IRuleGenerator[] = [ const vscodeJsonGlobalThemeRules: IRuleGenerator[] = [
// Global settings // Global settings
{ source: set => set.ui.background, generate: getGlobalSettingGenerator('background') }, { source: set => set.base.background, generate: getGlobalSettingGenerator('background') },
{ source: set => set.ui.foreground, generate: getGlobalSettingGenerator('foreground') } { source: set => set.base.foreground, generate: getGlobalSettingGenerator('foreground') }
]; ];
const vscodeColorRules: IRuleGenerator[] = [ const vscodeColorRules: IRuleGenerator[] = [
{ source: set => set.ui.background, generate: getGlobalSettingGenerator('editorBackground') }, { source: set => set.base.background, generate: getGlobalSettingGenerator('editorBackground') },
{ source: set => set.ui.foreground, generate: getGlobalSettingGenerator('editorForeground') }, { source: set => set.base.foreground, generate: getGlobalSettingGenerator('editorForeground') },
{ source: set => set.ui.cursor, generate: getGlobalSettingGenerator('editorCaret') }, { source: set => set.ui.cursor, generate: getGlobalSettingGenerator('editorCaret') },
{ source: set => set.ui.guide, generate: getGlobalSettingGenerator('editorGuide') }, { source: set => set.ui.guide, generate: getGlobalSettingGenerator('editorGuide') },
{ source: set => set.ui.invisibles, generate: getGlobalSettingGenerator('editorInvisibles') }, { 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.wordHighlight, generate: getGlobalSettingGenerator('editorWordHighlight') },
{ source: set => set.ui.wordHighlightStrong, generate: getGlobalSettingGenerator('editorWordHighlightStrong') }, { source: set => set.ui.wordHighlightStrong, generate: getGlobalSettingGenerator('editorWordHighlightStrong') },
{ source: set => set.ui.activeLinkForeground, generate: getGlobalSettingGenerator('editorActiveLinkForeground') }, { source: set => set.ui.activeLinkForeground, generate: getGlobalSettingGenerator('editorActiveLinkForeground') },
{ source: set => set.ui.ansiBlack, generate: getGlobalSettingGenerator('terminalAnsiBlack') }, // Terminal
{ source: set => set.ui.ansiRed, generate: getGlobalSettingGenerator('terminalAnsiRed') }, { source: set => set.terminal.black, generate: getGlobalSettingGenerator('terminalAnsiBlack') },
{ source: set => set.ui.ansiGreen, generate: getGlobalSettingGenerator('terminalAnsiGreen') }, { source: set => set.terminal.red, generate: getGlobalSettingGenerator('terminalAnsiRed') },
{ source: set => set.ui.ansiYellow, generate: getGlobalSettingGenerator('terminalAnsiYellow') }, { source: set => set.terminal.green, generate: getGlobalSettingGenerator('terminalAnsiGreen') },
{ source: set => set.ui.ansiBlue, generate: getGlobalSettingGenerator('terminalAnsiBlue') }, { source: set => set.terminal.yellow, generate: getGlobalSettingGenerator('terminalAnsiYellow') },
{ source: set => set.ui.ansiMagenta, generate: getGlobalSettingGenerator('terminalAnsiMagenta') }, { source: set => set.terminal.blue, generate: getGlobalSettingGenerator('terminalAnsiBlue') },
{ source: set => set.ui.ansiCyan, generate: getGlobalSettingGenerator('terminalAnsiCyan') }, { source: set => set.terminal.magenta, generate: getGlobalSettingGenerator('terminalAnsiMagenta') },
{ source: set => set.ui.ansiWhite, generate: getGlobalSettingGenerator('terminalAnsiWhite') }, { source: set => set.terminal.cyan, generate: getGlobalSettingGenerator('terminalAnsiCyan') },
{ source: set => set.ui.ansiBrightBlack, generate: getGlobalSettingGenerator('terminalAnsiBrightBlack') }, { source: set => set.terminal.white, generate: getGlobalSettingGenerator('terminalAnsiWhite') },
{ source: set => set.ui.ansiBrightRed, generate: getGlobalSettingGenerator('terminalAnsiBrightRed') }, { source: set => set.terminal.brightBlack, generate: getGlobalSettingGenerator('terminalAnsiBrightBlack') },
{ source: set => set.ui.ansiBrightGreen, generate: getGlobalSettingGenerator('terminalAnsiBrightGreen') }, { source: set => set.terminal.brightRed, generate: getGlobalSettingGenerator('terminalAnsiBrightRed') },
{ source: set => set.ui.ansiBrightYellow, generate: getGlobalSettingGenerator('terminalAnsiBrightYellow') }, { source: set => set.terminal.brightGreen, generate: getGlobalSettingGenerator('terminalAnsiBrightGreen') },
{ source: set => set.ui.ansiBrightBlue, generate: getGlobalSettingGenerator('terminalAnsiBrightBlue') }, { source: set => set.terminal.brightYellow, generate: getGlobalSettingGenerator('terminalAnsiBrightYellow') },
{ source: set => set.ui.ansiBrightMagenta, generate: getGlobalSettingGenerator('terminalAnsiBrightMagenta') }, { source: set => set.terminal.brightBlue, generate: getGlobalSettingGenerator('terminalAnsiBrightBlue') },
{ source: set => set.ui.ansiBrightCyan, generate: getGlobalSettingGenerator('terminalAnsiBrightCyan') }, { source: set => set.terminal.brightMagenta, generate: getGlobalSettingGenerator('terminalAnsiBrightMagenta') },
{ source: set => set.ui.ansiBrightWhite, generate: getGlobalSettingGenerator('terminalAnsiBrightWhite') }, { 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 // 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# 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.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.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 { export class VscodeThemeGenerator implements IThemeGenerator {
@@ -258,16 +259,14 @@ export class VscodeThemeGenerator implements IThemeGenerator {
} }
}); });
if (colorSet.ui.background) { theme.colors['tabsContainerBackground'] = this._lighten(colorSet.base.background, 0.2);
theme.colors['tabsContainerBackground'] = this._lighten(colorSet.ui.background, 0.2); theme.colors['inactiveTabBackground'] = this._lighten(colorSet.base.background, 0.4);
theme.colors['inactiveTabBackground'] = this._lighten(colorSet.ui.background, 0.4); theme.colors['sideBarBackground'] = this._lighten(colorSet.base.background, 0.2);
theme.colors['sideBarBackground'] = this._lighten(colorSet.ui.background, 0.2); theme.colors['panelBackground'] = this._lighten(colorSet.base.background, 0.2);
theme.colors['panelBackground'] = this._lighten(colorSet.ui.background, 0.2); theme.colors['activityBarBackground'] = this._lighten(colorSet.base.background, 0.4);
theme.colors['activityBarBackground'] = this._lighten(colorSet.ui.background, 0.4); theme.colors['statusBarBackground'] = this._darken(colorSet.base.background, 0.2);
theme.colors['statusBarBackground'] = this._darken(colorSet.ui.background, 0.2); // Peek editor
// Peek editor theme.colors['editorPeekEditorBackground'] = this._darken(colorSet.base.background, 0.2);
theme.colors['editorPeekEditorBackground'] = this._darken(colorSet.ui.background, 0.2);
}
return JSON.stringify(theme); return JSON.stringify(theme);
} }