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—