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.background#162616
  • activityBar.foreground#B9FFD9
  • activityBarBadge.background#D6FF7A
  • activityBarBadge.foreground#0B140B
  • breadcrumb.background#102010
  • breadcrumb.focusForeground#E0FFEF
  • breadcrumb.foreground#B9FFD9
  • button.background#D6FF7A
  • button.foreground#0B140B
  • button.hoverBackground#B9FFD9
  • diffEditor.insertedTextBackground#D6FF7A33
  • diffEditor.removedTextBackground#FF4D6D22
  • dropdown.background#102010
  • dropdown.foreground#E0FFEF
  • editor.background#1A2E1A
  • editor.findMatchBackground#D6FF7A55
  • editor.findMatchHighlightBackground#D6FF7A33
  • editor.findRangeHighlightBackground#D6FF7A22
  • editor.foreground#B9FFD9
  • editor.inactiveSelectionBackground#2E5A2E88
  • editor.lineHighlightBackground#244224
  • editor.selectionBackground#2E5A2E
  • editor.wordHighlightBackground#A4FFB833
  • editor.wordHighlightStrongBackground#A4FFB855
  • editorBracketMatch.background#6CFFB033
  • editorBracketMatch.border#D6FF7A
  • editorCursor.foreground#A4FFB8
  • editorError.foreground#FF4D6D
  • editorHoverWidget.background#102010
  • editorIndentGuide.activeBackground1#6CFFB0
  • editorIndentGuide.background1#395239
  • editorInfo.foreground#6CFFB0
  • editorLineNumber.activeForeground#E0FFEF
  • editorLineNumber.foreground#4AAE75
  • editorSuggestWidget.background#102010
  • editorSuggestWidget.highlightForeground#D6FF7A
  • editorSuggestWidget.selectedBackground#244224
  • editorWarning.foreground#FFD166
  • editorWhitespace.foreground#395239
  • icon.foreground#B9FFD9
  • input.background#102010
  • input.foreground#E0FFEF
  • input.placeholderForeground#6DAF86
  • inputOption.activeBorder#D6FF7A
  • list.activeSelectionBackground#2E5A2E
  • list.activeSelectionForeground#E0FFEF
  • list.hoverBackground#244224
  • menu.background#102010
  • menu.foreground#B9FFD9
  • menu.selectionBackground#244224
  • menu.selectionForeground#E0FFEF
  • panel.background#1C3A1C
  • panel.border#102010
  • panelTitle.activeBorder#D6FF7A
  • panelTitle.activeForeground#E0FFEF
  • panelTitle.inactiveForeground#6DAF86
  • quickInput.background#102010
  • quickInput.foreground#E0FFEF
  • quickInputList.focusBackground#244224
  • quickInputList.focusForeground#E0FFEF
  • scrollbarSlider.activeBackground#6CFFB077
  • scrollbarSlider.background#6CFFB033
  • scrollbarSlider.hoverBackground#6CFFB055
  • sideBar.background#152315
  • sideBar.foreground#B9FFD9
  • sideBarSectionHeader.background#102010
  • sideBarSectionHeader.foreground#E0FFEF
  • statusBar.background#102010
  • statusBar.debuggingBackground#FF4D6D
  • statusBar.debuggingForeground#0B140B
  • statusBar.foreground#B9FFD9
  • tab.activeBackground#102010
  • tab.activeBorder#D6FF7A
  • tab.activeForeground#E0FFEF
  • tab.inactiveBackground#1C2F1C
  • tab.inactiveForeground#6DAF86
  • terminal.background#0F1F0F
  • terminal.foreground#B9FFD9
  • terminalCursor.foreground#D6FF7A
  • titleBar.activeBackground#102010
  • titleBar.activeForeground#E0FFEF
  • toolbar.hoverBackground#244224

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6DAF86italic
string, constant.other.symbol#D6FF7A—
constant.numeric, constant.language.boolean#FFD166—
keyword, storage.type#6CFFB0bold
entity.name.function#6CFFB0—
entity.name.type.class, support.class#A4FFB8—
variable, entity.name.variable#B9FFD9—
invalid, invalid.deprecated#FF4D6Dunderline
meta.import.python, support.type.python, entity.name.module.python#A4FFB8bold