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.background#F5F4EF
  • activityBar.border#E2DFD5
  • activityBar.foreground#E9730C
  • activityBarBadge.background#E9730C
  • activityBarBadge.foreground#FFFFFF
  • badge.background#E9730C
  • badge.foreground#FFFFFF
  • button.background#E9730C
  • button.foreground#FFFFFF
  • button.hoverBackground#AB2B2B
  • dropdown.background#FFFFFF
  • dropdown.border#D3C6BB
  • dropdown.foreground#653B15
  • editor.background#FFFFFF
  • editor.foreground#794415
  • editor.lineHighlightBackground#F5F4EFCC
  • editor.selectionBackground#F0EAD166
  • editorBracketMatch.background#F0EAD155
  • editorBracketMatch.border#E9730C
  • editorCursor.foreground#E9730C
  • editorGroupHeader.tabsBackground#F5F4EF
  • editorIndentGuide.activeBackground#D3C6BB
  • editorIndentGuide.background#E2DFD588
  • editorLineNumber.activeForeground#314C81
  • editorLineNumber.foreground#7B6A5BAA
  • editorWhitespace.foreground#E2DFD566
  • focusBorder#D3C6BB
  • foreground#794415
  • gitDecoration.deletedResourceForeground#C72929
  • gitDecoration.modifiedResourceForeground#B35E09
  • gitDecoration.untrackedResourceForeground#1B7942
  • input.background#FFFFFF
  • input.border#D3C6BB
  • input.foreground#653B15
  • inputOption.activeBorder#E9730C
  • list.activeSelectionBackground#F0EAD1
  • list.activeSelectionForeground#794415
  • list.focusOutline#E9730C
  • list.hoverBackground#FDFDFC
  • list.inactiveSelectionBackground#E6F0E9
  • minimap.selectionHighlight#F0EAD1AA
  • panel.background#F5F4EF
  • panel.border#E2DFD5
  • peekView.border#D3C6BB
  • peekViewEditor.background#F3F2EC
  • peekViewTitle.background#F5F4EF
  • scrollbarSlider.activeBackground#E9730CAA
  • scrollbarSlider.background#D3C6BB66
  • scrollbarSlider.hoverBackground#D3C6BB99
  • sideBar.background#FAF9F5
  • sideBar.border#E2DFD5
  • sideBar.foreground#653B15
  • sideBarTitle.foreground#794415
  • statusBar.background#F5F4EF
  • statusBar.border#E2DFD5
  • statusBar.foreground#796758
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#794415
  • tab.border#E2DFD5
  • tab.inactiveBackground#E6F0E9
  • tab.inactiveForeground#2D864A
  • terminal.ansiBlack#794415
  • terminal.ansiBlue#2D864A
  • terminal.ansiCyan#7B6A5B
  • terminal.ansiGreen#314C81
  • terminal.ansiMagenta#2D4A86
  • terminal.ansiRed#E9730C
  • terminal.ansiWhite#794415
  • terminal.ansiYellow#F7E6A1
  • terminal.background#FFFFFF
  • terminal.foreground#794415
  • titleBar.activeBackground#F5F4EF
  • titleBar.activeForeground#794415
  • titleBar.inactiveBackground#FAF9F5
  • titleBar.inactiveForeground#7B6A5B
  • widget.shadow#7D573655

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#69776Fitalic
string, constant.other.symbol, string.regexp, string.template#1B7942
constant.character.escape#8C4A08
constant.numeric#B35E09
constant.language.boolean, constant.language.null, constant.language.undefined#B35E09
constant, entity.name.constant, support.constant#B62020
keyword, storage.type, storage.modifier, storage.type.function#C72929
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#A72020
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#5A6860
storage.type.class, storage.type.interface, storage.type.enum#C72929
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#7B8A81
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#1D4087
support.type.builtin, entity.name.type.primitive#2A5098
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#8C4A08
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#D84141
variable.parameter, variable.parameter.function#39473F
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#2B60A1
variable, meta.definition.variable, variable.other.readwrite#1A2820
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#C72929
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#8B9890
entity.other.attribute-name, entity.other.attribute-name.html#1D4087
support.class.component, entity.name.tag.template.value#B35E09
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#1B7942
entity.other.attribute-name.class.css, entity.other.attribute-name.class#B35E09
entity.other.attribute-name.id.css, entity.other.attribute-name.id#C72929
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#1D4087
markup.heading#C72929bold
markup.boldbold
markup.italicitalic
markup.quote#1A2820
markup.inline.raw, markup.fenced_code#1B7942
invalid, invalid.illegal#C22929
Minor Themes by Lenik - VS Code Theme