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#38BDF8
  • activityBar.background#020617
  • activityBar.foreground#7DD3FC
  • activityBarBadge.background#0EA5E9
  • activityBarBadge.foreground#FFFFFF
  • badge.background#0EA5E9
  • badge.foreground#FFFFFF
  • button.background#0284C7
  • button.foreground#FFFFFF
  • button.hoverBackground#0369A1
  • editor.background#0F172A
  • editor.foreground#F8FAFC
  • editor.inactiveSelectionBackground#1E3A8A40
  • editor.lineHighlightBackground#1E293B
  • editor.selectionBackground#1E3A8A80
  • editorCursor.foreground#38BDF8
  • editorError.foreground#F87171
  • editorIndentGuide.activeBackground1#38BDF8
  • editorIndentGuide.background1#334155
  • editorInfo.foreground#22D3EE
  • editorLineNumber.activeForeground#7DD3FC
  • editorLineNumber.foreground#334155
  • editorSuggestWidget.selectedBackground#1E3A8A80
  • editorWarning.foreground#FBBF24
  • editorWidget.background#020617
  • editorWidget.border#334155
  • focusBorder#38BDF8
  • gitDecoration.addedResourceForeground#10B981
  • gitDecoration.deletedResourceForeground#F87171
  • gitDecoration.modifiedResourceForeground#22D3EE
  • input.background#1E293B
  • input.border#334155
  • input.foreground#F8FAFC
  • inputOption.activeBorder#38BDF8
  • list.activeSelectionBackground#1E3A8A80
  • list.activeSelectionForeground#F8FAFC
  • list.highlightForeground#7DD3FC
  • list.hoverBackground#1E293B
  • panel.background#0F172A
  • panel.border#38BDF8
  • panelTitle.activeBorder#0EA5E9
  • panelTitle.activeForeground#F8FAFC
  • peekView.border#38BDF8
  • peekViewResult.selectionBackground#1E3A8A80
  • sideBar.background#020617
  • sideBar.foreground#E2E8F0
  • sideBarSectionHeader.background#0F172A
  • statusBar.background#0C4A6E
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#0F172A
  • tab.activeBorder#00000000
  • tab.activeBorderTop#38BDF8
  • 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#38BDF8bold
entity.name.function, support.function#22D3EEbold
entity.name.class, entity.name.type.class, support.class#7DD3FCbold
string#CBD5E1
constant.numeric#F472B6bold
constant.language.boolean#38BDF8bold
variable, variable.other#F8FAFC
variable.object.property, support.type.property-name#67E8F9bold
keyword.operator#FBBF24
punctuation#94A3B8
entity.name.tag, entity.name.tag.html, entity.name.tag.jsx, entity.name.tag.tsx#E2E8F0bold
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#7DD3FCitalic
string.quoted.double.html, string.quoted.single.html, string.quoted.double.jsx, string.quoted.single.jsx, string.quoted.double.tsx, string.quoted.single.tsx#CBD5E1
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#64748B
punctuation.separator.key-value.html, punctuation.separator.key-value.jsx, punctuation.separator.key-value.tsx, keyword.operator.assignment.jsx, keyword.operator.assignment.tsx#38BDF8
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted.double.json#E2E8F0bold
meta.structure.dictionary.value.json string.quoted.double.json#CBD5E1
constant.numeric.json, constant.language.json#7DD3FC