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