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#00816F
  • activityBar.background#E4F4F0
  • activityBar.border#C9DDD7
  • activityBar.foreground#2F2B26
  • activityBar.inactiveForeground#7B766A
  • activityBarBadge.background#007460
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D1E7E1
  • badge.foreground#2F2B26
  • button.background#00816F
  • button.border#FFFFFF1A
  • button.foreground#FFFFFF
  • button.hoverBackground#006755
  • button.secondaryBackground#D1E7E1
  • button.secondaryForeground#2F2B26
  • button.secondaryHoverBackground#ECF8F5
  • chat.editedFileForeground#087988
  • chat.slashCommandBackground#B2ECDE99
  • chat.slashCommandForeground#006755
  • checkbox.background#F2FDFA
  • checkbox.border#B5CEC7
  • debugToolBar.background#E4F4F0
  • descriptionForeground#7B766A
  • dropdown.background#F2FDFA
  • dropdown.border#B5CEC7
  • dropdown.foreground#2F2B26
  • dropdown.listBackground#F2FDFA
  • editor.background#F2FDFA
  • editor.findMatchBackground#08798866
  • editor.findMatchHighlightBackground#08798855
  • editor.foreground#2F2B26
  • editor.inactiveSelectionBackground#D1E7E1
  • editor.lineHighlightBackground#ECF8F5
  • editor.selectionBackground#B2ECDE
  • editor.selectionHighlightBackground#B2ECDE88
  • editor.wordHighlightBackground#08798840
  • editor.wordHighlightStrongBackground#256B8F66
  • editorBracketMatch.background#08798855
  • editorBracketMatch.border#087988
  • editorCursor.foreground#007460
  • editorGroup.border#C9DDD7
  • editorGroupHeader.tabsBackground#E4F4F0
  • editorGroupHeader.tabsBorder#C9DDD7
  • editorGutter.addedBackground#3B6554
  • editorGutter.deletedBackground#9C4343
  • editorGutter.modifiedBackground#376F44
  • editorIndentGuide.activeBackground1#7B766A
  • editorIndentGuide.background1#C9DDD7
  • editorLineNumber.activeForeground#00816F
  • editorLineNumber.foreground#7B766A
  • editorOverviewRuler.border#C9DDD7
  • editorSuggestWidget.background#ECF8F5
  • editorSuggestWidget.border#B5CEC7
  • editorSuggestWidget.foreground#2F2B26
  • editorSuggestWidget.highlightForeground#376F44
  • editorSuggestWidget.selectedBackground#D1E7E1
  • editorWidget.background#ECF8F5
  • editorWidget.border#B5CEC7
  • errorForeground#9C4343
  • focusBorder#00816F
  • foreground#2F2B26
  • icon.foreground#2F2B26
  • input.background#F2FDFA
  • input.border#B5CEC7
  • input.foreground#2F2B26
  • input.placeholderForeground#7B766A
  • inputOption.activeBackground#B2ECDE99
  • inputOption.activeBorder#00816F
  • inputOption.activeForeground#1F211D
  • keybindingLabel.background#D1E7E1
  • keybindingLabel.border#B5CEC7
  • keybindingLabel.foreground#2F2B26
  • list.activeSelectionBackground#B2ECDE
  • list.activeSelectionForeground#1F211D
  • list.activeSelectionIconForeground#1F211D
  • list.dropBackground#08798855
  • list.focusAndSelectionOutline#00816F
  • list.focusBackground#B2ECDE88
  • list.highlightForeground#376F44
  • list.hoverBackground#ECF8F5
  • list.inactiveSelectionBackground#D1E7E1
  • menu.background#F2FDFA
  • menu.border#B5CEC7
  • menu.foreground#2F2B26
  • menu.selectionBackground#00816F
  • menu.selectionForeground#FFFFFF
  • notebook.cellBorderColor#C9DDD7
  • notebook.selectedCellBackground#B2ECDE66
  • notificationCenterHeader.background#E4F4F0
  • notificationCenterHeader.foreground#2F2B26
  • notifications.background#F2FDFA
  • notifications.border#C9DDD7
  • notifications.foreground#2F2B26
  • panel.background#ECF8F5
  • panel.border#C9DDD7
  • panelInput.border#B5CEC7
  • panelTitle.activeBorder#00816F
  • panelTitle.activeForeground#2F2B26
  • panelTitle.inactiveForeground#7B766A
  • peekViewEditor.background#F2FDFA
  • peekViewEditor.matchHighlightBackground#08798866
  • peekViewResult.background#ECF8F5
  • peekViewResult.matchHighlightBackground#08798866
  • pickerGroup.border#B5CEC7
  • pickerGroup.foreground#3B6554
  • ports.iconRunningProcessForeground#00816F
  • progressBar.background#00816F
  • quickInput.background#ECF8F5
  • quickInput.foreground#2F2B26
  • searchEditor.textInputBorder#B5CEC7
  • settings.dropdownBackground#F2FDFA
  • settings.dropdownBorder#B5CEC7
  • settings.headerForeground#1F1B16
  • settings.modifiedItemIndicator#087988
  • settings.numberInputBorder#B5CEC7
  • settings.textInputBorder#B5CEC7
  • sideBar.background#E4F4F0
  • sideBar.border#C9DDD7
  • sideBar.foreground#2F2B26
  • sideBarSectionHeader.background#ECF8F5
  • sideBarSectionHeader.border#C9DDD7
  • sideBarSectionHeader.foreground#2F2B26
  • sideBarTitle.foreground#1F1B16
  • statusBar.background#E4F4F0
  • statusBar.border#C9DDD7
  • statusBar.debuggingBackground#087988
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.focusBorder#00816F
  • statusBar.foreground#2F2B26
  • statusBar.noFolderBackground#F2FDFA
  • statusBarItem.errorBackground#9C4343
  • statusBarItem.focusBorder#00816F
  • statusBarItem.hoverBackground#1F211D1A
  • statusBarItem.hoverForeground#1F1B16
  • statusBarItem.prominentBackground#D1E7E1
  • statusBarItem.remoteBackground#00816F
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#F2FDFA
  • tab.activeBorder#F2FDFA
  • tab.activeBorderTop#00816F
  • tab.activeForeground#1F1B16
  • tab.border#C9DDD7
  • tab.hoverBackground#F2FDFA
  • tab.inactiveBackground#E4F4F0
  • tab.inactiveForeground#7B766A
  • tab.lastPinnedBorder#B5CEC7
  • tab.selectedBorderTop#007460
  • tab.unfocusedActiveBorder#F2FDFA
  • tab.unfocusedActiveBorderTop#C9DDD7
  • tab.unfocusedHoverBackground#E4F4F0
  • terminal.ansiBlack#2F2B26
  • terminal.ansiBlue#376F44
  • terminal.ansiBrightBlack#7B766A
  • terminal.ansiBrightBlue#376F44
  • terminal.ansiBrightCyan#547444
  • terminal.ansiBrightGreen#00816F
  • terminal.ansiBrightMagenta#256B8F
  • terminal.ansiBrightRed#007460
  • terminal.ansiBrightWhite#1F1B16
  • terminal.ansiBrightYellow#087988
  • terminal.ansiCyan#547444
  • terminal.ansiGreen#157171
  • terminal.ansiMagenta#256B8F
  • terminal.ansiRed#9C4343
  • terminal.ansiWhite#E8E1D3
  • terminal.ansiYellow#087988
  • terminal.background#F2FDFA
  • terminal.foreground#2F2B26
  • terminal.inactiveSelectionBackground#D1E7E1
  • terminal.tab.activeBorder#00816F
  • terminalCursor.foreground#007460
  • textBlockQuote.background#ECF8F5
  • textBlockQuote.border#3B6554
  • textCodeBlock.background#ECF8F5
  • textLink.activeForeground#007460
  • textLink.foreground#376F44
  • textPreformat.background#D1E7E1
  • textPreformat.foreground#2F2B26
  • textSeparator.foreground#B5CEC7
  • titleBar.activeBackground#E4F4F0
  • titleBar.activeForeground#2F2B26
  • titleBar.border#C9DDD7
  • titleBar.inactiveBackground#F2FDFA
  • titleBar.inactiveForeground#7B766A
  • welcomePage.progress.foreground#00816F
  • welcomePage.tileBackground#ECF8F5
  • widget.border#B5CEC7

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#3B6554
constant.language#376F44
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#157171
constant.regexp#256B8F
entity.name.tag, entity.name.selector#007460
entity.other.attribute-name#376F44
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#087988
invalid#9C4343
markup.underlineunderline
markup.bold#376F44bold
markup.heading#007460bold
markup.italic#256B8Fitalic
markup.strikethroughstrikethrough
markup.deleted#9C4343
markup.inserted#3B6554
markup.changed#087988
markup.quote#3B6554
markup.inline.raw#157171
meta.diff.header#376F44
storage#007460
storage.type#007460
keyword, keyword.control, keyword.operator.expression#007460
keyword.operator#2F2B26
string, constant.other.symbol#157171
punctuation.definition.string, punctuation.definition.comment#7B766A
support.function, entity.name.function#087988
support.class, support.type, entity.name.type, entity.name.class, entity.name.namespace#376F44
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#42516A
variable.language, constant.character.escape#007460
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#087988
constant.character.character-class.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp#007460
keyword.operator.quantifier.regexp#2F2B26
constant.character, constant.other.option#376F44