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#1E4D7A
  • activityBar.border#153655
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#FFFFFF80
  • activityBarBadge.background#ED2C28
  • activityBarBadge.foreground#FFFFFF
  • activityBarTop.foreground#EEEEEE
  • badge.background#7a1e74
  • badge.foreground#FFFFFF
  • button.background#2CC436
  • button.border#1E8A25
  • button.foreground#FFFFFF
  • button.hoverBackground#37F244
  • diffEditor.insertedLineBackground#37F2441A
  • diffEditor.insertedTextBackground#37F24433
  • diffEditor.removedLineBackground#FF6B6B1A
  • diffEditor.removedTextBackground#FF6B6B33
  • dropdown.background#2A2A2A
  • dropdown.border#153655
  • dropdown.foreground#FFFFFF
  • editor.background#1E1E1E
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#1E4D7A33
  • editor.selectionBackground#1E4D7AAA
  • editor.selectionForeground#FFFFFF
  • editorCursor.foreground#FFFFFF
  • editorGroup.border#153655
  • editorGroup.dropBackground#1E4D7A33
  • editorLineNumber.activeForeground#3A6EA5
  • editorLineNumber.foreground#666666
  • editorWhitespace.foreground#404040
  • focusBorder#1E4D7A
  • gitDecoration.addedResourceForeground#37F244
  • gitDecoration.conflictingResourceForeground#FFB347
  • gitDecoration.deletedResourceForeground#FF6B6B
  • gitDecoration.ignoredResourceForeground#666666
  • gitDecoration.modifiedResourceForeground#66B3FF
  • gitDecoration.untrackedResourceForeground#37F244
  • icon.foreground#FFFFFF
  • input.background#2A2A2A
  • input.border#153655
  • input.foreground#FFFFFF
  • input.placeholderForeground#888888
  • list.activeSelectionBackground#1E4D7A
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#1E4D7A33
  • list.focusBackground#1E4D7A
  • list.focusForeground#FFFFFF
  • list.highlightForeground#57a5f7
  • list.hoverBackground#1E4D7A33
  • list.inactiveSelectionBackground#2A3A4A
  • list.inactiveSelectionForeground#BBBBBB
  • menu.background#2A2A2A
  • menu.border#153655
  • menu.foreground#FFFFFF
  • menu.selectionBackground#1E4D7A
  • menu.selectionForeground#FFFFFF
  • panel.background#2A2A2A
  • panel.border#153655
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#AAAAAA
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#1E4D7ACC
  • scrollbarSlider.background#40404080
  • scrollbarSlider.hoverBackground#1E4D7A66
  • sideBar.background#2A2A2A
  • sideBar.border#153655
  • sideBar.foreground#FFFFFF
  • sideBarSectionHeader.background#1E4D7A
  • sideBarSectionHeader.foreground#FFFFFF
  • statusBar.background#1E4D7A
  • statusBar.border#153655
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#333333
  • tab.activeBorder#FFFFFF
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#FFA500
  • tab.border#153655
  • tab.hoverBackground#3A6EA5
  • tab.hoverForeground#FFFFFF
  • tab.inactiveBackground#2A2A2A
  • tab.inactiveForeground#BBBBBB
  • tab.inactiveModifiedBorder#FFA500
  • terminal.ansiBlack#1E1E1E
  • terminal.ansiBlue#3A6EA5
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#66B3FF
  • terminal.ansiBrightCyan#60C0D0
  • terminal.ansiBrightGreen#37F244
  • terminal.ansiBrightMagenta#C070C0
  • terminal.ansiBrightRed#FF6B6B
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFB347
  • terminal.ansiCyan#3A8EA5
  • terminal.ansiGreen#2CC436
  • terminal.ansiMagenta#7A1E74
  • terminal.ansiRed#ED2C28
  • terminal.ansiWhite#BBBBBB
  • terminal.ansiYellow#FF8C00
  • terminal.background#1E1E1E
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#1E4D7A
  • titleBar.activeForeground#FFFFFF
  • titleBar.border#153655
  • titleBar.inactiveBackground#2A2A2A
  • titleBar.inactiveForeground#BBBBBB
  • toolbar.hoverBackground#1E4D7A33
  • toolbar.hoverOutline#3A6EA5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#37F244
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#66B3FF
variable, support.variable, entity.name.variable#FFFFFF
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#66B3FFitalic
variable.language#3A6EA5bold
meta.object-literal.key#37F244
invalid.illegal#FF6B6Bbold
keyword.operator#3A6EA5
entity.name.tag, entity.name.tag.html, entity.name.tag.xml#37F244
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#66B3FF
string.regexp, constant.regexp#FF6B6B
meta.decorator, entity.name.function.decorator, punctuation.decorator#FF8C00
entity.name.namespace, entity.name.type.namespace, entity.name.module#66B3FF

Shiki preview

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

Loading...