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#B91C1C
  • activityBar.background#0C0A09
  • activityBar.foreground#FCD34D
  • activityBarBadge.background#D97706
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D97706
  • badge.foreground#FFFFFF
  • button.background#B91C1C
  • button.foreground#FFFFFF
  • button.hoverBackground#991B1B
  • editor.background#1C1917
  • editor.foreground#FEF3C7
  • editor.inactiveSelectionBackground#92400E40
  • editor.lineHighlightBackground#292524
  • editor.selectionBackground#92400E80
  • editorCursor.foreground#B91C1C
  • editorError.foreground#F87171
  • editorIndentGuide.activeBackground1#FCD34D
  • editorIndentGuide.background1#3C3836
  • editorInfo.foreground#22D3EE
  • editorLineNumber.activeForeground#FCD34D
  • editorLineNumber.foreground#44403C
  • editorSuggestWidget.selectedBackground#92400E80
  • editorWarning.foreground#FB923C
  • editorWidget.background#0C0A09
  • editorWidget.border#44403C
  • focusBorder#FCD34D
  • gitDecoration.addedResourceForeground#10B981
  • gitDecoration.deletedResourceForeground#F87171
  • gitDecoration.modifiedResourceForeground#22D3EE
  • input.background#292524
  • input.border#44403C
  • input.foreground#FEF3C7
  • inputOption.activeBorder#FCD34D
  • list.activeSelectionBackground#92400E80
  • list.activeSelectionForeground#FEF3C7
  • list.highlightForeground#FCD34D
  • list.hoverBackground#292524
  • panel.background#1C1917
  • panel.border#FCD34D
  • panelTitle.activeBorder#D97706
  • panelTitle.activeForeground#FEF3C7
  • peekView.border#FCD34D
  • peekViewResult.selectionBackground#92400E80
  • sideBar.background#0C0A09
  • sideBar.foreground#E7E5E4
  • sideBarSectionHeader.background#1C1917
  • statusBar.background#92400E
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#1C1917
  • tab.activeBorder#00000000
  • tab.activeBorderTop#FCD34D
  • tab.activeForeground#FEF3C7
  • tab.inactiveBackground#0C0A09
  • tab.inactiveForeground#78716C
  • titleBar.activeBackground#0C0A09
  • titleBar.activeForeground#E7E5E4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#57534Eitalic
keyword, storage.type, storage.modifier#FCD34Dbold
entity.name.function, support.function#22D3EEbold
entity.name.class, entity.name.type.class, support.class#FB923Cbold
string#D4A574
constant.numeric#F87171bold
constant.language.boolean#FCD34Dbold
variable, variable.other#FEF3C7
variable.object.property, support.type.property-name#67E8F9bold
keyword.operator#FBBF24
punctuation#A8A29E
entity.name.tag, entity.name.tag.html, entity.name.tag.jsx, entity.name.tag.tsx#FEF3C7bold
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#FCD34Ditalic
string.quoted.double.html, string.quoted.single.html, string.quoted.double.jsx, string.quoted.single.jsx, string.quoted.double.tsx, string.quoted.single.tsx#D4A574
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#78716C
punctuation.separator.key-value.html, punctuation.separator.key-value.jsx, punctuation.separator.key-value.tsx, keyword.operator.assignment.jsx, keyword.operator.assignment.tsx#FB923C
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted.double.json#FEF3C7bold
meta.structure.dictionary.value.json string.quoted.double.json#D4A574
constant.numeric.json, constant.language.json#FBBF24
Inference Stack — Colorado Themes by protomedica - VS Code Theme