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—
ThemeDatabase All Themes by enes ozturk - VS Code Theme