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#E91E63
  • activityBar.background#F0F0F0
  • activityBar.foreground#E91E63
  • activityBarBadge.background#E91E63
  • activityBarBadge.foreground#FFFFFF
  • badge.background#E91E63
  • badge.foreground#FFFFFF
  • button.background#E91E63
  • button.foreground#FFFFFF
  • button.hoverBackground#E91E63CC
  • dropdown.background#F5F5F5
  • dropdown.border#E0E0E0
  • dropdown.foreground#2E2E2E
  • editor.background#FAFAFA
  • editor.findMatchBackground#E91E4660
  • editor.findMatchHighlightBackground#FFEBEE20
  • editor.foreground#2E2E2E
  • editor.lineHighlightBackground#E91E6310
  • editor.lineHighlightBorder#E91E6320
  • editor.selectionBackground#E91E6340
  • editor.selectionHighlightBackground#FFEBEE30
  • editorBracketMatch.background#FFEBEE30
  • editorBracketMatch.border#E91E63
  • editorCursor.foreground#E91E63
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorIndentGuide.activeBackground#BDBDBD
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#E91E63
  • editorLineNumber.foreground#A0A0A0
  • editorWhitespace.foreground#D0D0D0
  • focusBorder#E91E63
  • gitDecoration.conflictingResourceForeground#FF9800
  • gitDecoration.deletedResourceForeground#F44336
  • gitDecoration.modifiedResourceForeground#E91E63
  • gitDecoration.untrackedResourceForeground#4CAF50
  • input.background#F5F5F5
  • input.border#E0E0E0
  • input.foreground#2E2E2E
  • input.placeholderForeground#A0A0A0
  • inputOption.activeBorder#E91E63
  • list.activeSelectionBackground#E91E6340
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#E91E6320
  • list.highlightForeground#E91E63
  • list.hoverBackground#FFEBEE30
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#E91E6360
  • minimapSlider.background#E91E6320
  • minimapSlider.hoverBackground#E91E6340
  • panel.background#FAFAFA
  • panel.border#E0E0E0
  • panelTitle.activeBorder#E91E63
  • panelTitle.activeForeground#E91E63
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#757575
  • scrollbarSlider.background#BDBDBD
  • scrollbarSlider.hoverBackground#9E9E9E
  • sideBar.background#FFFFFF
  • sideBar.foreground#2E2E2E
  • sideBarSectionHeader.background#F5F5F5
  • sideBarSectionHeader.foreground#E91E63
  • sideBarTitle.foreground#E91E63
  • statusBar.background#E91E63
  • statusBar.debuggingBackground#FFCDD2
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#FFCDD2
  • statusBarItem.hoverBackground#E91E6380
  • tab.activeBackground#FAFAFA
  • tab.activeBorder#E91E63
  • tab.activeForeground#2E2E2E
  • tab.border#E0E0E0
  • tab.inactiveBackground#F0F0F0
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#2196F3
  • terminal.ansiBrightBlue#64B5F6
  • terminal.ansiBrightCyan#4DD0E1
  • terminal.ansiBrightGreen#81C784
  • terminal.ansiBrightMagenta#EC407A
  • terminal.ansiBrightRed#EF5350
  • terminal.ansiBrightYellow#FFB74D
  • terminal.ansiCyan#00BCD4
  • terminal.ansiGreen#4CAF50
  • terminal.ansiMagenta#E91E63
  • terminal.ansiRed#F44336
  • terminal.ansiYellow#FF9800
  • terminal.background#FAFAFA
  • terminal.foreground#2E2E2E
  • titleBar.activeBackground#FAFAFA
  • titleBar.activeForeground#2E2E2E
  • titleBar.inactiveBackground#F0F0F0
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#009688
keyword, storage.type, storage.modifier#E91E63bold
keyword.operator, punctuation.accessor#E91E63
variable, variable.other#2E2E2E
variable.parameter#F48FB1italic
entity.name.function, support.function#E91E63
meta.function-call#E91E63
entity.name.class, entity.name.type.class, support.class#E91E63bold
entity.name.type, support.type#E91E63
entity.name.type.interface#E91E63italic
constant.numeric#FF9800
constant, constant.language, constant.character#E91E63
constant.language.boolean#E91E63bold
variable.other.property, support.variable.property#2E2E2E
meta.object-literal.key#E91E63
entity.name.tag, punctuation.definition.tag#E91E63
entity.other.attribute-name#009688italic
punctuation, meta.brace#2E2E2E
string.regexp#009688
constant.character.escape#FF9800
meta.decorator, punctuation.decorator#F48FB1
invalid, invalid.illegal#F44336strikethrough
markup.heading, entity.name.section#E91E63bold
markup.bold#E91E63bold
markup.italic#F48FB1italic
markup.underline.link#2196F3
markup.inline.raw, markup.fenced_code#009688
support.type.property-name.json#E91E63
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#2196F3
support.type.property-name.css#E91E63
support.constant.property-value.css#009688