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#103362
  • editor.foreground#a7dbf7
  • editor.hoverHighlightBackground#0c4994
  • editor.inactiveSelectionBackground#7e57c25a
  • editor.lineHighlightBackground#0c499477
  • editor.rangeHighlightBackground#103362
  • editor.selectionBackground#103362
  • editor.selectionHighlightBackground#103362
  • editor.wordHighlightBackground#103362
  • editor.wordHighlightStrongBackground#103362
  • 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.activeBackground#C792EA
  • editorIndentGuide.background#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
  • quickInput.list.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
  • welcomePage.buttonBackground#011627
  • welcomePage.buttonHoverBackground#011627
  • 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
punctuation.definition.string#6bff81
string#bcf0c0
string.quoted, variable.other.readwrite.js#bcf0c0
constant.numeric#8dec95
constant.language.boolean#8dec95
constant#A170C6
constant.language, punctuation.definition.constant, variable.other.constant#92b6f4
constant.character, constant.other#82AAFF
variable#a4ceeeitalic
variable.other.object.js#d6deebitalic
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#d6deeb
meta.class entity.name.type.class.tsx#d29ffcff
entity.name.type.tsx, entity.name.type.module.tsx#d29ffcff
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#a1bde6
variable.other.object.property#f7ecb5italic
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#7fdbca
variable.other.readwrite.js, variable.parameter#d7dbe0
string.template meta.template.expression#c63ed3
string.template punctuation.definition.string#fff
storage#6dbdfa
keyword, storage.type, storage.modifier, variable.language.this#00bff9italic
keyword.operator#00bff9italic
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts#c792eaitalic
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#d3eed6
entity.name.class#f7ecb5
entity.other.inherited-class#4FB4D8
variable.other.readwrites, meta.definition.variable#f7ecb5
support.variable.property#7fdbca
entity.name.function#87aff4italic
variable.parameter#d7dbe0
entity.name.tag#6dbdfa
entity.name.type#d29ffc
entity.other.attribute-name#f7ecb5italic
punctuation.decorator#f7ecb5italic
punctuation.definition.block, punctuation.definition.tag#ffffff
support.function#f7ecb5
support.constant#ec9cd2
support.type, support.class#7fdbca
support.other.variable#CBCDD2
invalid#6dbdfa italic bold underline
invalid.deprecated#6dbdfa bold italic underline
support.type.property-name.json#91dacd
support.constant.json#addb67
meta.structure.dictionary.value.json string.quoted.double#e0aff5
string.quoted.double.json punctuation.definition.string.json#80CBC4
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#f29fd8
source.json support#6dbdfa
source.json string, source.json punctuation.definition.string#ece7cd
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

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...