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#23272e
  • activityBar.border#23272e
  • activityBarBadge.background#3e4556
  • badge.background#21242a
  • debugToolBar.background#21242a
  • editor.background#282c34
  • editor.findMatchBackground#2257a0
  • editor.foreground#bbc2cf
  • editor.selectionBackground#2257a0
  • editorCursor.foreground#51afef
  • editorError.foreground#ff6c6b
  • editorGroupHeader.tabsBackground#21242a
  • editorGutter.addedBackground#98be65
  • editorGutter.deletedBackground#ff6c6b
  • editorGutter.modifiedBackground#da8548
  • editorIndentGuide.background#3f444a
  • editorWarning.foreground#ecbe7b
  • list.hoverBackground#3f444a
  • list.inactiveSelectionBackground#2257a0
  • minimapGutter.addedBackground#98be65
  • minimapGutter.deletedBackground#ff6c6b
  • minimapGutter.modifiedBackground#da8548
  • panelTitle.activeBorder#51afef
  • scrollbarSlider.activeBackground#51afef
  • scrollbarSlider.hoverBackground#2257a0
  • sideBar.background#21242a
  • sideBar.foreground#bbc2cf
  • sideBarSectionHeader.background#21252b
  • sideBarSectionHeader.foreground#bbc2cf
  • sideBarTitle.foreground#bbc2cf
  • statusBar.background#23272e
  • statusBar.debuggingBackground#ff6c6b
  • statusBar.debuggingForeground#bbc2cf
  • statusBar.noFolderBackground#3e4556
  • statusBarItem.activeBackground#5b626880
  • statusBarItem.hoverBackground#282c34
  • statusBarItem.remoteBackground#51afef
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBorderTop#51afef
  • tab.hoverBackground#23272e
  • tab.inactiveBackground#21242a
  • terminal.ansiBlack#1b2229
  • terminal.ansiBlue#51afef
  • terminal.ansiBrightBlack#3f444a
  • terminal.ansiBrightBlue#51afef
  • terminal.ansiBrightCyan#46d9ff
  • terminal.ansiBrightGreen#98be65
  • terminal.ansiBrightMagenta#a9a1e1
  • terminal.ansiBrightRed#ff6c6b
  • terminal.ansiBrightWhite#efefef
  • terminal.ansiBrightYellow#ecbe7b
  • terminal.ansiCyan#46d9ff
  • terminal.ansiGreen#98be65
  • terminal.ansiMagenta#c678dd
  • terminal.ansiRed#ff6c6b
  • terminal.ansiWhite#bbc2cf
  • terminal.ansiYellow#ecbe7b
  • terminal.background#282c34
  • terminal.foreground#bbc2cf
  • titleBar.activeBackground#23272e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#D4D4D4
emphasisitalic
strongbold
header#000080
comment#5B6268
constant.language#DA8548
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#DA8548
constant.regexp#646695
entity.name.tag#51AFEF
entity.name.tag.css#d7ba7d
entity.other.attribute-name#DA8548
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#d7ba7d
invalid#f44747
markup.underlineunderline
markup.bold#51AFEFbold
markup.heading#51AFEFbold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#b5cea8
markup.deleted#98C379
markup.changed#51AFEF
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#98C379
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#51AFEF
meta.preprocessor.string#98C379
meta.preprocessor.numeric#b5cea8
meta.structure.dictionary.key.python#BBC2CF
meta.diff.header#51AFEF
storage#51AFEF
storage.type#51AFEF
storage.modifier, keyword.operator.noexcept#51AFEF
string, meta.embedded.assembly#98C379
string.tag#98C379
string.value#98C379
string.regexp#d16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#51AFEF
meta.template.expression#d4d4d4
support.type.vendored.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#BBC2CF
keyword#51AFEF
keyword.control#51AFEF
keyword.operator#d4d4d4
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#51AFEF
keyword.other.unit#DA8548
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#51AFEF
support.function.git-rebase#BBC2CF
constant.sha.git-rebase#b5cea8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#51AFEF
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#A9A1E1
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#56B6C2
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#56B6C2
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#51AFEF
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#BBC2CF
variable.parameter#e06c75
variable.parameter#e06c75
variable.other.constant, variable.other.enummember#D7BA7D
meta.object-literal.key#BBC2CF
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#98C379
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#98C379
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#d16969
keyword.operator.or.regexp, keyword.control.anchor.regexp#A9A1E1
keyword.operator.quantifier.regexp#d7ba7d
constant.character#51AFEF
constant.character.escape#d7ba7d
entity.name.label#C8C8C8
support.type.property-name.json#51AFEF
support.type.property-name.css#BBC2CF