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#0f1012
  • activityBar.border#2b2d30
  • activityBar.foreground#bcbec4
  • activityBar.inactiveForeground#6f737a
  • activityBarBadge.background#4ECDC4
  • activityBarBadge.foreground#0f1012
  • badge.background#393b40
  • badge.foreground#bcbec4
  • banner.background#27282b
  • banner.foreground#bcbec4
  • banner.iconForeground#4ECDC4
  • breadcrumb.activeSelectionForeground#dfe1e5
  • breadcrumb.background#191a1c
  • breadcrumb.focusForeground#dfe1e5
  • breadcrumb.foreground#9da0a8
  • breadcrumbPicker.background#27282b
  • button.background#4ECDC4
  • button.foreground#0f1012
  • button.hoverBackground#2E8B85
  • button.secondaryBackground#393b40
  • button.secondaryForeground#bcbec4
  • button.secondaryHoverBackground#43454a
  • commandCenter.activeBackground#2b2d30
  • commandCenter.activeBorder#2b2d30
  • commandCenter.activeForeground#dfe1e5
  • commandCenter.background#191a1c
  • commandCenter.border#2b2d30
  • commandCenter.foreground#bcbec4
  • debugIcon.breakpointForeground#f75464
  • debugIcon.continueForeground#549159
  • debugIcon.disconnectForeground#f75464
  • debugIcon.pauseForeground#f2c55c
  • debugIcon.restartForeground#549159
  • debugIcon.startForeground#549159
  • debugIcon.stepIntoForeground#56a8f5
  • debugIcon.stepOutForeground#56a8f5
  • debugIcon.stepOverForeground#56a8f5
  • debugIcon.stopForeground#f75464
  • descriptionForeground#9da0a8
  • diffEditor.border#2b2d30
  • diffEditor.diagonalFill#2b2d3080
  • diffEditor.insertedLineBackground#54915915
  • diffEditor.insertedTextBackground#54915920
  • diffEditor.removedLineBackground#da363326
  • diffEditor.removedTextBackground#da363326
  • dropdown.background#27282b
  • dropdown.border#43454a
  • dropdown.foreground#bcbec4
  • dropdown.listBackground#27282b
  • editor.background#191a1c
  • editor.findMatchBackground#2d543f
  • editor.findMatchHighlightBackground#11495780
  • editor.findRangeHighlightBackground#11495740
  • editor.foreground#bcbec4
  • editor.inactiveSelectionBackground#373b3960
  • editor.lineHighlightBackground#1f2024
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#373b39
  • editor.selectionHighlightBackground#373b3980
  • editor.wordHighlightBackground#373b3980
  • editor.wordHighlightStrongBackground#402f3380
  • editorBracketHighlight.foreground1#FFD700
  • editorBracketHighlight.foreground2#DA70D6
  • editorBracketHighlight.foreground3#179FFF
  • editorBracketHighlight.foreground4#FFD700
  • editorBracketHighlight.foreground5#DA70D6
  • editorBracketHighlight.foreground6#179FFF
  • editorBracketMatch.background#43454a
  • editorBracketMatch.border#00000000
  • editorCodeLens.foreground#868a91
  • editorCursor.foreground#4ECDC4
  • editorError.foreground#fa6675
  • editorGhostText.foreground#6f737a80
  • editorGroup.border#2b2d30
  • editorGroup.dropBackground#2b2d3080
  • editorGroupHeader.noTabsBackground#131416
  • editorGroupHeader.tabsBackground#131416
  • editorGroupHeader.tabsBorder#2b2d30
  • editorGutter.addedBackground#549159
  • editorGutter.background#191a1c
  • editorGutter.deletedBackground#FD5B87
  • editorGutter.modifiedBackground#375fad
  • editorHint.foreground#857042
  • editorHoverWidget.background#27282b
  • editorHoverWidget.border#43454a
  • editorHoverWidget.foreground#bcbec4
  • editorIndentGuide.activeBackground1#4e5157
  • editorIndentGuide.background1#323438
  • editorInfo.foreground#857042
  • editorInlayHint.background#393b40
  • editorInlayHint.foreground#868a91
  • editorInlayHint.parameterBackground#393b40
  • editorInlayHint.parameterForeground#858a94
  • editorInlayHint.typeBackground#393b40
  • editorInlayHint.typeForeground#868a91
  • editorLightBulb.foreground#f2c55c
  • editorLightBulbAutoFix.foreground#4ECDC4
  • editorLineNumber.activeForeground#a1a3ab
  • editorLineNumber.foreground#4b5059
  • editorLink.activeForeground#4ECDC4
  • editorOverviewRuler.addedForeground#54915980
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.deletedForeground#FD5B8780
  • editorOverviewRuler.errorForeground#fa6675
  • editorOverviewRuler.findMatchForeground#2d543f80
  • editorOverviewRuler.infoForeground#857042
  • editorOverviewRuler.modifiedForeground#375fad80
  • editorOverviewRuler.selectionHighlightForeground#373b3980
  • editorOverviewRuler.warningForeground#f2c55c
  • editorRuler.foreground#323438
  • editorStickyScroll.background#191a1c
  • editorStickyScrollHover.background#1f2024
  • editorSuggestWidget.background#27282b
  • editorSuggestWidget.border#43454a
  • editorSuggestWidget.foreground#bcbec4
  • editorSuggestWidget.highlightForeground#4ECDC4
  • editorSuggestWidget.selectedBackground#2b2d30
  • editorUnnecessaryCode.border#00000000
  • editorUnnecessaryCode.opacity#00000080
  • editorWarning.foreground#f2c55c
  • editorWhitespace.foreground#6f737a
  • editorWidget.background#27282b
  • editorWidget.border#43454a
  • editorWidget.foreground#bcbec4
  • errorForeground#fa6675
  • focusBorder#4ECDC4
  • foreground#bcbec4
  • gitDecoration.addedResourceForeground#74C991
  • gitDecoration.conflictingResourceForeground#de6a66
  • gitDecoration.deletedResourceForeground#fa6675
  • gitDecoration.ignoredResourceForeground#6f737a
  • gitDecoration.modifiedResourceForeground#D19A66
  • gitDecoration.untrackedResourceForeground#74C991
  • icon.foreground#bcbec4
  • input.background#27282b
  • input.border#43454a
  • input.foreground#bcbec4
  • input.placeholderForeground#6f737a
  • inputOption.activeBackground#4ECDC420
  • inputOption.activeBorder#4ECDC4
  • inputOption.activeForeground#bcbec4
  • inputValidation.errorBackground#402929
  • inputValidation.errorBorder#fa6675
  • inputValidation.errorForeground#f75464
  • inputValidation.infoBackground#25324d
  • inputValidation.infoBorder#4ECDC4
  • inputValidation.infoForeground#56a8f5
  • inputValidation.warningBackground#3d3320
  • inputValidation.warningBorder#f2c55c
  • inputValidation.warningForeground#f2c55c
  • keybindingLabel.background#393b40
  • keybindingLabel.border#43454a
  • keybindingLabel.bottomBorder#43454a
  • keybindingLabel.foreground#bcbec4
  • list.activeSelectionBackground#2b2d30
  • list.activeSelectionForeground#dfe1e5
  • list.dropBackground#2b2d3080
  • list.errorForeground#f75464
  • list.focusBackground#2b2d30
  • list.focusForeground#dfe1e5
  • list.highlightForeground#4ECDC4
  • list.hoverBackground#2b2d30
  • list.hoverForeground#dfe1e5
  • list.inactiveSelectionBackground#2b2d30
  • list.inactiveSelectionForeground#bcbec4
  • list.warningForeground#f2c55c
  • menu.background#27282b
  • menu.border#43454a
  • menu.foreground#bcbec4
  • menu.selectionBackground#2b2d30
  • menu.selectionForeground#dfe1e5
  • menu.separatorBackground#43454a
  • merge.currentContentBackground#54915920
  • merge.currentHeaderBackground#54915940
  • merge.incomingContentBackground#375fad20
  • merge.incomingHeaderBackground#375fad40
  • minimap.background#191a1c
  • minimap.findMatchHighlight#2d543f80
  • minimap.selectionHighlight#373b3980
  • minimapSlider.activeBackground#6f737a60
  • minimapSlider.background#6f737a20
  • minimapSlider.hoverBackground#6f737a40
  • notificationLink.foreground#4ECDC4
  • notifications.background#27282b
  • notifications.border#43454a
  • notifications.foreground#bcbec4
  • notificationsErrorIcon.foreground#f75464
  • notificationsInfoIcon.foreground#56a8f5
  • notificationsWarningIcon.foreground#f2c55c
  • panel.background#131416
  • panel.border#2b2d30
  • panelInput.border#43454a
  • panelSection.border#2b2d30
  • panelSectionHeader.background#131416
  • panelSectionHeader.border#2b2d30
  • panelSectionHeader.foreground#bcbec4
  • panelTitle.activeBorder#4ECDC4
  • panelTitle.activeForeground#dfe1e5
  • panelTitle.inactiveForeground#6f737a
  • peekView.border#4ECDC4
  • peekViewEditor.background#27282b
  • peekViewEditor.matchHighlightBackground#2d543f80
  • peekViewEditorGutter.background#27282b
  • peekViewResult.background#27282b
  • peekViewResult.fileForeground#bcbec4
  • peekViewResult.lineForeground#6f737a
  • peekViewResult.matchHighlightBackground#2d543f
  • peekViewTitle.background#393b40
  • peekViewTitleDescription.foreground#9da0a8
  • peekViewTitleLabel.foreground#dfe1e5
  • progressBar.background#4ECDC4
  • quickInput.background#27282b
  • quickInput.foreground#bcbec4
  • quickInputList.focusBackground#2b2d30
  • quickInputList.focusForeground#dfe1e5
  • quickInputTitle.background#27282b
  • sash.hoverBorder#4ECDC4
  • scrollbar.shadow#00000030
  • scrollbarSlider.activeBackground#6f737a70
  • scrollbarSlider.background#6f737a30
  • scrollbarSlider.hoverBackground#6f737a50
  • sideBar.background#131416
  • sideBar.border#2b2d30
  • sideBar.foreground#bcbec4
  • sideBarSectionHeader.background#131416
  • sideBarSectionHeader.border#2b2d30
  • sideBarSectionHeader.foreground#bcbec4
  • sideBarTitle.foreground#bcbec4
  • statusBar.background#0f1012
  • statusBar.border#2b2d30
  • statusBar.debuggingBackground#2a5091
  • statusBar.debuggingForeground#ced0d6
  • statusBar.foreground#bcbec4
  • statusBar.noFolderBackground#0f1012
  • statusBar.noFolderForeground#bcbec4
  • statusBarItem.remoteBackground#4ECDC4
  • statusBarItem.remoteForeground#0f1012
  • symbolIcon.booleanForeground#E5A070
  • symbolIcon.classForeground#42D4BA
  • symbolIcon.constantForeground#E08FD4
  • symbolIcon.enumeratorForeground#42D4BA
  • symbolIcon.enumeratorMemberForeground#E08FD4
  • symbolIcon.fieldForeground#E08FD4
  • symbolIcon.functionForeground#6BBAFF
  • symbolIcon.interfaceForeground#28D6C6
  • symbolIcon.keywordForeground#E5A070
  • symbolIcon.methodForeground#6DBCFF
  • symbolIcon.namespaceForeground#42D4BA
  • symbolIcon.numberForeground#3CC8D4
  • symbolIcon.propertyForeground#E08FD4
  • symbolIcon.stringForeground#7FCC85
  • symbolIcon.typeParameterForeground#28D6C6
  • symbolIcon.variableForeground#42D4BA
  • tab.activeBackground#191a1c
  • tab.activeBorder#00000000
  • tab.activeBorderTop#4ECDC4
  • tab.activeForeground#dfe1e5
  • tab.activeModifiedBorder#4ECDC4
  • tab.border#2b2d30
  • tab.hoverBackground#2b2d30
  • tab.inactiveBackground#131416
  • tab.inactiveForeground#6f737a
  • tab.inactiveModifiedBorder#4ECDC480
  • tab.lastPinnedBorder#43454a
  • tab.unfocusedHoverBackground#2b2d3080
  • terminal.ansiBlack#191a1c
  • terminal.ansiBlue#56a8f5
  • terminal.ansiBrightBlack#6f737a
  • terminal.ansiBrightBlue#70aeff
  • terminal.ansiBrightCyan#42c3d4
  • terminal.ansiBrightGreen#73bd79
  • terminal.ansiBrightMagenta#cf84cf
  • terminal.ansiBrightRed#fa6675
  • terminal.ansiBrightWhite#ced0d6
  • terminal.ansiBrightYellow#f2c55c
  • terminal.ansiCyan#2aacb8
  • terminal.ansiGreen#6aab73
  • terminal.ansiMagenta#c77dbb
  • terminal.ansiRed#f75464
  • terminal.ansiWhite#bcbec4
  • terminal.ansiYellow#e0bb65
  • terminal.background#131416
  • terminal.findMatchBackground#2d543f80
  • terminal.findMatchHighlightBackground#11495780
  • terminal.foreground#bcbec4
  • terminal.selectionBackground#373b3980
  • terminalCursor.foreground#4ECDC4
  • testing.iconErrored#fa6675
  • testing.iconFailed#f75464
  • testing.iconPassed#549159
  • testing.iconQueued#6f737a
  • testing.iconSkipped#6f737a
  • testing.iconUnset#6f737a
  • textBlockQuote.background#27282b
  • textBlockQuote.border#43454a
  • textLink.activeForeground#4ECDC4
  • textLink.foreground#4ECDC4
  • titleBar.activeBackground#0f1012
  • titleBar.activeForeground#bcbec4
  • titleBar.border#2b2d30
  • titleBar.inactiveBackground#0f1012
  • titleBar.inactiveForeground#6f737a
  • widget.border#2b2d30
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.block, comment.line, punctuation.definition.comment#7a7e85italic
comment.block.documentation#6E9A7Citalic
storage.type.class.jsdoc, entity.name.type.instance.jsdoc#78B88E—
string, string.quoted, string.template, punctuation.definition.string#7FCC85—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#E5A070—
constant.character.escape, constant.other.placeholder#E5A070—
constant.numeric, constant.language.numeric#3CC8D4—
constant.language.boolean#E5A070—
constant.language.null, constant.language.undefined#E5A070—
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.typeof, keyword.operator.instanceof, keyword.operator.delete, keyword.operator.void, keyword.other#E5A070—
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical#bcbec4—
storage.type, storage.modifier#E5A070—
entity.name.function, support.function, meta.function-call entity.name.function#6BBAFF—
entity.name.function.member#6DBCFF—
entity.name.function.member.static#6DBCFFitalic
entity.name.type.class, entity.name.class, support.class#42D4BA—
entity.name.type, support.type#42D4BA—
entity.name.type.parameter#28D6C6—
entity.name.type.interface#28D6C6—
variable, variable.other.readwrite, variable.other.object#42D4BA—
variable.other.constant, constant.other#E08FD4italic
variable.other.property, support.variable.property#E08FD4—
meta.object-literal.key#E08FD4—
variable.other.property.static#E08FD4italic
variable.parameter#42D4BA—
variable.language.this, variable.language.super#E5A070—
punctuation.separator, punctuation.terminator, punctuation.accessor#bcbec4—
punctuation.section, meta.brace#bcbec4—
entity.name.tag#6BB0EA—
punctuation.definition.tag#6f737a—
entity.other.attribute-name#E08FD4—
entity.name.namespace, entity.name.module, entity.name.type.module#42D4BA—
support.constant, variable.other.enummember#E08FD4—
meta.decorator, punctuation.decorator, storage.type.annotation#CCC76E—
entity.other.attribute-name.class.css#6BBAFF—
entity.other.attribute-name.id.css#6BBAFF—
entity.name.tag.css, entity.name.tag.less, entity.name.tag.scss#E5A070—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#CCC76E—
variable.css, variable.argument.css#42D4BA—
support.type.property-name.css, support.type.vendored.property-name.css, support.type.property-name.scss, support.type.property-name.less#42D4BA—
support.constant.property-value.css, support.constant.font-name.css, support.constant.color.css, constant.other.color.rgb-value.css, support.constant.media.css#E5A070—
keyword.other.unit.css, keyword.other.unit.scss#3CC8D4—
keyword.other.important.css#E5A070bold
support.type.property-name.json#E08FD4—
markup.heading, entity.name.section.markdown#6BBAFFbold
markup.bold—bold
markup.italic—italic
markup.strikethrough—strikethrough
markup.inline.raw, markup.fenced_code.block#7FCC85—
markup.underline.link#6BBAFF—
punctuation.definition.list.begin.markdown#E5A070—
markup.quote.markdown#7a7e85italic
string.regexp#58D8E8—
entity.name.tag.yaml#E5A070—
meta.function.decorator.python, entity.name.function.decorator.python#CCC76E—
storage.modifier.lifetime.rust, entity.name.type.lifetime.rust#42D4C6—
support.class.component.jsx, support.class.component.tsx#42D4BA—
meta.embedded#bcbec4—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#E5A070—
markup.inserted#7FCC85—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#ffa198—
invalid.illegal#f75464—
keyword.codetag#A0CC4Aitalic