diff --git a/demo/generate.js b/demo/generate.js new file mode 100644 index 0000000..869375e --- /dev/null +++ b/demo/generate.js @@ -0,0 +1,73 @@ +"use strict"; +var path = require('path'); +var dist_1 = require('../dist'); +var sapphireColors = { + red: '#DA6771', + redLight: '#e5949b', + green: '#4EB071', + greenDim: '#275839', + yellow: '#fff099', + blue: '#399EF4', + blueLight: '#9fcff9', + pink: '#B168DF', + teal: '#21C5C7', + grey: '#4A5160' +}; +var sapphireColorSet = { + syntax: { + identifier: sapphireColors.blueLight, + string: sapphireColors.red, + number: sapphireColors.redLight, + keyword: sapphireColors.blue, + boolean: sapphireColors.blue, + function: sapphireColors.teal, + functionCall: sapphireColors.yellow, + storage: sapphireColors.blue, + comment: sapphireColors.grey, + class: sapphireColors.teal, + classMember: sapphireColors.teal, + type: sapphireColors.green, + this: sapphireColors.blue, + cssClass: sapphireColors.blue, + cssId: sapphireColors.red, + cssTag: sapphireColors.teal, + markdownQuote: '#c0c0c0' + }, + ui: { + background: '#12171f', + foreground: '#efefef', + accent: '#0a0d12', + cursor: '#ffffff', + guide: '#263040', + invisibles: '#263040', + rangeHighlight: '#263040', + // Bright red 50% opacity + findMatchHighlight: '#cb606080', + // Brighter red 50% opacity + currentFindMatchHighlight: '#ff777780', + selection: '#153958', + // Blue 50% opacity + selectionHighlight: '#2b74b380', + // White with ~10% opacity + wordHighlight: '#ffffff18', + wordHighlightStrong: '#ffffff18', + activeLinkForeground: sapphireColors.blue, + ansiBlack: '#666666', + ansiRed: sapphireColors.red, + ansiGreen: sapphireColors.green, + ansiYellow: sapphireColors.yellow, + ansiBlue: sapphireColors.blue, + ansiMagenta: sapphireColors.pink, + ansiCyan: sapphireColors.teal, + ansiWhite: '#efefef', + ansiBrightBlack: '#666666', + ansiBrightRed: sapphireColors.red, + ansiBrightGreen: sapphireColors.green, + ansiBrightYellow: sapphireColors.yellow, + ansiBrightBlue: sapphireColors.blue, + ansiBrightMagenta: sapphireColors.pink, + ansiBrightCyan: sapphireColors.teal, + ansiBrightWhite: '#efefef' + } +}; +dist_1.generateTheme('Sapphire theme', sapphireColorSet, path.join(__dirname, 'theme.json')); diff --git a/demo/generate.ts b/demo/generate.ts new file mode 100644 index 0000000..6cab121 --- /dev/null +++ b/demo/generate.ts @@ -0,0 +1,76 @@ +import * as path from 'path'; +import { generateTheme, IColorSet } from '../dist'; + +const sapphireColors = { + red: '#DA6771', + redLight: '#e5949b', + green: '#4EB071', + greenDim: '#275839', + yellow: '#fff099', + blue: '#399EF4', + blueLight: '#9fcff9', + pink: '#B168DF', + teal: '#21C5C7', + grey: '#4A5160' +} + +const sapphireColorSet: IColorSet = { + syntax: { + identifier: sapphireColors.blueLight, + string: sapphireColors.red, + number: sapphireColors.redLight, + keyword: sapphireColors.blue, + boolean: sapphireColors.blue, + function: sapphireColors.teal, + functionCall: sapphireColors.yellow, + storage: sapphireColors.blue, + comment: sapphireColors.grey, + class: sapphireColors.teal, + classMember: sapphireColors.teal, + type: sapphireColors.green, + this: sapphireColors.blue, + cssClass: sapphireColors.blue, + cssId: sapphireColors.red, + cssTag: sapphireColors.teal, + markdownQuote: '#c0c0c0' + }, + ui: { + background: '#12171f', + foreground: '#efefef', + accent: '#0a0d12', + cursor: '#ffffff', + guide: '#263040', + invisibles: '#263040', + rangeHighlight: '#263040', + // Bright red 50% opacity + findMatchHighlight: '#cb606080', + // Brighter red 50% opacity + currentFindMatchHighlight: '#ff777780', + selection: '#153958', + // Blue 50% opacity + selectionHighlight: '#2b74b380', + // White with ~10% opacity + wordHighlight: '#ffffff18', + wordHighlightStrong: '#ffffff18', + activeLinkForeground: sapphireColors.blue, + + ansiBlack: '#666666', + ansiRed: sapphireColors.red, + ansiGreen: sapphireColors.green, + ansiYellow: sapphireColors.yellow, + ansiBlue: sapphireColors.blue, + ansiMagenta: sapphireColors.pink, + ansiCyan: sapphireColors.teal, + ansiWhite: '#efefef', + ansiBrightBlack: '#666666', + ansiBrightRed: sapphireColors.red, + ansiBrightGreen: sapphireColors.green, + ansiBrightYellow: sapphireColors.yellow, + ansiBrightBlue: sapphireColors.blue, + ansiBrightMagenta: sapphireColors.pink, + ansiBrightCyan: sapphireColors.teal, + ansiBrightWhite: '#efefef' + } +}; + +generateTheme('Sapphire theme', sapphireColorSet, path.join(__dirname, 'theme.json')); diff --git a/demo/theme.json b/demo/theme.json new file mode 100644 index 0000000..74ddd2c --- /dev/null +++ b/demo/theme.json @@ -0,0 +1 @@ +{"name":"Sapphire theme","tokenColors":[{"name":"Global settings","settings":{"background":"#12171f","foreground":"#efefef"}},{"name":"String","scope":"string","settings":{"foreground":"#DA6771"}},{"name":"Boolean","scope":"constant.language.boolean","settings":{"foreground":"#399EF4"}},{"name":"Number","scope":"constant.numeric","settings":{"foreground":"#e5949b"}},{"name":"Identifier","scope":"variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function","settings":{"foreground":"#9fcff9"}},{"name":"Keyword","scope":"keyword, modifier, variable.language.this, support.type.object, constant.language","settings":{"foreground":"#399EF4"}},{"name":"Function call","scope":"entity.name.function, support.function","settings":{"foreground":"#fff099"}},{"name":"Storage","scope":"storage.type, storage.modifier","settings":{"foreground":"#399EF4"}},{"name":"Modules","scope":"support.module, support.node","settings":{"foreground":"#9fcff9","fontStyle":"italic"}},{"name":"Type","scope":"support.type","settings":{"foreground":"#4EB071"}},{"name":"Type","scope":"entity.name.type, entity.other.inherited-class","settings":{"foreground":"#4EB071"}},{"name":"Comment","scope":"comment","settings":{"foreground":"#4A5160","fontStyle":"italic"}},{"name":"Class","scope":"entity.name.type.class","settings":{"foreground":"#21C5C7","fontStyle":"underline"}},{"name":"Class variable","scope":"variable.object.property","settings":{"foreground":"#21C5C7"}},{"name":"Class method","scope":"meta.definition.method entity.name.function","settings":{"foreground":"#21C5C7"}},{"name":"Function definition","scope":"meta.function entity.name.function","settings":{"foreground":"#21C5C7"}},{"name":"Template expression","scope":"template.expression.begin, template.expression.end","settings":{"foreground":"#399EF4"}},{"name":"YAML key","scope":"entity.name.tag.yaml","settings":{"foreground":"#9fcff9"}},{"name":"JSON key","scope":"meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json","settings":{"foreground":"#9fcff9"}},{"name":"JSON constant","scope":"constant.language.json","settings":{"foreground":"#399EF4"}},{"name":"CSS class","scope":"entity.other.attribute-name.class","settings":{"foreground":"#399EF4"}},{"name":"CSS ID","scope":"entity.other.attribute-name.id","settings":{"foreground":"#DA6771"}},{"name":"CSS tag","scope":"source.css entity.name.tag","settings":{"foreground":"#21C5C7"}},{"name":"HTML tag outer","scope":"meta.tag, punctuation.definition.tag","settings":{"foreground":"#399EF4"}},{"name":"HTML tag inner","scope":"entity.name.tag","settings":{"foreground":"#9fcff9"}},{"name":"HTML tag attribute","scope":"entity.other.attribute-name","settings":{"foreground":"#fff099"}},{"name":"Markdown heading","scope":"markup.heading","settings":{"foreground":"#399EF4"}},{"name":"Markdown link text","scope":"text.html.markdown meta.link.inline, meta.link.reference","settings":{"foreground":"#9fcff9"}},{"name":"Markdown block quote","scope":"text.html.markdown markup.quote","settings":{"foreground":"#c0c0c0"}},{"name":"Markdown list item","scope":"text.html.markdown beginning.punctuation.definition.list","settings":{"foreground":"#399EF4"}},{"name":"Markdown italic","scope":"markup.italic","settings":{"foreground":"#9fcff9","fontStyle":"italic"}},{"name":"Markdown bold","scope":"markup.bold","settings":{"foreground":"#9fcff9","fontStyle":"bold"}},{"name":"Markdown bold italic","scope":"markup.bold markup.italic, markup.italic markup.bold","settings":{"foreground":"#9fcff9","fontStyle":"italic bold"}},{"name":"INI property name","scope":"keyword.other.definition.ini","settings":{"foreground":"#9fcff9"}},{"name":"INI section title","scope":"entity.name.section.group-title.ini","settings":{"foreground":"#399EF4"}},{"name":"C# class","scope":"source.cs meta.class.identifier storage.type","settings":{"foreground":"#21C5C7","fontStyle":"underline"}},{"name":"C# class method","scope":"source.cs meta.method.identifier entity.name.function","settings":{"foreground":"#21C5C7"}},{"name":"C# function call","scope":"source.cs meta.method-call meta.method, source.cs entity.name.function","settings":{"foreground":"#fff099"}},{"name":"C# type","scope":"source.cs storage.type","settings":{"foreground":"#4EB071"}},{"name":"C# return type","scope":"source.cs meta.method.return-type","settings":{"foreground":"#4EB071"}},{"name":"C# preprocessor","scope":"source.cs meta.preprocessor","settings":{"foreground":"#4A5160"}},{"name":"C# namespace","scope":"source.cs entity.name.type.namespace","settings":{"foreground":"#efefef"}}],"colors":{"editorBackground":"#12171f","editorForeground":"#efefef","editorCaret":"#ffffff","editorGuide":"#263040","editorInvisibles":"#263040","editorFindMatchHighlight":"#cb606080","editorCurrentFindMatchHighlight":"#ff777780","editorRangeHighlight":"#263040","editorSelection":"#153958","editorSelectionHighlight":"#2b74b380","editorWordHighlight":"#ffffff18","editorWordHighlightStrong":"#ffffff18","editorActiveLinkForeground":"#399EF4","terminalAnsiBlack":"#666666","terminalAnsiRed":"#DA6771","terminalAnsiGreen":"#4EB071","terminalAnsiYellow":"#fff099","terminalAnsiBlue":"#399EF4","terminalAnsiMagenta":"#B168DF","terminalAnsiCyan":"#21C5C7","terminalAnsiWhite":"#efefef","terminalAnsiBrightBlack":"#666666","terminalAnsiBrightRed":"#DA6771","terminalAnsiBrightGreen":"#4EB071","terminalAnsiBrightYellow":"#fff099","terminalAnsiBrightBlue":"#399EF4","terminalAnsiBrightMagenta":"#B168DF","terminalAnsiBrightCyan":"#21C5C7","terminalAnsiBrightWhite":"#efefef","tabsContainerBackground":"#151b25","inactiveTabBackground":"#19202b","sideBarBackground":"#151b25","panelBackground":"#151b25","activityBarBackground":"#19202b","statusBarBackground":"#0e1218","editorPeekEditorBackground":"#0e1218"}} \ No newline at end of file diff --git a/package.json b/package.json index 454b2cb..cb222d6 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "theme-generator", + "name": "vscode-theme-generator", "version": "0.0.1", - "description": "Generates editor/terminal themes using a set of colors", + "description": "Easily generate themes for VS Code with only a few colors", "main": "dist/index.js", "scripts": { "build": "tsc", diff --git a/src/index.ts b/src/index.ts index 4c047c5..603886f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -42,78 +42,9 @@ const glacierColorSet: IColorSet = { } }; -const sapphireColors = { - red: '#DA6771', - redLight: '#e5949b', - green: '#4EB071', - greenDim: '#275839', - yellow: '#fff099', - blue: '#399EF4', - blueLight: '#9fcff9', - pink: '#B168DF', - teal: '#21C5C7', - grey: '#4A5160' +export function generateTheme(themeName: string, colorSet: IColorSet, outputFile: string) { + const themeJson = new VscodeThemeGenerator().generateTheme(themeName, colorSet); + fs.writeFileSync(outputFile, themeJson); } -const sapphireColorSet: IColorSet = { - syntax: { - identifier: sapphireColors.blueLight, - string: sapphireColors.red, - number: sapphireColors.redLight, - keyword: sapphireColors.blue, - boolean: sapphireColors.blue, - function: sapphireColors.teal, - functionCall: sapphireColors.yellow, - storage: sapphireColors.blue, - comment: sapphireColors.grey, - class: sapphireColors.teal, - classMember: sapphireColors.teal, - type: sapphireColors.green, - this: sapphireColors.blue, - cssClass: sapphireColors.blue, - cssId: sapphireColors.red, - cssTag: sapphireColors.teal, - markdownQuote: '#c0c0c0' - }, - ui: { - background: '#12171f', - foreground: '#efefef', - accent: '#0a0d12', - cursor: '#ffffff', - guide: '#263040', - invisibles: '#263040', - rangeHighlight: '#263040', - // Bright red 50% opacity - findMatchHighlight: '#cb606080', - // Brighter red 50% opacity - currentFindMatchHighlight: '#ff777780', - selection: '#153958', - // Blue 50% opacity - selectionHighlight: '#2b74b380', - // White with ~10% opacity - wordHighlight: '#ffffff18', - wordHighlightStrong: '#ffffff18', - activeLinkForeground: sapphireColors.blue, - - ansiBlack: '#666666', - ansiRed: sapphireColors.red, - ansiGreen: sapphireColors.green, - ansiYellow: sapphireColors.yellow, - ansiBlue: sapphireColors.blue, - ansiMagenta: sapphireColors.pink, - ansiCyan: sapphireColors.teal, - ansiWhite: '#efefef', - ansiBrightBlack: '#666666', - ansiBrightRed: sapphireColors.red, - ansiBrightGreen: sapphireColors.green, - ansiBrightYellow: sapphireColors.yellow, - ansiBrightBlue: sapphireColors.blue, - ansiBrightMagenta: sapphireColors.pink, - ansiBrightCyan: sapphireColors.teal, - ansiBrightWhite: '#efefef' - } -}; -const themeJson = new VscodeThemeGenerator().generateTheme('Sapphire theme', sapphireColorSet); -const outputFile = path.join(__dirname, '..', 'out', 'theme.json') - -fs.writeFileSync(outputFile, themeJson); +export { IColorSet } from './themeGenerator';