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#0054E3
  • activityBar.border#003399
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#FFFFFF80
  • activityBarBadge.background#ED2C28
  • activityBarBadge.foreground#FFFFFF
  • activityBarTop.foreground#616161
  • badge.background#0054E3
  • 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#ECF4FE
  • dropdown.border#003399
  • dropdown.foreground#000000
  • editor.background#FFFFFF
  • editor.foreground#000000
  • editor.lineHighlightBackground#0054E333
  • editor.selectionBackground#0054E333
  • editor.selectionForeground#FFFFFF
  • editorCursor.foreground#000000
  • editorGroup.border#003399
  • editorGroup.dropBackground#0054E333
  • editorLineNumber.activeForeground#0054E3
  • editorLineNumber.foreground#003399
  • editorWhitespace.foreground#D1E4FE
  • focusBorder#0054E3
  • gitDecoration.addedResourceForeground#2CC436
  • gitDecoration.conflictingResourceForeground#FF8C00
  • gitDecoration.deletedResourceForeground#ED2C28
  • gitDecoration.ignoredResourceForeground#808080
  • gitDecoration.modifiedResourceForeground#0054E3
  • gitDecoration.untrackedResourceForeground#2CC436
  • icon.foreground#000000
  • input.background#FFFFFF
  • input.border#003399
  • input.foreground#000000
  • input.placeholderForeground#7F7F7F
  • list.activeSelectionBackground#0054E3
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#0054E333
  • list.focusBackground#0054E3
  • list.focusForeground#FFFFFF
  • list.highlightForeground#65abf6
  • list.hoverBackground#0054E333
  • list.inactiveSelectionBackground#DADADA
  • list.inactiveSelectionForeground#000000
  • menu.background#ECF4FE
  • menu.border#003399
  • menu.foreground#000000
  • menu.selectionBackground#0054E3
  • menu.selectionForeground#FFFFFF
  • panel.background#c3dcfe
  • panel.border#003399
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#808080
  • scrollbar.shadow#D1E4FE
  • scrollbarSlider.activeBackground#0054E3CC
  • scrollbarSlider.background#D1E4FECC
  • scrollbarSlider.hoverBackground#0054E366
  • sideBar.background#c3dcfe
  • sideBar.border#003399
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#0054E3
  • sideBarSectionHeader.foreground#FFFFFF
  • statusBar.background#0054E3
  • statusBar.border#003399
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#E5E5E5
  • tab.activeBorder#FFFFFF
  • tab.activeForeground#000000
  • tab.activeModifiedBorder#FF5500
  • tab.border#003399
  • tab.hoverBackground#0065FF
  • tab.hoverForeground#FFFFFF
  • tab.inactiveBackground#D1E4FE
  • tab.inactiveForeground#000000
  • tab.inactiveModifiedBorder#FF5500
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0054E3
  • 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#D1E4FE
  • terminal.ansiYellow#808000
  • terminal.background#FFFFFF
  • terminal.foreground#000000
  • titleBar.activeBackground#0054E3
  • titleBar.activeForeground#FFFFFF
  • titleBar.border#003399
  • titleBar.inactiveBackground#D1E4FE
  • titleBar.inactiveForeground#000000
  • toolbar.hoverBackground#0054E31A
  • toolbar.hoverOutline#0054E3

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#0054E3bold
entity.name.function, support.function#003399
variable, support.variable, entity.name.variable#000000
entity.name.type, support.type, support.class#0054E3
markup.heading, entity.name.section#0054E3bold
markup.italicitalic
markup.boldbold
markup.inline.raw, markup.fenced_code.block#ED2C28
variable.parameter#003399italic
variable.language#0054E3bold
meta.object-literal.key#1E8A25
invalid.illegal#ED2C28bold
keyword.operator#0054E3
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#003399
string.regexp, constant.regexp#ED2C28
meta.decorator, entity.name.function.decorator, punctuation.decorator#1E8A25
entity.name.namespace, entity.name.type.namespace, entity.name.module#0054E3

Shiki preview

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

Loading...