Skip to main content
CodingTheme

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...