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#2563EB
  • activityBar.background#FFF8ED
  • activityBar.foreground#DC6B19
  • activityBarBadge.background#F59E0B
  • activityBarBadge.foreground#3A2817
  • badge.background#F59E0B
  • badge.foreground#3A2817
  • button.background#DC6B19
  • button.foreground#FFFFFF
  • button.hoverBackground#C2410C
  • editor.background#FFFBF5
  • editor.foreground#3A2817
  • editor.inactiveSelectionBackground#DBEAFE80
  • editor.lineHighlightBackground#FEFCE8
  • editor.selectionBackground#DBEAFE
  • editorCursor.foreground#2563EB
  • editorError.foreground#DC2626
  • editorIndentGuide.activeBackground1#2563EB
  • editorIndentGuide.background1#F3E8DD
  • editorInfo.foreground#0891B2
  • editorLineNumber.activeForeground#DC6B19
  • editorLineNumber.foreground#B8A89F
  • editorSuggestWidget.selectedBackground#DBEAFE
  • editorWarning.foreground#EA580C
  • editorWidget.background#FFFFFF
  • editorWidget.border#E7D3C0
  • focusBorder#2563EB
  • gitDecoration.addedResourceForeground#047857
  • gitDecoration.deletedResourceForeground#DC2626
  • gitDecoration.modifiedResourceForeground#0891B2
  • input.background#FFFFFF
  • input.border#E7D3C0
  • input.foreground#3A2817
  • inputOption.activeBorder#2563EB
  • list.activeSelectionBackground#DBEAFE
  • list.activeSelectionForeground#3A2817
  • list.highlightForeground#F59E0B
  • list.hoverBackground#EFF6FF
  • panel.background#FEFCE8
  • panel.border#2563EB
  • panelTitle.activeBorder#F59E0B
  • panelTitle.activeForeground#3A2817
  • peekView.border#2563EB
  • peekViewResult.selectionBackground#DBEAFE
  • sideBar.background#FFF8ED
  • sideBar.foreground#3A2817
  • sideBarSectionHeader.background#FEF3C7
  • statusBar.background#0C4A6E
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#FFFBF5
  • tab.activeBorder#00000000
  • tab.activeBorderTop#2563EB
  • tab.activeForeground#3A2817
  • tab.inactiveBackground#FFF8ED
  • tab.inactiveForeground#78716C
  • titleBar.activeBackground#FFF8ED
  • titleBar.activeForeground#3A2817

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9CA3AFitalic
keyword, storage.type, storage.modifier#2563EBbold
entity.name.function, support.function#0369A1bold
entity.name.class, entity.name.type.class, support.class#DC6B19bold
string#B45309
constant.numeric#D946A6bold
constant.language.boolean#2563EBbold
variable, variable.other#3A2817
variable.object.property, support.type.property-name#0C4A6Ebold
keyword.operator#F59E0B
punctuation#78716C
entity.name.tag, entity.name.tag.html, entity.name.tag.jsx, entity.name.tag.tsx#3A2817bold
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, meta.tag.attributes.jsx entity.other.attribute-name#DC6B19italic
string.quoted.double.html, string.quoted.single.html, string.quoted.double.jsx, string.quoted.single.jsx, string.quoted.double.tsx, string.quoted.single.tsx#B45309
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.begin.jsx, punctuation.definition.tag.end.jsx, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx#9CA3AF
punctuation.separator.key-value.html, punctuation.separator.key-value.jsx, punctuation.separator.key-value.tsx, keyword.operator.assignment.jsx, keyword.operator.assignment.tsx#F59E0B
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted.double.json#3A2817bold
meta.structure.dictionary.value.json string.quoted.double.json#B45309
constant.numeric.json, constant.language.json#D946A6