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#E3E7EC
  • activityBar.foreground#3B424B
  • dropdown.background#ECEFF1
  • dropdown.border#CDD4DB
  • dropdown.foreground#2A2E35
  • editor.background#ECEFF1
  • editor.foreground#2A2E35
  • editor.inactiveSelectionBackground#1F6CA011
  • editor.lineHighlightBackground#DCE1E6
  • editor.lineHighlightBorder#1F6CA011
  • editor.selectionBackground#1F6CA033
  • editorBracketMatch.background#1F6CA022
  • editorBracketMatch.border#1F6CA044
  • editorCursor.foreground#1F6CA0
  • editorGutter.addedBackground#007B6F
  • editorGutter.deletedBackground#B23636
  • editorGutter.modifiedBackground#225D8A
  • editorLineNumber.activeForeground#1F6CA0
  • editorLineNumber.foreground#98A0AA
  • editorWhitespace.foreground#CDD4DB
  • focusBorder#1F6CA033
  • list.activeSelectionBackground#1F6CA033
  • list.activeSelectionForeground#2A2E35
  • list.hoverBackground#1F6CA011
  • list.hoverForeground#2A2E35
  • menu.background#ECEFF1
  • menu.foreground#2A2E35
  • menu.selectionBackground#1F6CA033
  • menu.selectionForeground#2A2E35
  • menu.separatorBackground#CDD4DB
  • sideBar.background#EBEFF3
  • sideBar.foreground#3E4650
  • statusBar.background#E3E7EC
  • statusBar.foreground#3B424B
  • tab.activeBackground#1F6CA033
  • tab.activeForeground#2A2E35
  • tab.inactiveBackground#E3E7EC
  • tab.inactiveForeground#5F6B7A
  • terminal.background#ECEFF1
  • terminal.foreground#2A2E35
  • titleBar.activeBackground#E3E7EC
  • titleBar.activeForeground#3B424B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7F8690
keyword, storage.type, storage.modifier#005A8Cbold
variable, meta.definition.variable#7B3F91
string, constant.other.symbol#1F7B5C
number, constant.numeric#6A3FA0
function, entity.name.function#1F5F9E
entity.name.class, support.class, meta.class#A27B12bold
support.function, support.constant#357A7F
constant.language, variable.language#913F1F
invalid, invalid.illegal#FFFFFF
markup.heading, entity.name.section#1F6CA0bold
meta.tag, entity.name.tag#1F6CA0
entity.other.attribute-name#00655C
punctuation.definition.tag, punctuation.separator.key-value#4C7A92
constant.character.escape#00766A