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#3A6EA5
  • activityBar.border#2B5480
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#FFFFFF80
  • activityBarBadge.background#ED2C28
  • activityBarBadge.foreground#FFFFFF
  • activityBarTop.foreground#616161
  • badge.background#3A6EA5
  • badge.foreground#FFFFFF
  • button.background#2CC436
  • button.border#1E8A25
  • button.foreground#FFFFFF
  • button.hoverBackground#37F244
  • diffEditor.insertedLineBackground#2CC4361A
  • diffEditor.insertedTextBackground#2CC43633
  • diffEditor.removedLineBackground#ED2C281A
  • diffEditor.removedTextBackground#ED2C2833
  • dropdown.background#ECE9D8
  • dropdown.border#2B5480
  • dropdown.foreground#000000
  • editor.background#FFFFFF
  • editor.foreground#000000
  • editor.lineHighlightBackground#3A6EA533
  • editor.selectionBackground#3A6EA533
  • editor.selectionForeground#FFFFFF
  • editorCursor.foreground#000000
  • editorGroup.border#2B5480
  • editorGroup.dropBackground#3A6EA533
  • editorLineNumber.activeForeground#3A6EA5
  • editorLineNumber.foreground#2B5480
  • editorWhitespace.foreground#D4D0C8
  • focusBorder#3A6EA5
  • gitDecoration.addedResourceForeground#2CC436
  • gitDecoration.conflictingResourceForeground#FF8C00
  • gitDecoration.deletedResourceForeground#ED2C28
  • gitDecoration.ignoredResourceForeground#7F7F7F
  • gitDecoration.modifiedResourceForeground#3A6EA5
  • gitDecoration.untrackedResourceForeground#2CC436
  • icon.foreground#000000
  • input.background#FFFFFF
  • input.border#2B5480
  • input.foreground#000000
  • input.placeholderForeground#7F7F7F
  • list.activeSelectionBackground#3A6EA5DD
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#3A6EA533
  • list.focusBackground#3A6EA5
  • list.focusForeground#FFFFFF
  • list.highlightForeground#65abf6
  • list.hoverBackground#3A6EA533
  • list.inactiveSelectionBackground#DADADA
  • list.inactiveSelectionForeground#000000
  • menu.background#ECE9D8
  • menu.border#2B5480
  • menu.foreground#000000
  • menu.selectionBackground#3A6EA5
  • menu.selectionForeground#FFFFFF
  • panel.background#3A6EA5
  • panel.border#2B5480
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#AAAAAA
  • scrollbar.shadow#D4D0C8
  • scrollbarSlider.activeBackground#3A6EA5CC
  • scrollbarSlider.background#D4D0C8CC
  • scrollbarSlider.hoverBackground#3A6EA566
  • sideBar.background#ECE9D8
  • sideBar.border#2B5480
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#3A6EA5
  • sideBarSectionHeader.foreground#FFFFFF
  • statusBar.background#3A6EA5
  • statusBar.border#2B5480
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#E5E5E5
  • tab.activeBorder#FFFFFF
  • tab.activeForeground#000000
  • tab.activeModifiedBorder#FF6B00
  • tab.border#2B5480
  • tab.hoverBackground#4C8CF5
  • tab.hoverForeground#FFFFFF
  • tab.inactiveBackground#ECE9D8
  • tab.inactiveForeground#000000
  • tab.inactiveModifiedBorder#FF6B00
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#3A6EA5
  • terminal.ansiBrightBlack#808080
  • terminal.ansiBrightBlue#4C8CF5
  • terminal.ansiBrightCyan#00FFFF
  • terminal.ansiBrightGreen#37F244
  • terminal.ansiBrightMagenta#FF00FF
  • terminal.ansiBrightRed#FF6B6B
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFF00
  • terminal.ansiCyan#008080
  • terminal.ansiGreen#2CC436
  • terminal.ansiMagenta#800080
  • terminal.ansiRed#ED2C28
  • terminal.ansiWhite#ECE9D8
  • terminal.ansiYellow#FF8C00
  • terminal.background#FFFFFF
  • terminal.foreground#000000
  • titleBar.activeBackground#3A6EA5
  • titleBar.activeForeground#FFFFFF
  • titleBar.border#2B5480
  • titleBar.inactiveBackground#D4D0C8
  • titleBar.inactiveForeground#000000
  • toolbar.hoverBackground#3A6EA51A
  • toolbar.hoverOutline#3A6EA5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#2CC436
string, constant.other.symbol#ED2C28
constant.numeric, constant.language, constant.character, constant.other#FF8C00
keyword, storage.type, storage.modifier#3A6EA5bold
entity.name.function, support.function#2B5480
variable, support.variable, entity.name.variable#000000
entity.name.type, support.type, support.class#3A6EA5
markup.heading, entity.name.section#3A6EA5bold
markup.italicitalic
markup.boldbold
markup.inline.raw, markup.fenced_code.block#ED2C28
variable.parameter#2B5480italic
variable.language#3A6EA5bold
meta.object-literal.key#1E8A25
invalid.illegal#ED2C28bold
keyword.operator#3A6EA5
entity.name.tag, entity.name.tag.html, entity.name.tag.xml#ED2C28
entity.other.attribute-name, entity.other.attribute-name.html#FF8C00
support.type.property-name, support.type.property-name.css, support.type.property-name.less, support.type.property-name.scss#2B5480
string.regexp, constant.regexp#ED2C28
meta.decorator, entity.name.function.decorator, punctuation.decorator#1E8A25
entity.name.namespace, entity.name.type.namespace, entity.name.module#3A6EA5

Shiki preview

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

Loading...