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#E0E0E0
  • activityBar.foreground#0066FF
  • activityBarBadge.background#0066FF
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF5555
  • badge.foreground#FFFFFF
  • button.background#0066FF
  • button.foreground#FFFFFF
  • button.hoverBackground#0066FF80
  • dropdown.background#F0F0F0
  • dropdown.border#0066FF
  • dropdown.foreground#212121
  • editor.background#FFFFFF
  • editor.findMatchBackground#2ECC7150
  • editor.findMatchHighlightBackground#2ECC7150
  • editor.foreground#212121
  • editor.lineHighlightBackground#0066FF10
  • editor.lineHighlightBorder#0066FF30
  • editor.selectionBackground#FF555540
  • editor.selectionHighlightBackground#FF555530
  • editorBracketMatch.background#2ECC7130
  • editorBracketMatch.border#2ECC7180
  • editorCursor.foreground#FF5555
  • editorGroupHeader.tabsBackground#F5F5F5
  • editorIndentGuide.activeBackground#AAAAAA
  • editorIndentGuide.background#CCCCCC
  • editorLineNumber.activeForeground#0066FF
  • editorLineNumber.foreground#999999
  • editorWhitespace.foreground#BBBBBB
  • focusBorder#FF5555
  • gitDecoration.conflictingResourceForeground#FFB86C
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.modifiedResourceForeground#0066FF
  • gitDecoration.untrackedResourceForeground#2ECC71
  • input.background#F0F0F0
  • input.border#0066FF
  • input.foreground#212121
  • input.placeholderForeground#7A7A7A
  • inputOption.activeBorder#FF5555
  • list.activeSelectionBackground#0066FF30
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#0066FF25
  • list.highlightForeground#FF5555
  • list.hoverBackground#0066FF20
  • minimap.background#F5F5F5
  • minimapSlider.activeBackground#0066FF66
  • minimapSlider.background#CCCCCC22
  • minimapSlider.hoverBackground#CCCCCC44
  • panel.background#FFFFFF
  • panel.border#D8D8D8
  • panelTitle.activeBorder#0066FF
  • panelTitle.activeForeground#212121
  • panelTitle.inactiveForeground#7A7A7A
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#0066FF88
  • scrollbarSlider.background#CCCCCC44
  • scrollbarSlider.hoverBackground#CCCCCC88
  • sideBar.background#F5F5F5
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#FFFFFF
  • sideBarSectionHeader.foreground#0066FF
  • sideBarTitle.foreground#0066FF
  • statusBar.background#D8D8D8
  • statusBar.debuggingBackground#FF5555
  • statusBar.foreground#212121
  • statusBar.noFolderBackground#E0E0E0
  • statusBarItem.hoverBackground#0066FF33
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#FF5555
  • tab.activeForeground#0066FF
  • tab.border#E0E0E0
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#7A7A7A
  • terminal.ansiBlue#0066FF
  • terminal.ansiBrightBlue#5FA9FF
  • terminal.ansiBrightCyan#A0F8FF
  • terminal.ansiBrightGreen#73FF9F
  • terminal.ansiBrightMagenta#FF92D4
  • terminal.ansiBrightRed#FF7777
  • terminal.ansiBrightYellow#FFD97A
  • terminal.ansiCyan#33D6FF
  • terminal.ansiGreen#2ECC71
  • terminal.ansiMagenta#FF6EC7
  • terminal.ansiRed#FF5555
  • terminal.ansiYellow#FFB86C
  • terminal.background#FFFFFF
  • terminal.foreground#212121
  • titleBar.activeBackground#E0E0E0
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#F0F0F0
  • titleBar.inactiveForeground#7A7A7A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7A7Aitalic
string, string.quoted, string.template#2ECC71
keyword, storage.type, storage.modifier#0066FFbold
keyword.operator, punctuation.accessor#FF5555
variable, variable.other#212121
variable.parameter#0066FFitalic
entity.name.function, support.function#0066FF
meta.function-call#5FA9FF
entity.name.class, entity.name.type.class, support.class#FF6EC7bold
entity.name.type, support.type#FF6EC7
entity.name.type.interface#FF92D4italic
constant.numeric#FF5555
constant, constant.language, constant.character#FFB86C
constant.language.boolean#FF5555bold
variable.other.property, support.variable.property#5FA9FF
meta.object-literal.key#5FA9FF
entity.name.tag, punctuation.definition.tag#FF6EC7
entity.other.attribute-name#FF92D4italic
punctuation, meta.brace#0066FF
string.regexp#FF5555
constant.character.escape#FF92D4
meta.decorator, punctuation.decorator#FFB86C
invalid, invalid.illegal#FF5555strikethrough
markup.heading, entity.name.section#0066FFbold
markup.bold#FFB86Cbold
markup.italic#FF92D4italic
markup.underline.link#5FA9FF
markup.inline.raw, markup.fenced_code#2ECC71
support.type.property-name.json#5FA9FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF6EC7
support.type.property-name.css#5FA9FF
support.constant.property-value.css#2ECC71