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#FF7F50
  • activityBar.background#E0F2FF
  • activityBar.foreground#0066CC
  • activityBarBadge.background#FF7F50
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF7F50
  • badge.foreground#FFFFFF
  • button.background#FF7F50
  • button.foreground#FFFFFF
  • button.hoverBackground#FF6640
  • dropdown.background#FFFFFF
  • dropdown.border#5DAEDB
  • dropdown.foreground#2E3A48
  • editor.background#F5FAFF
  • editor.findMatchBackground#FFB74D44
  • editor.findMatchHighlightBackground#FFB74D22
  • editor.foreground#2E3A48
  • editor.lineHighlightBackground#CDEFFF80
  • editor.lineHighlightBorder#5DAEDB
  • editor.selectionBackground#5DAEDB33
  • editor.selectionHighlightBackground#FF7F5033
  • editorBracketMatch.background#5DAEDB33
  • editorBracketMatch.border#5DAEDB
  • editorCursor.foreground#FF7F50
  • editorGroupHeader.tabsBackground#F5FAFF
  • editorIndentGuide.activeBackground#B0C4DE80
  • editorIndentGuide.background#B0C4DE40
  • editorLineNumber.activeForeground#0066CC
  • editorLineNumber.foreground#B0C4DE
  • editorWhitespace.foreground#B0C4DE
  • focusBorder#FF7F50
  • gitDecoration.conflictingResourceForeground#FFDC7A
  • gitDecoration.deletedResourceForeground#D9534F
  • gitDecoration.modifiedResourceForeground#5DAEDB
  • gitDecoration.untrackedResourceForeground#3CB371
  • input.background#FFFFFF
  • input.border#5DAEDB
  • input.foreground#2E3A48
  • input.placeholderForeground#A8B6C1
  • inputOption.activeBorder#FF7F50
  • list.activeSelectionBackground#CDEFFF
  • list.activeSelectionForeground#0066CC
  • list.focusBackground#CDEFFF
  • list.highlightForeground#FF7F50
  • list.hoverBackground#CDEFFF66
  • minimap.background#F5FAFF
  • minimapSlider.activeBackground#5DAEDB66
  • minimapSlider.background#5DAEDB22
  • minimapSlider.hoverBackground#5DAEDB44
  • panel.background#F5FAFF
  • panel.border#D0EFFE
  • panelTitle.activeBorder#FF7F50
  • panelTitle.activeForeground#0066CC
  • panelTitle.inactiveForeground#8FA2B3
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#5DAEDB80
  • scrollbarSlider.background#B0C4DE40
  • scrollbarSlider.hoverBackground#B0C4DE80
  • sideBar.background#E8F5FF
  • sideBar.foreground#2E3A48
  • sideBarSectionHeader.background#D0EFFE
  • sideBarSectionHeader.foreground#0066CC
  • sideBarTitle.foreground#0066CC
  • statusBar.background#D0EFFE
  • statusBar.debuggingBackground#FFB74D
  • statusBar.foreground#2E3A48
  • statusBar.noFolderBackground#E0F2FF
  • statusBarItem.hoverBackground#C0DEFF
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#FF7F50
  • tab.activeForeground#0066CC
  • tab.border#D0EFFE
  • tab.inactiveBackground#F5FAFF
  • tab.inactiveForeground#8FA2B3
  • terminal.ansiBlue#0066CC
  • terminal.ansiBrightBlue#3399FF
  • terminal.ansiBrightCyan#70C0E8
  • terminal.ansiBrightGreen#3CB371
  • terminal.ansiBrightMagenta#C58AFF
  • terminal.ansiBrightRed#FF6F61
  • terminal.ansiBrightYellow#FFDC7A
  • terminal.ansiCyan#5DAEDB
  • terminal.ansiGreen#2E8B57
  • terminal.ansiMagenta#A06ACD
  • terminal.ansiRed#D9534F
  • terminal.ansiYellow#F0AD4E
  • terminal.background#F5FAFF
  • terminal.foreground#2E3A48
  • titleBar.activeBackground#E0F2FF
  • titleBar.activeForeground#2E3A48
  • titleBar.inactiveBackground#F5FAFF
  • titleBar.inactiveForeground#8FA2B3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A8B6C1italic
string, string.quoted, string.template#2E8B57—
keyword, storage.type, storage.modifier#0066CCbold
keyword.operator, punctuation.accessor#5DAEDB—
variable, variable.other#2E3A48—
variable.parameter#5DAEDBitalic
entity.name.function, support.function#5DAEDB—
meta.function-call#0066CC—
entity.name.class, entity.name.type.class, support.class#FF7F50bold
entity.name.type, support.type#FF7F50—
entity.name.type.interface#FFDC7Aitalic
constant.numeric#FFB74D—
constant, constant.language, constant.character#FF7F50—
constant.language.boolean#D9534Fbold
variable.other.property, support.variable.property#5DAEDB—
meta.object-literal.key#5DAEDB—
entity.name.tag, punctuation.definition.tag#0066CC—
entity.other.attribute-name#A06ACDitalic
punctuation, meta.brace#2E3A48—
string.regexp#D9534F—
constant.character.escape#D9534F—
meta.decorator, punctuation.decorator#FFDC7A—
invalid, invalid.illegal#FF6F61strikethrough
markup.heading, entity.name.section#0066CCbold
markup.bold#FF7F50bold
markup.italic#A06ACDitalic
markup.underline.link#0066CC—
markup.inline.raw, markup.fenced_code#2E8B57—
support.type.property-name.json#0066CC—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFDC7A—
support.type.property-name.css#5DAEDB—
support.constant.property-value.css#2E8B57—