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#6EA8DC
  • activityBar.background#020617
  • activityBar.foreground#D946A0
  • activityBar.inactiveForeground#A4345D
  • activityBarBadge.background#A4345D
  • activityBarBadge.foreground#FFFFFF
  • badge.background#A4345D
  • badge.foreground#FFFFFF
  • button.background#6F1A39
  • button.foreground#FFFFFF
  • button.hoverBackground#5A1530
  • editor.background#0F172A
  • editor.foreground#F8FAFC
  • editor.inactiveSelectionBackground#1E3A8A40
  • editor.lineHighlightBackground#1E293B
  • editor.selectionBackground#1E3A8A80
  • editorCursor.foreground#6EA8DC
  • editorError.foreground#F87171
  • editorIndentGuide.activeBackground1#6EA8DC
  • editorIndentGuide.background1#334155
  • editorInfo.foreground#22D3EE
  • editorLineNumber.activeForeground#A4345D
  • editorLineNumber.foreground#334155
  • editorSuggestWidget.selectedBackground#1E3A8A80
  • editorWarning.foreground#FBBF24
  • editorWidget.background#020617
  • editorWidget.border#334155
  • focusBorder#6EA8DC
  • gitDecoration.addedResourceForeground#10B981
  • gitDecoration.deletedResourceForeground#F87171
  • gitDecoration.modifiedResourceForeground#22D3EE
  • input.background#1E293B
  • input.border#334155
  • input.foreground#F8FAFC
  • inputOption.activeBorder#6EA8DC
  • list.activeSelectionBackground#1E3A8A80
  • list.activeSelectionForeground#F8FAFC
  • list.highlightForeground#A4345D
  • list.hoverBackground#1E293B
  • panel.background#0F172A
  • panel.border#6EA8DC
  • panelTitle.activeBorder#A4345D
  • panelTitle.activeForeground#F8FAFC
  • peekView.border#6EA8DC
  • peekViewResult.selectionBackground#1E3A8A80
  • sideBar.background#020617
  • sideBar.foreground#E2E8F0
  • sideBarSectionHeader.background#0F172A
  • statusBar.background#6F1A39
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#0F172A
  • tab.activeBorder#00000000
  • tab.activeBorderTop#A4345D
  • tab.activeForeground#F8FAFC
  • tab.inactiveBackground#020617
  • tab.inactiveForeground#64748B
  • titleBar.activeBackground#020617
  • titleBar.activeForeground#E2E8F0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#475569italic
keyword, storage.type, storage.modifier#A4345Dbold
entity.name.function, support.function#6EA8DCbold
entity.name.class, entity.name.type.class, support.class#7DD3FCbold
string#CBD5E1
constant.numeric#E879F9bold
constant.language.boolean#A4345Dbold
variable, variable.other#F8FAFC
variable.object.property, support.type.property-name#67E8F9bold
keyword.operator#5EADD6
punctuation#94A3B8
entity.name.tag, entity.name.tag.html, entity.name.tag.jsx, entity.name.tag.tsx#EBD2B1bold
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#FFC58Fitalic
string.quoted.double.html, string.quoted.single.html, string.quoted.double.jsx, string.quoted.single.jsx, string.quoted.double.tsx, string.quoted.single.tsx#E8D7B9
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#A7A39A
punctuation.separator.key-value.html, punctuation.separator.key-value.jsx, punctuation.separator.key-value.tsx, keyword.operator.assignment.jsx, keyword.operator.assignment.tsx#FFA25C
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted.double.json#E6DDC8bold
meta.structure.dictionary.value.json string.quoted.double.json#E8D7B9
constant.numeric.json, constant.language.json#FFC566