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#E52521
  • activityBar.background#F5F5F5
  • activityBar.foreground#212121
  • activityBarBadge.background#E52521
  • activityBarBadge.foreground#FFFFFF
  • badge.background#E52521
  • badge.foreground#FFFFFF
  • button.background#E52521
  • button.foreground#FFFFFF
  • button.hoverBackground#C41C1C
  • dropdown.background#FFFFFF
  • dropdown.border#CCCCCC
  • dropdown.foreground#212121
  • editor.background#FFFFFF
  • editor.findMatchBackground#FFE082
  • editor.findMatchHighlightBackground#FFF59D
  • editor.foreground#212121
  • editor.lineHighlightBackground#FFF8E1
  • editor.lineHighlightBorder#E0E0E0
  • editor.selectionBackground#FFCDD2
  • editor.selectionHighlightBackground#FFE0B2
  • editorBracketMatch.background#FFECB3
  • editorBracketMatch.border#FFB300
  • editorCursor.foreground#E52521
  • editorGroupHeader.tabsBackground#F5F5F5
  • editorIndentGuide.activeBackground#BDBDBD
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#212121
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#E0E0E0
  • focusBorder#E52521
  • gitDecoration.conflictingResourceForeground#C2185B
  • gitDecoration.deletedResourceForeground#D32F2F
  • gitDecoration.modifiedResourceForeground#FFB300
  • gitDecoration.untrackedResourceForeground#388E3C
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#212121
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#E52521
  • list.activeSelectionBackground#FFEBEE
  • list.activeSelectionForeground#212121
  • list.focusBackground#FFE0B2
  • list.highlightForeground#E52521
  • list.hoverBackground#FFF3E0
  • minimap.background#F5F5F5
  • minimapSlider.activeBackground#616161CC
  • minimapSlider.background#9E9E9E66
  • minimapSlider.hoverBackground#75757599
  • panel.background#FAFAFA
  • panel.border#E0E0E0
  • panelTitle.activeBorder#E52521
  • panelTitle.activeForeground#212121
  • panelTitle.inactiveForeground#6A6A6A
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#757575CC
  • scrollbarSlider.background#BDBDBD66
  • scrollbarSlider.hoverBackground#9E9E9E99
  • sideBar.background#FAFAFA
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#F5F5F5
  • sideBarSectionHeader.foreground#212121
  • sideBarTitle.foreground#212121
  • statusBar.background#E52521
  • statusBar.debuggingBackground#FF8C00
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#CCCCCC
  • statusBarItem.hoverBackground#C41C1C
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#E52521
  • tab.activeForeground#212121
  • tab.border#CCCCCC
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#6A6A6A
  • terminal.ansiBlue#1565C0
  • terminal.ansiBrightBlue#1976D2
  • terminal.ansiBrightCyan#0097A7
  • terminal.ansiBrightGreen#388E3C
  • terminal.ansiBrightMagenta#8E24AA
  • terminal.ansiBrightRed#D32F2F
  • terminal.ansiBrightYellow#FBC02D
  • terminal.ansiCyan#00838F
  • terminal.ansiGreen#2E7D32
  • terminal.ansiMagenta#6A1B9A
  • terminal.ansiRed#C62828
  • terminal.ansiYellow#F9A825
  • terminal.background#FFFFFF
  • terminal.foreground#212121
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#F5F5F5
  • titleBar.inactiveForeground#6A6A6A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A737Ditalic
string, string.quoted, string.template#005A32
keyword, storage.type, storage.modifier#E52521bold
keyword.operator, punctuation.accessor#D84315
variable, variable.other#0D47A1
variable.parameter#6A1B9Aitalic
entity.name.function, support.function#00695C
meta.function-call#00796B
entity.name.class, entity.name.type.class, support.class#1565C0bold
entity.name.type, support.type#4527A0
entity.name.type.interface#7B1FA2italic
constant.numeric#EF6C00
constant, constant.language, constant.character#C51162
constant.language.boolean#FF6D00bold
variable.other.property, support.variable.property#3949AB
meta.object-literal.key#1E88E5
entity.name.tag, punctuation.definition.tag#E53935
entity.other.attribute-name#6D4C41italic
punctuation, meta.brace#757575
string.regexp#C2185B
constant.character.escape#D81B60
meta.decorator, punctuation.decorator#5E35B1
invalid, invalid.illegal#D50000strikethrough
markup.heading, entity.name.section#E52521bold
markup.bold#D32F2Fbold
markup.italic#C2185Bitalic
markup.underline.link#1565C0
markup.inline.raw, markup.fenced_code#00695C
support.type.property-name.json#0D47A1
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#1E88E5
support.type.property-name.css#00695C
support.constant.property-value.css#EF6C00