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#e8eaed
  • activityBar.border#d0d2d6
  • activityBar.foreground#383c42
  • activityBar.inactiveForeground#7d8189
  • activityBarBadge.background#00b4a8
  • activityBarBadge.foreground#ffffff
  • badge.background#dfe1e4
  • badge.foreground#383c42
  • banner.background#f3f4f6
  • banner.foreground#383c42
  • banner.iconForeground#00b4a8
  • breadcrumb.activeSelectionForeground#2f3338
  • breadcrumb.background#ffffff
  • breadcrumb.focusForeground#2f3338
  • breadcrumb.foreground#57595f
  • breadcrumbPicker.background#f3f4f6
  • button.background#00b4a8
  • button.foreground#ffffff
  • button.hoverBackground#009990
  • button.secondaryBackground#dfe1e4
  • button.secondaryForeground#383c42
  • button.secondaryHoverBackground#d0d2d6
  • commandCenter.activeBackground#dfe1e4
  • commandCenter.activeBorder#d0d2d6
  • commandCenter.activeForeground#2f3338
  • commandCenter.background#ffffff
  • commandCenter.border#d0d2d6
  • commandCenter.foreground#383c42
  • debugIcon.breakpointForeground#cb2431
  • debugIcon.continueForeground#34a853
  • debugIcon.disconnectForeground#cb2431
  • debugIcon.pauseForeground#9a6700
  • debugIcon.restartForeground#34a853
  • debugIcon.startForeground#34a853
  • debugIcon.stepIntoForeground#1b6bab
  • debugIcon.stepOutForeground#1b6bab
  • debugIcon.stepOverForeground#1b6bab
  • debugIcon.stopForeground#cb2431
  • descriptionForeground#57595f
  • diffEditor.border#d0d2d6
  • diffEditor.diagonalFill#d0d2d680
  • diffEditor.insertedLineBackground#34a85315
  • diffEditor.insertedTextBackground#34a85320
  • diffEditor.removedLineBackground#d63b3b20
  • diffEditor.removedTextBackground#d63b3b26
  • dropdown.background#ffffff
  • dropdown.border#d0d2d6
  • dropdown.foreground#383c42
  • dropdown.listBackground#ffffff
  • editor.background#ffffff
  • editor.findMatchBackground#a8ddb0
  • editor.findMatchHighlightBackground#cce8d070
  • editor.findRangeHighlightBackground#cce8d040
  • editor.foreground#383c42
  • editor.inactiveSelectionBackground#b4d5fe50
  • editor.lineHighlightBackground#f6f7f8
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#b4d5fe
  • editor.selectionHighlightBackground#b4d5fe70
  • editor.wordHighlightBackground#b4d5fe70
  • editor.wordHighlightStrongBackground#e0c4de70
  • editorBracketHighlight.foreground1#9a7200
  • editorBracketHighlight.foreground2#8b1e7d
  • editorBracketHighlight.foreground3#1b6bab
  • editorBracketHighlight.foreground4#9a7200
  • editorBracketHighlight.foreground5#8b1e7d
  • editorBracketHighlight.foreground6#1b6bab
  • editorBracketMatch.background#d8dade
  • editorBracketMatch.border#00000000
  • editorCodeLens.foreground#6b6f77
  • editorCursor.foreground#00b4a8
  • editorError.foreground#cb2431
  • editorGhostText.foreground#8b8f9680
  • editorGroup.border#d0d2d6
  • editorGroup.dropBackground#d0d2d680
  • editorGroupHeader.noTabsBackground#f3f4f6
  • editorGroupHeader.tabsBackground#f3f4f6
  • editorGroupHeader.tabsBorder#d0d2d6
  • editorGutter.addedBackground#34a853
  • editorGutter.background#ffffff
  • editorGutter.deletedBackground#cb2431
  • editorGutter.modifiedBackground#1b6bab
  • editorHint.foreground#6b5320
  • editorHoverWidget.background#f3f4f6
  • editorHoverWidget.border#d0d2d6
  • editorHoverWidget.foreground#383c42
  • editorIndentGuide.activeBackground1#c8cacd
  • editorIndentGuide.background1#e0e2e5
  • editorInfo.foreground#6b5320
  • editorInlayHint.background#eef0f2
  • editorInlayHint.foreground#6b6f77
  • editorInlayHint.parameterBackground#eef0f2
  • editorInlayHint.parameterForeground#6b6f77
  • editorInlayHint.typeBackground#eef0f2
  • editorInlayHint.typeForeground#6b6f77
  • editorLightBulb.foreground#9a6700
  • editorLightBulbAutoFix.foreground#00b4a8
  • editorLineNumber.activeForeground#383c42
  • editorLineNumber.foreground#6b6f77
  • editorLink.activeForeground#00b4a8
  • editorOverviewRuler.addedForeground#34a85380
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.deletedForeground#cb243180
  • editorOverviewRuler.errorForeground#cb2431
  • editorOverviewRuler.findMatchForeground#a8ddb080
  • editorOverviewRuler.infoForeground#6b5320
  • editorOverviewRuler.modifiedForeground#1b6bab80
  • editorOverviewRuler.selectionHighlightForeground#b4d5fe80
  • editorOverviewRuler.warningForeground#9a6700
  • editorRuler.foreground#e0e2e5
  • editorStickyScroll.background#ffffff
  • editorStickyScrollHover.background#f6f7f8
  • editorSuggestWidget.background#f3f4f6
  • editorSuggestWidget.border#d0d2d6
  • editorSuggestWidget.foreground#383c42
  • editorSuggestWidget.highlightForeground#00b4a8
  • editorSuggestWidget.selectedBackground#dfe1e4
  • editorUnnecessaryCode.border#00000000
  • editorUnnecessaryCode.opacity#00000080
  • editorWarning.foreground#9a6700
  • editorWhitespace.foreground#c8cacd
  • editorWidget.background#f3f4f6
  • editorWidget.border#d0d2d6
  • editorWidget.foreground#383c42
  • errorForeground#cb2431
  • focusBorder#00b4a8
  • foreground#383c42
  • gitDecoration.addedResourceForeground#34a853
  • gitDecoration.conflictingResourceForeground#cf4040
  • gitDecoration.deletedResourceForeground#d63b3b
  • gitDecoration.ignoredResourceForeground#9a9ea6
  • gitDecoration.modifiedResourceForeground#c08b00
  • gitDecoration.untrackedResourceForeground#34a853
  • icon.foreground#4a4e55
  • input.background#ffffff
  • input.border#d0d2d6
  • input.foreground#383c42
  • input.placeholderForeground#7d8189
  • inputOption.activeBackground#00b4a820
  • inputOption.activeBorder#00b4a8
  • inputOption.activeForeground#383c42
  • inputValidation.errorBackground#fde8ea
  • inputValidation.errorBorder#cb2431
  • inputValidation.errorForeground#cb2431
  • inputValidation.infoBackground#e4f0fc
  • inputValidation.infoBorder#00b4a8
  • inputValidation.infoForeground#1b6bab
  • inputValidation.warningBackground#fdf3e0
  • inputValidation.warningBorder#9a6700
  • inputValidation.warningForeground#9a6700
  • keybindingLabel.background#dfe1e4
  • keybindingLabel.border#d0d2d6
  • keybindingLabel.bottomBorder#d0d2d6
  • keybindingLabel.foreground#383c42
  • list.activeSelectionBackground#dfe1e4
  • list.activeSelectionForeground#2f3338
  • list.dropBackground#dfe1e480
  • list.errorForeground#cb2431
  • list.focusBackground#dfe1e4
  • list.focusForeground#2f3338
  • list.highlightForeground#00b4a8
  • list.hoverBackground#eef0f2
  • list.hoverForeground#383c42
  • list.inactiveSelectionBackground#dfe1e4
  • list.inactiveSelectionForeground#383c42
  • list.warningForeground#9a6700
  • menu.background#f3f4f6
  • menu.border#d0d2d6
  • menu.foreground#383c42
  • menu.selectionBackground#dfe1e4
  • menu.selectionForeground#2f3338
  • menu.separatorBackground#d0d2d6
  • merge.currentContentBackground#34a85320
  • merge.currentHeaderBackground#34a85340
  • merge.incomingContentBackground#1b6bab20
  • merge.incomingHeaderBackground#1b6bab40
  • minimap.background#ffffff
  • minimap.findMatchHighlight#a8ddb080
  • minimap.selectionHighlight#b4d5fe80
  • minimapSlider.activeBackground#6b6f7760
  • minimapSlider.background#6b6f7720
  • minimapSlider.hoverBackground#6b6f7740
  • notificationLink.foreground#00b4a8
  • notifications.background#f3f4f6
  • notifications.border#d0d2d6
  • notifications.foreground#383c42
  • notificationsErrorIcon.foreground#cb2431
  • notificationsInfoIcon.foreground#1b6bab
  • notificationsWarningIcon.foreground#9a6700
  • panel.background#f3f4f6
  • panel.border#d0d2d6
  • panelInput.border#d0d2d6
  • panelSection.border#d0d2d6
  • panelSectionHeader.background#f3f4f6
  • panelSectionHeader.border#d0d2d6
  • panelSectionHeader.foreground#383c42
  • panelTitle.activeBorder#00b4a8
  • panelTitle.activeForeground#383c42
  • panelTitle.inactiveForeground#7d8189
  • peekView.border#00b4a8
  • peekViewEditor.background#f3f4f6
  • peekViewEditor.matchHighlightBackground#a8ddb080
  • peekViewEditorGutter.background#f3f4f6
  • peekViewResult.background#f3f4f6
  • peekViewResult.fileForeground#383c42
  • peekViewResult.lineForeground#6b6f77
  • peekViewResult.matchHighlightBackground#a8ddb0
  • peekViewTitle.background#e8eaed
  • peekViewTitleDescription.foreground#57595f
  • peekViewTitleLabel.foreground#383c42
  • progressBar.background#00b4a8
  • quickInput.background#f3f4f6
  • quickInput.foreground#383c42
  • quickInputList.focusBackground#dfe1e4
  • quickInputList.focusForeground#2f3338
  • quickInputTitle.background#f3f4f6
  • sash.hoverBorder#00b4a8
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#6b6f7770
  • scrollbarSlider.background#6b6f7730
  • scrollbarSlider.hoverBackground#6b6f7750
  • sideBar.background#f3f4f6
  • sideBar.border#d0d2d6
  • sideBar.foreground#4a4e55
  • sideBarSectionHeader.background#f3f4f6
  • sideBarSectionHeader.border#d0d2d6
  • sideBarSectionHeader.foreground#383c42
  • sideBarTitle.foreground#383c42
  • statusBar.background#e8eaed
  • statusBar.border#d0d2d6
  • statusBar.debuggingBackground#1b6bab
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#383c42
  • statusBar.noFolderBackground#e8eaed
  • statusBar.noFolderForeground#383c42
  • statusBarItem.remoteBackground#00b4a8
  • statusBarItem.remoteForeground#ffffff
  • symbolIcon.booleanForeground#a33d1e
  • symbolIcon.classForeground#0b6e5f
  • symbolIcon.constantForeground#8b3685
  • symbolIcon.enumeratorForeground#0b6e5f
  • symbolIcon.enumeratorMemberForeground#8b3685
  • symbolIcon.fieldForeground#8b3685
  • symbolIcon.functionForeground#1b6bab
  • symbolIcon.interfaceForeground#096b5e
  • symbolIcon.keywordForeground#a33d1e
  • symbolIcon.methodForeground#1c6dae
  • symbolIcon.namespaceForeground#0b6e5f
  • symbolIcon.numberForeground#0891b2
  • symbolIcon.propertyForeground#8b3685
  • symbolIcon.stringForeground#2b9a3e
  • symbolIcon.typeParameterForeground#096b5e
  • symbolIcon.variableForeground#0b6e5f
  • tab.activeBackground#ffffff
  • tab.activeBorder#00000000
  • tab.activeBorderTop#00b4a8
  • tab.activeForeground#383c42
  • tab.activeModifiedBorder#00b4a8
  • tab.border#d0d2d6
  • tab.hoverBackground#e8eaed
  • tab.inactiveBackground#f3f4f6
  • tab.inactiveForeground#7d8189
  • tab.inactiveModifiedBorder#00b4a880
  • tab.lastPinnedBorder#d0d2d6
  • tab.unfocusedHoverBackground#e8eaed80
  • terminal.ansiBlack#383c42
  • terminal.ansiBlue#1b6bab
  • terminal.ansiBrightBlack#6b6f77
  • terminal.ansiBrightBlue#155796
  • terminal.ansiBrightCyan#0b7fa5
  • terminal.ansiBrightGreen#1a9c39
  • terminal.ansiBrightMagenta#6f2c6c
  • terminal.ansiBrightRed#cb2431
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#7d5300
  • terminal.ansiCyan#0891b2
  • terminal.ansiGreen#2b9a3e
  • terminal.ansiMagenta#8b3685
  • terminal.ansiRed#cb2431
  • terminal.ansiWhite#f3f4f6
  • terminal.ansiYellow#9a6700
  • terminal.background#f3f4f6
  • terminal.findMatchBackground#a8ddb080
  • terminal.findMatchHighlightBackground#cce8d080
  • terminal.foreground#383c42
  • terminal.selectionBackground#b4d5fe70
  • terminalCursor.foreground#00b4a8
  • testing.iconErrored#d63b3b
  • testing.iconFailed#d63b3b
  • testing.iconPassed#34a853
  • testing.iconQueued#6b6f77
  • testing.iconSkipped#6b6f77
  • testing.iconUnset#6b6f77
  • textBlockQuote.background#f3f4f6
  • textBlockQuote.border#d0d2d6
  • textLink.activeForeground#009990
  • textLink.foreground#00b4a8
  • titleBar.activeBackground#e8eaed
  • titleBar.activeForeground#383c42
  • titleBar.border#d0d2d6
  • titleBar.inactiveBackground#e8eaed
  • titleBar.inactiveForeground#7d8189
  • widget.border#d0d2d6
  • widget.shadow#00000020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.block, comment.line, punctuation.definition.comment#9a9ea6italic
comment.block.documentation#2e8a35
storage.type.class.jsdoc, entity.name.type.instance.jsdoc#2b9a3e
string, string.quoted, string.template, punctuation.definition.string#2b9a3e
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#a33d1e
constant.character.escape, constant.other.placeholder#a33d1e
constant.numeric, constant.language.numeric#0891b2
constant.language.boolean#a33d1e
constant.language.null, constant.language.undefined#a33d1e
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.typeof, keyword.operator.instanceof, keyword.operator.delete, keyword.operator.void, keyword.other#a33d1e
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical#383c42
storage.type, storage.modifier#a33d1e
entity.name.function, support.function, meta.function-call entity.name.function#1b6bab
entity.name.function.member#1c6dae
entity.name.function.member.static#1c6daeitalic
entity.name.type.class, entity.name.class, support.class#0b6e5f
entity.name.type, support.type#0b6e5f
entity.name.type.parameter#096b5e
entity.name.type.interface#096b5e
variable, variable.other.readwrite, variable.other.object#0b6e5f
variable.other.constant, constant.other#8b3685italic
variable.other.property, support.variable.property#8b3685
meta.object-literal.key#8b3685
variable.other.property.static#8b3685italic
variable.parameter#0b6e5f
variable.language.this, variable.language.super#a33d1e
punctuation.separator, punctuation.terminator, punctuation.accessor#383c42
punctuation.section, meta.brace#383c42
entity.name.tag#1b6bab
punctuation.definition.tag#6b6f77
entity.other.attribute-name#8b3685
entity.name.namespace, entity.name.module, entity.name.type.module#0b6e5f
support.constant, variable.other.enummember#8b3685
meta.decorator, punctuation.decorator, storage.type.annotation#6e6b15
entity.other.attribute-name.class.css#1b6bab
entity.other.attribute-name.id.css#1b6bab
entity.name.tag.css, entity.name.tag.less, entity.name.tag.scss#a33d1e
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#6e6b15
variable.css, variable.argument.css#0b6e5f
support.type.property-name.css, support.type.vendored.property-name.css, support.type.property-name.scss, support.type.property-name.less#0b6e5f
support.constant.property-value.css, support.constant.font-name.css, support.constant.color.css, constant.other.color.rgb-value.css, support.constant.media.css#a33d1e
keyword.other.unit.css, keyword.other.unit.scss#0891b2
keyword.other.important.css#a33d1ebold
support.type.property-name.json#8b3685
markup.heading, entity.name.section.markdown#1b6babbold
markup.boldbold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inline.raw, markup.fenced_code.block#2b9a3e
markup.underline.link#1b6bab
punctuation.definition.list.begin.markdown#a33d1e
markup.quote.markdown#9a9ea6italic
string.regexp#0891a3
entity.name.tag.yaml#a33d1e
meta.function.decorator.python, entity.name.function.decorator.python#6e6b15
storage.modifier.lifetime.rust, entity.name.type.lifetime.rust#0b6e5f
support.class.component.jsx, support.class.component.tsx#0b6e5f
meta.embedded#383c42
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#a33d1e
markup.inserted#2b9a3e
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#cb2431
invalid.illegal#cb2431
keyword.codetag#5c5a10italic