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#3A6EA5
  • activityBar.background#EDEEF0
  • activityBar.foreground#212529
  • activityBarBadge.background#B22234
  • activityBarBadge.foreground#FFFFFF
  • badge.background#B22234
  • badge.foreground#FFFFFF
  • button.background#3A6EA5
  • button.foreground#FFFFFF
  • button.hoverBackground#2C5A8A
  • dropdown.background#FFFFFF
  • dropdown.border#CED4DA
  • dropdown.foreground#212529
  • editor.background#FAFAFA
  • editor.findMatchBackground#FFEB3B
  • editor.findMatchHighlightBackground#FFF9C4
  • editor.foreground#212529
  • editor.lineHighlightBackground#E8F0FD
  • editor.lineHighlightBorder#B0CFF7
  • editor.selectionBackground#B0CFF7
  • editor.selectionHighlightBackground#D0E4FF
  • editorBracketMatch.background#D0E4FF
  • editorBracketMatch.border#3A6EA5
  • editorCursor.foreground#B22234
  • editorGroupHeader.tabsBackground#F5F5F5
  • editorIndentGuide.activeBackground#3A6EA5
  • editorIndentGuide.background#CED4DA
  • editorLineNumber.activeForeground#212529
  • editorLineNumber.foreground#6C757D
  • editorWhitespace.foreground#CED4DA
  • focusBorder#B22234
  • gitDecoration.conflictingResourceForeground#D73A49
  • gitDecoration.deletedResourceForeground#B22234
  • gitDecoration.modifiedResourceForeground#17A2B8
  • gitDecoration.untrackedResourceForeground#28A745
  • input.background#FFFFFF
  • input.border#CED4DA
  • input.foreground#212529
  • input.placeholderForeground#6C757D
  • inputOption.activeBorder#3A6EA5
  • list.activeSelectionBackground#B0CFF7
  • list.activeSelectionForeground#212529
  • list.focusBackground#D0E4FF
  • list.highlightForeground#3A6EA5
  • list.hoverBackground#E8F0FD
  • minimap.background#FAFAFA
  • minimapSlider.activeBackgroundrgba(0,0,0,0.6)
  • minimapSlider.backgroundrgba(0,0,0,0.2)
  • minimapSlider.hoverBackgroundrgba(0,0,0,0.4)
  • panel.background#F5F5F5
  • panel.border#DADADA
  • panelTitle.activeBorder#3A6EA5
  • panelTitle.activeForeground#212529
  • panelTitle.inactiveForeground#6C757D
  • scrollbar.shadow#CCCCCC
  • scrollbarSlider.activeBackgroundrgba(0,0,0,0.6)
  • scrollbarSlider.backgroundrgba(0,0,0,0.2)
  • scrollbarSlider.hoverBackgroundrgba(0,0,0,0.4)
  • sideBar.background#F2F3F5
  • sideBar.foreground#212529
  • sideBarSectionHeader.background#E0E3E5
  • sideBarSectionHeader.foreground#212529
  • sideBarTitle.foreground#212529
  • statusBar.background#3A6EA5
  • statusBar.debuggingBackground#B22234
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#6C757D
  • statusBarItem.hoverBackground#2C5A8A
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#3A6EA5
  • tab.activeForeground#212529
  • tab.border#DADADA
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#6C757D
  • terminal.ansiBlue#3A6EA5
  • terminal.ansiBrightBlue#2C5A8A
  • terminal.ansiBrightCyan#138496
  • terminal.ansiBrightGreen#218838
  • terminal.ansiBrightMagenta#5A32A3
  • terminal.ansiBrightRed#C0392B
  • terminal.ansiBrightYellow#FFB300
  • terminal.ansiCyan#17A2B8
  • terminal.ansiGreen#28A745
  • terminal.ansiMagenta#6F42C1
  • terminal.ansiRed#B22234
  • terminal.ansiYellow#FFC107
  • terminal.background#FAFAFA
  • terminal.foreground#212529
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#212529
  • titleBar.inactiveBackground#F5F5F5
  • titleBar.inactiveForeground#6C757D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6C757Ditalic
string, string.quoted, string.template#28A745
keyword, storage.type, storage.modifier#B22234bold
keyword.operator, punctuation.accessor#3A6EA5
variable, variable.other#212529
variable.parameter#6C757Ditalic
entity.name.function, support.function#6F42C1
meta.function-call#6F42C1
entity.name.class, entity.name.type.class, support.class#0A1F44bold
entity.name.type, support.type#17A2B8
entity.name.type.interface#17A2B8italic
constant.numeric#FFC107
constant, constant.language, constant.character#6F42C1
constant.language.boolean#B22234bold
variable.other.property, support.variable.property#3A6EA5
meta.object-literal.key#0A1F44
entity.name.tag, punctuation.definition.tag#B22234
entity.other.attribute-name#28A745italic
punctuation, meta.brace#212529
string.regexp#17A2B8
constant.character.escape#D9534F
meta.decorator, punctuation.decorator#17A2B8
invalid, invalid.illegal#DC3545strikethrough
markup.heading, entity.name.section#0A1F44bold
markup.bold#B22234bold
markup.italic#6C757Ditalic
markup.underline.link#3A6EA5
markup.inline.raw, markup.fenced_code#28A745
support.type.property-name.json#6F42C1
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#0A1F44
support.type.property-name.css#17A2B8
support.constant.property-value.css#FFC107