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#D32F2F
  • activityBar.background#F5F5F5
  • activityBar.foreground#212121
  • activityBarBadge.background#D32F2F
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D32F2F
  • badge.foreground#FFFFFF
  • button.background#D32F2F
  • button.foreground#FFFFFF
  • button.hoverBackground#EF5350
  • dropdown.background#FFFFFF
  • dropdown.border#E0E0E0
  • dropdown.foreground#212121
  • editor.background#FAFAFA
  • editor.findMatchBackground#D32F2F44
  • editor.findMatchHighlightBackground#EF9A9A44
  • editor.foreground#212121
  • editor.lineHighlightBackground#FFF3F3
  • editor.lineHighlightBorder#D32F2F
  • editor.selectionBackground#FFEBEE
  • editor.selectionHighlightBackground#FFF5F5
  • editorBracketMatch.background#FFEBEE
  • editorBracketMatch.border#D32F2F
  • editorCursor.foreground#D32F2F
  • editorGroupHeader.tabsBackground#F5F5F5
  • editorIndentGuide.activeBackground#D32F2F
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#D32F2F
  • editorLineNumber.foreground#757575
  • editorWhitespace.foreground#9E9E9E
  • focusBorder#D32F2F
  • gitDecoration.conflictingResourceForeground#FBC02D
  • gitDecoration.deletedResourceForeground#D32F2F
  • gitDecoration.modifiedResourceForeground#FF9800
  • gitDecoration.untrackedResourceForeground#388E3C
  • input.background#FFFFFF
  • input.border#E0E0E0
  • input.foreground#212121
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#D32F2F
  • list.activeSelectionBackground#D32F2F33
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#E0E0E0
  • list.highlightForeground#D32F2F
  • list.hoverBackground#F5F5F5
  • minimap.background#F5F5F5
  • minimapSlider.activeBackground#9E9E9E66
  • minimapSlider.background#9E9E9E22
  • minimapSlider.hoverBackground#9E9E9E44
  • panel.background#FAFAFA
  • panel.border#E0E0E0
  • panelTitle.activeBorder#D32F2F
  • panelTitle.activeForeground#D32F2F
  • panelTitle.inactiveForeground#9E9E9E
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#9E9E9EBB
  • scrollbarSlider.background#9E9E9E44
  • scrollbarSlider.hoverBackground#9E9E9E88
  • sideBar.background#FFFFFF
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#F5F5F5
  • sideBarSectionHeader.foreground#212121
  • sideBarTitle.foreground#D32F2F
  • statusBar.background#F0F0F0
  • statusBar.debuggingBackground#FFE5E5
  • statusBar.foreground#212121
  • statusBar.noFolderBackground#F5F5F5
  • statusBarItem.hoverBackground#FFCDD2
  • tab.activeBackground#FAFAFA
  • tab.activeBorder#D32F2F
  • tab.activeForeground#212121
  • tab.border#E0E0E0
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#757575
  • terminal.ansiBlue#1976D2
  • terminal.ansiBrightBlue#63A4FF
  • terminal.ansiBrightCyan#4DD0E1
  • terminal.ansiBrightGreen#81C784
  • terminal.ansiBrightMagenta#BA68C8
  • terminal.ansiBrightRed#EF9A9A
  • terminal.ansiBrightYellow#FFF176
  • terminal.ansiCyan#0097A7
  • terminal.ansiGreen#388E3C
  • terminal.ansiMagenta#7B1FA2
  • terminal.ansiRed#D32F2F
  • terminal.ansiYellow#FBC02D
  • terminal.background#FAFAFA
  • terminal.foreground#212121
  • titleBar.activeBackground#FAFAFA
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#F5F5F5
  • titleBar.inactiveForeground#757575

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#FF9800
keyword, storage.type, storage.modifier#D32F2Fbold
keyword.operator, punctuation.accessor#EF9A9A
variable, variable.other#212121
variable.parameter#EF9A9Aitalic
entity.name.function, support.function#1976D2
meta.function-call#1976D2
entity.name.class, entity.name.type.class, support.class#7B1FA2bold
entity.name.type, support.type#7B1FA2
entity.name.type.interface#7B1FA2italic
constant.numeric#FF9800
constant, constant.language, constant.character#FF9800
constant.language.boolean#D32F2Fbold
variable.other.property, support.variable.property#388E3C
meta.object-literal.key#388E3C
entity.name.tag, punctuation.definition.tag#D32F2F
entity.other.attribute-name#EF9A9Aitalic
punctuation, meta.brace#212121
string.regexp#FF9800
constant.character.escape#EF9A9A
meta.decorator, punctuation.decorator#FBC02D
invalid, invalid.illegal#D32F2Fstrikethrough
markup.heading, entity.name.section#D32F2Fbold
markup.bold#D32F2Fbold
markup.italic#EF9A9Aitalic
markup.underline.link#1976D2
markup.inline.raw, markup.fenced_code#388E3C
support.type.property-name.json#1976D2
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FBC02D
support.type.property-name.css#388E3C
support.constant.property-value.css#1976D2