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.border#219fd544
  • activityBar.foreground#99d0f7
  • activityBarBadge.background#219fd5
  • activityBarBadge.foreground#ffffff
  • badge.background#219fd5
  • badge.foreground#ffffff
  • button.background#03648a
  • button.foreground#ffffff
  • button.hoverBackground#219fd5
  • contrastActiveBorder#ccc
  • contrastBorder#ccc
  • debugExceptionWidget.background#357ab3
  • debugToolBar.background#fff
  • diffEditor.insertedTextBackground#99b76d23
  • diffEditor.insertedTextBorder#addb6733
  • diffEditor.removedTextBackground#ef535033
  • diffEditor.removedTextBorder#ef53504d
  • editor.background#FFFFFF
  • editor.findMatchHighlightBackground#cee1f0
  • editor.foreground#236ebf
  • editor.hoverHighlightBackground#36b2e7a4
  • editor.inactiveSelectionBackground#7e57c25a
  • editor.lineHighlightBackground#eff2ef
  • editor.rangeHighlightBackground#cee1f0
  • editor.selectionBackground#cee1f0
  • editor.selectionHighlightBackground#cee1f0
  • editor.wordHighlightBackground#cee1f0
  • editor.wordHighlightStrongBackground#cee1f0
  • editorBracketMatch.background#219fd54d
  • editorCursor.foreground#4fb4d8
  • editorError.foreground#ef5350
  • editorGroup.border#219fd544
  • editorGroupHeader.tabsBackground#fff
  • editorGutter.background#fff
  • editorHoverWidget.background#fff
  • editorHoverWidget.border#5f7e97
  • editorIndentGuide.activeBackground#2f86d2
  • editorIndentGuide.background#eff2ef
  • editorLineNumber.foreground#2f86d2
  • editorOverviewRuler.commonContentForeground#7e57c2
  • editorOverviewRuler.currentContentForeground#7e57c2
  • editorOverviewRuler.incomingContentForeground#7e57c2
  • editorSuggestWidget.background#ccc
  • editorSuggestWidget.border#2B2F40
  • editorSuggestWidget.foreground#111
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#5f7e97
  • editorWhitespace.foreground#C4C5CD
  • editorWidget.background#ddd
  • editorWidget.border#2f86d2
  • editorWidget.foreground#111
  • errorForeground#EF5350
  • foreground#1857a4
  • gitDecoration.modifiedResourceForeground#1857a4
  • gitDecoration.untrackedResourceForeground#189b2c
  • input.background#eee
  • input.border#5f7e97
  • input.foreground#111
  • input.placeholderForeground#5f7e97
  • inputOption.activeBorder#ffffff
  • inputValidation.errorBackground#ef5350
  • inputValidation.errorBorder#ef5350
  • inputValidation.infoBackground#219fd5
  • inputValidation.infoBorder#219fd5
  • inputValidation.warningBackground#f7ecb5
  • inputValidation.warningBorder#f7ecb5
  • list.activeSelectionBackground#219fd5
  • list.focusBackground#ccc
  • list.focusForeground#1857a4
  • list.highlightForeground#1857a4
  • list.hoverBackground#ccc
  • list.hoverForeground#1857a4
  • list.inactiveSelectionBackground#219fd5cc
  • list.inactiveSelectionForeground#5f7e97
  • list.invalidItemForeground#975f94
  • notificationLink.foreground#219fd544
  • notifications.background#ffffffcc
  • notifications.foreground#011627
  • notificationToast.border#80CBC4
  • panel.background#fff
  • panel.border#49a7cf
  • panelTitle.activeBorder#5f7e97
  • panelTitle.activeForeground#219fd5
  • panelTitle.inactiveForeground#5f7e97
  • peekView.border#08134A
  • peekViewEditor.background#e3e3e3
  • peekViewEditor.matchHighlightBackground#D0CEC8
  • peekViewEditorGutter.background#e3e3e3
  • peekViewResult.background#e3e3e3
  • peekViewResult.lineForeground#2f86d2
  • peekViewResult.matchHighlightBackground#7e57c25a
  • peekViewResult.selectionBackground#2E3250
  • peekViewResult.selectionForeground#cecece
  • peekViewTitleDescription.foreground#697098
  • peekViewTitleLabel.foreground#cecece
  • pickerGroup.border#219fd544
  • scrollbar.shadow#ddd
  • scrollbarSlider.activeBackground#084d8180
  • scrollbarSlider.background#084d8180
  • scrollbarSlider.hoverBackground#084d8180
  • selection.background#4373c2
  • sideBar.background#F3F3F3
  • sideBar.border#e3e3e3
  • sideBar.foreground#0d3464cc
  • sideBarSectionHeader.background#ddd
  • sideBarSectionHeader.foreground#37567C
  • sideBarTitle.foreground#3b5a81
  • statusBar.background#2f86d2
  • statusBar.debuggingBackground#b15a91
  • statusBar.noFolderBackground#011627
  • statusBarItem.activeBackground#03648a
  • statusBarItem.hoverBackground#03648a
  • statusBarItem.prominentBackground#03648a
  • statusBarItem.prominentHoverBackground#03648a
  • terminal.ansiBlack#011627
  • textLink.activeForeground#236ebfcc
  • textLink.foreground#236ebf
  • titleBar.activeBackground#112233
  • titleBar.activeForeground#eeefff
  • titleBar.border#303030
  • titleBar.inactiveBackground#000a11
  • widget.shadow#219fd5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#002339—
meta.paragraph.markdown, string.other.link.description.title.markdown#110000—
entity.name.section.markdown, punctuation.definition.heading.markdown#034c7c—
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, markup.quote.markdown#00AC8F—
markup.quote.markdown#003494—
markup.bold.markdown, punctuation.definition.bold.markdown#4e76b5bold
markup.italic.markdown, punctuation.definition.italic.markdown#C792EA—
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#0460b1—
punctuation.definition.metadata.markdown#00AC8F—
markup.underline.link.image.markdown, markup.underline.link.markdown#924205—
comment#357b42—
punctuation.definition.string#d86db6—
string#a44185—
string.quoted, variable.other.readwrite.js#a44185
constant.numeric#174781—
constant.language.boolean#174781—
constant#174781—
constant.language, punctuation.definition.constant, variable.other.constant#2970c7—
constant.character, constant.other#2970c7—
variable#2f86d2—
variable.other.object.js#828282—
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts#828282—
meta.class entity.name.type.class.tsx#7c2cbd—
entity.name.type.tsx, entity.name.type.module.tsx#7c2cbd—
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#4a668f—
variable.other.object.property#fa841d—
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#7fdbca—
variable.other.readwrite.js, variable.parameter#828282—
string.template meta.template.expression#c63ed3—
string.template punctuation.definition.string#3e3e3e—
storage#da5221
keyword, storage.type, storage.modifier, variable.language.this#0991b6—
keyword.operator#7b30d0—
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts#c792ea—
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#296d31—
entity.name.class#1172c7—
entity.other.inherited-class#b02767
variable.other.readwrites, meta.definition.variable#da5221
support.variable.property#358a7b—
entity.name.function#b1108e—
variable.parameter#b1108e
entity.name.tag#0444ac
entity.name.type#0444ac—
entity.other.attribute-name#df8618—
punctuation.decorator#df8618—
punctuation.definition.block, punctuation.definition.tag#3e3e3e—
support.function#08134A
support.constant#174781
support.type, support.class#dc3eb7—
support.other.variable#224555—
invalid#207bb8 bold underline
invalid.deprecated#207bb8 bold underline
support.type.property-name.json#3a9685—
support.constant.json#497803—
meta.structure.dictionary.value.json string.quoted.double#8123a9—
string.quoted.double.json punctuation.definition.string.json#2b8c82—
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#ae408b—
source.json support#6dbdfa—
source.json string, source.json punctuation.definition.string#00820f—
markup.list#207bb8—
markup.heading punctuation.definition.heading, entity.name.section#4FB4D8
text.html.markdown meta.paragraph meta.link.inline, text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.begin.markdown, text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.end.markdown#87429A—
meta.paragraph.markdown#3e3e3e—
markup.quote#87429A—
meta.link#87429A—
source.dockerfile#005fa4—