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.activeBorder#B55A26
  • activityBar.background#D9CAC2
  • activityBar.border#00000000
  • activityBar.dropBorder#B55A26
  • activityBar.foreground#383838
  • activityBar.inactiveForeground#707070
  • activityBarBadge.background#B55A26
  • activityBarBadge.foreground#ebebeb
  • activityBarTop.activeBorder#B55A26
  • activityBarTop.background#F4F2F1
  • activityBarTop.foreground#383838
  • activityBarTop.inactiveForeground#707070
  • activityErrorBadge.background#D54944
  • activityErrorBadge.foreground#ebebeb
  • activityWarningBadge.background#D5C644
  • activityWarningBadge.foreground#ebebeb
  • agents.background#F4F2F1
  • agentsPanel.border#00000000
  • badge.background#B55A26
  • badge.foreground#ebebeb
  • breadcrumb.activeSelectionForeground#383838
  • breadcrumb.background#fefefe
  • breadcrumb.focusForeground#383838
  • breadcrumb.foreground#2f2f2f
  • breadcrumbPicker.background#F4F2F1
  • button.background#8F3C0C
  • button.foreground#ebebeb
  • button.hoverBackground#B55A26
  • checkbox.background#8F3C0C
  • commandCenter.activeBackground#e0a88a
  • commandCenter.activeBorder#e0a88a
  • commandCenter.activeForeground#080808
  • commandCenter.background#fefefe
  • commandCenter.border#F6E7DE
  • commandCenter.debuggingBackground#8F100C90
  • commandCenter.foreground#383838
  • commandCenter.inactiveBorder#e0e0e0
  • commandCenter.inactiveForeground#707070
  • diffEditor.insertedTextBackground#018D0620
  • diffEditor.removedTextBackground#C5080220
  • dropdown.background#fefefe
  • dropdown.foreground#181818
  • editor.background#fefefe
  • editor.findMatchBackground#1d504241
  • editor.findMatchHighlightBackground#1e332d41
  • editor.foreground#383838
  • editor.hoverHighlightBackground#D9CAC2e6
  • editor.inactiveSelectionBackground#D9CAC266
  • editor.lineHighlightBackground#f0f0f0
  • editor.rangeHighlightBackground#21242321
  • editor.selectionBackground#D9CAC2cc
  • editor.selectionHighlightBackground#33383721
  • editor.symbolHighlightBackground#21242321
  • editor.wordHighlightBackground#F6E7DE16
  • editor.wordHighlightStrongBackground#F6E7DE32
  • editorBracketMatch.border#444
  • editorCursor.foreground#B55A26
  • editorError.foreground#C50802
  • editorGhostText.foreground#7b6a60
  • editorGroup.border#ebebeb
  • editorGroupHeader.tabsBackground#fefefe
  • editorGutter.addedBackground#018D06
  • editorGutter.background#ebebeb
  • editorGutter.commentRangeForeground#9f9f9f
  • editorGutter.deletedBackground#C50802
  • editorGutter.modifiedBackground#C5B102
  • editorIndentGuide.activeBackground#7b6a60
  • editorIndentGuide.activeBackground1#7b6a60
  • editorInfo.foreground#026AC5
  • editorInlayHint.background#38383800
  • editorInlayHint.foreground#014179a0
  • editorLineNumber.activeForeground#474747
  • editorLineNumber.foreground#9f9f9f
  • editorLink.activeForeground#D37947
  • editorUnnecessaryCode.opacity#000000c0
  • editorWarning.foreground#C5B102
  • editorWhitespace.foreground#dfdfdf
  • errorForeground#D54944
  • focusBorder#B55A26
  • foreground#383838
  • git.blame.editorDecorationForeground#9f9f9f
  • gitDecoration.addedResourceForeground#2AB72E
  • gitDecoration.conflictingResourceForeground#B61611
  • gitDecoration.deletedResourceForeground#D54944
  • gitDecoration.modifiedResourceForeground#D5C644
  • gitDecoration.untrackedResourceForeground#0C8310
  • icon.foreground#383838
  • input.background#fefefe
  • input.border#D9CAC2
  • input.foreground#181818
  • inputOption.activeBackground#e0a88a
  • inputOption.activeBorder#e0a88a
  • inputOption.activeForeground#080808
  • inputOption.hoverBackground#D9CAC2
  • inputValidation.errorBackground#D54944
  • inputValidation.errorBorder#D54944
  • inputValidation.errorForeground#ebebeb
  • inputValidation.infoBackground#445CD5
  • inputValidation.infoBorder#445CD5
  • inputValidation.infoForeground#ebebeb
  • inputValidation.warningBackground#D5C644
  • inputValidation.warningBorder#D5C644
  • inputValidation.warningForeground#ebebeb
  • keybindingLabel.background#F6E7DE
  • keybindingLabel.border#D9CAC2
  • keybindingLabel.bottomBorder#7b6a60
  • keybindingLabel.foreground#332c28
  • list.activeSelectionBackground#F6E7DE
  • list.activeSelectionForeground#383838
  • list.dropBackground#D37947
  • list.filterMatchBackground#B55A26
  • list.focusBackground#F6E7DE
  • list.highlightForeground#B55A26
  • list.hoverBackground#D9CAC2
  • list.inactiveFocusBackground#D37947
  • list.inactiveSelectionBackground#F6E7DE
  • menu.background#F4F2F1
  • menu.foreground#2f2f2f
  • menu.selectionBackground#552407
  • menu.selectionForeground#383838
  • menu.separatorBackground#2f2f2f
  • merge.commonContentBackground#F5F2D660
  • merge.commonHeaderBackground#F5F2D690
  • merge.currentContentBackground#D6F1F560
  • merge.currentHeaderBackground#D6F1F590
  • merge.incomingContentBackground#D6DBF560
  • merge.incomingHeaderBackground#D6DBF590
  • modernUI.shellBackground#D9CAC2
  • outputView.background#fefefe
  • panel.background#fefefe
  • panel.border#D9CAC2
  • panelSection.border#00000000
  • panelTitle.activeBorder#B55A26
  • panelTitle.activeForeground#383838
  • panelTitle.inactiveForeground#707070
  • peekView.border#D37947
  • peekViewEditor.background#F3F3F3
  • peekViewEditor.matchHighlightBackground#D9CAC2
  • peekViewResult.background#fefefe
  • peekViewResult.matchHighlightBackground#1e332d31
  • peekViewResult.selectionBackground#F6E7DE
  • peekViewTitle.background#D9CAC2
  • peekViewTitleLabel.foreground#080808
  • pickerGroup.foreground#B55A26
  • progressBar.background#B55A26
  • quickInput.background#fefefe
  • quickInput.foreground#2f2f2f
  • scrollbar.shadow#55555533
  • scrollbarSlider.activeBackground#D3794763
  • scrollbarSlider.background#D9CAC233
  • scrollbarSlider.hoverBackground#D3794783
  • selection.background#D9CAC2cc
  • settings.modifiedItemIndicator#E1D889
  • sideBar.background#F4F2F1
  • sideBar.border#00000000
  • sideBar.foreground#383838
  • sideBarSectionHeader.background#F4F2F1
  • sideBarSectionHeader.foreground#2f2f2f
  • sideBarTitle.background#F4F2F1
  • sideBarTitle.foreground#707070
  • sideBySideEditor.horizontalBorder#ebebeb
  • sideBySideEditor.verticalBorder#ebebeb
  • statusBar.background#fefefe
  • statusBar.border#00000000
  • statusBar.debuggingBackground#8F100C
  • statusBar.debuggingForeground#ebebeb
  • statusBar.foreground#2f2f2f
  • statusBar.noFolderBackground#ebebeb
  • statusBarItem.remoteBackground#8F3C0C
  • statusBarItem.remoteForeground#E1D889
  • surface.background#F4F2F1
  • surface.border#00000000
  • tab.activeBackground#D9CAC2
  • tab.activeForeground#383838
  • tab.inactiveBackground#fefefe
  • tab.inactiveForeground#707070
  • terminal.ansiBlack#080808
  • terminal.ansiBlue#112CB6
  • terminal.ansiBrightBlack#797979
  • terminal.ansiBrightBlue#445CD5
  • terminal.ansiBrightCyan#44C1D5
  • terminal.ansiBrightGreen#2AB72E
  • terminal.ansiBrightMagenta#D544C1
  • terminal.ansiBrightRed#D54944
  • terminal.ansiBrightWhite#2f2f2f
  • terminal.ansiBrightYellow#D5C644
  • terminal.ansiCyan#11A0B6
  • terminal.ansiGreen#0C8310
  • terminal.ansiMagenta#B611A0
  • terminal.ansiRed#B61611
  • terminal.ansiWhite#707070
  • terminal.ansiYellow#B6A511
  • terminal.background#fefefe
  • terminal.foreground#383838
  • terminal.inactiveSelectionBackground#D9CAC266
  • terminal.selectionBackground#D9CAC2cc
  • textBlockQuote.background#F6E7DE
  • textBlockQuote.border#8F3C0C
  • textCodeBlock.background#F6E7DE
  • textLink.activeForeground#B55A26
  • textLink.foreground#D37947
  • textPreformat.background#F6E7DE
  • textPreformat.foreground#552407
  • textSeparator.foreground#7b6a60
  • titleBar.activeBackground#D9CAC2
  • titleBar.activeForeground#2f2f2f
  • titleBar.border#00000000
  • titleBar.inactiveBackground#e0e0e0
  • titleBar.inactiveForeground#707070
  • toolbar.activeBackground#e0a88a
  • toolbar.hoverBackground#D9CAC2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.numeric, constant.numeric keyword.other.unit, constant.other.timestamp#C50802—
string#C57702—
constant.character.escape#993800—
punctuation.definition.template-expression#993800—
meta.template.expression#111100—
string.regexp#70660A—
constant.character.escape.backslash.regexp#D54944—
punctuation.definition.group.regexp, punctuation.definition.character-class.regexp#796D01—
constant.language#D54944—
constant.other.color#000000—
comment, comment.block#9f9f9f—
comment.block.documentation#6A8759—
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc#6A8759bold underline
variable.other.jsdoc#629755italic
storage.type, storage.modifier#B55A26bold
storage.modifier—bold italic
keyword, keyword.operator, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python, keyword.control#B55A26—
entity.other.attribute-name#B61611—
meta.object-literal.key#794901—
entity.name.function.preprocessor#E189D5bold
entity.name.type.class#797979bold
entity.name.function#8A44D5bold
variable.language#B55A26bold
variable.parameter#383838italic
variable.other.enummember#0A4170bold italic
entity.name.variable, meta.definition.variable, variable.object.property#383838—
meta.import variable.other.readwrite#383838—
meta.import variable.other.readwrite.alias#383838—
entity.name.type#014179—
meta.definition.property#0A4170—
support.type.builtin, support.type.primitive, storage.type.built-in#014179bold
punctuation.definition.tag, entity.name.tag#790501—
support.class.component—bold
meta.tag.attributes punctuation.section.embedded#111100—
meta.jsx.children punctuation.section.embedded, meta.tag.attributes meta.jsx.children punctuation.section.embedded#993800—
support.type.property-name#794901—
variable.other.env#B67411—
source.env#C57702—
markup.heading#B55A26bold
markup.underline—underline
markup.bold—bold
markup.italic—italic
markup.underline.link#D37947—
markup.quote#790169—
markup.list punctuation.definition.list.begin#794901bold
source.css entity.other.attribute-name.id—bold
source.css entity.name.tag#790501bold
source.css support.function#8A44D5—
Springbok Theme by chrp - VS Code Theme