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#011627
  • 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#122d42
  • contrastBorder#122d42
  • debugExceptionWidget.background#011627
  • debugToolBar.background#022846
  • diffEditor.insertedTextBackground#99b76d23
  • diffEditor.insertedTextBorder#addb6733
  • diffEditor.removedTextBackground#ef535033
  • diffEditor.removedTextBorder#ef53504d
  • editor.background#011627
  • editor.findMatchHighlightBackground#1033627f
  • editor.foreground#a7dbf7
  • editor.hoverHighlightBackground#0c49947f
  • editor.inactiveSelectionBackground#7e57c25a
  • editor.lineHighlightBackground#0c499477
  • editor.rangeHighlightBackground#1033627f
  • editor.selectionBackground#103362
  • editor.selectionHighlightBackground#1033627f
  • editor.wordHighlightBackground#1033627f
  • editor.wordHighlightStrongBackground#1033627f
  • editorBracketMatch.background#219fd54d
  • editorCursor.foreground#219fd5
  • editorError.foreground#ef5350
  • editorGroup.border#219fd544
  • editorGroupHeader.tabsBackground#011627
  • editorGutter.background#011627
  • editorHoverWidget.background#011627
  • editorHoverWidget.border#5f7e97
  • editorIndentGuide.activeBackground1#C792EA
  • editorIndentGuide.background1#0e2c45
  • editorLineNumber.foreground#219fd5
  • editorOverviewRuler.commonContentForeground#7e57c2
  • editorOverviewRuler.currentContentForeground#7e57c2
  • editorOverviewRuler.incomingContentForeground#7e57c2
  • editorSuggestWidget.background#2C3043
  • editorSuggestWidget.border#2B2F40
  • editorSuggestWidget.foreground#d6deeb
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#5f7e97
  • editorWarning.foreground#ffca28
  • editorWhitespace.foreground#3B3A32
  • editorWidget.background#0b2942
  • editorWidget.border#262A39
  • errorForeground#EF5350
  • foreground#d6deeb
  • gitDecoration.modifiedResourceForeground#219fd5
  • gitDecoration.untrackedResourceForeground#5ABEB0
  • input.background#0b253a
  • input.border#5f7e97
  • input.foreground#ffffffcc
  • input.placeholderForeground#5f7e97
  • inputOption.activeBorder#ffffff
  • inputValidation.errorBackground#ef5350
  • inputValidation.errorBorder#ef5350
  • inputValidation.infoBackground#219fd5
  • inputValidation.infoBorder#219fd5
  • inputValidation.warningBackground#f7ecb5
  • inputValidation.warningBorder#f7ecb5
  • inputValidation.warningForeground#000000
  • list.activeSelectionBackground#219fd5
  • list.dropBackground#011627
  • list.focusBackground#03648a
  • list.focusForeground#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#011627
  • list.hoverForeground#219fd5
  • list.inactiveSelectionBackground#0e293f
  • list.inactiveSelectionForeground#5f7e97
  • list.invalidItemForeground#975f94
  • notificationLink.foreground#80CBC4
  • notifications.background#011627
  • notifications.foreground#ffffffcc
  • notificationToast.border#219fd544
  • panel.background#011627
  • panel.border#219fd5
  • panelTitle.activeBorder#5f7e97
  • panelTitle.activeForeground#219fd5
  • panelTitle.inactiveForeground#5f7e97
  • peekView.border#f7ecb5
  • peekViewEditor.background#011627
  • peekViewEditor.matchHighlightBackground#7e57c25a
  • peekViewResult.background#011627
  • peekViewResult.matchHighlightBackground#7e57c25a
  • peekViewResult.selectionBackground#2E3250
  • peekViewResult.selectionForeground#cecece
  • peekViewTitle.background#011627
  • peekViewTitleDescription.foreground#697098
  • peekViewTitleLabel.foreground#cecece
  • pickerGroup.border#219fd544
  • quickInputList.focusBackground#219fd5
  • scrollbar.shadow#010b14
  • scrollbarSlider.activeBackground#084d8180
  • scrollbarSlider.background#084d8180
  • scrollbarSlider.hoverBackground#084d8180
  • selection.background#4373c2
  • sideBar.background#011627
  • sideBar.border#219fd544
  • sideBar.foreground#7799bb
  • sideBarSectionHeader.background#011627
  • sideBarSectionHeader.foreground#7799bb
  • sideBarTitle.foreground#7799bb
  • statusBar.background#219fd5
  • statusBar.debuggingBackground#b15a91
  • statusBar.noFolderBackground#011627
  • statusBarItem.activeBackground#03648a
  • statusBarItem.hoverBackground#03648a
  • statusBarItem.prominentBackground#03648a
  • statusBarItem.prominentHoverBackground#03648a
  • tab.activeBackground#0b2942
  • tab.activeBorderTop#219fd5
  • tab.activeForeground#d2dee7
  • tab.inactiveBackground#010e1a
  • tab.inactiveForeground#5f7e97
  • terminal.ansiBlack#011627
  • textLink.activeForeground#98c8ed
  • textLink.foreground#219fd5
  • titleBar.activeBackground#112233
  • titleBar.activeForeground#eeefff
  • titleBar.border#303030
  • titleBar.inactiveBackground#000a11
  • walkThrough.embeddedEditorBackground#001111
  • widget.shadow#219fd5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#bce7ff—
meta.paragraph.markdown, string.other.link.description.title.markdown#EEFFFF—
entity.name.section.markdown, punctuation.definition.heading.markdown#5ABEB0—
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, markup.quote.markdown#82AAFF—
markup.quote.markdown#82AAFFitalic
markup.bold.markdown, punctuation.definition.bold.markdown#57cdffbold
markup.italic.markdown, punctuation.definition.italic.markdown#C792EAitalic
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#f7ecb5italic
punctuation.definition.metadata.markdown#f3b8c2—
markup.underline.link.image.markdown, markup.underline.link.markdown#6dbdfa—
comment#999999italic
string#d69d85—
string.quoted#ffd68f—
constant.character.escape#ffeccc—
constant.numeric#b5cea8—
constant.language.boolean#c9ffab—
constant#dcdcdc—
constant.language, punctuation.definition.constant#c0c0dc—
constant.character#ff8754—
constant.other#9cdcfeitalic
variable#9cdcfeitalic
variable.other.object.property#b4d2ffitalic
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#b4c8ffitalic
variable.parameter#78b4ffitalic
variable.other.constant#c0dcdcitalic
entity.name.function.preprocessor#6ec0ffitalic
storage#7878ffitalic bold
storage.type, storage.modifier#50c0ffitalic bold
keyword, variable.language.this#00a0ffitalic
keyword.operator#ffffdcitalic
entity.name.tag#60ffdf—
entity.name.namespace#86c5b8—
entity.name.type#4ec9b0—
entity.name.type.class#4ec9b0—
entity.name.type.enum#4ec985—
entity.name.type.struct#4ec95e—
entity.name.type.interface#75c94e—
variable.other.event#94c94e—
entity.name.function#dcdcaa—
entity.other#aec94e—
punctuation.definition.tag#ffffff—
punctuation.definition.block#acbbff—
punctuation.definition.string#beacff—
punctuation.decorator#daacff—
support.variable#60c7ff—
support.function#dada6f—
support.constant#dbb8b8—
support.type#1cc9a6—
support.class#00c9a1—
support.other.variable#97dada—
invalid#fa6d84bold italic underline
invalid.deprecated#fa6d97 bold italic underline
markup.list#6dbdfa—
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#78bd65—
meta.paragraph.markdown#ffffff—
markup.quote#78bd65italic
meta.link#78BD65—
source.dockerfile#99d0f7—