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#3A6EA4
  • activityBar.border#2E5883
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#FFFFFF80
  • activityBarBadge.background#4684C5
  • activityBarBadge.foreground#FFFFFF
  • activityBarTop.foreground#616161
  • badge.background#3A6EA4
  • badge.foreground#FFFFFF
  • button.background#D4E4F3
  • button.border#2E5883
  • button.foreground#000000
  • button.hoverBackground#FFFFFF
  • button.secondaryBackground#D4E4F3
  • button.secondaryForeground#000000
  • button.secondaryHoverBackground#FFFFFF
  • diffEditor.insertedLineBackground#0080001A
  • diffEditor.insertedTextBackground#00800033
  • diffEditor.removedLineBackground#CC00001A
  • diffEditor.removedTextBackground#CC000033
  • dropdown.background#FFFFFF
  • dropdown.border#2E5883
  • dropdown.foreground#000000
  • editor.background#FFFFFF
  • editor.foreground#000000
  • editor.lineHighlightBackground#3A6EA41A
  • editor.selectionBackground#3A6EA433
  • editor.selectionForeground#FFFFFF
  • editorCursor.foreground#000000
  • editorGroup.border#2E5883
  • editorGroup.dropBackground#3A6EA41A
  • editorLineNumber.activeForeground#3A6EA4
  • editorLineNumber.foreground#2E5883
  • editorWhitespace.foreground#D4E4F3
  • focusBorder#3A6EA4
  • gitDecoration.addedResourceForeground#008000
  • gitDecoration.conflictingResourceForeground#FF8C00
  • gitDecoration.deletedResourceForeground#CC0000
  • gitDecoration.ignoredResourceForeground#808080
  • gitDecoration.modifiedResourceForeground#3A6EA4
  • gitDecoration.untrackedResourceForeground#008000
  • icon.foreground#000000
  • input.background#FFFFFF
  • input.border#2E5883
  • input.foreground#000000
  • input.placeholderForeground#2E5883
  • list.activeSelectionBackground#4684C5
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#3A6EA41A
  • list.focusBackground#3A6EA4AA
  • list.focusForeground#FFFFFF
  • list.highlightForeground#3A6EA4
  • list.hoverBackground#3A6EA41A
  • list.inactiveSelectionBackground#D4E4F3
  • list.inactiveSelectionForeground#000000
  • menu.background#D4E4F3
  • menu.border#2E5883
  • menu.foreground#000000
  • menu.selectionBackground#3A6EA4
  • menu.selectionForeground#FFFFFF
  • menubar.selectionBackground#3A6EA4
  • menubar.selectionForeground#FFFFFF
  • panel.background#D4E4F3
  • panel.border#2E5883
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#2E5883
  • scrollbar.shadow#2E5883
  • scrollbarSlider.activeBackground#3A6EA4CC
  • scrollbarSlider.background#D4E4F380
  • scrollbarSlider.hoverBackground#3A6EA466
  • sideBar.background#D4E4F3
  • sideBar.border#2E5883
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#3A6EA4
  • sideBarSectionHeader.foreground#FFFFFF
  • statusBar.background#3A6EA4
  • statusBar.border#2E5883
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#FFFFFF
  • tab.activeForeground#000000
  • tab.activeModifiedBorder#4684C5
  • tab.border#2E5883
  • tab.hoverBackground#4684C5
  • tab.hoverForeground#FFFFFF
  • tab.inactiveBackground#D4E4F3
  • tab.inactiveForeground#000000
  • tab.inactiveModifiedBorder#4684C5
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#3A6EA4
  • terminal.ansiBrightBlack#808080
  • terminal.ansiBrightBlue#4684C5
  • terminal.ansiBrightCyan#00FFFF
  • terminal.ansiBrightGreen#00FF00
  • terminal.ansiBrightMagenta#FF00FF
  • terminal.ansiBrightRed#FF0000
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFF00
  • terminal.ansiCyan#008080
  • terminal.ansiGreen#008000
  • terminal.ansiMagenta#800080
  • terminal.ansiRed#800000
  • terminal.ansiWhite#D4E4F3
  • terminal.ansiYellow#808000
  • terminal.background#FFFFFF
  • terminal.foreground#000000
  • titleBar.activeBackground#3A6EA4
  • titleBar.activeForeground#FFFFFF
  • titleBar.border#2E5883
  • titleBar.inactiveBackground#D4E4F3
  • titleBar.inactiveForeground#000000
  • toolbar.hoverBackground#3A6EA41A
  • toolbar.hoverOutline#3A6EA4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4684C5
string, constant.other.symbol#2E5883
constant.numeric, constant.language, constant.character, constant.other#4684C5
keyword, storage.type, storage.modifier#3A6EA4bold
entity.name.function, support.function#2E5883
variable, support.variable, entity.name.variable#000000
entity.name.type, support.type, support.class#3A6EA4
markup.heading, entity.name.section#3A6EA4bold
markup.italicitalic
markup.boldbold
markup.inline.raw, markup.fenced_code.block#2E5883
variable.parameter#2E5883italic
variable.language#3A6EA4bold
meta.object-literal.key#008080
invalid.illegal#CC0000bold
keyword.operator#CC0000
entity.name.tag, entity.name.tag.html, entity.name.tag.xml#2E5883
entity.other.attribute-name, entity.other.attribute-name.html#008080
support.type.property-name, support.type.property-name.css, support.type.property-name.less, support.type.property-name.scss#3A6EA4
string.regexp, constant.regexp#CC0000
meta.decorator, entity.name.function.decorator, punctuation.decorator#4684C5
entity.name.namespace, entity.name.type.namespace, entity.name.module#3A6EA4

Shiki preview

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

Loading...