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#E0E0E0
  • activityBar.foreground#D32F2F
  • activityBarBadge.background#D32F2F
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D32F2F
  • badge.foreground#FFFFFF
  • button.background#D32F2F
  • button.foreground#FFFFFF
  • button.hoverBackground#C62828
  • dropdown.background#FFFFFF
  • dropdown.border#BDBDBD
  • dropdown.foreground#212121
  • editor.background#FAFAFA
  • editor.findMatchBackground#F48FB1
  • editor.findMatchHighlightBackground#FFCDD2
  • editor.foreground#212121
  • editor.lineHighlightBackground#FFEBEE
  • editor.lineHighlightBorder#D32F2F
  • editor.selectionBackground#FFCDD2
  • editor.selectionHighlightBackground#EF9A9A
  • editorBracketMatch.background#FFF9C4
  • editorBracketMatch.border#FFD54F
  • editorCursor.foreground#D32F2F
  • editorGroupHeader.tabsBackground#F5F5F5
  • editorIndentGuide.activeBackground#B0BEC5
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#212121
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#D32F2F
  • gitDecoration.conflictingResourceForeground#D32F2F
  • gitDecoration.deletedResourceForeground#F44336
  • gitDecoration.modifiedResourceForeground#FF9800
  • gitDecoration.untrackedResourceForeground#42A5F5
  • input.background#FFFFFF
  • input.border#BDBDBD
  • input.foreground#212121
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#D32F2F
  • list.activeSelectionBackground#FFCDD2
  • list.activeSelectionForeground#212121
  • list.focusBackground#FFEBEE
  • list.highlightForeground#D32F2F
  • list.hoverBackground#FFE0E0
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#90A4AE
  • minimapSlider.background#CCCCCC
  • minimapSlider.hoverBackground#B0BEC5
  • panel.background#FAFAFA
  • panel.border#E0E0E0
  • panelTitle.activeBorder#D32F2F
  • panelTitle.activeForeground#212121
  • panelTitle.inactiveForeground#757575
  • scrollbar.shadow#BDBDBD
  • scrollbarSlider.activeBackground#90A4AE
  • scrollbarSlider.background#E0E0E0
  • scrollbarSlider.hoverBackground#B0BEC5
  • sideBar.background#F5F5F5
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#F5F5F5
  • sideBarSectionHeader.foreground#212121
  • sideBarTitle.foreground#212121
  • statusBar.background#FFFFFF
  • statusBar.debuggingBackground#C62828
  • statusBar.foreground#212121
  • statusBar.noFolderBackground#E0E0E0
  • statusBarItem.hoverBackground#FFCDD2
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#D32F2F
  • tab.activeForeground#212121
  • tab.border#E0E0E0
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#757575
  • terminal.ansiBlue#42A5F5
  • terminal.ansiBrightBlue#64B5F6
  • terminal.ansiBrightCyan#4DD0E1
  • terminal.ansiBrightGreen#81C784
  • terminal.ansiBrightMagenta#BA68C8
  • terminal.ansiBrightRed#E57373
  • terminal.ansiBrightYellow#FFF176
  • terminal.ansiCyan#26C6DA
  • terminal.ansiGreen#66BB6A
  • terminal.ansiMagenta#AB47BC
  • terminal.ansiRed#EF5350
  • terminal.ansiYellow#FFEE58
  • terminal.background#FFFFFF
  • terminal.foreground#212121
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#F5F5F5
  • titleBar.inactiveForeground#757575

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#757575italic
string, string.quoted, string.template#66BB6A
keyword, storage.type, storage.modifier#D32F2Fbold
keyword.operator, punctuation.accessor#42A5F5
variable, variable.other#212121
variable.parameter#D32F2Fitalic
entity.name.function, support.function#1976D2
meta.function-call#1976D2
entity.name.class, entity.name.type.class, support.class#1976D2bold
entity.name.type, support.type#7E57C2
entity.name.type.interface#7E57C2italic
constant.numeric#F57C00
constant, constant.language, constant.character#FF7043
constant.language.boolean#D32F2Fbold
variable.other.property, support.variable.property#FF9800
meta.object-literal.key#7E57C2
entity.name.tag, punctuation.definition.tag#D32F2F
entity.other.attribute-name#42A5F5italic
punctuation, meta.brace#212121
string.regexp#E91E63
constant.character.escape#E91E63
meta.decorator, punctuation.decorator#009688
invalid, invalid.illegal#F44336strikethrough
markup.heading, entity.name.section#D32F2Fbold
markup.bold#D32F2Fbold
markup.italic#212121italic
markup.underline.link#42A5F5
markup.inline.raw, markup.fenced_code#66BB6A
support.type.property-name.json#7E57C2
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#1976D2
support.type.property-name.css#42A5F5
support.constant.property-value.css#FF7043