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#A2B86C
  • activityBar.background#1E1E1E
  • activityBar.foreground#A2B86C
  • activityBar.inactiveForeground#7F9C7F
  • activityBarBadge.background#A2B86C
  • activityBarBadge.foreground#1E1E1E
  • badge.background#A2B86C
  • badge.foreground#1E1E1E
  • button.background#3E4D3E
  • button.border#A2B86C60
  • button.foreground#A2B86C
  • button.hoverBackground#4E5C4E
  • button.secondaryBackground#2C2C2C
  • button.secondaryForeground#D0D0D0
  • checkbox.background#2C2C2C
  • checkbox.border#A2B86C60
  • checkbox.foreground#A2B86C
  • debugToolBar.background#1E1E1E
  • dropdown.background#2C2C2C
  • dropdown.border#A2B86C60
  • editor.background#212121
  • editor.findMatchBackground#4E5C4E
  • editor.findMatchBorder#7F9C7F
  • editor.findMatchHighlightBackground#4E5C4E80
  • editor.foreground#D0D0D0
  • editor.lineHighlightBackground#2C2C2C
  • editor.lineHighlightBorder#3E4D3E
  • editor.selectionBackground#3E4D3E
  • editor.selectionHighlightBackground#3E4D3E80
  • editorBracketMatch.background#A2B86C20
  • editorBracketMatch.border#A2B86C
  • editorError.foreground#B64E4E
  • editorGutter.addedBackground#A2B86C80
  • editorGutter.deletedBackground#B64E4E80
  • editorGutter.modifiedBackground#7F9C7F80
  • editorHoverWidget.background#1E1E1E
  • editorHoverWidget.border#2C2C2C
  • editorHoverWidget.statusBarBackground#212121
  • editorLineNumber.activeForeground#A9B7A8
  • editorLineNumber.foreground#5A5A5A
  • editorSuggestWidget.background#1E1E1E
  • editorSuggestWidget.border#2C2C2C
  • editorSuggestWidget.highlightForeground#A2B86C
  • editorSuggestWidget.selectedBackground#3E4D3E
  • editorWarning.foreground#B5B55A
  • editorWidget.background#1E1E1E
  • editorWidget.border#2C2C2C
  • errorForeground#B64E4E
  • focusBorder#A2B86C
  • foreground#D0D0D0
  • input.background#2C2C2C
  • input.border#A2B86C60
  • input.placeholderForeground#5A5A5A
  • inputOption.activeBackground#3E4D3E
  • inputOption.activeForeground#A2B86C
  • list.activeSelectionBackground#3E4D3E
  • list.activeSelectionForeground#A2B86C
  • list.focusBackground#2C2C2C40
  • list.focusForeground#D0D0D0
  • list.highlightForeground#A2B86C
  • list.hoverBackground#2C2C2C40
  • list.inactiveSelectionBackground#2C2C2C
  • notificationCenterHeader.background#1E1E1E
  • notifications.background#2C2C2C
  • notifications.border#2C2C2C
  • panel.background#1E1E1E
  • panel.border#2C2C2C
  • panelTitle.activeForeground#A2B86C
  • peekView.border#A2B86C
  • peekViewEditor.background#212121
  • peekViewResult.background#1E1E1E
  • peekViewResult.selectionBackground#3E4D3E
  • peekViewTitle.background#1E1E1E
  • progressBar.background#A2B86C
  • scrollbarSlider.activeBackground#A2B86C80
  • scrollbarSlider.background#A2B86C30
  • scrollbarSlider.hoverBackground#A2B86C50
  • settings.focusedRowBackground#2C2C2C20
  • settings.focusedRowBorder#A2B86C
  • settings.headerForeground#A2B86C
  • settings.textInputBackground#2C2C2C
  • sideBar.background#1E1E1E
  • statusBar.background#1E1E1E
  • statusBar.border#2C2C2C
  • statusBar.debuggingBackground#3E4D3E
  • statusBar.debuggingForeground#A2B86C
  • statusBar.foreground#A2B86C
  • statusBarItem.remoteBackground#3E4D3E
  • statusBarItem.remoteForeground#A2B86C
  • tab.activeBackground#212121
  • tab.activeBorder#A2B86C
  • tab.activeForeground#D0D0D0
  • tab.border#2C2C2C
  • tab.inactiveBackground#1E1E1E
  • tab.inactiveForeground#8A978A
  • terminal.ansiBlue#A9B7A8
  • terminal.ansiBrightGreen#A2B86C
  • terminal.ansiCyan#7F9C7F
  • terminal.ansiGreen#A2B86C
  • terminal.ansiMagenta#B0B0A0
  • terminal.ansiRed#B64E4E
  • terminal.ansiWhite#D0D0D0
  • terminal.ansiYellow#B5B55A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.control, storage.type, storage.modifier, keyword.operator, variable.language.this, variable.language.super#A9B7A8
entity.name.function#B8D486italic bold
entity.name.class, support.class.component#A2B86Cbold
constant.numeric, constant.language#B5B55A
string, punctuation.definition.string#C5C5B5
variable.other.readwrite, variable, variable.parameter#D0D0D0
entity.name.tag, meta.object-literal.key, string.unquoted.label.js, variable.other.object.key.js#7F9C7F
variable.object.property, support.variable.property, variable.other.object.property#D0D0D0
entity.name.type, support.type, support.class#A9B7A8
keyword.operator.type, storage.modifier.satisfies#A9B7A8
comment, punctuation.definition.comment#7D7D59italic
invalid, invalid.illegal#F28C8Cbold underline