Skip to main content
Coding Theme

Color themes

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.background#CAC6AD
  • activityBar.foreground#111111
  • activityBarBadge.background#666666
  • activityBarBadge.foreground#EDEBDE
  • badge.background#666666
  • badge.foreground#EDEBDE
  • editor.background#CAC6AD
  • editor.foreground#000000
  • editor.inactiveSelectionBackground#E5EBF1
  • editor.lineHighlightBorder#D1CDB8
  • editor.selectionHighlightBackground#ADD6FF4D
  • editorGroupHeader.tabsBackground#D3D3D3
  • editorIndentGuide.background#D3D3D3
  • editorLineNumber.foreground#666666
  • editorSuggestWidget.background#F3F3F3
  • gitDecoration.addedResourceForeground#137CAE
  • gitDecoration.conflictingResourceForeground#cc0000
  • gitDecoration.deletedResourceForeground#992f94
  • gitDecoration.ignoredResourceForeground#352f99
  • gitDecoration.modifiedResourceForeground#8c302b
  • gitDecoration.submoduleResourceForeground#666666
  • gitDecoration.untrackedResourceForeground#B95C00
  • list.activeSelectionBackground#DDDDDD
  • list.activeSelectionForeground#111111
  • list.focusBackground#c2c2c2
  • list.hoverBackground#c2c2c2
  • list.inactiveSelectionBackground#CAC6AD
  • list.inactiveSelectionForeground#000000
  • panel.background#c2c2c2
  • panel.border#666666
  • panelTitle.activeBorder#666666
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#666666
  • sideBar.background#DBD8C8
  • sideBar.border#666666
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#CAC6AD
  • sideBarSectionHeader.foreground#000000
  • sideBarTitle.foreground#000000
  • tab.activeForeground#000000
  • tab.inactiveBackground#E0E0E0
  • tab.inactiveForeground#333333
  • terminal.ansiBrightGreen#009100
  • terminal.ansiBrightYellow#B95C00
  • terminal.ansiGreen#005800
  • terminal.border#666666
  • terminalCursor.foreground#ADADAD

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.numeric#137CAE
constant.language#137CAEitalic
entity.other.attribute-name#992f94
meta.tag.sgml.doctype.html#8c302b
entity.name.tag.structure.any.html, entity.name.tag, punctuation.definition.tag#352f99
comment#005800
comment.block.html#005800
entity.name.selector#8c302b
invalid#959595italic bold
string#8c302b
string.regexp, constant.regexp#8c302b
string.regexp.js punctuation.definition.string.begin.js, string.regexp.js punctuation.definition.string.end.js#137CAEbold
string.regexp.js keyword.operator.quantifier.regexp#111111bold
keyword.control#352f99
keyword.operator#111111
keyword.operator.expression.delete.js#000000italic
variable#8c302b
support.function#111111
storage.type, storage.type.function#352f99
entity.name.function, entity.name.type, variable.other.constant.object, support.class.console, support.class#8c302bbold
entity.name.function, support.function#8c302b
entity.name.function#8c302b
support.class.builtin, support.constant.math#111111bold
keyword.operator.new#111111
variable.language.this#111111bold
variable.parameter#111111
variable.other.readwrite, variable.other.object#992f94
variable.other.property#111111
meta.array.literal variable.other.readwrite#111111
storage.type.class, storage.modifier#352f99
entity.name.type.class, variable.other.readwrite.alias#8c302bbold
entity.other.inherited-class#8c302b
entity.name.type.module#111111
keyword.control.export, keyword.control.default#111111bold
support.type.object.module#352f99bold
meta.object-literal.key#111111
support.function.console.js#111111
support.class.component.js#352f99
entity.name.tag.localname.xml#352f99
entity.name.variable.local.cs#992f94
storage.modifier.cs#111111
entity.name.function.cs#8c302bbold
entity.name.type.namespace.cs#352f99bold
keyword.type.cs#352f99
keyword.other.class.cs#111111bold
entity.name.type.class.cs#8c302bbold
storage.type.cs#352f99
storage.type.class.python#352f99
entity.name.type.class.python#8c302b
variable.language.special.self.python#111111bold
meta.function-call.generic.python#8c302b
support.type.property-name.json#352f99
storage.type.js, storage.type.function.js#352f99
entity.name.function.js, entity.name.type.js, variable.other.constant.object.js, support.class.console.js, support.class.js#8c302bbold
meta.function-call.js entity.name.function.js, meta.function-call.js support.function.js#111111
source.js meta.var.expr.js meta.function-call.js support.function.js#111111
meta.object-literal.key.js entity.name.function.js#8c302b
support.class.builtin.js, support.constant.math.js#111111bold
keyword.operator.new.js#111111
variable.language.this.js#111111bold
variable.parameter.js#111111
variable.other.readwrite.js, variable.other.object.js#992f94
variable.other.constant.js#992f94
variable.other.property.js#111111
meta.array.literal.js variable.other.readwrite.js#111111
source.js meta.class.js storage.type.class.js, source.js meta.class.js storage.modifier.js#352f99
source.js meta.class.js entity.name.type.class.js, source.js meta.import.js variable.other.readwrite.alias.js#8c302bbold
source.js meta.import.js constant.language.import-export-all.js#8c302b
source.js meta.class.js entity.other.inherited-class.js#8c302b
source.js meta.class.js entity.name.type.module.js#111111
support.function.promise.js#008888italic bold
support.class.promise.js#008888bold
keyword.control.export.js#000000
source.js meta.export.default.js keyword.control.export.js, source.js meta.export.default.js keyword.control.default.js#000000bold
source.js support.type.object.module.js#352f99bold
meta.object-literal.key.js#111111
source.js meta.function.js meta.block.js meta.var.expr.js string.template.js#111111
comment.block.documentation.js, comment.block.documentation.js entity.name.type.instance.jsdoc, entity.name.type.instance.jsdoc, comment.block.documentation.js storage.type.class.jsdoc, comment.block.documentation.js variable.other.object.tsx, comment.block.documentation.js variable.other.readwrite.tsx, comment.block.documentation.js variable.other.property.tsx, comment.block.documentation.js variable.other.jsdoc, comment.block.documentation.js entity.name.function.tsx, comment.block.documentation.js string.quoted.single.tsx, comment.block.documentation.js string.quoted.double.tsx, comment.block.documentation.js punctuation.separator.key-value.tsx#005800
comment.block.documentation.js storage.type.class.jsdoc#005800bold
entity.name.tag.css#8c302bbold
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.class.mixin.scss, entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent-selector.scss, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss, entity.other.attribute-name.attribute.css, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.css, entity.other.attribute-name.scss#8c302b
support.type.property-name.css, meta.property-name.css, meta.property-list.css, source.css, meta.property-name.scss, meta.property-list.scss, source.css.scss, meta.property-list entity.name.tag.css#992f94
support.constant.property-value.css, meta.property-value.scss, meta.property-list.scss, source.css.scss, string.quoted.single.css, meta.property-value.css, meta.property-list.css, source.css, string.quoted.single.scss, variable.scss, source.css.scss, support.constant.font-name.css, constant.numeric.css, keyword.other.unit.px.css#352f99
variable.scss, variable.css#352f99bold
keyword.operator.logical.only.media.css, meta.at-rule.media.header.css, source.css, keyword.control.operator.css.scss, meta.at-rule.media.scss, source.css.scss#111111
keyword.control.at-rule#111111bold
markup.heading.markdown entity.name.section.markdown#8c302bbold
markup.heading.markdown punctuation.definition.heading.markdown#8c302b
text.html.markdown meta.paragraph.markdown markup.inline.raw.string.markdown, text.html.markdown meta.paragraph.markdown markup.bold.markdown, text.html.markdown meta.paragraph.markdown markup.italic.markdown#8c302b
text.html.markdown meta.paragraph.markdown markup.bold.markdownbold
text.html.markdown meta.paragraph.markdown markup.italic.markdownitalic
text.html.markdown meta.paragraph.markdown markup.bold.markdown markup.italic.markdownitalic bold
text.html.markdown meta.separator.markdown, text.html.markdown meta.paragraph.markdown markup.heading.setext.1.markdown, text.html.markdown meta.paragraph.markdown markup.heading.setext.2.markdown#8c302b
text.html.markdown markup.quote.markdown beginning.punctuation.definition.quote.markdown, text.html.markdown markup.quote.markdown meta.paragraph.markdown#352f99italic
markup.list.numbered.markdown meta.paragraph.markdown markup.bold.markdown, markup.list.unnumbered.markdown meta.paragraph.markdown markup.bold.markdownbold
markup.list.numbered.markdown meta.paragraph.markdown markup.italic.markdown, markup.list.unnumbered.markdown meta.paragraph.markdown markup.italic.markdownitalic
string.other.link.title.markdown, string.other.link.description.markdown#8c302bbold
markup.underline.link.markdown, constant.other.reference.link.markdown, punctuation.definition.constant.markdown, punctuation.definition.string.begin.markdown, text.html.markdown meta.paragraph.markdown meta.image.reference.markdown string.other.link.description.markdown#137CAE
markup.fenced_code.block.markdown#352f99
source.asm.x86_64 constant.language.registers.general-purpose
support.function.builtin.shell#111111
source.shell meta.scope.while-loop.shell string.quoted.double.shell#8c302b