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#60A5FA
  • activityBar.background#0F0C08
  • activityBar.foreground#FDBA74
  • activityBarBadge.background#F59E0B
  • activityBarBadge.foreground#1A1410
  • badge.background#F59E0B
  • badge.foreground#1A1410
  • button.background#EA580C
  • button.foreground#FFFFFF
  • button.hoverBackground#DC2626
  • editor.background#1A1410
  • editor.foreground#FFF4E6
  • editor.inactiveSelectionBackground#1E3A8A40
  • editor.lineHighlightBackground#1C1814
  • editor.selectionBackground#1E3A8A80
  • editorCursor.foreground#60A5FA
  • editorError.foreground#F87171
  • editorIndentGuide.activeBackground1#60A5FA
  • editorIndentGuide.background1#2A2520
  • editorInfo.foreground#22D3EE
  • editorLineNumber.activeForeground#FDBA74
  • editorLineNumber.foreground#4D433C
  • editorSuggestWidget.selectedBackground#1E3A8A80
  • editorWarning.foreground#FB923C
  • editorWidget.background#0F0C08
  • editorWidget.border#3D342B
  • focusBorder#60A5FA
  • gitDecoration.addedResourceForeground#10B981
  • gitDecoration.deletedResourceForeground#F87171
  • gitDecoration.modifiedResourceForeground#22D3EE
  • input.background#241E18
  • input.border#3D342B
  • input.foreground#FFF4E6
  • inputOption.activeBorder#60A5FA
  • list.activeSelectionBackground#1E3A8A80
  • list.activeSelectionForeground#FFF4E6
  • list.highlightForeground#FDBA74
  • list.hoverBackground#2A2520
  • panel.background#1A1410
  • panel.border#60A5FA
  • panelTitle.activeBorder#F59E0B
  • panelTitle.activeForeground#FFF4E6
  • peekView.border#60A5FA
  • peekViewResult.selectionBackground#1E3A8A80
  • sideBar.background#0F0C08
  • sideBar.foreground#E7DFD8
  • sideBarSectionHeader.background#1A1410
  • statusBar.background#0C4A6E
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#1A1410
  • tab.activeBorder#00000000
  • tab.activeBorderTop#60A5FA
  • tab.activeForeground#FFF4E6
  • tab.inactiveBackground#0F0C08
  • tab.inactiveForeground#78716C
  • titleBar.activeBackground#0F0C08
  • titleBar.activeForeground#E7DFD8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#57534Eitalic
keyword, storage.type, storage.modifier#60A5FAbold
entity.name.function, support.function#38BDF8bold
entity.name.class, entity.name.type.class, support.class#FDBA74bold
string#FDE68A
constant.numeric#F472B6bold
constant.language.boolean#60A5FAbold
variable, variable.other#FFF4E6
variable.object.property, support.type.property-name#7DD3FCbold
keyword.operator#FBBF24
punctuation#9CA3AF
entity.name.tag, entity.name.tag.html, entity.name.tag.jsx, entity.name.tag.tsx#FDE68Abold
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#FDBA74italic
string.quoted.double.html, string.quoted.single.html, string.quoted.double.jsx, string.quoted.single.jsx, string.quoted.double.tsx, string.quoted.single.tsx#E7DFD8
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#F59E0B
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted.double.json#FDE68Abold
meta.structure.dictionary.value.json string.quoted.double.json#E7DFD8
constant.numeric.json, constant.language.json#F472B6
Inference Stack — Colorado Themes by protomedica - VS Code Theme