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#4A6AE8
  • activityBar.background#C8CCD8
  • activityBar.foreground#1E2838
  • activityBar.inactiveForeground#6A7A90
  • activityBarBadge.background#4A6AE8
  • activityBarBadge.foreground#FFFFFF
  • badge.background#4A6AE8
  • badge.foreground#FFFFFF
  • button.background#4A6AE8
  • button.foreground#FFFFFF
  • button.hoverBackground#6A8AFF
  • dropdown.background#FFFFFF
  • dropdown.border#C0C4D0
  • dropdown.foreground#1E2838
  • editor.background#E8EAF0
  • editor.foreground#1E2838
  • editor.lineHighlightBackground#D8DCE6
  • editor.selectionBackground#8AE0FF40
  • editor.selectionHighlightBackground#8AE0FF20
  • editorCursor.foreground#1E2838
  • editorGroupHeader.tabsBackground#D0D4E0
  • editorLineNumber.foreground#8A9AB0
  • gitDecoration.addedResourceForeground#3A8A7A
  • gitDecoration.conflictingResourceForeground#8A6AE8
  • gitDecoration.deletedResourceForeground#D04040
  • gitDecoration.modifiedResourceForeground#8A7A50
  • input.background#FFFFFF
  • input.border#C0C4D0
  • input.foreground#1E2838
  • input.placeholderForeground#8A9AB0
  • inputOption.activeBorder#4A6AE8
  • list.activeSelectionBackground#C8CCD8
  • list.activeSelectionForeground#1E2838
  • list.focusBackground#C8CCD8
  • list.hoverBackground#D0D4E0
  • list.hoverForeground#1E2838
  • list.inactiveSelectionBackground#D8DCE6
  • minimap.background#DADCE6
  • minimap.findMatchHighlight#4A6AE840
  • panel.background#DADCE6
  • panel.border#C0C4D0
  • peekView.background#E8EAF0
  • peekView.border#4A6AE8
  • peekViewEditor.background#FFFFFF
  • peekViewResult.background#DADCE6
  • quickInput.background#E8EAF0
  • quickInput.foreground#1E2838
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#4A6AE8AA
  • scrollbarSlider.background#C0C4D080
  • scrollbarSlider.hoverBackground#C0C4D0AA
  • sideBar.background#DADCE6
  • sideBar.foreground#2E3850
  • sideBarSectionHeader.background#D0D4E0
  • sideBarTitle.foreground#1E2838
  • statusBar.background#C8CCD8
  • statusBar.foreground#1E2838
  • statusBarItem.activeBackground#4A6AE844
  • statusBarItem.hoverBackground#B8BCC8
  • tab.activeBackground#E8EAF0
  • tab.activeForeground#1E2838
  • tab.hoverBackground#D8DCE6
  • tab.inactiveBackground#D0D4E0
  • tab.inactiveForeground#6A7A90
  • terminal.ansiBlack#2D2D3A
  • terminal.ansiBlue#4A6AE8
  • terminal.ansiBrightBlack#6A7A90
  • terminal.ansiBrightBlue#6A8AFF
  • terminal.ansiBrightCyan#AAEEFF
  • terminal.ansiBrightGreen#4A9A8A
  • terminal.ansiBrightMagenta#A08AFF
  • terminal.ansiBrightRed#E06060
  • terminal.ansiBrightWhite#E8EAF0
  • terminal.ansiBrightYellow#A08A60
  • terminal.ansiCyan#8AE0FF
  • terminal.ansiGreen#3A8A7A
  • terminal.ansiMagenta#8A6AE8
  • terminal.ansiRed#D04040
  • terminal.ansiWhite#B0B8C8
  • terminal.ansiYellow#8A7A50
  • terminal.background#FFFFFF
  • terminal.foreground#1E2838
  • titleBar.activeBackground#C8CCD8
  • titleBar.activeForeground#1E2838
  • titleBar.inactiveBackground#B8BCC8
  • titleBar.inactiveForeground#6A7A90

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A9AB0italic
keyword, storage.type, storage.modifier#4A6AE8
string, string.quoted, string.regexp#3A8A7A
constant.numeric, constant.language#8A6AE8
entity.name.function, meta.function-call, support.function#4A6AE8
entity.name.type, entity.name.class, support.type#8A7A50
variable, variable.parameter#1E2838
variable.other.constant#8A6AE8
support.type.property-name.css#4A6AE8italic
meta.tag, entity.name.tag#4A6AE8
entity.other.attribute-name#3A8A7A
punctuation, meta.brace, meta.brace.round#8A9AB0
markup.heading, markup.heading entity.name#4A6AE8bold
markup.list#3A8A7A
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.fenced_code.block#3A8A7A
constant.character.escape#8AE0FF
support.type.property-name.json#4A6AE8
constant.language.json#4A6AE8