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#4CAF50
  • activityBar.background#E8F5E9
  • activityBar.foreground#212121
  • activityBarBadge.background#D32F2F
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D32F2F
  • badge.foreground#FFFFFF
  • button.background#4CAF50
  • button.foreground#FFFFFF
  • button.hoverBackground#81C784
  • dropdown.background#FFFFFF
  • dropdown.border#BDBDBD
  • dropdown.foreground#212121
  • editor.background#FAFAFA
  • editor.findMatchBackground#FFEB3B
  • editor.findMatchHighlightBackground#FFF176
  • editor.foreground#212121
  • editor.lineHighlightBackground#FFE082
  • editor.lineHighlightBorder#FFEB3B
  • editor.selectionBackground#90CAF9
  • editor.selectionHighlightBackground#C8E6C9
  • editorBracketMatch.background#C5E1A5
  • editorBracketMatch.border#4CAF50
  • editorCursor.foreground#212121
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorIndentGuide.activeBackground#4CAF50
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#212121
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#4CAF50
  • gitDecoration.conflictingResourceForeground#E91E63
  • gitDecoration.deletedResourceForeground#D32F2F
  • gitDecoration.modifiedResourceForeground#1976D2
  • gitDecoration.untrackedResourceForeground#4CAF50
  • input.background#FFFFFF
  • input.border#BDBDBD
  • input.foreground#212121
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#4CAF50
  • list.activeSelectionBackground#90CAF9
  • list.activeSelectionForeground#212121
  • list.focusBackground#BBDEFB
  • list.highlightForeground#D32F2F
  • list.hoverBackground#E3F2FD
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#616161
  • minimapSlider.background#9E9E9E80
  • minimapSlider.hoverBackground#757575
  • panel.background#F5F5F5
  • panel.border#E0E0E0
  • panelTitle.activeBorder#4CAF50
  • panelTitle.activeForeground#212121
  • panelTitle.inactiveForeground#757575
  • scrollbar.shadow#BDBDBD
  • scrollbarSlider.activeBackground#616161
  • scrollbarSlider.background#9E9E9E80
  • scrollbarSlider.hoverBackground#757575
  • sideBar.background#F5F5F5
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#E0E0E0
  • sideBarSectionHeader.foreground#212121
  • sideBarTitle.foreground#212121
  • statusBar.background#4CAF50
  • statusBar.debuggingBackground#D32F2F
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#9E9E9E
  • statusBarItem.hoverBackground#81C784
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#4CAF50
  • tab.activeForeground#212121
  • tab.border#E0E0E0
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#757575
  • terminal.ansiBlue#2196F3
  • terminal.ansiBrightBlue#1976D2
  • terminal.ansiBrightCyan#0097A7
  • terminal.ansiBrightGreen#388E3C
  • terminal.ansiBrightMagenta#C2185B
  • terminal.ansiBrightRed#D32F2F
  • terminal.ansiBrightYellow#FDD835
  • terminal.ansiCyan#00BCD4
  • terminal.ansiGreen#4CAF50
  • terminal.ansiMagenta#E91E63
  • terminal.ansiRed#F44336
  • terminal.ansiYellow#FFEB3B
  • terminal.background#FAFAFA
  • terminal.foreground#212121
  • titleBar.activeBackground#90CAF9
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#B3E5FC
  • titleBar.inactiveForeground#616161

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#D32F2F
keyword, storage.type, storage.modifier#1976D2bold
keyword.operator, punctuation.accessor#616161
variable, variable.other#212121
variable.parameter#4CAF50italic
entity.name.function, support.function#388E3C
meta.function-call#00796B
entity.name.class, entity.name.type.class, support.class#6A1B9Abold
entity.name.type, support.type#7B1FA2
entity.name.type.interface#00796Bitalic
constant.numeric#F57C00
constant, constant.language, constant.character#E64A19
constant.language.boolean#C2185Bbold
variable.other.property, support.variable.property#00838F
meta.object-literal.key#5D4037
entity.name.tag, punctuation.definition.tag#D50000
entity.other.attribute-name#FF6F00italic
punctuation, meta.brace#616161
string.regexp#C51162
constant.character.escape#AA00FF
meta.decorator, punctuation.decorator#00BFA5
invalid, invalid.illegal#B00020strikethrough
markup.heading, entity.name.section#0D47A1bold
markup.bold#0D47A1bold
markup.italic#0D47A1italic
markup.underline.link#1565C0
markup.inline.raw, markup.fenced_code#00695C
support.type.property-name.json#00695C
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#2E7D32
support.type.property-name.css#00695C
support.constant.property-value.css#FF6F00