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#D97706
  • activityBar.background#FEF3C7
  • activityBar.foreground#92400E
  • activityBarBadge.background#D97706
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D97706
  • badge.foreground#FFFFFF
  • button.background#D97706
  • button.foreground#FFFFFF
  • button.hoverBackground#B45309
  • editor.background#FFFBEB
  • editor.foreground#451A03
  • editor.inactiveSelectionBackground#FDE68A40
  • editor.lineHighlightBackground#FEF9F3
  • editor.selectionBackground#FDE68A80
  • editorCursor.foreground#B91C1C
  • editorError.foreground#DC2626
  • editorIndentGuide.activeBackground1#D97706
  • editorIndentGuide.background1#F3E8D8
  • editorInfo.foreground#0369A1
  • editorLineNumber.activeForeground#92400E
  • editorLineNumber.foreground#D4C4A0
  • editorSuggestWidget.selectedBackground#FDE68A80
  • editorWarning.foreground#EA580C
  • editorWidget.background#FFFFFF
  • editorWidget.border#E5D5B7
  • focusBorder#D97706
  • gitDecoration.addedResourceForeground#059669
  • gitDecoration.deletedResourceForeground#DC2626
  • gitDecoration.modifiedResourceForeground#0284C7
  • input.background#FFFFFF
  • input.border#E5D5B7
  • input.foreground#451A03
  • inputOption.activeBorder#D97706
  • list.activeSelectionBackground#FDE68A80
  • list.activeSelectionForeground#451A03
  • list.highlightForeground#B45309
  • list.hoverBackground#FEF9F3
  • panel.background#FFFBEB
  • panel.border#D97706
  • panelTitle.activeBorder#D97706
  • panelTitle.activeForeground#451A03
  • peekView.border#D97706
  • peekViewResult.selectionBackground#FDE68A80
  • sideBar.background#FEF3C7
  • sideBar.foreground#78350F
  • sideBarSectionHeader.background#FFFBEB
  • statusBar.background#D97706
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#FFFBEB
  • tab.activeBorder#00000000
  • tab.activeBorderTop#D97706
  • tab.activeForeground#451A03
  • tab.inactiveBackground#FEF3C7
  • tab.inactiveForeground#A16207
  • titleBar.activeBackground#FEF3C7
  • titleBar.activeForeground#451A03

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A8A29Eitalic
keyword, storage.type, storage.modifier#B45309bold
entity.name.function, support.function#0369A1bold
entity.name.class, entity.name.type.class, support.class#D97706bold
string#78350F
constant.numeric#BE123Cbold
constant.language.boolean#B45309bold
variable, variable.other#451A03
variable.object.property, support.type.property-name#0284C7bold
keyword.operator#EA580C
punctuation#78716C
entity.name.tag, entity.name.tag.html, entity.name.tag.jsx, entity.name.tag.tsx#451A03bold
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#D97706italic
string.quoted.double.html, string.quoted.single.html, string.quoted.double.jsx, string.quoted.single.jsx, string.quoted.double.tsx, string.quoted.single.tsx#78350F
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#A8A29E
punctuation.separator.key-value.html, punctuation.separator.key-value.jsx, punctuation.separator.key-value.tsx, keyword.operator.assignment.jsx, keyword.operator.assignment.tsx#EA580C
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted.double.json#451A03bold
meta.structure.dictionary.value.json string.quoted.double.json#78350F
constant.numeric.json, constant.language.json#B45309