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.

  • 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
[DEPRECATED] Coral Reef by inVitro - VS Code Theme