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#36804C
  • activityBar.background#E8F4EA
  • activityBar.border#CEDCD0
  • activityBar.foreground#2F2B26
  • activityBar.inactiveForeground#7B766A
  • activityBarBadge.background#25713E
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D6E6D9
  • badge.foreground#2F2B26
  • button.background#36804C
  • button.border#FFFFFF1A
  • button.foreground#FFFFFF
  • button.hoverBackground#166634
  • button.secondaryBackground#D6E6D9
  • button.secondaryForeground#2F2B26
  • button.secondaryHoverBackground#EFF8F0
  • chat.editedFileForeground#137C71
  • chat.slashCommandBackground#BEECC799
  • chat.slashCommandForeground#166634
  • checkbox.background#F5FDF6
  • checkbox.border#BBCDBE
  • debugToolBar.background#E8F4EA
  • descriptionForeground#7B766A
  • dropdown.background#F5FDF6
  • dropdown.border#BBCDBE
  • dropdown.foreground#2F2B26
  • dropdown.listBackground#F5FDF6
  • editor.background#F5FDF6
  • editor.findMatchBackground#137C7166
  • editor.findMatchHighlightBackground#137C7155
  • editor.foreground#2F2B26
  • editor.inactiveSelectionBackground#D6E6D9
  • editor.lineHighlightBackground#EFF8F0
  • editor.selectionBackground#BEECC7
  • editor.selectionHighlightBackground#BEECC788
  • editor.wordHighlightBackground#137C7140
  • editor.wordHighlightStrongBackground#00717F66
  • editorBracketMatch.background#137C7155
  • editorBracketMatch.border#137C71
  • editorCursor.foreground#25713E
  • editorGroup.border#CEDCD0
  • editorGroupHeader.tabsBackground#E8F4EA
  • editorGroupHeader.tabsBorder#CEDCD0
  • editorGutter.addedBackground#4B6244
  • editorGutter.deletedBackground#9C4343
  • editorGutter.modifiedBackground#57692A
  • editorIndentGuide.activeBackground1#7B766A
  • editorIndentGuide.background1#CEDCD0
  • editorLineNumber.activeForeground#36804C
  • editorLineNumber.foreground#7B766A
  • editorOverviewRuler.border#CEDCD0
  • editorSuggestWidget.background#EFF8F0
  • editorSuggestWidget.border#BBCDBE
  • editorSuggestWidget.foreground#2F2B26
  • editorSuggestWidget.highlightForeground#57692A
  • editorSuggestWidget.selectedBackground#D6E6D9
  • editorWidget.background#EFF8F0
  • editorWidget.border#BBCDBE
  • errorForeground#9C4343
  • focusBorder#36804C
  • foreground#2F2B26
  • icon.foreground#2F2B26
  • input.background#F5FDF6
  • input.border#BBCDBE
  • input.foreground#2F2B26
  • input.placeholderForeground#7B766A
  • inputOption.activeBackground#BEECC799
  • inputOption.activeBorder#36804C
  • inputOption.activeForeground#1F211D
  • keybindingLabel.background#D6E6D9
  • keybindingLabel.border#BBCDBE
  • keybindingLabel.foreground#2F2B26
  • list.activeSelectionBackground#BEECC7
  • list.activeSelectionForeground#1F211D
  • list.activeSelectionIconForeground#1F211D
  • list.dropBackground#137C7155
  • list.focusAndSelectionOutline#36804C
  • list.focusBackground#BEECC788
  • list.highlightForeground#57692A
  • list.hoverBackground#EFF8F0
  • list.inactiveSelectionBackground#D6E6D9
  • menu.background#F5FDF6
  • menu.border#BBCDBE
  • menu.foreground#2F2B26
  • menu.selectionBackground#36804C
  • menu.selectionForeground#FFFFFF
  • notebook.cellBorderColor#CEDCD0
  • notebook.selectedCellBackground#BEECC766
  • notificationCenterHeader.background#E8F4EA
  • notificationCenterHeader.foreground#2F2B26
  • notifications.background#F5FDF6
  • notifications.border#CEDCD0
  • notifications.foreground#2F2B26
  • panel.background#EFF8F0
  • panel.border#CEDCD0
  • panelInput.border#BBCDBE
  • panelTitle.activeBorder#36804C
  • panelTitle.activeForeground#2F2B26
  • panelTitle.inactiveForeground#7B766A
  • peekViewEditor.background#F5FDF6
  • peekViewEditor.matchHighlightBackground#137C7166
  • peekViewResult.background#EFF8F0
  • peekViewResult.matchHighlightBackground#137C7166
  • pickerGroup.border#BBCDBE
  • pickerGroup.foreground#4B6244
  • ports.iconRunningProcessForeground#36804C
  • progressBar.background#36804C
  • quickInput.background#EFF8F0
  • quickInput.foreground#2F2B26
  • searchEditor.textInputBorder#BBCDBE
  • settings.dropdownBackground#F5FDF6
  • settings.dropdownBorder#BBCDBE
  • settings.headerForeground#1F1B16
  • settings.modifiedItemIndicator#137C71
  • settings.numberInputBorder#BBCDBE
  • settings.textInputBorder#BBCDBE
  • sideBar.background#E8F4EA
  • sideBar.border#CEDCD0
  • sideBar.foreground#2F2B26
  • sideBarSectionHeader.background#EFF8F0
  • sideBarSectionHeader.border#CEDCD0
  • sideBarSectionHeader.foreground#2F2B26
  • sideBarTitle.foreground#1F1B16
  • statusBar.background#E8F4EA
  • statusBar.border#CEDCD0
  • statusBar.debuggingBackground#137C71
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.focusBorder#36804C
  • statusBar.foreground#2F2B26
  • statusBar.noFolderBackground#F5FDF6
  • statusBarItem.errorBackground#9C4343
  • statusBarItem.focusBorder#36804C
  • statusBarItem.hoverBackground#1F211D1A
  • statusBarItem.hoverForeground#1F1B16
  • statusBarItem.prominentBackground#D6E6D9
  • statusBarItem.remoteBackground#36804C
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#F5FDF6
  • tab.activeBorder#F5FDF6
  • tab.activeBorderTop#36804C
  • tab.activeForeground#1F1B16
  • tab.border#CEDCD0
  • tab.hoverBackground#F5FDF6
  • tab.inactiveBackground#E8F4EA
  • tab.inactiveForeground#7B766A
  • tab.lastPinnedBorder#BBCDBE
  • tab.selectedBorderTop#25713E
  • tab.unfocusedActiveBorder#F5FDF6
  • tab.unfocusedActiveBorderTop#CEDCD0
  • tab.unfocusedHoverBackground#E8F4EA
  • terminal.ansiBlack#2F2B26
  • terminal.ansiBlue#57692A
  • terminal.ansiBrightBlack#7B766A
  • terminal.ansiBrightBlue#57692A
  • terminal.ansiBrightCyan#6D6D32
  • terminal.ansiBrightGreen#36804C
  • terminal.ansiBrightMagenta#00717F
  • terminal.ansiBrightRed#25713E
  • terminal.ansiBrightWhite#1F1B16
  • terminal.ansiBrightYellow#137C71
  • terminal.ansiCyan#6D6D32
  • terminal.ansiGreen#2D725A
  • terminal.ansiMagenta#00717F
  • terminal.ansiRed#9C4343
  • terminal.ansiWhite#E8E1D3
  • terminal.ansiYellow#137C71
  • terminal.background#F5FDF6
  • terminal.foreground#2F2B26
  • terminal.inactiveSelectionBackground#D6E6D9
  • terminal.tab.activeBorder#36804C
  • terminalCursor.foreground#25713E
  • textBlockQuote.background#EFF8F0
  • textBlockQuote.border#4B6244
  • textCodeBlock.background#EFF8F0
  • textLink.activeForeground#25713E
  • textLink.foreground#57692A
  • textPreformat.background#D6E6D9
  • textPreformat.foreground#2F2B26
  • textSeparator.foreground#BBCDBE
  • titleBar.activeBackground#E8F4EA
  • titleBar.activeForeground#2F2B26
  • titleBar.border#CEDCD0
  • titleBar.inactiveBackground#F5FDF6
  • titleBar.inactiveForeground#7B766A
  • welcomePage.progress.foreground#36804C
  • welcomePage.tileBackground#EFF8F0
  • widget.border#BBCDBE

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#2F2B26
emphasisitalic
strongbold
comment#4B6244
constant.language#57692A
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#2D725A
constant.regexp#00717F
entity.name.tag, entity.name.selector#25713E
entity.other.attribute-name#57692A
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.scss#137C71
invalid#9C4343
markup.underlineunderline
markup.bold#57692Abold
markup.heading#25713Ebold
markup.italic#00717Fitalic
markup.strikethroughstrikethrough
markup.deleted#9C4343
markup.inserted#4B6244
markup.changed#137C71
markup.quote#4B6244
markup.inline.raw#2D725A
meta.diff.header#57692A
storage#25713E
storage.type#25713E
keyword, keyword.control, keyword.operator.expression#25713E
keyword.operator#2F2B26
string, constant.other.symbol#2D725A
punctuation.definition.string, punctuation.definition.comment#7B766A
support.function, entity.name.function#137C71
support.class, support.type, entity.name.type, entity.name.class, entity.name.namespace#57692A
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#42516A
variable.language, constant.character.escape#25713E
meta.object-literal.key, entity.name.label#42516A
punctuation.definition.group.regexp, punctuation.definition.character-class.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#137C71
constant.character.character-class.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp#25713E
keyword.operator.quantifier.regexp#2F2B26
constant.character, constant.other.option#57692A