Skip to main content
Coding Theme

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.activeBorder#E53935
  • activityBar.background#141526
  • activityBar.foreground#E53935
  • activityBarBadge.background#E53935
  • activityBarBadge.foreground#1A1B2A
  • badge.background#E53935
  • badge.foreground#1A1B2A
  • button.background#2A2B44
  • button.foreground#FFFFFF
  • button.hoverBackground#3A3B55
  • dropdown.background#212236
  • dropdown.border#2A2B44
  • dropdown.foreground#E0E0FF
  • editor.background#1A1B2A
  • editor.findMatchBackground#FFB74D44
  • editor.findMatchHighlightBackground#FFB74D22
  • editor.foreground#E0E0FF
  • editor.lineHighlightBackground#2A2B44AA
  • editor.lineHighlightBorder#2A2B44
  • editor.selectionBackground#E5393555
  • editor.selectionHighlightBackground#E5393544
  • editorBracketMatch.background#FFB74D33
  • editorBracketMatch.border#FFB74D
  • editorCursor.foreground#E53935
  • editorGroupHeader.tabsBackground#1A1B2A
  • editorIndentGuide.activeBackground#44446688
  • editorIndentGuide.background#44446644
  • editorLineNumber.activeForeground#E53935
  • editorLineNumber.foreground#555577
  • editorWhitespace.foreground#444466
  • focusBorder#E53935
  • gitDecoration.conflictingResourceForeground#EF5350
  • gitDecoration.deletedResourceForeground#E53935
  • gitDecoration.modifiedResourceForeground#FFB74D
  • gitDecoration.untrackedResourceForeground#81C784
  • input.background#212236
  • input.border#2A2B44
  • input.foreground#E0E0FF
  • input.placeholderForeground#555577
  • inputOption.activeBorder#E53935
  • list.activeSelectionBackground#2A2B44
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#2A2B44
  • list.highlightForeground#E53935
  • list.hoverBackground#2A2B4455
  • minimap.background#1A1B2A
  • minimapSlider.activeBackground#E5396677
  • minimapSlider.background#E5392255
  • minimapSlider.hoverBackground#E5394477
  • panel.background#1A1B2A
  • panel.border#212236
  • panelTitle.activeBorder#E53935
  • panelTitle.activeForeground#E53935
  • panelTitle.inactiveForeground#8888AA
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#E5396888
  • scrollbarSlider.background#55557744
  • scrollbarSlider.hoverBackground#55557788
  • sideBar.background#18192F
  • sideBar.foreground#C0C0E0
  • sideBarSectionHeader.background#1E1F38
  • sideBarSectionHeader.foreground#E53935
  • sideBarTitle.foreground#E53935
  • statusBar.background#212236
  • statusBar.debuggingBackground#B71C1C
  • statusBar.foreground#E0E0FF
  • statusBar.noFolderBackground#141526
  • statusBarItem.hoverBackground#2A2B44
  • tab.activeBackground#212236
  • tab.activeBorder#E53935
  • tab.activeForeground#FFFFFF
  • tab.border#1A1B2A
  • tab.inactiveBackground#18192F
  • tab.inactiveForeground#8888AA
  • terminal.ansiBlue#7986CB
  • terminal.ansiBrightBlue#9FA8DA
  • terminal.ansiBrightCyan#80DEEA
  • terminal.ansiBrightGreen#A5D6A7
  • terminal.ansiBrightMagenta#CE93D8
  • terminal.ansiBrightRed#EF5350
  • terminal.ansiBrightYellow#FFD54F
  • terminal.ansiCyan#4DD0E1
  • terminal.ansiGreen#81C784
  • terminal.ansiMagenta#BA68C8
  • terminal.ansiRed#E53935
  • terminal.ansiYellow#FFB74D
  • terminal.background#1A1B2A
  • terminal.foreground#E0E0FF
  • titleBar.activeBackground#141526
  • titleBar.activeForeground#E0E0FF
  • titleBar.inactiveBackground#1A1B2A
  • titleBar.inactiveForeground#8888AA

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555577italic
string, string.quoted, string.template#FFB74D—
keyword, storage.type, storage.modifier#E53935bold
keyword.operator, punctuation.accessor#E0E0FF—
variable, variable.other#4DD0E1—
variable.parameter#FFB74Ditalic
entity.name.function, support.function#81C784—
meta.function-call#E0E0FF—
entity.name.class, entity.name.type.class, support.class#BA68C8bold
entity.name.type, support.type#4DD0E1—
entity.name.type.interface#4DD0E1italic
constant.numeric#FFB74D—
constant, constant.language, constant.character#81C784—
constant.language.boolean#E53935bold
variable.other.property, support.variable.property#E0E0FF—
meta.object-literal.key#BA68C8—
entity.name.tag, punctuation.definition.tag#E53935—
entity.other.attribute-name#4DD0E1italic
punctuation, meta.brace#8888AA—
string.regexp#FFB74D—
constant.character.escape#4DD0E1—
meta.decorator, punctuation.decorator#81C784—
invalid, invalid.illegal#E53935strikethrough
markup.heading, entity.name.section#E53935bold
markup.bold#81C784bold
markup.italic#4DD0E1italic
markup.underline.link#FFB74D—
markup.inline.raw, markup.fenced_code#4DD0E1—
support.type.property-name.json#BA68C8—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#BA68C8—
support.type.property-name.css#E0E0FF—
support.constant.property-value.css#FFB74D—