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#272822
  • activityBar.foreground#f8f8f2
  • badge.background#75715e
  • badge.foreground#f8f8f2
  • button.background#75715e
  • debugToolBar.background#1e1f1c
  • diffEditor.insertedTextBackground#4b661680
  • diffEditor.removedTextBackground#90274a70
  • dropdown.background#414339
  • dropdown.listBackground#1e1f1c
  • editor.background#272822
  • editor.foreground#f8f8f2
  • editor.lineHighlightBackground#3e3d32
  • editor.selectionBackground#878b9180
  • editor.selectionHighlightBackground#575b6180
  • editor.wordHighlightBackground#4a4a7680
  • editor.wordHighlightStrongBackground#6a6a9680
  • editorCursor.foreground#f8f8f0
  • editorGroup.border#34352f
  • editorGroup.dropBackground#41433980
  • editorGroupHeader.tabsBackground#1e1f1c
  • editorHoverWidget.background#414339
  • editorHoverWidget.border#75715e
  • editorIndentGuide.activeBackground#767771
  • editorIndentGuide.background#464741
  • editorLineNumber.activeForeground#c2c2bf
  • editorLineNumber.foreground#90908a
  • editorSuggestWidget.background#272822
  • editorSuggestWidget.border#75715e
  • editorWhitespace.foreground#464741
  • editorWidget.background#1e1f1c
  • focusBorder#99947c
  • input.background#414339
  • inputOption.activeBorder#75715e
  • inputValidation.errorBackground#90274a
  • inputValidation.errorBorder#f92672
  • inputValidation.infoBackground#546190
  • inputValidation.infoBorder#819aff
  • inputValidation.warningBackground#848528
  • inputValidation.warningBorder#e2e22e
  • list.activeSelectionBackground#75715e
  • list.dropBackground#414339
  • list.highlightForeground#f8f8f2
  • list.hoverBackground#3e3d32
  • list.inactiveSelectionBackground#414339
  • menu.background#1e1f1c
  • menu.foreground#cccccc
  • minimap.selectionHighlight#878b9180
  • panel.border#414339
  • panelTitle.activeBorder#75715e
  • panelTitle.activeForeground#f8f8f2
  • panelTitle.inactiveForeground#75715e
  • peekView.border#75715e
  • peekViewEditor.background#272822
  • peekViewEditor.matchHighlightBackground#75715e
  • peekViewResult.background#1e1f1c
  • peekViewResult.matchHighlightBackground#75715e
  • peekViewResult.selectionBackground#414339
  • peekViewTitle.background#1e1f1c
  • pickerGroup.foreground#75715e
  • ports.iconRunningProcessForeground#ccccc7
  • progressBar.background#75715e
  • quickInputList.focusBackground#414339
  • selection.background#878b9180
  • settings.focusedRowBackground#4143395a
  • sideBar.background#1e1f1c
  • sideBarSectionHeader.background#272822
  • statusBar.background#414339
  • statusBar.debuggingBackground#75715e
  • statusBar.noFolderBackground#414339
  • statusBarItem.remoteBackground#ac6218
  • tab.border#1e1f1c
  • tab.inactiveBackground#34352f
  • tab.inactiveForeground#ccccc7
  • tab.lastPinnedBorder#414339
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#6a7ec8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#819aff
  • terminal.ansiBrightCyan#66d9ef
  • terminal.ansiBrightGreen#a6e22e
  • terminal.ansiBrightMagenta#ae81ff
  • terminal.ansiBrightRed#f92672
  • terminal.ansiBrightWhite#f8f8f2
  • terminal.ansiBrightYellow#e2e22e
  • terminal.ansiCyan#56adbc
  • terminal.ansiGreen#86b42b
  • terminal.ansiMagenta#8c6bc8
  • terminal.ansiRed#c4265e
  • terminal.ansiWhite#e3e3dd
  • terminal.ansiYellow#b3b42b
  • titleBar.activeBackground#1e1f1c
  • widget.shadow#00000098

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#F8F8F2—
comment#88846F—
string#E6DB74—
punctuation.definition.template-expression, punctuation.section.embedded#F92672—
meta.template.expression#F8F8F2—
constant.numeric#AE81FF—
constant.language#AE81FF—
constant.character, constant.other#AE81FF—
variable#F8F8F2
keyword#F92672—
storage#F92672
storage.type#66D9EFitalic
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#A6E22Eunderline
entity.other.inherited-class#A6E22Eitalic underline
entity.name.function#A6E22E
variable.parameter#FD971Fitalic
entity.name.tag#F92672
entity.other.attribute-name#A6E22E
support.function#66D9EF
support.constant#66D9EF
support.type, support.class#66D9EFitalic
support.other.variable—
invalid#F44747
invalid.deprecated#F44747—
meta.structure.dictionary.json string.quoted.double.json#CFCFC2—
meta.diff, meta.diff.header#75715E—
markup.deleted#F92672—
markup.inserted#A6E22E—
markup.changed#E6DB74—
constant.numeric.line-number.find-in-files - match#AE81FFA0—
entity.name.filename.find-in-files#E6DB74—
markup.quote#F92672—
markup.list#E6DB74—
markup.bold, markup.italic#66D9EF—
markup.inline.raw#FD971F
markup.heading#A6E22E—
markup.heading.setext#A6E22Ebold
markup.heading.markdown—bold
markup.quote.markdown#75715Eitalic
markup.bold.markdown—bold
string.other.link.title.markdown,string.other.link.description.markdown#AE81FF—
markup.underline.link.markdown,markup.underline.link.image.markdown#E6DB74—
markup.italic.markdown—italic
markup.strikethrough—strikethrough
markup.list.unnumbered.markdown, markup.list.numbered.markdown#F8F8F2—
punctuation.definition.list.begin.markdown#A6E22E—
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—
variable.language#FD971F—
entity.name.tag.html#5F7EC6bold
entity.other.attribute-name.html#1A50CDitalic
string.quoted.single.xpx, string.quoted.double.html#C9D2E6—
meta.tag.structure.form.start.html entity.name.tag.html, meta.tag.structure.form.end.html entity.name.tag.html, meta.tag.structure.label.start.html entity.name.tag.html, meta.tag.structure.label.end.html entity.name.tag.html, meta.tag.structure.fieldset.start.html entity.name.tag.html, meta.tag.structure.fieldset.end.html entity.name.tag.html, meta.tag.structure.legend.start.html entity.name.tag.html, meta.tag.structure.legend.end.html entity.name.tag.html, meta.tag.structure.datalist.start.html entity.name.tag.html, meta.tag.structure.datalist.end.html entity.name.tag.html, meta.tag.structure.input.void.html entity.name.tag.html, meta.tag.other.input.html entity.name.tag.html, meta.tag.structure.output.start.html entity.name.tag.html, meta.tag.structure.output.end.html entity.name.tag.html, meta.tag.structure.select.start.html entity.name.tag.html, meta.tag.structure.select.end.html entity.name.tag.html, meta.tag.structure.optgroup.start.html entity.name.tag.html, meta.tag.structure.optgroup.end.html entity.name.tag.html, meta.tag.structure.option.start.html entity.name.tag.html, meta.tag.structure.option.end.html entity.name.tag.html, meta.tag.structure.textarea.start.html entity.name.tag.html, meta.tag.structure.textarea.end.html entity.name.tag.html, meta.tag.structure.button.start.html entity.name.tag.html, meta.tag.structure.button.end.html entity.name.tag.html#FF8C1Fbold
meta.tag.structure.form.start.html entity.other.attribute-name.html, meta.tag.structure.label.start.html entity.other.attribute-name.html, meta.tag.structure.fieldset.start.html entity.other.attribute-name.html, meta.tag.structure.legend.start.html entity.other.attribute-name.html, meta.tag.structure.datalist.start.html entity.other.attribute-name.html, meta.tag.structure.input.void.html entity.other.attribute-name.html, meta.tag.structure.output.start.html entity.other.attribute-name.html, meta.tag.structure.select.start.html entity.other.attribute-name.html, meta.tag.structure.optgroup.start.html entity.other.attribute-name.html, meta.tag.structure.option.start.html entity.other.attribute-name.html, meta.tag.structure.textarea.start.html entity.other.attribute-name.html, meta.tag.structure.button.start.html entity.other.attribute-name.html#F77800italic
meta.tag.structure.form.start.html string.quoted.double.html, meta.tag.structure.label.start.html string.quoted.double.html, meta.tag.structure.fieldset.start.html string.quoted.double.html, meta.tag.structure.legend.start.html string.quoted.double.html, meta.tag.structure.datalist.start.html string.quoted.double.html, meta.tag.structure.input.void.html string.quoted.double.html, meta.tag.structure.output.start.html string.quoted.double.html, meta.tag.structure.select.start.html string.quoted.double.html, meta.tag.structure.optgroup.start.html string.quoted.double.html, meta.tag.structure.option.start.html string.quoted.double.html, meta.tag.structure.textarea.start.html string.quoted.double.html, meta.tag.structure.button.start.html string.quoted.double.html#FFC893—
variable.other.xpx#FFD300—
variable.other.secondaire.xpx#ffae00bold
block_tag_name_xpx#D4D4D4—
keyword.block.xpx, entity.name.tag.js#7CD42Ebold
entity.other.attribute-name.xpx#4EA500italic
entity.other.attribute-name.value.xpx string.quoted.double.html, entity.other.attribute-name.name.xpx string.quoted.double.html, entity.other.attribute-name.expr.xpx string.quoted.double.html, entity.other.attribute-name.token.xpx string.quoted.double.html, entity.other.attribute-name.path.xpx string.quoted.double.html, entity.other.attribute-name.abs.xpx string.quoted.double.html, entity.other.attribute-name.addpage.xpx string.quoted.double.html, entity.other.attribute-name.align.xpx string.quoted.double.html, entity.other.attribute-name.array.xpx string.quoted.double.html, entity.other.attribute-name.bgcolor.xpx string.quoted.double.html, entity.other.attribute-name.bit.xpx string.quoted.double.html, entity.other.attribute-name.bitoff.xpx string.quoted.double.html, entity.other.attribute-name.biton.xpx string.quoted.double.html, entity.other.attribute-name.border.xpx string.quoted.double.html, entity.other.attribute-name.by.xpx string.quoted.double.html, entity.other.attribute-name.calc.xpx string.quoted.double.html, entity.other.attribute-name.charset.xpx string.quoted.double.html, entity.other.attribute-name.chartohexa.xpx string.quoted.double.html, entity.other.attribute-name.close.xpx string.quoted.double.html, entity.other.attribute-name.exist.xpx string.quoted.double.html, entity.other.attribute-name.create.xpx string.quoted.double.html, entity.other.attribute-name.datetime.xpx string.quoted.double.html, entity.other.attribute-name.decode64.xpx string.quoted.double.html, entity.other.attribute-name.encode64.xpx string.quoted.double.html, entity.other.attribute-name.exec.xpx string.quoted.double.html, entity.other.attribute-name.exist.xpx string.quoted.double.html, entity.other.attribute-name.expr.xpx string.quoted.double.html, entity.other.attribute-name.font.xpx string.quoted.double.html, entity.other.attribute-name.global.xpx string.quoted.double.html, entity.other.attribute-name.htmltotext.xpx string.quoted.double.html, entity.other.attribute-name.keycode.xpx string.quoted.double.html, entity.other.attribute-name.len.xpx string.quoted.double.html, entity.other.attribute-name.local.xpx string.quoted.double.html, entity.other.attribute-name.lowcase.xpx string.quoted.double.html, entity.other.attribute-name.ltrim.xpx string.quoted.double.html, entity.other.attribute-name.maxrows.xpx string.quoted.double.html, entity.other.attribute-name.mode.xpx string.quoted.double.html, entity.other.attribute-name.money.xpx string.quoted.double.html, entity.other.attribute-name.name.xpx string.quoted.double.html, entity.other.attribute-name.noaccent.xpx string.quoted.double.html, entity.other.attribute-name.option.xpx string.quoted.double.html, entity.other.attribute-name.open.xpx string.quoted.double.html, entity.other.attribute-name.padding.xpx string.quoted.double.html, entity.other.attribute-name.path.xpx string.quoted.double.html, entity.other.attribute-name.rand.xpx string.quoted.double.html, entity.other.attribute-name.read.xpx string.quoted.double.html, entity.other.attribute-name.rect.xpx string.quoted.double.html, entity.other.attribute-name.replace.xpx string.quoted.double.html, entity.other.attribute-name.rotate.xpx string.quoted.double.html, entity.other.attribute-name.rtrim.xpx string.quoted.double.html, entity.other.attribute-name.strcode.xpx string.quoted.double.html, entity.other.attribute-name.strdecode.xpx string.quoted.double.html, entity.other.attribute-name.strscape.xpx string.quoted.double.html, entity.other.attribute-name.trim.xpx string.quoted.double.html, entity.other.attribute-name.upcase.xpx string.quoted.double.html, entity.other.attribute-name.urlcode.xpx string.quoted.double.html, entity.other.attribute-name.value.xpx string.quoted.double.html, entity.other.attribute-name.version.xpx string.quoted.double.html, entity.other.attribute-name.xmlcode.xpx string.quoted.double.html#BEEA96—
valid.text.xpx#17a438bold
debug.keyword.block.xpx#369ce0bold
debug.sql.exec.xpx#01d3fdbold
debug.line.numeric.xpx#4EC9B0bold
debug.comment.block.xpx#6A9955bold
debug.sql.exec.catch.begin.xpx, debug.sql.exec.catch.end.xpx, debug.sql.severity.xpx#ff8800d3bold
constant.character.keyword-sql.xpx#8B5DC8—
meta.tag.other.sql.html string.quoted.double.html#baa6d4—
entity.name.function.sql.xpx#c871e8—
punctuation.separator.key-value.html#D4D4D4—
comment.todo.xpx#FF8C00—
comment.info.xpx#3498DB—
comment.danger.xpx#FF2D00—
comment.deprecated.xpx#474747strikethrough
comment.atparam.xpx#569CD6—
comment.typesparam.xpx#9CDCFE—
comment.title.xpx—bold underline