Skip to main content
Coding Theme

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.activeBorder#ffc131
  • activityBar.background#000000
  • activityBar.foreground#ffffff
  • activityBarBadge.background#6c6c6c
  • activityBarBadge.foreground#fbff00
  • editor.background#000000
  • editor.lineHighlightBackground#80808008
  • editor.lineHighlightBorder#80808015
  • editor.selectionBackground#00fffb42
  • editor.wordHighlightBackground#00000000
  • editor.wordHighlightBorder#00000000
  • editor.wordHighlightStrongBackground#00000000
  • editor.wordHighlightStrongBorder#00000000
  • editorCursor.background#ffffffff
  • editorError.border#ff000000
  • editorError.foreground#ff0000
  • editorGroup.border#00DDFF
  • editorGroup.dropBackground#00DDFF33
  • editorIndentGuide.activeBackground1#3dff33
  • editorIndentGuide.activeBackground2#3dff33cc
  • editorIndentGuide.activeBackground3#3dff33bb
  • editorIndentGuide.activeBackground4#3dff33aa
  • editorIndentGuide.activeBackground5#3dff3399
  • editorIndentGuide.background1#a9ffa580
  • editorIndentGuide.background2#a9ffa570
  • editorIndentGuide.background3#a9ffa560
  • editorIndentGuide.background4#a9ffa558
  • editorIndentGuide.background5#a9ffa550
  • editorInfo.border#00aaff00
  • editorInfo.foreground#00aaff88
  • editorOverviewRuler.errorForeground#ff0000aa
  • editorOverviewRuler.warningForeground#ffcc00aa
  • editorWarning.border#ffcc0000
  • editorWarning.foreground#ffcc00aa
  • minimap.findMatchHighlight#fff200dd
  • minimap.selectionHighlight#fff200dd
  • minimap.selectionOccurrenceHighlight#fff200dd
  • scrollbarSlider.activeBackground#fffb00
  • scrollbarSlider.background#fffb00a2
  • scrollbarSlider.hoverBackground#fffb00b5
  • sideBar.background#00011e
  • sideBar.border#0080ff
  • tab.activeBackground#3344a8
  • tab.border#3300ff40
  • tab.inactiveBackground#3333
  • terminal.ansiBlack#001233
  • terminal.ansiBlue#0077ff
  • terminal.ansiBrightBlack#de70ff
  • terminal.ansiBrightBlue#33aaff
  • terminal.ansiBrightCyan#66ffff
  • terminal.ansiBrightGreen#77ff00
  • terminal.ansiBrightMagenta#ff77ff
  • terminal.ansiBrightRed#ff0055
  • terminal.ansiBrightWhite#fffcaa
  • terminal.ansiBrightYellow#fffb00
  • terminal.ansiCyan#00ddff
  • terminal.ansiGreen#33ff66
  • terminal.ansiMagenta#ff00aa
  • terminal.ansiRed#ff3366
  • terminal.ansiWhite#c0c0ff
  • terminal.ansiYellow#ffcc00
  • terminal.background#00011e
  • terminal.border#0080ff55
  • terminal.foreground#ffffff
  • terminal.selectionBackground#0066ff77
  • terminalCursor.foreground#ffd5f1
  • titleBar.activeBackground#5c43ff
  • titleBar.activeForeground#ffffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
meta.diff.header#000080
comment#ffffff5b
constant.language#569cd6
constant.numeric, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#b5cea8
constant.regexp#b46695
entity.name.tag#ff8800
entity.name.tag.css#d7ba7d
entity.other.attribute-name#00DDFF
source.css entity.other.attribute-name, source.css.less entity.other.attribute-name.id, source.scss entity.other.attribute-name#d7ba7d
invalid#f44747
markup.underlineunderline
markup.boldbold
markup.heading#6796e6
markup.italicitalic
markup.inserted#b5cea8
markup.deleted#ce9178
markup.changed#569cd6
meta.selector#d7ba7d
punctuation.definition.tag#808080
meta.preprocessor#569cd6
meta.preprocessor.string#ce9178
meta.preprocessor.numeric#b5cea8
meta.structure.dictionary.key.python#9cdcfe
storage#569cd6
storage.type#569cd6
storage.modifier#31cbff
string#ce9178
string.tag#ce9178
string.value#ce9178
string.regexp#d16969
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js#569cd6
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less#d4d4d4
keyword#569cd6
keyword.control#FF73B3italic
keyword.operator#d4d4d4
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python#569cd6
keyword.operator.logical#ff7b00
keyword.operator.assignment#FFEE00
keyword.other.unit#b5cea8
support.function.git-rebase#d4d4d4
constant.sha.git-rebase#b5cea8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language.this#569cd6
entity.name.function, support.function, support.constant.handlebars#FFEE00
storage.type.constructor.ts, storage.type.constructor.tsx, storage.type.constructor.js, entity.name.function.constructor, meta.method.declaration.ts storage.type.ts#FFEE00
meta.class.ts keyword.other.implements, meta.class.tsx keyword.other.implements, meta.class.js keyword.other.implements, storage.modifier.implements, keyword.other.implements, meta.interface-heritage.ts keyword.control.implements, meta.interface-heritage.tsx keyword.control.implements, meta.class storage.modifier.implements#569cd6italic
support.class.interface.ts, entity.name.type.interface.ts, entity.other.inherited-class.ts, meta.interface-heritage.ts entity.name.type#FFEE00italic
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, source.cs storage.type#4EC9B0
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#4EC9B0
variable, meta.definition.variable.name, support.variable#9CDCFE
meta.object-literal.key, meta.object-literal.key entity.name.function#9CDCFE
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#CE9178
punctuation.definition.string.begin#ffee00
punctuation.definition.string.end#ffee00
punctuation.definition.tag.begin#fffb00
punctuation.definition.tag.end#fffb00
punctuation.definition.block#ffee00
string.quoted.double.html#ff93dditalic
string.quoted.single.html#ff93dd
string.quoted.double.ts#84f1ff
string.quoted.single.ts#84f1ff
variable.other.object.ts.embedded.html#D0A9FF
variable.other.property.ts.embedded.html#D0A9FF
variable.other#e4b5fd
constant.language.boolean#FFD700italic
constant.language.boolean.true#FFAA00italic
constant.language.boolean.false#FF6600italic
support.type.primitive, support.type#22D1B0italic
entity.name.type#1EDCAAitalic
entity.name.type.interface, entity.name.type.alias#26E9B6italic
meta.type.parameters#26D9F7italic
punctuation.definition.string.template.begin, string.template punctuation.definition.string.begin, punctuation.definition.string.template.end, string.template punctuation.definition.string.end#FFCC00bold
meta.decorator meta.object.member string.template punctuation#FFCC00bold
punctuation.separator.key-value#FFEE00
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id#ff93dd
support.type.property-name.css#ffdd76
support.constant.property-value.css#33e0ff
punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css, punctuation.separator.key-value.css, punctuation.terminator.rule.css#FFEE00
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#FFEE00
keyword.operator.at.ts#FFFF00bold
punctuation.decorator.control-flow.angular, keyword.control.flow.at-character.angular, meta.block.ts.embedded.html keyword.control.flow.at-character, text.html.derivative keyword.control.flow.at-character#FFFF00bold
punctuation.decorator, meta.decorator.angular-at-block, keyword.control.flow.angular, punctuation.decorator.at-character.angular, meta.block.ts meta.decorator punctuation.decorator, meta.block.ts.embedded.html punctuation.decorator, text.html meta.decorator punctuation.decorator#FFDD00bold
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#FFEE00
punctuation.decorator, meta.decorator.angular-at-block, keyword.control.flow.angular, punctuation.decorator.at-character.angular, meta.block.ts meta.decorator punctuation.decorator, meta.block.ts.embedded.html punctuation.decorator, text.html meta.decorator punctuation.decorator#febe3dbold
support.type.property-name.json#00EEFFitalic
constant.language.json#FFEE00
text.html.derivative, meta.tag.block.any.html text.html, meta.tag.inline.any.html text.html, text.html.angular#FFFFFF
support.function.pipe.angular, entity.name.function.pipe, entity.name.type.pipe, support.type.pipe, meta.object-literal.key.pipe, variable.other.readwrite.ts.pipe, meta.tag.template.angular variable.other.pipe#FFA500italic
keyword.operator#feffac
punctuation.definition.ng-binding-name.begin.html, punctuation.definition.ng-binding-name.end.html, storage.type.function.arrow.ts, punctuation.section.brackets#ffd900
source.dart#41ccff
support.class.dart#ff6d6dbold
entity.name.type.class#ff6d6dbold
savetemin by Ulises Basualdo - VS Code Theme