Skip to main content
CodingTheme

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#2672EC
  • activityBar.border#1960D1
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#FFFFFF80
  • activityBarBadge.background#E81123
  • activityBarBadge.foreground#FFFFFF
  • activityBarTop.foreground#616161
  • badge.background#2672EC
  • badge.foreground#FFFFFF
  • button.background#2672EC
  • button.border#1960D1
  • button.foreground#FFFFFF
  • button.hoverBackground#4C8CF5
  • button.secondaryBackground#F0F0F0
  • button.secondaryForeground#000000
  • button.secondaryHoverBackground#E5E5E5
  • diffEditor.insertedLineBackground#0080001A
  • diffEditor.insertedTextBackground#00800033
  • diffEditor.removedLineBackground#A315151A
  • diffEditor.removedTextBackground#A3151533
  • dropdown.background#FFFFFF
  • dropdown.border#CCCCCC
  • dropdown.foreground#000000
  • editor.background#FFFFFF
  • editor.foreground#000000
  • editor.lineHighlightBackground#2672EC1A
  • editor.selectionBackground#2672EC66
  • editor.selectionForeground#FFFFFF
  • editorCursor.foreground#000000
  • editorGroup.border#CCCCCC
  • editorGroup.dropBackground#2672EC33
  • editorLineNumber.activeForeground#2672EC
  • editorLineNumber.foreground#767676
  • editorWhitespace.foreground#D4D4D4
  • focusBorder#2672EC
  • gitDecoration.addedResourceForeground#008000
  • gitDecoration.conflictingResourceForeground#FF4081
  • gitDecoration.deletedResourceForeground#A31515
  • gitDecoration.ignoredResourceForeground#767676
  • gitDecoration.modifiedResourceForeground#2672EC
  • gitDecoration.untrackedResourceForeground#267F99
  • icon.foreground#000000
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#000000
  • input.placeholderForeground#767676
  • list.activeSelectionBackground#2672EC
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#2672EC33
  • list.focusBackground#2672EC00
  • list.focusForeground#FFFFFF
  • list.highlightForeground#65abf6
  • list.hoverBackground#2672EC1A
  • list.inactiveSelectionBackground#E5E5E5
  • list.inactiveSelectionForeground#000000
  • menu.background#FFFFFF
  • menu.border#CCCCCC
  • menu.foreground#000000
  • menu.selectionBackground#2672EC
  • menu.selectionForeground#FFFFFF
  • menubar.selectionBackground#2672EC
  • menubar.selectionForeground#FFFFFF
  • panel.background#2672EC
  • panel.border#CCCCCC
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#AAAAAA
  • scrollbar.shadow#CCCCCC
  • scrollbarSlider.activeBackground#2672ECCC
  • scrollbarSlider.background#C0C0C080
  • scrollbarSlider.hoverBackground#2672EC66
  • sideBar.background#F0F0F0
  • sideBar.border#CCCCCC
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#2672EC
  • sideBarSectionHeader.foreground#FFFFFF
  • statusBar.background#2672EC
  • statusBar.border#1960D1
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#E5E5E5
  • tab.activeBorder#FFFFFF
  • tab.activeForeground#000000
  • tab.activeModifiedBorder#FF4081
  • tab.border#CCCCCC
  • tab.hoverBackground#4C8CF5
  • tab.hoverForeground#FFFFFF
  • tab.inactiveBackground#F0F0F0
  • tab.inactiveForeground#000000
  • tab.inactiveModifiedBorder#FF4081
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0000FF
  • terminal.ansiBrightBlack#767676
  • terminal.ansiBrightBlue#2672EC
  • terminal.ansiBrightCyan#00D7D7
  • terminal.ansiBrightGreen#00C800
  • terminal.ansiBrightMagenta#C800C8
  • terminal.ansiBrightRed#E81123
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFCC00
  • terminal.ansiCyan#267F99
  • terminal.ansiGreen#008000
  • terminal.ansiMagenta#800080
  • terminal.ansiRed#A31515
  • terminal.ansiWhite#D4D4D4
  • terminal.ansiYellow#795E26
  • terminal.background#FFFFFF
  • terminal.foreground#000000
  • titleBar.activeBackground#2672EC
  • titleBar.activeForeground#FFFFFF
  • titleBar.border#1960D1
  • titleBar.inactiveBackground#F0F0F0
  • titleBar.inactiveForeground#000000
  • toolbar.hoverBackground#2672EC1A
  • toolbar.hoverOutline#2672EC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#008000
string, constant.other.symbol#A31515
constant.numeric, constant.language, constant.character, constant.other#098658
keyword, storage.type, storage.modifier#0000FFbold
entity.name.function, support.function#795E26
variable, support.variable, entity.name.variable#001080
entity.name.type, support.type, support.class#267F99
markup.heading, entity.name.section#0451A5bold
markup.italicitalic
markup.boldbold
markup.inline.raw, markup.fenced_code.block#800000
variable.parameter#001080italic
variable.language#0000FFbold
meta.object-literal.key#098658
invalid.illegal#CD3131bold
keyword.operator#0000FF
entity.name.tag, entity.name.tag.html, entity.name.tag.xml#800000
entity.other.attribute-name, entity.other.attribute-name.html#267F99
support.type.property-name, support.type.property-name.css, support.type.property-name.less, support.type.property-name.scss#A31515
string.regexp, constant.regexp#811F3F
meta.decorator, entity.name.function.decorator, punctuation.decorator#795E26
entity.name.namespace, entity.name.type.namespace, entity.name.module#267F99

Shiki preview

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

Loading...