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#c86e43
  • activityBar.background#08180f
  • activityBar.border#1f4a32
  • activityBar.foreground#dcebd9
  • activityBar.inactiveForeground#799176
  • activityBarBadge.background#6fbe67
  • activityBarBadge.foreground#0b1a10
  • badge.background#c86e43
  • badge.foreground#fdf5ef
  • button.background#32743d
  • button.border#ffffff14
  • button.foreground#f5faf4
  • button.hoverBackground#3d8a49
  • button.secondaryBackground#173722
  • button.secondaryBorder#2d6140
  • button.secondaryForeground#d6e6d2
  • button.secondaryHoverBackground#20442a
  • button.separator#d48a5b66
  • descriptionForeground#9bb598
  • diffEditor.insertedLineBackground#97d77e14
  • diffEditor.insertedTextBackground#97d77e26
  • diffEditor.removedLineBackground#d86e6214
  • diffEditor.removedTextBackground#d86e6226
  • dropdown.background#143521
  • dropdown.border#2d6140
  • dropdown.foreground#dcebd9
  • dropdown.listBackground#102c1a
  • editor.background#102c1a
  • editor.findMatchBackground#a9633f
  • editor.findMatchHighlightBackground#a9633f44
  • editor.findRangeHighlightBackground#3f744f55
  • editor.foreground#dcebd9
  • editor.hoverHighlightBackground#20452d66
  • editor.inactiveSelectionBackground#27533899
  • editor.lineHighlightBackground#1a4028
  • editor.lineHighlightBorder#235638
  • editor.selectionBackground#2f6a41
  • editor.selectionHighlightBackground#7fd67220
  • editor.wordHighlightBackground#74c66f22
  • editor.wordHighlightStrongBackground#c86e4326
  • editorBracketHighlight.foreground1#7fd672
  • editorBracketHighlight.foreground2#df8c59
  • editorBracketHighlight.foreground3#5ca85b
  • editorBracketHighlight.foreground4#d9bf7a
  • editorBracketHighlight.foreground5#9fdd92
  • editorBracketHighlight.foreground6#e3a47d
  • editorBracketHighlight.unexpectedBracket.foreground#e27a62
  • editorBracketMatch.background#7fd67222
  • editorBracketMatch.border#7fd67288
  • editorCodeLens.foreground#7d9678
  • editorCursor.background#102c1a
  • editorCursor.foreground#df8c59
  • editorError.foreground#e27a62
  • editorGroup.border#1f4a32
  • editorGroupHeader.tabsBackground#08180f
  • editorGroupHeader.tabsBorder#1f4a32
  • editorGutter.addedBackground#97d77e
  • editorGutter.background#102c1a
  • editorGutter.deletedBackground#d86e62
  • editorGutter.modifiedBackground#7fd672
  • editorHint.foreground#97d77e
  • editorHoverWidget.background#143521
  • editorHoverWidget.border#2d6140
  • editorHoverWidget.foreground#dcebd9
  • editorHoverWidget.highlightForeground#9be690
  • editorIndentGuide.activeBackground1#5f9a65
  • editorIndentGuide.background1#2c4f38
  • editorInfo.foreground#7fd672
  • editorLightBulb.foreground#d9bf7a
  • editorLightBulbAutoFix.foreground#97d77e
  • editorLineNumber.activeForeground#cfe0cb
  • editorLineNumber.foreground#62805f
  • editorLink.activeForeground#9be690
  • editorOverviewRuler.addedForeground#97d77eaa
  • editorOverviewRuler.border#09130d
  • editorOverviewRuler.deletedForeground#d86e62aa
  • editorOverviewRuler.findMatchForeground#d99257cc
  • editorOverviewRuler.modifiedForeground#7fd672aa
  • editorSuggestWidget.background#143521
  • editorSuggestWidget.border#2d6140
  • editorSuggestWidget.foreground#dcebd9
  • editorSuggestWidget.highlightForeground#9be690
  • editorSuggestWidget.selectedBackground#235133
  • editorSuggestWidget.selectedForeground#eef4ea
  • editorWarning.foreground#d9bf7a
  • editorWhitespace.foreground#40654a
  • editorWidget.background#143521
  • editorWidget.border#2d6140
  • errorForeground#e27a62
  • focusBorder#5ba96b
  • foreground#dcebd9
  • gitDecoration.addedResourceForeground#97d77e
  • gitDecoration.conflictingResourceForeground#e27a62
  • gitDecoration.deletedResourceForeground#d86e62
  • gitDecoration.ignoredResourceForeground#668061
  • gitDecoration.modifiedResourceForeground#d7b871
  • gitDecoration.renamedResourceForeground#7fd672
  • gitDecoration.untrackedResourceForeground#96e086
  • icon.foreground#cadcc6
  • input.background#143521
  • input.border#2d6140
  • input.foreground#dcebd9
  • input.placeholderForeground#7a9477
  • inputOption.activeBackground#2f6a41
  • inputOption.activeBorder#7fd672
  • inputOption.activeForeground#f2f7ef
  • inputValidation.errorBackground#3c201b
  • inputValidation.errorBorder#e27a62
  • inputValidation.infoBackground#173f23
  • inputValidation.infoBorder#7fd672
  • inputValidation.warningBackground#3a3118
  • inputValidation.warningBorder#d9bf7a
  • list.activeSelectionBackground#235133
  • list.activeSelectionForeground#eef4ea
  • list.activeSelectionIconForeground#9be690
  • list.filterMatchBackground#a9633f33
  • list.filterMatchBorder#a9633f77
  • list.focusHighlightForeground#9be690
  • list.highlightForeground#9be690
  • list.hoverBackground#173722
  • list.hoverForeground#e5eee1
  • list.inactiveSelectionBackground#173722
  • menu.background#143521
  • menu.border#2d6140
  • menu.foreground#dcebd9
  • menu.selectionBackground#235133
  • menu.selectionForeground#f8fcf7
  • menu.separatorBackground#2d6140
  • minimap.errorHighlight#e27a62cc
  • minimap.findMatchHighlight#a9633fcc
  • minimap.selectionHighlight#2f6a4188
  • minimap.warningHighlight#d9bf7acc
  • notificationCenterHeader.background#143521
  • notificationCenterHeader.foreground#dcebd9
  • notificationLink.foreground#9be690
  • notifications.background#143521
  • notifications.border#2d6140
  • notifications.foreground#dcebd9
  • panel.background#07150d
  • panel.border#1f4a32
  • panelInput.border#1f4a32
  • panelTitle.activeBorder#c86e43
  • panelTitle.activeForeground#eef4ea
  • panelTitle.inactiveForeground#839a80
  • peekView.border#7fd672
  • peekViewEditor.background#122e1d
  • peekViewEditor.matchHighlightBackground#a9633f55
  • peekViewResult.background#07150d
  • peekViewResult.matchHighlightBackground#a9633f44
  • peekViewTitle.background#143521
  • peekViewTitleDescription.foreground#92a88f
  • peekViewTitleLabel.foreground#eef4ea
  • pickerGroup.border#2d6140
  • pickerGroup.foreground#9be690
  • progressBar.background#7fd672
  • quickInput.background#143521
  • quickInput.foreground#dcebd9
  • scrollbar.shadow#00000055
  • scrollbarSlider.activeBackground#7eae7c99
  • scrollbarSlider.background#4f754f66
  • scrollbarSlider.hoverBackground#66936599
  • sideBar.background#0f2a19
  • sideBar.border#1f4a32
  • sideBar.dropBackground#2d6a4388
  • sideBar.foreground#c3d9c0
  • sideBarSectionHeader.background#14311f
  • sideBarSectionHeader.border#1f4a32
  • sideBarSectionHeader.foreground#cadfc6
  • sideBarStickyScroll.background#0f2a19
  • sideBarTitle.foreground#e3f0df
  • statusBar.background#08180f
  • statusBar.border#1f4a32
  • statusBar.debuggingBackground#c86e43
  • statusBar.debuggingForeground#fff4ed
  • statusBar.foreground#dcebd9
  • statusBar.noFolderBackground#091b11
  • statusBarItem.activeBackground#ffffff18
  • statusBarItem.focusBorder#7fd672
  • statusBarItem.hoverBackground#ffffff12
  • statusBarItem.prominentBackground#245032
  • statusBarItem.remoteBackground#32743d
  • statusBarItem.remoteForeground#f7fbf5
  • tab.activeBackground#102c1a
  • tab.activeBorder#12311e
  • tab.activeBorderTop#c86e43
  • tab.activeForeground#eef4ea
  • tab.activeModifiedBorder#7fd672
  • tab.border#1f4a32
  • tab.hoverBackground#173822
  • tab.inactiveBackground#0a1d12
  • tab.inactiveForeground#81977d
  • tab.selectedBackground#163723
  • tab.selectedBorderTop#7fd672
  • tab.selectedForeground#eef4ea
  • tab.unfocusedActiveBackground#102b1b
  • tab.unfocusedActiveForeground#cad8c6
  • tab.unfocusedInactiveBackground#0c2416
  • tab.unfocusedInactiveForeground#799075
  • terminal.ansiBlack#0b1f13
  • terminal.ansiBlue#4f7f53
  • terminal.ansiBrightBlack#6c8868
  • terminal.ansiBrightBlue#8dcf90
  • terminal.ansiBrightCyan#b0ef9d
  • terminal.ansiBrightGreen#96e086
  • terminal.ansiBrightMagenta#d4a5c5
  • terminal.ansiBrightRed#e27a62
  • terminal.ansiBrightWhite#f4f8f1
  • terminal.ansiBrightYellow#e6cb88
  • terminal.ansiCyan#7fd672
  • terminal.ansiGreen#5da85b
  • terminal.ansiMagenta#b884a8
  • terminal.ansiRed#c86358
  • terminal.ansiWhite#dcebd9
  • terminal.ansiYellow#d9b867
  • terminal.background#08170e
  • terminal.border#1f4a32
  • terminal.foreground#d8e6d4
  • terminal.inactiveSelectionBackground#27533888
  • terminal.selectionBackground#2f6a41
  • terminal.tab.activeBorder#7fd672
  • terminalCursor.background#08170e
  • terminalCursor.foreground#df8c59
  • textBlockQuote.background#173722
  • textBlockQuote.border#508257
  • textCodeBlock.background#143521
  • textLink.activeForeground#b5f2a7
  • textLink.foreground#9be690
  • textPreformat.background#143521
  • textPreformat.border#2d6140
  • textPreformat.foreground#dcebd9
  • textSeparator.foreground#215235
  • titleBar.activeBackground#08180f
  • titleBar.activeForeground#dcebd9
  • titleBar.border#1f4a32
  • titleBar.inactiveBackground#0a1d12
  • titleBar.inactiveForeground#7c9478
  • welcomePage.background#102c19
  • welcomePage.progress.foreground#7fd672
  • welcomePage.tileBackground#173722
  • welcomePage.tileHoverBackground#20442a
  • widget.border#2d6140
  • widget.shadow#00000055

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6b8d72italic
string, markup.inline.raw, string.tag#e39a67
constant.numeric, constant.language, constant.character, constant.other#dcb170
keyword, storage, storage.type, storage.modifier#4fa15a
keyword.operator, punctuation.separator, punctuation.accessor#86b07f
entity.name.function, support.function, meta.function-call, variable.function#c9a028
entity.name.type, entity.name.class, entity.other.inherited-class, entity.other.inherited-class.php, entity.other.inherited-classname, entity.other.inherited-classname.php, entity.name.namespace, support.type, support.class#c4905c
variable, meta.definition.variable.name, entity.name.variable#8adde8
variable.language, variable.parameter, meta.parameter#c8a5e0
variable.other.constant, variable.other.enummember#d0e89a
entity.other.attribute-name, support.type.property-name, meta.object-literal.key#ec8f65
support.type.property-name.json, support.type.property-name.jsonc#7ecfdc
entity.name.tag, punctuation.definition.tag#5aab5f
markup.heading, markup.bold#c9a028bold
markup.italic, emphasis#dcb170italic
markup.inserted, markup.deleted, markup.changed#e57e61
invalid, invalid.illegal#f7e9e4
regexp, string.regexp#b8df71
punctuation.section.embedded.begin, punctuation.section.embedded.end#4fa15a
support.other.namespace, meta.use, entity.name.type.namespace, storage.type.namespace#c4905c