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#E62429
  • activityBar.background#FFFFFF
  • activityBar.foreground#E62429
  • activityBarBadge.background#E62429
  • activityBarBadge.foreground#FFFFFF
  • badge.background#E62429
  • badge.foreground#FFFFFF
  • button.background#E62429
  • button.foreground#FFFFFF
  • button.hoverBackground#D32F2F
  • dropdown.background#FFFFFF
  • dropdown.border#E0E0E0
  • dropdown.foreground#212121
  • editor.background#FAFAFA
  • editor.findMatchBackground#FF8A80
  • editor.findMatchHighlightBackground#FFAB91
  • editor.foreground#212121
  • editor.lineHighlightBackground#FFF9C4
  • editor.lineHighlightBorder#FFEB3B
  • editor.selectionBackground#FFCDD2
  • editor.selectionHighlightBackground#FFE0B2
  • editorBracketMatch.background#FFF9C4
  • editorBracketMatch.border#FFEB3B
  • editorCursor.foreground#E62429
  • editorGroupHeader.tabsBackground#F5F5F5
  • editorIndentGuide.activeBackground#9E9E9E
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#E62429
  • editorLineNumber.foreground#757575
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#E62429
  • gitDecoration.conflictingResourceForeground#9C27B0
  • gitDecoration.deletedResourceForeground#F44336
  • gitDecoration.modifiedResourceForeground#FF9800
  • gitDecoration.untrackedResourceForeground#4CAF50
  • input.background#FFFFFF
  • input.border#E0E0E0
  • input.foreground#212121
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#E62429
  • list.activeSelectionBackground#FFCDD2
  • list.activeSelectionForeground#212121
  • list.focusBackground#FFF9C4
  • list.highlightForeground#E62429
  • list.hoverBackground#FFE0B2
  • minimap.background#FFFFFF00
  • minimapSlider.activeBackground#757575
  • minimapSlider.background#BDBDBD66
  • minimapSlider.hoverBackground#9E9E9E99
  • panel.background#F5F5F5
  • panel.border#E0E0E0
  • panelTitle.activeBorder#E62429
  • panelTitle.activeForeground#212121
  • panelTitle.inactiveForeground#9E9E9E
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#757575
  • scrollbarSlider.background#BDBDBD66
  • scrollbarSlider.hoverBackground#9E9E9E99
  • sideBar.background#FFFFFF
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#F5F5F5
  • sideBarSectionHeader.foreground#212121
  • sideBarTitle.foreground#E62429
  • statusBar.background#E62429
  • statusBar.debuggingBackground#FF9800
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#FFE082
  • statusBarItem.hoverBackground#D32F2F
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#E62429
  • tab.activeForeground#E62429
  • tab.border#E0E0E0
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#9E9E9E
  • terminal.ansiBlue#2196F3
  • terminal.ansiBrightBlue#64B5F6
  • terminal.ansiBrightCyan#4DD0E1
  • terminal.ansiBrightGreen#81C784
  • terminal.ansiBrightMagenta#AB47BC
  • terminal.ansiBrightRed#EF5350
  • terminal.ansiBrightYellow#FFF176
  • terminal.ansiCyan#00BCD4
  • terminal.ansiGreen#4CAF50
  • terminal.ansiMagenta#9C27B0
  • terminal.ansiRed#F44336
  • terminal.ansiYellow#FFEB3B
  • terminal.background#FAFAFA
  • terminal.foreground#212121
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#F0F0F0
  • titleBar.inactiveForeground#9E9E9E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#607D8Bitalic
string, string.quoted, string.template#00897B
keyword, storage.type, storage.modifier#D32F2Fbold
keyword.operator, punctuation.accessor#5D4037
variable, variable.other#212121
variable.parameter#5D4037italic
entity.name.function, support.function#1565C0
meta.function-call#0277BD
entity.name.class, entity.name.type.class, support.class#6A1B9Abold
entity.name.type, support.type#283593
entity.name.type.interface#00796Bitalic
constant.numeric#F57C00
constant, constant.language, constant.character#E65100
constant.language.boolean#C62828bold
variable.other.property, support.variable.property#795548
meta.object-literal.key#5E35B1
entity.name.tag, punctuation.definition.tag#D84315
entity.other.attribute-name#7B1FA2italic
punctuation, meta.brace#9E9E9E
string.regexp#E91E63
constant.character.escape#FF5722
meta.decorator, punctuation.decorator#00695C
invalid, invalid.illegal#B00020strikethrough
markup.heading, entity.name.section#E62429bold
markup.bold#E62429bold
markup.italic#9C27B0italic
markup.underline.link#1565C0
markup.inline.raw, markup.fenced_code#6D4C41
support.type.property-name.json#3949AB
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#6A1B9A
support.type.property-name.css#2E7D32
support.constant.property-value.css#EF6C00