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#1c75bc
  • activityBar.border#0e5a97
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#ffffffaa
  • activityBarBadge.background#ffffff
  • activityBarBadge.foreground#1c75bc
  • badge.background#1c75bc
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#1c75bc
  • breadcrumb.background#f7faff
  • breadcrumb.focusForeground#383e51
  • breadcrumb.foreground#657396
  • breadcrumbPicker.background#ffffff
  • button.background#1c75bc
  • button.foreground#ffffff
  • button.hoverBackground#3088ce
  • charts.blue#1c75bc
  • charts.foreground#383e51
  • charts.green#2ea043
  • charts.lines#1c75bc40
  • charts.orange#f5a742
  • charts.purple#8250df
  • charts.red#d62626
  • charts.yellow#efb963
  • chat.avatarBackground#1c75bc
  • chat.avatarForeground#ffffff
  • chat.requestBorder#1c75bc30
  • chat.slashCommandBackground#ffffff
  • chat.slashCommandForeground#1c75bc
  • debugConsole.errorForeground#d62626
  • debugConsole.infoForeground#383e51
  • debugConsole.sourceForeground#383e51
  • debugConsole.warningForeground#efb963
  • debugConsoleInputIcon.foreground#1c75bc
  • debugExceptionWidget.background#f7faff
  • debugExceptionWidget.border#d62626
  • debugIcon.breakpointDisabledForeground#d6262680
  • debugIcon.breakpointForeground#d62626
  • debugIcon.breakpointUnverifiedForeground#d6262680
  • debugTokenExpression.boolean#0e5a97
  • debugTokenExpression.error#d62626
  • debugTokenExpression.name#0e97aa
  • debugTokenExpression.number#0e5a97
  • debugTokenExpression.string#2ea043
  • debugTokenExpression.value#383e51
  • debugToolBar.background#f7faff
  • debugView.stateLabelBackground#ffffff
  • debugView.stateLabelForeground#383e51
  • debugView.valueChangedHighlight#1c75bcaa
  • descriptionForeground#4c567a
  • diffEditor.border#1c75bc30
  • diffEditor.diagonalFill#1c75bc20
  • diffEditor.insertedLineBackground#2ea04320
  • diffEditor.insertedTextBackground#2ea04320
  • diffEditor.removedLineBackground#d6262622
  • diffEditor.removedTextBackground#d6262622
  • diffEditor.unchangedCodeBackground#f0f4fc
  • diffEditorGutter.insertedLineBackground#2ea04325
  • diffEditorGutter.removedLineBackground#d6262622
  • diffEditorOverview.insertedForeground#2ea04325
  • diffEditorOverview.removedForeground#d6262622
  • disabledForeground#657396
  • dropdown.background#ffffff
  • dropdown.border#1c75bc40
  • dropdown.foreground#383e51
  • dropdown.listBackground#ffffff
  • editor.background#f7faff
  • editor.findMatchBackground#1c75bc40
  • editor.findMatchHighlightBackground#1c75bc30
  • editor.findRangeHighlightBackground#1c75bc20
  • editor.focusedStackFrameHighlightBackground#1c75bc20
  • editor.foreground#383e51
  • editor.inactiveSelectionBackground#1c75bc20
  • editor.lineHighlightBackground#1c75bc10
  • editor.lineHighlightBorder#1c75bc25
  • editor.selectionBackground#1c75bc40
  • editor.selectionForeground#383e51
  • editor.stackFrameHighlightBackground#efb96320
  • editorBracketHighlight.foreground1#1c75bc
  • editorBracketHighlight.foreground2#3088ce
  • editorBracketHighlight.foreground3#0e97aa
  • editorBracketHighlight.foreground4#4298dd
  • editorBracketHighlight.foreground5#66aeed
  • editorBracketHighlight.foreground6#0e5a97
  • editorBracketHighlight.unexpectedBracket.foreground#d62626
  • editorBracketMatch.background#f7faff
  • editorBracketMatch.border#1c75bc70
  • editorCodeLens.foreground#657396
  • editorGhostText.foreground#1c75bc60
  • editorGroup.border#1c75bc20
  • editorGroup.dropBackground#1c75bc20
  • editorGroupHeader.border#1c75bc20
  • editorGroupHeader.noTabsBackground#f7faff
  • editorGroupHeader.tabsBorder#1c75bc20
  • editorHint.foreground#0e97aa
  • editorInfo.foreground#0e97aa
  • editorLightBulb.foreground#efb963
  • editorLightBulbAutoFix.foreground#efb963
  • editorOverviewRuler.addedForeground#2ea043
  • editorOverviewRuler.border#1c75bc30
  • editorOverviewRuler.bracketMatchForeground#1c75bc80
  • editorOverviewRuler.deletedForeground#d62626
  • editorOverviewRuler.errorForeground#d62626
  • editorOverviewRuler.findMatchForeground#1c75bc44
  • editorOverviewRuler.infoForeground#0e97aa
  • editorOverviewRuler.modifiedForeground#0e5a97
  • editorOverviewRuler.rangeHighlightForeground#1c75bc44
  • editorOverviewRuler.selectionHighlightForeground#1c75bc22
  • editorOverviewRuler.warningForeground#efb963
  • editorOverviewRuler.wordHighlightForeground#1c75bc55
  • editorOverviewRuler.wordHighlightStrongForeground#1c75bc66
  • editorRuler.foreground#1c75bc30
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#1c75bc40
  • editorSuggestWidget.highlightForeground#1c75bc
  • editorSuggestWidget.selectedBackground#1c75bc40
  • editorUnnecessaryCode.border#00000000
  • editorUnnecessaryCode.opacity#00000055
  • editorWarning.foreground#efb963
  • editorWidget.background#f5f8ff
  • editorWidget.border#1c75bc40
  • errorForeground#d62626
  • extensionBadge.remoteBackground#1c75bc
  • extensionBadge.remoteForeground#ffffff
  • extensionButton.prominentBackground#1c75bcDD
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#1c75bcAA
  • focusBorder#1c75bc80
  • foreground#383e51
  • gitDecoration.addedResourceForeground#2ea043
  • gitDecoration.deletedResourceForeground#d62626
  • gitDecoration.modifiedResourceForeground#1c75bc
  • icon.foreground#1c75bcAA
  • inlineChat.background#f7faff
  • inlineChat.foreground#383e51
  • inlineChatDiff.inserted#2ea04340
  • inlineChatDiff.removed#d6262642
  • inlineChatInput.background#ffffff
  • inlineChatInput.border#1c75bc40
  • inlineChatInput.focusBorder#1c75bc
  • input.background#ffffff
  • input.border#1c75bc40
  • input.foreground#383e51
  • input.placeholderForeground#1c75bc80
  • inputOption.activeBackground#1c75bc99
  • inputOption.activeForeground#ffffff
  • inputValidation.errorBackground#d6262680
  • inputValidation.errorBorder#d62626
  • inputValidation.errorForeground#ffffff
  • inputValidation.infoBackground#1c75bc5c
  • inputValidation.infoBorder#1c75bc
  • inputValidation.infoForeground#383e51
  • inputValidation.warningBackground#f5a742
  • inputValidation.warningBorder#efb963
  • inputValidation.warningForeground#000000
  • list.activeSelectionBackground#1c75bc40
  • list.activeSelectionForeground#1c75bc
  • list.deemphasizedForeground#657396
  • list.dropBackground#1c75bc20
  • list.errorForeground#d62626
  • list.highlightForeground#1c75bc
  • list.hoverBackground#1c75bc15
  • list.hoverForeground#383e51
  • list.inactiveSelectionBackground#1c75bc20
  • list.inactiveSelectionForeground#1c75bc
  • list.warningForeground#efb963
  • listFilterWidget.background#f7faff
  • listFilterWidget.noMatchesOutline#d62626
  • listFilterWidget.outline#1c75bc
  • menu.background#f7faff
  • menu.border#1c75bc20
  • menu.foreground#383e51
  • menu.selectionBackground#1c75bc20
  • menu.selectionForeground#1c75bc
  • menu.separatorBackground#1c75bc30
  • menubar.selectionBackground#1c75bc20
  • menubar.selectionBorder#1c75bc40
  • menubar.selectionForeground#1c75bc
  • merge.currentContentBackground#2ea04344
  • merge.currentHeaderBackground#2ea04325
  • merge.incomingContentBackground#1c75bc44
  • merge.incomingHeaderBackground#1c75bcaa
  • mergeEditor.change.background#2ea04325
  • mergeEditor.change.word.background#2ea04340
  • mergeEditor.conflict.handled.minimapOverViewRuler#2ea043
  • mergeEditor.conflict.handledFocused.border#2ea04365
  • mergeEditor.conflict.handledUnfocused.border#2ea04325
  • mergeEditor.conflict.unhandled.minimapOverViewRuler#efb963
  • mergeEditor.conflict.unhandledFocused.border#efb963b0
  • mergeEditor.conflict.unhandledUnfocused.border#efb96388
  • minimapGutter.addedBackground#2ea043
  • minimapGutter.deletedBackground#d62626
  • minimapGutter.modifiedBackground#1c75bc
  • notebook.cellBorderColor#1c75bc20
  • notebook.cellEditorBackground#ffffff
  • notebook.cellStatusBarItemHoverBackground#1c75bc20
  • notebook.editorBackground#f7faff
  • notebook.focusedCellBorder#1c75bc
  • notificationCenterHeader.background#f0f4fc
  • notificationLink.foreground#1c75bc
  • notifications.background#f7faff
  • notificationsErrorIcon.foreground#d62626
  • notificationsInfoIcon.foreground#0e97aa
  • notificationsWarningIcon.foreground#efb963
  • panel.background#f7faff
  • panel.border#1c75bc40
  • panelTitle.activeBorder#1c75bc
  • panelTitle.activeForeground#1c75bc
  • panelTitle.inactiveForeground#1c75bc80
  • peekView.border#1c75bc40
  • peekViewEditor.background#f0f4fc
  • peekViewEditor.matchHighlightBackground#1c75bc40
  • peekViewResult.background#f7faff
  • peekViewResult.fileForeground#383e51
  • peekViewResult.lineForeground#4c567a
  • peekViewResult.matchHighlightBackground#1c75bc40
  • peekViewResult.selectionBackground#1c75bc40
  • peekViewResult.selectionForeground#1c75bc
  • peekViewTitle.background#f0f4fc
  • peekViewTitleDescription.foreground#4c567a
  • peekViewTitleLabel.foreground#1c75bc
  • pickerGroup.border#1c75bc40
  • pickerGroup.foreground#1c75bc
  • progressBar.background#1c75bc
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#1c75bc45
  • scrollbarSlider.background#1c75bc25
  • scrollbarSlider.hoverBackground#1c75bc35
  • sideBar.background#ffffff
  • sideBar.border#1c75bc40
  • sideBar.foreground#4c567a
  • sideBarSectionHeader.background#1c75bc20
  • sideBarSectionHeader.border#1c75bc40
  • sideBarSectionHeader.foreground#1c75bc
  • sideBarTitle.foreground#1c75bc
  • statusBar.background#1c75bc
  • statusBar.border#0e5a97
  • statusBar.debuggingBackground#1c75bcEE
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#1c75bc
  • statusBar.noFolderForeground#ffffff
  • symbolIcon.arrayForeground#0e5a97
  • symbolIcon.booleanForeground#0e5a97
  • symbolIcon.classForeground#953800
  • symbolIcon.colorForeground#f5a742
  • symbolIcon.constantForeground#0550ae
  • symbolIcon.constructorForeground#8250df
  • symbolIcon.enumeratorForeground#953800
  • symbolIcon.enumeratorMemberForeground#0550ae
  • symbolIcon.eventForeground#f5a742
  • symbolIcon.fieldForeground#0550ae
  • symbolIcon.fileForeground#383e51
  • symbolIcon.folderForeground#383e51
  • symbolIcon.functionForeground#8250df
  • symbolIcon.interfaceForeground#953800
  • symbolIcon.keyForeground#0550ae
  • symbolIcon.keywordForeground#1c75bc
  • symbolIcon.methodForeground#8250df
  • symbolIcon.moduleForeground#1c75bc
  • symbolIcon.namespaceForeground#1c75bc
  • symbolIcon.nullForeground#0e5a97
  • symbolIcon.numberForeground#0e5a97
  • symbolIcon.objectForeground#953800
  • symbolIcon.operatorForeground#1c75bc
  • symbolIcon.packageForeground#953800
  • symbolIcon.propertyForeground#953800
  • symbolIcon.referenceForeground#0550ae
  • symbolIcon.snippetForeground#2ea043
  • symbolIcon.stringForeground#0a3069
  • symbolIcon.structForeground#953800
  • symbolIcon.textForeground#383e51
  • symbolIcon.typeParameterForeground#953800
  • symbolIcon.unitForeground#0e5a97
  • symbolIcon.variableForeground#0550ae
  • tab.activeBackground#f7faff
  • tab.activeBorder#1c75bc
  • tab.activeForeground#1c75bc
  • tab.border#1c75bc20
  • tab.inactiveBackground#e6effc
  • tab.inactiveForeground#1c75bc90
  • tab.unfocusedActiveBorder#1c75bc80
  • terminal.ansiBlue#1c75bc
  • terminal.ansiBrightBlue#388bdc
  • terminal.ansiBrightCyan#39b3c3
  • terminal.ansiBrightGreen#3dc550
  • terminal.ansiBrightMagenta#b87fff
  • terminal.ansiBrightRed#e73535
  • terminal.ansiBrightYellow#e7ae35
  • terminal.ansiCyan#0e97aa
  • terminal.ansiGreen#2ea043
  • terminal.ansiMagenta#a371f7
  • terminal.ansiRed#d62626
  • terminal.ansiYellow#d29922
  • terminal.background#f7faff
  • terminal.foreground#383e51
  • terminalCursor.background#f7faff
  • terminalCursor.foreground#0e5a97
  • textBlockQuote.background#f0f4fc
  • textCodeBlock.background#f0f4fc
  • textLink.activeForeground#0e5a97
  • textLink.foreground#1c75bc
  • textPreformat.foreground#0e5a97
  • textSeparator.foreground#1c75bc60
  • titleBar.activeBackground#1c75bc
  • titleBar.activeForeground#ffffff
  • titleBar.border#0e5a97
  • titleBar.inactiveBackground#1c75bc99
  • titleBar.inactiveForeground#ffffffcc
  • toolbar.activeBackground#e6effc
  • toolbar.hoverBackground#e6effc
  • tree.indentGuidesStroke#1c75bc40
  • walkThrough.embeddedEditorBackground#f7faff
  • widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6e7a9090italic
constant, constant.numeric, constant.language, support.constant#0550ae
string, string.quoted.single, string.quoted.double, string.quoted.template#0a3069
constant.character.escape#0e97aa
keyword, keyword.control, storage.type, storage.modifier#1c75bcbold
keyword.operator#1c75bc
entity.name.function, meta.function-call, support.function#8250df
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.class, support.type#953800
variable, variable.other.readwrite, meta.definition.variable#0550ae
variable.parameter#8250df
variable.other.property, variable.other.object.property#953800
entity.name.tag#1c75bc
entity.other.attribute-name#953800
markup.heading, entity.name.section#1c75bcbold
markup.bold#0550aebold
markup.italic#0550aeitalic
markup.underline.link#1c75bc
markup.inline.raw, markup.fenced_code.block#0e97aa
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#953800
support.type.property-name.css#1c75bc
support.constant.property-value.css#0550ae
support.type.property-name.json#1c75bc
string.quoted.double.json#0a3069
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator, meta.brace#6e7a90
punctuation.definition.template-expression, punctuation.section.embedded#0e97aa
variable.language.this, variable.language.special.self, variable.language.super#953800italic
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default#0e97aabold
meta.object-literal.key, string.alias.graphql, string.unquoted.graphql, string.unquoted.alias.graphql, meta.field.declaration.ts variable.object.property, meta.block entity.name.label#0550ae
support.type.property-name.media.css#1c75bc
entity.name.tag.yaml#1c75bc
markup.underline.link.image.markdown#0e97aa
beginning.punctuation.definition.list.markdown#1c75bc
meta.decorator entity.name.function, meta.decorator punctuation.decorator#8250dfitalic
string.regexp#0e97aa