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.

  • badge.background#cc3300
  • badge.foreground#EBEBEB
  • button.background#cc3300
  • button.foreground#EBEBEB
  • editor.background#040404
  • editor.foreground#EBEBEB
  • editor.hoverHighlightBackground#6dfae540
  • editor.lineHighlightBackground#FFFFFF11
  • editor.selectionBackground#6dfae540
  • editor.wordHighlightBackground#6dfae540
  • editor.wordHighlightStrongBackground#fcaf2122
  • editorBracketMatch.background#fa5e2a44
  • editorBracketMatch.border#fcaf21
  • editorCursor.foreground#EBEBEB
  • editorGroupHeader.tabsBackground#080808
  • editorIndentGuide.background#1a1a1a
  • editorLineNumber.foreground#444444
  • editorLink.activeForeground#fa5e2a
  • editorRuler.foreground#1a1a1a
  • editorSuggestWidget.foreground#EBEBEB
  • editorSuggestWidget.highlightForeground#fa5e2a
  • editorSuggestWidget.selectedBackground#333333
  • editorWhitespace.foreground#1a1a1a
  • editorWidget.background#1a1a1a
  • editorWidget.border#333333
  • extensionButton.prominentBackground#cc3300
  • extensionButton.prominentForeground#EBEBEB
  • extensionButton.prominentHoverBackground#cc552d
  • focusBorder#ff330088
  • foreground#EBEBEB
  • input.background#000000
  • input.border#666666
  • input.foreground#EBEBEB
  • input.placeholderForeground#2e2e2e
  • inputOption.activeBorder#666666
  • list.activeSelectionBackground#AAAAAA
  • list.activeSelectionForeground#000000
  • list.focusBackground#262626
  • list.hoverBackground#080808
  • list.inactiveSelectionBackground#444444
  • minimap.background#181818
  • panel.background#1e1e1e
  • panel.border#333333
  • panelTitle.activeBorder#ff330088
  • panelTitle.inactiveForeground#595959
  • peekView.border#ff330088
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#fcaf2155
  • peekViewEditorGutter.background#000000
  • peekViewResult.background#0d0d0d
  • peekViewResult.fileForeground#f5f5f5
  • peekViewResult.lineForeground#e6e6e6
  • peekViewResult.matchHighlightBackground#fcaf2155
  • peekViewResult.selectionBackground#050505
  • peekViewResult.selectionForeground#EBEBEB
  • peekViewTitle.background#000000
  • peekViewTitleDescription.foreground#f7f7f7
  • peekViewTitleLabel.foreground#EBEBEB
  • progressBar.background#fa5e2a
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#ff3300aa
  • scrollbarSlider.background#333333aa
  • scrollbarSlider.hoverBackground#ff330055
  • sideBar.background#1e1e1e
  • sideBar.foreground#EBEBEB
  • sideBarSectionHeader.background#141414
  • sideBarSectionHeader.foreground#EBEBEB
  • tab.inactiveBackground#222222
  • tab.inactiveForeground#666666

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#555555—
constant.numeric, constant.language, constant.character, constant.other#19DB76—
variable#EBEBEB—
variable.paramener#BBBBBB—
keyword#4c4af1—
storage#fcaf21
entity.name.type.module—bold
entity.other.inherited-class#fcaf21
entity.name.function#25d1b7
entity.name.tag#fa5e2a
entity.other.attribute-name#fcaf21italic
support.type, support.class, support.constant#fcaf21
invalid#CF433E
invalid.deprecated#CF433E—
meta.structure.dictionary.json string.quoted.double.json#25d1b7—
meta.diff, meta.diff.header#555555—
markup.deleted#E61F44—
markup.inserted#A6E22E—
markup.changed#F7B83D—
constant.numeric.line-number.find-in-files - match#8FBE00A0—
entity.name.filename.find-in-files#E6DB74—
meta.property-value, support.constant.property-value, constant.other.color#25d1b7—
meta.structure.dictionary.json string.quoted.double.json#fcaf21—
meta.structure.dictionary.value.json string.quoted.double.json#25d1b7—
meta.property-name support.type.property-name—normal
meta.property-value punctuation.separator.key-value#EBEBEB—
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#fa5e2a—
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#fa5e2anormal
variable.parameter.function.coffee#fcaf21
entity.name.section.markdown#fcaf21—
punctuation.definition.heading.markdown#4c4af1—
markup.raw.inline.markdown#25d1b7—
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#4c4af1—
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#4c4af1—
punctuation.definition.metadata.markdown#4c4af1—
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#fa5e2a
markup.bold.markdown, markup.italic.markdown#fa5e2a—
markup.italic.markdown—italic
markup.bold.markdown—bold
markup.raw.block.markdown#664E4D—
markup.deleted.git_gutter#F87856—
markup.inserted.git_gutter#1BA2F7—
markup.changed.git_gutter#81209E—
meta.template.expression#EBEBEB—
variable.language.this#fcaf21bold
keyword.control.flow, keyword.control.default—italic
keyword.control.flow, keyword.control.default, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python—italic
meta.decorator punctuation.decorator—italic
punctuation.definition.comment, comment#707070italic
keyword.control#fa5e2a—
storage.type#4c4af1—
support.function#25d1b7italic
storage.modifier#f84545italic
keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.relational, keyword.operator.new, keyword.operator.assignment, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python#4c4af1—
string#80d846—
support.type.primitive, support.type.builtin—bold
string.regexp#f84545—
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—
meta.import variable.other.readwrite#B9B9B9bold
meta.objectliteral punctuation.definition.block—bold
punctuation.terminator#EBEBEB80—
punctuation.definition.block#EBEBEB—
punctuation.definition.block.tag.jsdoc#D4D4D4—
comment.block.documentation variable#D4D4D4—
variable.language.super#fcaf21
constant.other.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.range.regexp#fcaf21—
constant.character.escape.backslash.regexp#80d846—
constant.character.escape#f84545—
meta.brace#EBEBEB—
meta.array.literal meta.brace.square#80d846—
support.constant—italic bold