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#151515
  • activityBar.border#242424
  • activityBarBadge.background#343434
  • button.background#0971f1
  • button.foreground#ffffff
  • contrastBorder#242424
  • dropdown.background#151515
  • dropdown.border#242424
  • dropdown.foreground#ffffff
  • editor.background#151515
  • editor.foreground#ABB2BF
  • editor.hoverHighlightBackground#343434
  • editor.inactiveSelectionBackground#343434
  • editor.lineHighlightBackground#242424
  • editor.lineHighlightBorder#242424
  • editor.rangeHighlightBackground#242424
  • editor.selectionBackground#3794e050
  • editor.selectionHighlightBackground#242424
  • editor.wordHighlightBackground#343434
  • editor.wordHighlightStrongBackground#545454
  • editorBracketMatch.background#242424
  • editorBracketMatch.border#555555
  • editorCodeLens.foreground#999999
  • editorCursor.background#151515
  • editorCursor.foreground#ffffff
  • editorError.border#242424
  • editorError.foreground#e1270e
  • editorGroup.border#242424
  • editorGroup.dropBackground#3793e01a
  • editorGroup.emptyBackground#151515
  • editorGroupHeader.tabsBackground#151515
  • editorGroupHeader.tabsBorder#242424
  • editorGutter.background#151515
  • editorHoverWidget.background#151515
  • editorHoverWidget.border#242424
  • editorIndentGuide.background#2e2e2e
  • editorLineNumber.activeForeground#e6e6e6
  • editorLineNumber.foreground#757575
  • editorLink.activeForeground#999999
  • editorMarkerNavigation.background#151515
  • editorMarkerNavigationError.background#151515
  • editorMarkerNavigationWarning.background#242424
  • editorOverviewRuler.border#242424
  • editorOverviewRuler.commonContentForeground#242424
  • editorOverviewRuler.currentContentForeground#e1270e
  • editorOverviewRuler.incomingContentForeground#5bc266
  • editorRuler.foreground#999999
  • editorSuggestWidget.background#151515
  • editorSuggestWidget.border#242424
  • editorSuggestWidget.foreground#999999
  • editorSuggestWidget.selectedBackground#242424
  • editorWarning.border#242424
  • editorWarning.foreground#ff453a
  • editorWhitespace.foreground#343434
  • editorWidget.background#151515
  • editorWidget.border#242424
  • errorForeground#e1270e
  • focusBorder#242424
  • foreground#e6e6e6
  • input.background#242424
  • input.border#040404
  • input.foreground#ffffff
  • input.placeholderForeground#999999
  • inputOption.activeBorder#343434
  • inputValidation.errorBorder#e1270e
  • inputValidation.infoBorder#bf5af2
  • inputValidation.warningBorder#fbcc43
  • list.activeSelectionBackground#242424
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#151515
  • list.errorForeground#e1270e
  • list.focusBackground#242424
  • list.highlightForeground#6cc7f6
  • list.hoverBackground#242424
  • list.inactiveSelectionBackground#242424
  • list.inactiveSelectionForeground#ffffff
  • list.warningForeground#fbcc43
  • menu.background#151515
  • menu.selectionBackground#242424
  • peekView.border#343434
  • peekViewEditor.background#242424
  • peekViewEditor.matchHighlightBackground#3793e033
  • peekViewResult.background#242424
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#ffffff
  • peekViewResult.matchHighlightBackground#3793e033
  • peekViewResult.selectionBackground#242424
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#242424
  • peekViewTitleDescription.foreground#535bcf
  • peekViewTitleLabel.foreground#ffffff
  • scrollbarSlider.activeBackground#ffffff
  • selection.background#3793e040
  • sideBar.background#151515
  • sideBar.border#242424
  • sideBar.foreground#999999
  • sideBarSectionHeader.background#151515
  • sideBarSectionHeader.border#242424
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#242424
  • statusBar.border#242424
  • statusBar.foreground#999
  • statusBar.noFolderBackground#242424
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.prominentBackground#e1270e
  • statusBarItem.prominentHoverBackground#fbcc43
  • tab.activeBackground#151515
  • tab.activeBorder#6cc7f6
  • tab.activeForeground#ffffff
  • tab.border#242424
  • tab.inactiveBackground#151515
  • tab.inactiveForeground#757575
  • tab.unfocusedActiveForeground#ffffff
  • tab.unfocusedInactiveForeground#757575
  • terminal.background#151515
  • terminal.foreground#ABB2BF
  • titleBar.activeBackground#151515
  • titleBar.activeForeground#ffffff
  • titleBar.border#242424
  • titleBar.inactiveBackground#151515
  • titleBar.inactiveForeground#999999

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#ABB2BF
emphasisitalic
strongbold
header#000080
comment#5C6370
constant.language#a76fb7
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#D19A66
constant.regexp#646695
entity.name.tag#E06C75
entity.name.tag.css#D19A66
entity.other.attribute-name#D19A66
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#D19A66
invalid#f44747
markup.underlineunderline
markup.bold#d7ba7dbold
markup.heading#6796e6bold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#b5cea8
markup.deleted#98C379
markup.changed#a76fb7
punctuation.definition.quote.begin.markdown#5C6370
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#98C379
punctuation.definition.tag#ABB2BF
meta.preprocessor, entity.name.function.preprocessor#a76fb7
meta.preprocessor.string#98C379
meta.preprocessor.numeric#b5cea8
meta.structure.dictionary.key.python#ABB2BF
meta.diff.header#a76fb7
storage#a76fb7
storage.type#a76fb7
storage.modifier, keyword.operator.noexcept#a76fb7
string, meta.embedded.assembly#98C379
string.tag#98C379
string.value#98C379
string.regexp#56B6C2
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#BE5046
meta.template.expression#ABB2BF
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#ABB2BF
keyword#a76fb7
keyword.control#a76fb7
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#a76fb7
keyword.other.unit#D19A66
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#BE5046
support.function.git-rebase#ABB2BF
constant.sha.git-rebase#b5cea8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#ABB2BF
variable.language#a76fb7
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#61AFEF
support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, 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
entity.name.class, entity.name.type.class, entity.other.inherited-class, support.class, entity.name.type#E5C07B
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json#56B6C2
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#a76fb7
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#ABB2BF
variable.other.constant, variable.other.enummember#D19A66
meta.object-literal.key#ABB2BF
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#a76fb7
keyword.operator.quantifier.regexp#56B6C2
constant.character#a76fb7
constant.character.escape#56B6C2
entity.name.label#C8C8C8
keyword.operator, punctuation.accessor.optional#56B6C2
support.type.property-name.json#E06C75