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#2d261f
  • activityBar.border#3d3530
  • activityBar.foreground#f8f4ec
  • activityBar.inactiveForeground#908070
  • activityBarBadge.background#2d8818
  • activityBarBadge.foreground#ffffff
  • badge.background#2d8818
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#2d8818
  • breadcrumb.focusForeground#2a2520
  • breadcrumb.foreground#605848
  • breadcrumbPicker.background#f8f5f0
  • button.background#2d8818
  • button.foreground#ffffff
  • button.hoverBackground#3d9828
  • button.secondaryBackground#c8bda5
  • button.secondaryForeground#2a2520
  • button.secondaryHoverBackground#b8ad95
  • commandCenter.activeBackground#ddd5c8
  • commandCenter.activeForeground#2a2520
  • commandCenter.background#ebe5d8
  • commandCenter.border#c8bda5
  • commandCenter.foreground#2a2520
  • diffEditor.insertedTextBackground#2d881838
  • diffEditor.removedTextBackground#c8202038
  • diffEditorGutter.insertedLineBackground#2d881858
  • diffEditorGutter.removedLineBackground#c8202058
  • dropdown.background#fefcf8
  • dropdown.border#b8a890
  • dropdown.foreground#2a2520
  • dropdown.listBackground#f8f5f0
  • editor.background#fefcf8
  • editor.findMatchBackground#f0a06050
  • editor.findMatchHighlightBackground#b8d89050
  • editor.foreground#3a3225
  • editor.lineHighlightBackground#f8f5ef
  • editor.selectionBackground#c8dba8
  • editor.selectionHighlightBackground#c8dba870
  • editor.wordHighlightBackground#dde8c8
  • editorBracketMatch.background#c8dba8
  • editorBracketMatch.border#3d7a28
  • editorCursor.foreground#c87010
  • editorError.foreground#c82020
  • editorGhostText.foreground#70605080
  • editorGroupHeader.tabsBackground#ddd5c8
  • editorGroupHeader.tabsBorder#c8bda5
  • editorHint.foreground#108868
  • editorHoverWidget.background#f8f5f0
  • editorHoverWidget.border#c8bda5
  • editorIndentGuide.activeBackground1#c0a880
  • editorIndentGuide.background1#e8e2d8
  • editorInfo.foreground#2050a0
  • editorInlayHint.background#8030a025
  • editorInlayHint.foreground#7028a0
  • editorLineNumber.activeForeground#b08820
  • editorLineNumber.foreground#b0a088
  • editorSuggestWidget.background#f8f5f0
  • editorSuggestWidget.border#c8bda5
  • editorSuggestWidget.highlightForeground#1d6008
  • editorSuggestWidget.selectedBackground#b8d898
  • editorWarning.foreground#a85808
  • editorWhitespace.foreground#d8d0c0
  • editorWidget.background#f8f5f0
  • editorWidget.border#c8bda5
  • focusBorder#2d8818a0
  • gitDecoration.addedResourceForeground#2d8818
  • gitDecoration.conflictingResourceForeground#d85008
  • gitDecoration.deletedResourceForeground#c82020
  • gitDecoration.ignoredResourceForeground#989080
  • gitDecoration.modifiedResourceForeground#a85808
  • gitDecoration.untrackedResourceForeground#108868
  • inlineChat.background#f8f5f0
  • inlineChat.border#c8bda5
  • input.background#fefcf8
  • input.border#b8a890
  • input.foreground#2a2520
  • input.placeholderForeground#807060
  • inputOption.activeBackground#2d881830
  • inputOption.activeBorder#2d8818
  • list.activeSelectionBackground#b8d898
  • list.activeSelectionForeground#1a1815
  • list.focusBackground#c8e0a8
  • list.highlightForeground#1d6008
  • list.hoverBackground#e8e2d5
  • list.inactiveSelectionBackground#d5d0c0
  • menu.background#f8f5f0
  • menu.foreground#2a2520
  • menu.selectionBackground#b8d898
  • menu.selectionForeground#1a1815
  • menu.separatorBackground#c8bda5
  • menubar.selectionBackground#b8d898
  • merge.currentContentBackground#2d88182d
  • merge.currentHeaderBackground#2d881858
  • merge.incomingContentBackground#2050a02d
  • merge.incomingHeaderBackground#2050a058
  • minimap.background#faf8f5
  • minimap.selectionHighlight#2d881870
  • minimapSlider.activeBackground#90806080
  • minimapSlider.background#90806040
  • minimapSlider.hoverBackground#90806060
  • notificationCenterHeader.background#ebe5d8
  • notifications.background#f8f5f0
  • notifications.border#c8bda5
  • notifications.foreground#2a2520
  • panel.background#ebe5d8
  • panel.border#c8bda5
  • panelSectionHeader.background#ddd5c8
  • panelTitle.activeBorder#2d8818
  • panelTitle.activeForeground#2a2520
  • panelTitle.inactiveForeground#706050
  • peekView.border#2d8818
  • peekViewEditor.background#f8f5f0
  • peekViewResult.background#ebe5d8
  • peekViewTitle.background#ddd5c8
  • peekViewTitleLabel.foreground#2a2520
  • quickInput.background#f8f5f0
  • quickInputList.focusBackground#b8d898
  • quickInputTitle.background#ebe5d8
  • scrollbarSlider.activeBackground#706040
  • scrollbarSlider.background#908060
  • scrollbarSlider.hoverBackground#807050
  • sideBar.background#f5f2eb
  • sideBar.border#d0c8b8
  • sideBar.foreground#3a3225
  • sideBarSectionHeader.background#e5ddd0
  • sideBarSectionHeader.border#c8bda5
  • sideBarSectionHeader.foreground#2d7018
  • sideBarTitle.foreground#2a2520
  • statusBar.background#3a3028
  • statusBar.border#4a4038
  • statusBar.debuggingBackground#b84040
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#f8f4ec
  • statusBar.noFolderBackground#2d261f
  • statusBarItem.hoverBackground#4a4238
  • statusBarItem.prominentBackground#4a7a32
  • statusBarItem.prominentForeground#ffffff
  • statusBarItem.remoteBackground#2858a0
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#fefcf8
  • tab.activeBorder#fefcf8
  • tab.activeBorderTop#2d8818
  • tab.activeForeground#2a2520
  • tab.border#d0c8b8
  • tab.inactiveBackground#ebe5d8
  • tab.inactiveForeground#5a5045
  • tab.unfocusedActiveBorderTop#5a9040
  • terminal.ansiBlack#2a2520
  • terminal.ansiBlue#2050a0
  • terminal.ansiBrightBlack#605848
  • terminal.ansiBrightBlue#3060b0
  • terminal.ansiBrightCyan#209878
  • terminal.ansiBrightGreen#3d9828
  • terminal.ansiBrightMagenta#9840b0
  • terminal.ansiBrightRed#d83030
  • terminal.ansiBrightWhite#fefcf8
  • terminal.ansiBrightYellow#b86818
  • terminal.ansiCyan#108868
  • terminal.ansiGreen#2d8818
  • terminal.ansiMagenta#8030a0
  • terminal.ansiRed#c82020
  • terminal.ansiWhite#f0e8e0
  • terminal.ansiYellow#a85808
  • terminal.background#f8f5f0
  • terminal.border#c8bda5
  • terminal.foreground#2a2520
  • titleBar.activeBackground#3a3028
  • titleBar.activeForeground#f8f4ec
  • titleBar.border#4a4238
  • titleBar.inactiveBackground#2d261f
  • titleBar.inactiveForeground#a09080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#788068italic
keyword, storage.type, storage.modifier#d05010
string, string.quoted#2d7818
entity.name.function, support.function, meta.function-call#c03030
variable, variable.other, variable.language#a06008
entity.name.type, entity.name.class, support.type, support.class#7030a0
constant.numeric#b07020
constant, constant.language, constant.character#b82020
variable.other.property, meta.object-literal.key, entity.name.tag.yaml#5a4830
punctuation, meta.brace#605040
keyword.operator#605040
variable.parameter#5a4830italic
entity.name.tag, punctuation.definition.tag#c03030
entity.other.attribute-name#a06008
support.type.property-name.css#2858a0
support.constant.property-value.css#2d7818
string.regexp#108860
constant.character.escape#108860
invalid, invalid.illegal#c03030underline
heading.1.markdown, markup.heading.setext.1, entity.name.section.markdown#d05010bold
heading.2.markdown, markup.heading.setext.2#c03030bold
heading.3.markdown#a06008bold
heading.4.markdown#2d7818bold
heading.5.markdown#7030a0bold
heading.6.markdown#2858a0bold
markup.bold#a06008bold
markup.italic#7030a0italic
markup.underline.link, string.other.link#2858a0
string.other.link.title.markdown, string.other.link.description.markdown#2d7818
markup.inline.raw, markup.fenced_code#108860
markup.quote#788068italic
punctuation.definition.list.begin.markdown#d05010
entity.name.ingredient.cooklang, punctuation.definition.ingredient.cooklang#2d7818bold
entity.name.cookware.cooklang, punctuation.definition.cookware.cooklang#c03030bold
entity.name.timer.cooklang, punctuation.definition.timer.cooklang#7030a0
constant.numeric.cooklang#b07020
keyword.other.unit.cooklang#a06008
entity.name.tag.metadata.cooklang#2858a0
string.unquoted.metadata.cooklang#108860
support.type.property-name.json#2858a0
entity.name.tag.yaml#2858a0
variable.language.this, variable.language.self#b82020italic
keyword.control.import, keyword.control.from, keyword.control.export#d05010
entity.name.module, entity.name.namespace#a06008