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.activeBackground#bf48361a
  • activityBar.activeBorder#bf4836
  • activityBar.background#12130e
  • activityBar.border#31342800
  • activityBar.foreground#c9cbc3
  • activityBar.inactiveForeground#6c705c
  • activityBarBadge.background#bf4836
  • activityBarBadge.foreground#f6f6f3
  • activityBarTop.activeBorder#bf4836
  • activityBarTop.foreground#c9cbc3
  • activityBarTop.inactiveForeground#6c705c
  • badge.background#bf4836
  • badge.foreground#f6f6f3
  • banner.background#2f3126
  • banner.foreground#c9cbc3
  • banner.iconForeground#d06a5a
  • breadcrumb.activeSelectionForeground#d06a5a
  • breadcrumb.background#1e2018
  • breadcrumb.focusForeground#c9cbc3
  • breadcrumb.foreground#6c705c
  • breadcrumbPicker.background#282a20
  • button.background#bf4836
  • button.border#bf483600
  • button.foreground#f6f6f3
  • button.hoverBackground#cb5a48
  • button.secondaryBackground#2f3126
  • button.secondaryForeground#c9cbc3
  • button.secondaryHoverBackground#3a3d2f
  • charts.blue#7582d4
  • charts.foreground#c9cbc3
  • charts.green#33a166
  • charts.lines#6c705c
  • charts.orange#9b9b31
  • charts.purple#d57998
  • charts.red#d27278
  • charts.yellow#ac8936
  • checkbox.background#282a20
  • checkbox.border#474b3a
  • checkbox.foreground#c9cbc3
  • debugConsole.errorForeground#d27278
  • debugConsole.infoForeground#d37364
  • debugConsole.sourceForeground#8f937e
  • debugConsole.warningForeground#ac8936
  • debugConsoleInputIcon.foreground#d06a5a
  • debugExceptionWidget.background#372b25
  • debugExceptionWidget.border#d27278
  • debugIcon.breakpointDisabledForeground#d2727880
  • debugIcon.breakpointForeground#d27278
  • debugIcon.continueForeground#33a166
  • debugIcon.pauseForeground#d37364
  • debugIcon.restartForeground#33a166
  • debugIcon.startForeground#33a166
  • debugIcon.stepIntoForeground#d37364
  • debugIcon.stepOutForeground#d37364
  • debugIcon.stepOverForeground#d37364
  • debugIcon.stopForeground#d27278
  • debugTokenExpression.boolean#d57998
  • debugTokenExpression.error#d27278
  • debugTokenExpression.name#8a93cc
  • debugTokenExpression.number#9b9b31
  • debugTokenExpression.string#35a794
  • debugTokenExpression.value#35a794
  • debugToolBar.background#282a20
  • debugToolBar.border#313428
  • descriptionForeground#8f937e
  • diffEditor.diagonalFill#313428
  • diffEditor.insertedLineBackground#359a5f17
  • diffEditor.insertedTextBackground#359a5f24
  • diffEditor.removedLineBackground#cb6e6717
  • diffEditor.removedTextBackground#cb6e6724
  • diffEditorOverview.insertedForeground#359a5f99
  • diffEditorOverview.removedForeground#cb6e6799
  • dropdown.background#282a20
  • dropdown.border#313428
  • dropdown.foreground#c9cbc3
  • dropdown.listBackground#282a20
  • editor.background#1e2018
  • editor.findMatchBackground#c2c23d52
  • editor.findMatchBorder#c8c851b3
  • editor.findMatchHighlightBackground#c2c23d2e
  • editor.findRangeHighlightBackground#bf483621
  • editor.focusedStackFrameHighlightBackground#33a1662e
  • editor.foldBackground#bf483614
  • editor.foreground#c9cbc3
  • editor.hoverHighlightBackground#bf483624
  • editor.inactiveSelectionBackground#bf483621
  • editor.lineHighlightBackground#ffffff0b
  • editor.lineHighlightBorder#bf483600
  • editor.rangeHighlightBackground#bf483621
  • editor.selectionBackground#bf48363d
  • editor.selectionHighlightBackground#bf483621
  • editor.selectionHighlightBorder#bf483600
  • editor.stackFrameHighlightBackground#ac893629
  • editor.wordHighlightBackground#bf483624
  • editor.wordHighlightStrongBackground#bf483638
  • editorBracketHighlight.foreground1#7582d4
  • editorBracketHighlight.foreground2#9b9b31
  • editorBracketHighlight.foreground3#3a91b6
  • editorBracketHighlight.foreground4#cf6689
  • editorBracketHighlight.foreground5#319b89
  • editorBracketHighlight.foreground6#c2763f
  • editorBracketHighlight.unexpectedBracket.foreground#d27278
  • editorBracketMatch.background#bf483629
  • editorBracketMatch.border#bf48368c
  • editorCodeLens.foreground#6c705c
  • editorCursor.background#1e2018
  • editorCursor.foreground#d06a5a
  • editorError.foreground#d27278
  • editorGhostText.foreground#6c705c
  • editorGroup.border#313428
  • editorGroup.dropBackground#bf483629
  • editorGroupHeader.border#31342800
  • editorGroupHeader.noTabsBackground#12130e
  • editorGroupHeader.tabsBackground#12130e
  • editorGroupHeader.tabsBorder#31342800
  • editorGutter.addedBackground#359a5f
  • editorGutter.background#1e2018
  • editorGutter.deletedBackground#cb6e67
  • editorGutter.foldingControlForeground#8f937e
  • editorGutter.modifiedBackground#a78339
  • editorHint.foreground#6c705c
  • editorHoverWidget.background#282a20
  • editorHoverWidget.border#313428
  • editorHoverWidget.foreground#c9cbc3
  • editorHoverWidget.statusBarBackground#2f3126
  • editorIndentGuide.activeBackground1#525643
  • editorIndentGuide.background1#2f3126
  • editorInfo.foreground#d37364
  • editorInlayHint.background#bf48361a
  • editorInlayHint.foreground#6c705c
  • editorLineNumber.activeForeground#d06a5a
  • editorLineNumber.foreground#6c705c
  • editorLink.activeForeground#d06a5a
  • editorOverviewRuler.addedForeground#359a5f
  • editorOverviewRuler.border#31342800
  • editorOverviewRuler.bracketMatchForeground#bf483666
  • editorOverviewRuler.deletedForeground#cb6e67
  • editorOverviewRuler.errorForeground#d27278
  • editorOverviewRuler.findMatchForeground#c8c851b3
  • editorOverviewRuler.infoForeground#d37364
  • editorOverviewRuler.modifiedForeground#a78339
  • editorOverviewRuler.selectionHighlightForeground#bf483666
  • editorOverviewRuler.warningForeground#ac8936
  • editorRuler.foreground#2c2e23
  • editorStickyScroll.background#171813
  • editorStickyScrollHover.background#2f3126
  • editorSuggestWidget.background#282a20
  • editorSuggestWidget.border#313428
  • editorSuggestWidget.focusHighlightForeground#cb5a48
  • editorSuggestWidget.foreground#c9cbc3
  • editorSuggestWidget.highlightForeground#d06a5a
  • editorSuggestWidget.selectedBackground#bf48362e
  • editorSuggestWidget.selectedForeground#c9cbc3
  • editorWarning.foreground#ac8936
  • editorWhitespace.foreground#6c705c80
  • editorWidget.background#282a20
  • editorWidget.border#313428
  • editorWidget.foreground#c9cbc3
  • errorForeground#d27278
  • extensionBadge.remoteBackground#bf4836
  • extensionBadge.remoteForeground#f6f6f3
  • extensionButton.prominentBackground#bf4836
  • extensionButton.prominentForeground#f6f6f3
  • extensionButton.prominentHoverBackground#cb5a48
  • extensionIcon.preReleaseForeground#d57998
  • extensionIcon.starForeground#9b9b31
  • extensionIcon.verifiedForeground#33a166
  • focusBorder#bf483699
  • foreground#c9cbc3
  • gitDecoration.addedResourceForeground#359a5f
  • gitDecoration.conflictingResourceForeground#c660c6
  • gitDecoration.deletedResourceForeground#cb6e67
  • gitDecoration.ignoredResourceForeground#6c705c
  • gitDecoration.modifiedResourceForeground#a78339
  • gitDecoration.renamedResourceForeground#3f9a3f
  • gitDecoration.stageDeletedResourceForeground#cb6e67
  • gitDecoration.stageModifiedResourceForeground#a78339
  • gitDecoration.submoduleResourceForeground#9f77c8
  • gitDecoration.untrackedResourceForeground#3f9a3f
  • icon.foreground#8f937e
  • input.background#26281f
  • input.border#313428
  • input.foreground#c9cbc3
  • input.placeholderForeground#6c705c
  • inputOption.activeBackground#bf48363d
  • inputOption.activeBorder#bf483680
  • inputOption.activeForeground#c9cbc3
  • inputValidation.errorBackground#3b2d27
  • inputValidation.errorBorder#d27278
  • inputValidation.errorForeground#c9cbc3
  • inputValidation.infoBackground#3b2d24
  • inputValidation.infoBorder#d37364
  • inputValidation.infoForeground#c9cbc3
  • inputValidation.warningBackground#35311d
  • inputValidation.warningBorder#ac8936
  • inputValidation.warningForeground#c9cbc3
  • keybindingLabel.background#6c705c24
  • keybindingLabel.border#6c705c29
  • keybindingLabel.bottomBorder#6c705c38
  • keybindingLabel.foreground#c9cbc3
  • list.activeSelectionBackground#bf483633
  • list.activeSelectionForeground#c9cbc3
  • list.activeSelectionIconForeground#d06a5a
  • list.dropBackground#bf483629
  • list.errorForeground#d27278
  • list.focusBackground#bf483633
  • list.focusForeground#c9cbc3
  • list.focusHighlightForeground#cb5a48
  • list.focusOutline#bf483600
  • list.highlightForeground#d06a5a
  • list.hoverBackground#6c705c1a
  • list.hoverForeground#c9cbc3
  • list.inactiveSelectionBackground#bf48361c
  • list.inactiveSelectionForeground#c9cbc3
  • list.warningForeground#ac8936
  • listFilterWidget.background#282a20
  • listFilterWidget.noMatchesOutline#d27278
  • listFilterWidget.outline#bf4836
  • menu.background#282a20
  • menu.border#313428
  • menu.foreground#c9cbc3
  • menu.selectionBackground#bf483633
  • menu.selectionForeground#c9cbc3
  • menu.separatorBackground#313428
  • menubar.selectionBackground#6c705c24
  • menubar.selectionForeground#c9cbc3
  • merge.border#31342800
  • merge.commonContentBackground#6c705c1f
  • merge.commonHeaderBackground#6c705c40
  • merge.currentContentBackground#359a5f24
  • merge.currentHeaderBackground#359a5f4d
  • merge.incomingContentBackground#d3736424
  • merge.incomingHeaderBackground#d373644d
  • minimap.background#1e2018
  • minimap.errorHighlight#d27278
  • minimap.findMatchHighlight#c2c23db3
  • minimap.selectionHighlight#bf483680
  • minimap.warningHighlight#ac8936
  • minimapGutter.addedBackground#359a5f
  • minimapGutter.deletedBackground#cb6e67
  • minimapGutter.modifiedBackground#a78339
  • minimapSlider.activeBackground#6c705c42
  • minimapSlider.background#6c705c1a
  • minimapSlider.hoverBackground#6c705c2e
  • notificationCenter.border#313428
  • notificationCenterHeader.background#2f3126
  • notificationCenterHeader.foreground#c9cbc3
  • notificationLink.foreground#d06a5a
  • notifications.background#282a20
  • notifications.border#313428
  • notifications.foreground#c9cbc3
  • notificationsErrorIcon.foreground#d27278
  • notificationsInfoIcon.foreground#d37364
  • notificationsWarningIcon.foreground#ac8936
  • notificationToast.border#313428
  • panel.background#171813
  • panel.border#313428
  • panel.dropBorder#bf4836
  • panelInput.border#313428
  • panelSection.border#313428
  • panelSectionHeader.background#171813
  • panelSectionHeader.foreground#c9cbc3
  • panelTitle.activeBorder#bf4836
  • panelTitle.activeForeground#c9cbc3
  • panelTitle.inactiveForeground#6c705c
  • peekView.border#bf48368c
  • peekViewEditor.background#191a14
  • peekViewEditor.matchHighlightBackground#c2c23d52
  • peekViewResult.background#171813
  • peekViewResult.fileForeground#c9cbc3
  • peekViewResult.foreground#c9cbc3
  • peekViewResult.lineForeground#8f937e
  • peekViewResult.matchHighlightBackground#c2c23d52
  • peekViewResult.selectionBackground#bf48362e
  • peekViewResult.selectionForeground#c9cbc3
  • peekViewTitle.background#171813
  • peekViewTitleDescription.foreground#8f937e
  • peekViewTitleLabel.foreground#c9cbc3
  • pickerGroup.border#313428
  • pickerGroup.foreground#d06a5a
  • ports.iconRunningProcessForeground#33a166
  • problemsErrorIcon.foreground#d27278
  • problemsInfoIcon.foreground#d37364
  • problemsWarningIcon.foreground#ac8936
  • progressBar.background#bf4836
  • quickInput.background#282a20
  • quickInput.foreground#c9cbc3
  • quickInputList.focusBackground#bf483633
  • quickInputList.focusForeground#c9cbc3
  • quickInputList.focusIconForeground#d06a5a
  • quickInputTitle.background#2f3126
  • sash.hoverBorder#bf483680
  • scrollbar.shadow#0809074d
  • scrollbarSlider.activeBackground#6c705c73
  • scrollbarSlider.background#6c705c33
  • scrollbarSlider.hoverBackground#6c705c52
  • search.resultsInfoForeground#8f937e
  • searchEditor.findMatchBackground#c2c23d2e
  • selection.background#bf48363d
  • settings.checkboxBackground#282a20
  • settings.checkboxBorder#474b3a
  • settings.dropdownBackground#282a20
  • settings.dropdownBorder#313428
  • settings.focusedRowBackground#bf483612
  • settings.headerForeground#c9cbc3
  • settings.modifiedItemIndicator#bf4836
  • settings.numberInputBackground#26281f
  • settings.numberInputBorder#313428
  • settings.rowHoverBackground#6c705c0f
  • settings.textInputBackground#26281f
  • settings.textInputBorder#313428
  • sideBar.background#171813
  • sideBar.border#31342800
  • sideBar.foreground#898d77
  • sideBarSectionHeader.background#171813
  • sideBarSectionHeader.border#31342800
  • sideBarSectionHeader.foreground#c9cbc3
  • sideBarStickyScroll.background#171813
  • sideBarTitle.foreground#c9cbc3
  • statusBar.background#12130e
  • statusBar.border#31342800
  • statusBar.debuggingBackground#bf4836
  • statusBar.debuggingBorder#31342800
  • statusBar.debuggingForeground#f6f6f3
  • statusBar.foreground#858a73
  • statusBar.noFolderBackground#12130e
  • statusBar.noFolderForeground#858a73
  • statusBarItem.activeBackground#6c705c38
  • statusBarItem.hoverBackground#6c705c24
  • statusBarItem.prominentBackground#bf48363d
  • statusBarItem.prominentForeground#c9cbc3
  • statusBarItem.prominentHoverBackground#bf483657
  • statusBarItem.remoteBackground#bf4836
  • statusBarItem.remoteForeground#f6f6f3
  • symbolIcon.booleanForeground#d57998
  • symbolIcon.classForeground#479fc5
  • symbolIcon.colorForeground#9a9a3c
  • symbolIcon.constantForeground#9b9b31
  • symbolIcon.constructorForeground#8792d9
  • symbolIcon.enumeratorForeground#479fc5
  • symbolIcon.enumeratorMemberForeground#9b9b31
  • symbolIcon.fieldForeground#8a93cc
  • symbolIcon.fileForeground#8f937e
  • symbolIcon.folderForeground#8f937e
  • symbolIcon.functionForeground#8792d9
  • symbolIcon.interfaceForeground#479fc5
  • symbolIcon.keywordForeground#d57998
  • symbolIcon.methodForeground#8792d9
  • symbolIcon.moduleForeground#ca8656
  • symbolIcon.namespaceForeground#ca8656
  • symbolIcon.numberForeground#9b9b31
  • symbolIcon.propertyForeground#8a93cc
  • symbolIcon.snippetForeground#9a9a3c
  • symbolIcon.stringForeground#35a794
  • symbolIcon.textForeground#8f937e
  • symbolIcon.variableForeground#c9cbc3
  • tab.activeBackground#1e2018
  • tab.activeBorder#1e201800
  • tab.activeBorderTop#bf4836
  • tab.activeForeground#c9cbc3
  • tab.activeModifiedBorder#a78339
  • tab.border#31342800
  • tab.hoverBackground#171813
  • tab.hoverForeground#c9cbc3
  • tab.inactiveBackground#12130e
  • tab.inactiveForeground#6c705c
  • tab.inactiveModifiedBorder#a7833980
  • tab.lastPinnedBorder#313428
  • tab.unfocusedActiveBackground#171813
  • tab.unfocusedActiveBorderTop#bf483659
  • tab.unfocusedActiveForeground#8f937e
  • tab.unfocusedInactiveForeground#6c705c
  • terminal.ansiBlack#373a2c
  • terminal.ansiBlue#7582d4
  • terminal.ansiBrightBlack#5d624b
  • terminal.ansiBrightBlue#939edd
  • terminal.ansiBrightCyan#65a9c6
  • terminal.ansiBrightGreen#5eb1a3
  • terminal.ansiBrightMagenta#da88a3
  • terminal.ansiBrightRed#da8b90
  • terminal.ansiBrightWhite#c9cbc3
  • terminal.ansiBrightYellow#b1b15e
  • terminal.ansiCyan#3a91b6
  • terminal.ansiGreen#319b89
  • terminal.ansiMagenta#cf6689
  • terminal.ansiRed#d06a71
  • terminal.ansiWhite#898d77
  • terminal.ansiYellow#9b9b31
  • terminal.background#171813
  • terminal.border#313428
  • terminal.findMatchBackground#c2c23d52
  • terminal.findMatchHighlightBackground#c2c23d2e
  • terminal.foreground#c1c3b9
  • terminal.inactiveSelectionBackground#bf483621
  • terminal.selectionBackground#bf48363d
  • terminalCursor.background#171813
  • terminalCursor.foreground#d06a5a
  • testing.iconErrored#d27278
  • testing.iconFailed#d27278
  • testing.iconPassed#33a166
  • testing.iconQueued#ac8936
  • testing.iconSkipped#6c705c
  • testing.iconUnset#6c705c
  • testing.message.error.decorationForeground#d27278
  • testing.runAction#33a166
  • textBlockQuote.background#171813
  • textBlockQuote.border#bf483680
  • textCodeBlock.background#171813
  • textLink.activeForeground#cb5a48
  • textLink.foreground#d06a5a
  • textPreformat.background#bf48361a
  • textPreformat.foreground#35a794
  • textSeparator.foreground#313428
  • titleBar.activeBackground#12130e
  • titleBar.activeForeground#858a73
  • titleBar.border#31342800
  • titleBar.inactiveBackground#12130e
  • titleBar.inactiveForeground#6c705c
  • tree.inactiveIndentGuidesStroke#292b21
  • tree.indentGuidesStroke#34372a
  • walkThrough.embeddedEditorBackground#171813
  • welcomePage.background#1e2018
  • welcomePage.progress.background#313428
  • welcomePage.progress.foreground#bf4836
  • welcomePage.tileBackground#171813
  • welcomePage.tileHoverBackground#2f3126
  • widget.border#313428
  • widget.shadow#08090770

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#858b6ditalic
comment.block.documentation storage.type, comment keyword#858b6ditalic bold
punctuation, meta.brace, punctuation.definition.parameters, punctuation.separator, punctuation.terminator#8f937e
variable, variable.other.readwrite, meta.definition.variable.name, support.variable, entity.name.variable#c9cbc3
variable.parameter, meta.function.parameters variable#c9b39ditalic
variable.language, variable.language.this, variable.other.constant#ca8656italic
variable.other.property, meta.object-literal.key, support.type.property-name, variable.other.object.property#8a93cc
keyword, keyword.control, keyword.other, storage, storage.type, storage.modifier, keyword.type#d57998
keyword.operator, punctuation.accessor, storage.type.function.arrow#b7768c
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default#d57998italic
string, string.quoted, punctuation.definition.string, string.template#35a794
punctuation.definition.template-expression, punctuation.section.embedded#b7768c
string.regexp, constant.other.character-class.regexp, keyword.operator.quantifier.regexp#3da0ca
constant.character.escape, constant.character#ca8656
constant.numeric, constant.language.numeric#9b9b31
constant, constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, support.constant#9b9b31
entity.name.function, support.function, meta.function-call.generic, variable.function#8792d9
entity.name.method, meta.method entity.name.function#8792d9
entity.name.type, entity.name.class, entity.other.inherited-class, support.class, support.type, meta.type.annotation, entity.name.namespace#479fc5
meta.decorator, entity.name.function.decorator, punctuation.decorator#9a9a3citalic
entity.name.tag, punctuation.definition.tag, meta.tag#ca8656
support.class.component, entity.name.tag.custom#479fc5
entity.other.attribute-name, meta.attribute#9a9a3citalic
entity.name.selector, entity.other.attribute-name.class, entity.other.attribute-name.id#479fc5
support.type.property-name.css, support.type.property-name.scss#8a93cc
keyword.other.unit, constant.numeric.css#9b9b31
support.type.property-name.json, meta.structure.dictionary.json string.quoted.double#8a93cc
entity.name.tag.yaml#8a93cc
markup.heading, entity.name.section.markdown, punctuation.definition.heading#8792d9bold
markup.bold#9b9b31bold
markup.italic#d57998italic
markup.strikethrough#858b6dstrikethrough
markup.underline.link, string.other.link#d06a5aunderline
markup.quote#858b6ditalic
markup.inline.raw, markup.fenced_code, markup.raw#35a794
markup.list punctuation.definition.list, beginning.punctuation.definition.list#ca8656
markup.inserted#359a5f
markup.deleted#cb6e67
markup.changed#a78339
invalid, invalid.illegal#d27278
invalid.deprecated#ac8936strikethrough
variable.other.normal.shell, string.interpolated.dollar.shell#8a93cc
keyword.other.definition.ini, entity.name.section.ini#8a93cc