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#C9C8BA
  • activityBar.foreground#000000
  • activityBarBadge.background#666666
  • activityBarBadge.foreground#EDEBDE
  • badge.background#666666
  • badge.foreground#EDEBDE
  • editor.background#DFDED6
  • editor.foreground#000000
  • editor.inactiveSelectionBackground#E5EBF1
  • editor.lineHighlightBorder#D9D8CE
  • editor.selectionHighlightBackground#ADD6FF4D
  • editorGroupHeader.tabsBackground#D3D3D3
  • editorIndentGuide.background#D3D3D3
  • editorLineNumber.foreground#666666
  • editorSuggestWidget.background#F3F3F3
  • gitDecoration.addedResourceForeground#b25ebd
  • gitDecoration.conflictingResourceForeground#cc0000
  • gitDecoration.deletedResourceForeground#880088
  • gitDecoration.ignoredResourceForeground#5e5c46
  • gitDecoration.modifiedResourceForeground#6f1616
  • gitDecoration.submoduleResourceForeground#666666
  • gitDecoration.untrackedResourceForeground#B95C00
  • list.activeSelectionBackground#DDDDDD
  • list.activeSelectionForeground#000000
  • list.focusBackground#DDDDDD
  • list.hoverBackground#DDDDDD
  • list.inactiveSelectionBackground#D3D2C7
  • list.inactiveSelectionForeground#000000
  • panel.background#DDDDDD
  • panel.border#666666
  • panelTitle.activeBorder#666666
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#666666
  • sideBar.background#E3E2DB
  • sideBar.border#666666
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#C9C8BA
  • 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#0074C1
constant.language#0074C1italic
entity.other.attribute-name.html#824A13
meta.tag.sgml.doctype.html#880000
entity.name.tag.structure.any.html, entity.name.tag, punctuation.definition.tag#000088
comment#005800
comment.block.html#005800
entity.name.selector#872D05
invalid#959595italic bold
string#880000
string.regexp, constant.regexp#880000
string.regexp.js punctuation.definition.string.begin.js, string.regexp.js punctuation.definition.string.end.js#0074C1bold
string.regexp.js keyword.operator.quantifier.regexp#000000bold
keyword.control#000088
keyword.operator#000000
keyword.operator.expression.delete.js#000000italic
variable#880000
support.function#000000
storage.type, storage.type.function#000088
entity.name.function, entity.name.type, variable.other.constant.object, support.class.console, support.class#880000bold
entity.name.function, support.function#880000
entity.name.function#880000
support.class.builtin, support.constant.math#000000bold
keyword.operator.new#000000
variable.language.this#000000bold
variable.parameter#000000
variable.other.readwrite, variable.other.object#824a13
variable.other.property#000000
meta.array.literal variable.other.readwrite#000000
storage.type.class, storage.modifier#000088
entity.name.type.class, variable.other.readwrite.alias#880000bold
entity.other.inherited-class#880000
entity.name.type.module#000000
keyword.control.export, keyword.control.default#000000bold
support.type.object.module#000088bold
meta.object-literal.key#000000
support.function.console.js#000000
support.class.component.js#000088
entity.name.tag.localname.xml#000088
entity.name.variable.local.cs#824a13
storage.modifier.cs#000000
entity.name.function.cs#880000bold
entity.name.type.namespace.cs#000088bold
keyword.type.cs#000088
keyword.other.class.cs#000000bold
entity.name.type.class.cs#880000bold
storage.type.cs#000088
storage.type.class.python#000088
entity.name.type.class.python#880000
variable.language.special.self.python#000000bold
meta.function-call.generic.python#880000
support.type.property-name.json#000088
storage.type.js, storage.type.function.js#000088
entity.name.function.js, entity.name.type.js, variable.other.constant.object.js, support.class.console.js, support.class.js#880000bold
meta.function-call.js entity.name.function.js, meta.function-call.js support.function.js#000000
source.js meta.var.expr.js meta.function-call.js support.function.js#000000
meta.object-literal.key.js entity.name.function.js#880000
support.class.builtin.js, support.constant.math.js#000000bold
keyword.operator.new.js#000000
variable.language.this.js#000000bold
variable.parameter.js#000000
variable.other.readwrite.js, variable.other.object.js#824a13
variable.other.constant.js#824a13
variable.other.property.js#000000
meta.array.literal.js variable.other.readwrite.js#000000
source.js meta.class.js storage.type.class.js, source.js meta.class.js storage.modifier.js#000088
source.js meta.class.js entity.name.type.class.js, source.js meta.import.js variable.other.readwrite.alias.js#880000bold
source.js meta.import.js constant.language.import-export-all.js#880000
source.js meta.class.js entity.other.inherited-class.js#880000
source.js meta.class.js entity.name.type.module.js#000000
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#000088bold
meta.object-literal.key.js#000000
source.js meta.function.js meta.block.js meta.var.expr.js string.template.js#000000
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#824a13
comment.block.documentation.js storage.type.class.jsdoc#824a13bold
entity.name.tag.css#880000bold
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#880000
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#000000
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#000088
variable.scss, variable.css#000088bold
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#000000
keyword.control.at-rule#000000bold
markup.heading.markdown entity.name.section.markdown#880000bold
markup.heading.markdown punctuation.definition.heading.markdown#880000
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#880000
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#880000
text.html.markdown markup.quote.markdown beginning.punctuation.definition.quote.markdown, text.html.markdown markup.quote.markdown meta.paragraph.markdown#000088italic
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#880000bold
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#0074C1
markup.fenced_code.block.markdown#000088
source.asm.x86_64 constant.language.registers.general-purpose
support.function.builtin.shell#000000
source.shell meta.scope.while-loop.shell string.quoted.double.shell#880000