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#f4c07a
  • activityBar.background#8cbc7e
  • activityBar.border#6ea060
  • activityBar.foreground#e9f4e4
  • activityBar.inactiveForeground#5f7d66
  • activityBarBadge.background#1e7888
  • activityBarBadge.foreground#f0f7ec
  • badge.background#c86e43
  • badge.foreground#fff7f1
  • button.background#7fb179
  • button.border#00000010
  • button.foreground#11281b
  • button.hoverBackground#72a56d
  • button.secondaryBackground#90c07e
  • button.secondaryBorder#5e8e54
  • button.secondaryForeground#0e2218
  • button.secondaryHoverBackground#7eb070
  • button.separator#c86e4366
  • descriptionForeground#2e4a32
  • diffEditor.insertedLineBackground#7ba56a14
  • diffEditor.insertedTextBackground#7ba56a26
  • diffEditor.removedLineBackground#c9635614
  • diffEditor.removedTextBackground#c9635626
  • dropdown.background#d8f0c8
  • dropdown.border#78b068
  • dropdown.foreground#0f2016
  • dropdown.listBackground#e6f8d8
  • editor.background#e6f8d8
  • editor.findMatchBackground#d89a68aa
  • editor.findMatchHighlightBackground#d89a6844
  • editor.findRangeHighlightBackground#b9d7c755
  • editor.foreground#0f2016
  • editor.hoverHighlightBackground#b4d8a466
  • editor.inactiveSelectionBackground#cfe4db99
  • editor.lineHighlightBackground#d0eec0
  • editor.lineHighlightBorder#b4d8a4
  • editor.selectionBackground#bedfd2
  • editor.selectionHighlightBackground#64b8be22
  • editor.wordHighlightBackground#64b8be1c
  • editor.wordHighlightStrongBackground#c86e4322
  • editorBracketHighlight.foreground1#4ba8ad
  • editorBracketHighlight.foreground2#c86e43
  • editorBracketHighlight.foreground3#6d985a
  • editorBracketHighlight.foreground4#c7ab58
  • editorBracketHighlight.foreground5#87ae6f
  • editorBracketHighlight.foreground6#d69470
  • editorBracketHighlight.unexpectedBracket.foreground#b75038
  • editorBracketMatch.background#64b8be22
  • editorBracketMatch.border#4ba8ad77
  • editorCodeLens.foreground#89a096
  • editorCursor.background#e6f8d8
  • editorCursor.foreground#c56f45
  • editorError.foreground#b75038
  • editorGroup.border#98c48a
  • editorGroupHeader.tabsBackground#8cbc7e
  • editorGroupHeader.tabsBorder#6ea060
  • editorGutter.addedBackground#7ba56a
  • editorGutter.background#e6f8d8
  • editorGutter.deletedBackground#c96356
  • editorGutter.modifiedBackground#4ba8ad
  • editorHint.foreground#6d985a
  • editorHoverWidget.background#d0eec0
  • editorHoverWidget.border#78b068
  • editorHoverWidget.foreground#0f2016
  • editorHoverWidget.highlightForeground#1a7888
  • editorIndentGuide.activeBackground1#5e9850
  • editorIndentGuide.background1#b4d8a8
  • editorInfo.foreground#3b98a1
  • editorLightBulb.foreground#b99838
  • editorLightBulbAutoFix.foreground#6d985a
  • editorLineNumber.activeForeground#102018
  • editorLineNumber.foreground#6a9870
  • editorLink.activeForeground#2e8d99
  • editorOverviewRuler.addedForeground#7ba56aaa
  • editorOverviewRuler.border#b4d8a4
  • editorOverviewRuler.deletedForeground#c96356aa
  • editorOverviewRuler.findMatchForeground#c67b49cc
  • editorOverviewRuler.modifiedForeground#4ba8adaa
  • editorSuggestWidget.background#d0eec0
  • editorSuggestWidget.border#78b068
  • editorSuggestWidget.foreground#0f2016
  • editorSuggestWidget.highlightForeground#1a7888
  • editorSuggestWidget.selectedBackground#9ed08e
  • editorSuggestWidget.selectedForeground#071410
  • editorWarning.foreground#b99838
  • editorWhitespace.foreground#88b880
  • editorWidget.background#d0eec0
  • editorWidget.border#78b068
  • errorForeground#b03028
  • focusBorder#3a9050
  • foreground#0f2016
  • gitDecoration.addedResourceForeground#2f7a3e
  • gitDecoration.conflictingResourceForeground#8f2f26
  • gitDecoration.deletedResourceForeground#a4453b
  • gitDecoration.ignoredResourceForeground#5f7668
  • gitDecoration.modifiedResourceForeground#8a641d
  • gitDecoration.renamedResourceForeground#1f6f74
  • gitDecoration.untrackedResourceForeground#2f8745
  • icon.foreground#2f4b38
  • input.background#d8f0c8
  • input.border#78b068
  • input.foreground#0f2016
  • input.placeholderForeground#3f5b46
  • inputOption.activeBackground#9ed4a0
  • inputOption.activeBorder#1e7888
  • inputOption.activeForeground#0e2218
  • inputValidation.errorBackground#e8c0b4
  • inputValidation.errorBorder#a84028
  • inputValidation.infoBackground#b4e0d4
  • inputValidation.infoBorder#1e7888
  • inputValidation.warningBackground#e0d8a0
  • inputValidation.warningBorder#9a8820
  • list.activeSelectionBackground#9ed08e
  • list.activeSelectionForeground#071410
  • list.activeSelectionIconForeground#1a7888
  • list.deemphasizedForeground#5c7467
  • list.dropBackground#8ec18188
  • list.errorForeground#8f2f26
  • list.filterMatchBackground#d89a6833
  • list.filterMatchBorder#d89a6877
  • list.focusForeground#0b1c12
  • list.focusHighlightForeground#1a7888
  • list.highlightForeground#1a7888
  • list.hoverBackground#bcdcaa
  • list.hoverForeground#0f2016
  • list.inactiveSelectionBackground#bcdcaa
  • list.inactiveSelectionForeground#0f2016
  • list.warningForeground#8a641d
  • menu.background#d0eec0
  • menu.border#78b068
  • menu.foreground#0f2016
  • menu.selectionBackground#9ed08e
  • menu.selectionForeground#071410
  • menu.separatorBackground#78b068
  • menubar.selectionBackground#b8dba8
  • menubar.selectionBorder#6ea060
  • menubar.selectionForeground#102a1b
  • minimap.errorHighlight#b75038cc
  • minimap.findMatchHighlight#d89a68cc
  • minimap.selectionHighlight#bedfd266
  • minimap.warningHighlight#b99838cc
  • notificationCenterHeader.background#d0eec0
  • notificationCenterHeader.foreground#0f2016
  • notificationLink.foreground#1a7888
  • notifications.background#d0eec0
  • notifications.border#78b068
  • notifications.foreground#0f2016
  • panel.background#8cbc7e
  • panel.border#6ea060
  • panelInput.border#6ea060
  • panelTitle.activeBorder#c86e43
  • panelTitle.activeForeground#e9f4e4
  • panelTitle.inactiveForeground#5f7d66
  • peekView.border#1e7888
  • peekViewEditor.background#d0eec0
  • peekViewEditor.matchHighlightBackground#d89a6855
  • peekViewResult.background#8cbc7e
  • peekViewResult.matchHighlightBackground#d89a6844
  • peekViewTitle.background#d0eec0
  • peekViewTitleDescription.foreground#2e5036
  • peekViewTitleLabel.foreground#071410
  • pickerGroup.border#78b068
  • pickerGroup.foreground#1a7888
  • progressBar.background#4ba8ad
  • quickInput.background#d0eec0
  • quickInput.foreground#0f2016
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#7d9a8a99
  • scrollbarSlider.background#aac0b266
  • scrollbarSlider.hoverBackground#93ad9e99
  • sideBar.background#c4e4b6
  • sideBar.border#98c48a
  • sideBar.dropBackground#5ea05088
  • sideBar.foreground#0f2016
  • sideBarSectionHeader.background#b4d8a8
  • sideBarSectionHeader.border#98c48a
  • sideBarSectionHeader.foreground#0f2016
  • sideBarStickyScroll.background#c4e4b6
  • sideBarTitle.foreground#091408
  • statusBar.background#8cbc7e
  • statusBar.border#6ea060
  • statusBar.debuggingBackground#c86e43
  • statusBar.debuggingForeground#fff7f1
  • statusBar.foreground#e9f4e4
  • statusBar.noFolderBackground#98c48c
  • statusBarItem.activeBackground#ffffff22
  • statusBarItem.focusBorder#e0f8d0
  • statusBarItem.hoverBackground#ffffff18
  • statusBarItem.prominentBackground#5a9050
  • statusBarItem.remoteBackground#3f7a61
  • statusBarItem.remoteForeground#f0f7ec
  • tab.activeBackground#edfae6
  • tab.activeBorder#edfae6
  • tab.activeBorderTop#c86e43
  • tab.activeForeground#091408
  • tab.activeModifiedBorder#3a9898
  • tab.border#6ea060
  • tab.hoverBackground#a8d09c
  • tab.inactiveBackground#8cbc7e
  • tab.inactiveForeground#4b6852
  • tab.selectedBackground#e6f8de
  • tab.selectedBorderTop#3a9898
  • tab.selectedForeground#091408
  • tab.unfocusedActiveBackground#dff2d4
  • tab.unfocusedActiveForeground#122016
  • tab.unfocusedInactiveBackground#98c48c
  • tab.unfocusedInactiveForeground#5f7b63
  • terminal.ansiBlack#1a3226
  • terminal.ansiBlue#3f8798
  • terminal.ansiBrightBlack#7f948b
  • terminal.ansiBrightBlue#5db2bb
  • terminal.ansiBrightCyan#74c7cb
  • terminal.ansiBrightGreen#7ba56a
  • terminal.ansiBrightMagenta#c093b8
  • terminal.ansiBrightRed#c96356
  • terminal.ansiBrightWhite#f4fbf0
  • terminal.ansiBrightYellow#ccb45c
  • terminal.ansiCyan#3b98a1
  • terminal.ansiGreen#6d985a
  • terminal.ansiMagenta#a5799f
  • terminal.ansiRed#bf5d4a
  • terminal.ansiWhite#e8f4e4
  • terminal.ansiYellow#ba9b46
  • terminal.background#96c888
  • terminal.border#6ea060
  • terminal.foreground#eaf4e5
  • terminal.inactiveSelectionBackground#1e5a3688
  • terminal.selectionBackground#1e5a36
  • terminal.tab.activeBorder#4ba8ad
  • terminalCursor.background#96c888
  • terminalCursor.foreground#f4c07a
  • textBlockQuote.background#d0eec0
  • textBlockQuote.border#5a9a70
  • textCodeBlock.background#d0eec0
  • textLink.activeForeground#136878
  • textLink.foreground#1a7888
  • textPreformat.background#d0eec0
  • textPreformat.border#78b068
  • textPreformat.foreground#0f2016
  • textSeparator.foreground#98c48a
  • titleBar.activeBackground#8cbc7e
  • titleBar.activeForeground#173624
  • titleBar.border#6ea060
  • titleBar.inactiveBackground#9cc890
  • titleBar.inactiveForeground#355840
  • welcomePage.background#e6f8d8
  • welcomePage.progress.foreground#1e7888
  • welcomePage.tileBackground#d0eec0
  • welcomePage.tileHoverBackground#c0e2ae
  • widget.border#78b068
  • widget.shadow#00000022

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6d8778italic
string, markup.inline.raw, string.tag#b06030—
constant.numeric, constant.language, constant.character, constant.other#9a7020—
keyword, storage, storage.type, storage.modifier#25683a—
keyword.operator, punctuation.separator, punctuation.accessor#4d7760—
entity.name.function, support.function, meta.function-call, variable.function#a07820—
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#9a6835—
variable, meta.definition.variable.name, entity.name.variable#1a7888—
variable.language, variable.parameter, meta.parameter#7a50a0—
variable.other.constant, variable.other.enummember#5a7a20—
entity.other.attribute-name, support.type.property-name, meta.object-literal.key#c06030—
support.type.property-name.json, support.type.property-name.jsonc#1878a0—
entity.name.tag, punctuation.definition.tag#25683a—
markup.heading, markup.bold#a07820bold
markup.italic, emphasis#9a7020italic
markup.inserted, markup.deleted, markup.changed#c86e43—
invalid, invalid.illegal#8b1a08—
regexp, string.regexp#5e8c18—
punctuation.section.embedded.begin, punctuation.section.embedded.end#25683a—
support.other.namespace, meta.use, entity.name.type.namespace, storage.type.namespace#9a6835—
Selva Misionera Theme by fivanparedes - VS Code Theme