Skip to main content
Coding Theme

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#FFF
  • activityBar.foreground#0033cc
  • activityBar.inactiveForeground#000
  • activityBarBadge.background#FFF
  • activityBarBadge.foreground#000
  • badge.background#FFF
  • badge.foreground#000
  • button.background#0033cc
  • button.border#0033cc
  • button.foreground#000
  • contrastActiveBorder#0033cc
  • contrastBorder#0033cc
  • descriptionForeground#000
  • diffEditor.insertedTextBorder#009933
  • diffEditor.removedTextBorder#cc0000
  • dropdown.background#FFF
  • dropdown.foreground#000
  • dropdown.listBackground#FFF
  • editor.background#FFF
  • editor.foreground#000
  • editor.lineHighlightBackground#FF0
  • editor.lineHighlightBorder#FFF
  • editor.selectionBackground#FF0
  • editor.selectionForeground#000
  • editorCursor.foreground#000
  • editorLineNumber.activeForeground#0033cc
  • editorLineNumber.foreground#000
  • editorWhitespace.foreground#FF0
  • editorWidget.background#FFF
  • editorWidget.foreground#000
  • errorForeground#cc0000
  • focusBorder#0033cc
  • foreground#000
  • icon.foreground#000
  • input.background#FFF
  • input.border#0033cc
  • input.foreground#000
  • input.placeholderForeground#993399
  • inputOption.activeBackground#0033cc
  • inputOption.activeBorder#0033cc
  • inputOption.activeForeground#FFF
  • minimap.background#FFF
  • minimap.errorHighlight#cc0000
  • minimap.findMatchHighlight#0033cc
  • minimap.selectionHighlight#FF0
  • minimap.selectionOccurrenceHighlight#FFF
  • minimap.warningHighlight#FF0
  • panel.background#FFF
  • panelSectionHeader.background#FFF
  • panelTitle.activeForeground#0033cc
  • panelTitle.inactiveForeground#000
  • pickerGroup.border#0033cc
  • scrollbarSlider.activeBackground#0007
  • scrollbarSlider.background#0003
  • scrollbarSlider.hoverBackground#0007
  • selection.background#FF0
  • settings.headerForeground#0033cc
  • settings.modifiedItemIndicator#0033cc
  • sideBar.background#FFF
  • sideBar.foreground#000
  • statusBar.background#FFF
  • statusBar.foreground#000
  • tab.activeBackground#FF0
  • tab.activeForeground#000
  • tab.inactiveBackground#FFF
  • tab.inactiveForeground#000
  • tab.unfocusedActiveBackground#FFF
  • tab.unfocusedActiveForeground#000
  • tab.unfocusedInactiveBackground#FFF
  • tab.unfocusedInactiveForeground#000
  • terminal.ansiBlack#FFF
  • terminal.ansiBlue#0033cc
  • terminal.ansiBrightBlack#FFF
  • terminal.ansiBrightBlue#0033cc
  • terminal.ansiBrightCyan#0033cc
  • terminal.ansiBrightGreen#009933
  • terminal.ansiBrightMagenta#996633
  • terminal.ansiBrightRed#cc0000
  • terminal.ansiBrightWhite#000
  • terminal.ansiBrightYellow#FF0
  • terminal.ansiCyan#0033cc
  • terminal.ansiGreen#009933
  • terminal.ansiMagenta#996633
  • terminal.ansiRed#cc0000
  • terminal.ansiWhite#000
  • terminal.ansiYellow#FF0
  • terminal.background#FFF
  • terminal.foreground#000
  • terminal.selectionBackground#FF0
  • textLink.foreground#0033cc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#009933
string#009933
constant.numeric#996633
constant.language#996633
constant.character, constant.other#996633
variable#000
keyword#0033cc
storage#ff00ff
meta.interface#996633
meta.type.declaration, entity.name.type#996633
meta.class, entity.other.inherited-class, entity.name.type.class#996633
entity.name.function#0033cc
support.function#009933
support.constant#009933

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

8-Bit-High-Contrast - Coding Theme