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#0066FF
  • activityBar.background#E0E8F0
  • activityBar.foreground#0066FF
  • activityBarBadge.background#FFB400
  • activityBarBadge.foreground#2B3E50
  • badge.background#FFB400
  • badge.foreground#2B3E50
  • button.background#0066FF
  • button.foreground#FFFFFF
  • button.hoverBackground#3399FF
  • dropdown.background#FFFFFF
  • dropdown.border#C0CBD8
  • dropdown.foreground#2B3E50
  • editor.background#F5F9FC
  • editor.findMatchBackground#FFB40033
  • editor.findMatchHighlightBackground#FFB40022
  • editor.foreground#2B3E50
  • editor.lineHighlightBackground#DDE6F0
  • editor.lineHighlightBorder#B0C4DE
  • editor.selectionBackground#0066FF44
  • editor.selectionHighlightBackground#0066FF22
  • editorBracketMatch.background#FFB40022
  • editorBracketMatch.border#FFB400
  • editorCursor.foreground#0066FF
  • editorGroupHeader.tabsBackground#E0E8F0
  • editorIndentGuide.activeBackground#B0C4DE88
  • editorIndentGuide.background#B0C4DE44
  • editorLineNumber.activeForeground#0066FF
  • editorLineNumber.foreground#8899AA
  • editorWhitespace.foreground#B0C4DE66
  • focusBorder#0066FF
  • gitDecoration.conflictingResourceForeground#FFB400
  • gitDecoration.deletedResourceForeground#DC3545
  • gitDecoration.modifiedResourceForeground#0066FF
  • gitDecoration.untrackedResourceForeground#28A745
  • input.background#FFFFFF
  • input.border#C0CBD8
  • input.foreground#2B3E50
  • input.placeholderForeground#8899AA
  • inputOption.activeBorder#0066FF
  • list.activeSelectionBackground#0066FF44
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#0066FF33
  • list.highlightForeground#0066FF
  • list.hoverBackground#0066FF22
  • minimap.background#F5F9FC
  • minimapSlider.activeBackground#0066FF66
  • minimapSlider.background#0066FF22
  • minimapSlider.hoverBackground#0066FF44
  • panel.background#E0E8F0
  • panel.border#C0CBD8
  • panelTitle.activeBorder#0066FF
  • panelTitle.activeForeground#0066FF
  • panelTitle.inactiveForeground#3A506B
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#B0C4DE88
  • scrollbarSlider.background#B0C4DE44
  • scrollbarSlider.hoverBackground#B0C4DE66
  • sideBar.background#E0E8F0
  • sideBar.foreground#3A506B
  • sideBarSectionHeader.background#F5F9FC
  • sideBarSectionHeader.foreground#0066FF
  • sideBarTitle.foreground#0066FF
  • statusBar.background#D4DCE6
  • statusBar.debuggingBackground#FFB400
  • statusBar.foreground#2B3E50
  • statusBar.noFolderBackground#E0E8F0
  • statusBarItem.hoverBackground#0066FF33
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#0066FF
  • tab.activeForeground#2B3E50
  • tab.border#C0CBD8
  • tab.inactiveBackground#E0E8F0
  • tab.inactiveForeground#3A506B
  • terminal.ansiBlue#0066FF
  • terminal.ansiBrightBlue#3399FF
  • terminal.ansiBrightCyan#33E0C1
  • terminal.ansiBrightGreen#5CDB75
  • terminal.ansiBrightMagenta#E83E8C
  • terminal.ansiBrightRed#F86C6B
  • terminal.ansiBrightYellow#FFD966
  • terminal.ansiCyan#00C9A7
  • terminal.ansiGreen#28A745
  • terminal.ansiMagenta#D63384
  • terminal.ansiRed#DC3545
  • terminal.ansiYellow#FFB400
  • terminal.background#F5F9FC
  • terminal.foreground#2B3E50
  • titleBar.activeBackground#E0E8F0
  • titleBar.activeForeground#2B3E50
  • titleBar.inactiveBackground#F5F9FC
  • titleBar.inactiveForeground#3A506B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8899AAitalic
string, string.quoted, string.template#00C9A7
keyword, storage.type, storage.modifier#0066FFbold
keyword.operator, punctuation.accessor#3A506B
variable, variable.other#2B3E50
variable.parameter#FFB400italic
entity.name.function, support.function#0066FF
meta.function-call#3A506B
entity.name.class, entity.name.type.class, support.class#2B3E50bold
entity.name.type, support.type#2B3E50
entity.name.type.interface#3A506Bitalic
constant.numeric#FFB400
constant, constant.language, constant.character#FFB400
constant.language.boolean#FFB400bold
variable.other.property, support.variable.property#2B3E50
meta.object-literal.key#0066FF
entity.name.tag, punctuation.definition.tag#0066FF
entity.other.attribute-name#D63384italic
punctuation, meta.brace#3A506B
string.regexp#FFB400
constant.character.escape#D63384
meta.decorator, punctuation.decorator#FFB400
invalid, invalid.illegal#DC3545strikethrough
markup.heading, entity.name.section#0066FFbold
markup.bold#FFB400bold
markup.italic#D63384italic
markup.underline.link#0066FF
markup.inline.raw, markup.fenced_code#28A745
support.type.property-name.json#0066FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D63384
support.type.property-name.css#0066FF
support.constant.property-value.css#28A745