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#F2F1ED
  • activityBar.border#DFDDD8
  • activityBar.foreground#D58F15
  • activityBarBadge.background#D58F15
  • activityBarBadge.foreground#FDFDFC
  • badge.background#D58F15
  • badge.foreground#FDFDFC
  • button.background#D58F15
  • button.foreground#FDFDFC
  • button.hoverBackground#B49022
  • dropdown.background#FDFDFC
  • dropdown.border#CDC2B7
  • dropdown.foreground#3C2E20
  • editor.background#FDFDFC
  • editor.foreground#4C3824
  • editor.lineHighlightBackground#F2F1EDCC
  • editor.selectionBackground#D9E8E366
  • editorBracketMatch.background#D9E8E355
  • editorBracketMatch.border#D58F15
  • editorCursor.foreground#D58F15
  • editorGroupHeader.tabsBackground#F2F1ED
  • editorIndentGuide.activeBackground#CDC2B7
  • editorIndentGuide.background#DFDDD888
  • editorLineNumber.activeForeground#3E7966
  • editorLineNumber.foreground#786B5EAA
  • editorWhitespace.foreground#DFDDD866
  • focusBorder#CDC2B7
  • foreground#4C3824
  • gitDecoration.deletedResourceForeground#BF3A2B
  • gitDecoration.modifiedResourceForeground#8C6908
  • gitDecoration.untrackedResourceForeground#2F6A56
  • input.background#FDFDFC
  • input.border#CDC2B7
  • input.foreground#3C2E20
  • inputOption.activeBorder#D58F15
  • list.activeSelectionBackground#D9E8E3
  • list.activeSelectionForeground#4C3824
  • list.focusOutline#D58F15
  • list.hoverBackground#FBFAF9
  • list.inactiveSelectionBackground#E6EFEC
  • minimap.selectionHighlight#D9E8E3AA
  • panel.background#F2F1ED
  • panel.border#DFDDD8
  • peekView.border#CDC2B7
  • peekViewEditor.background#F0EFEA
  • peekViewTitle.background#F2F1ED
  • scrollbarSlider.activeBackground#D58F15AA
  • scrollbarSlider.background#CDC2B766
  • scrollbarSlider.hoverBackground#CDC2B799
  • sideBar.background#F7F6F3
  • sideBar.border#DFDDD8
  • sideBar.foreground#3C2E20
  • sideBarTitle.foreground#4C3824
  • statusBar.background#F2F1ED
  • statusBar.border#DFDDD8
  • statusBar.foreground#77685A
  • tab.activeBackground#FDFDFC
  • tab.activeForeground#4C3824
  • tab.border#DFDDD8
  • tab.inactiveBackground#E6EFEC
  • tab.inactiveForeground#397F67
  • terminal.ansiBlack#4C3824
  • terminal.ansiBlue#397F67
  • terminal.ansiCyan#786B5E
  • terminal.ansiGreen#3E7966
  • terminal.ansiMagenta#B65474
  • terminal.ansiRed#D58F15
  • terminal.ansiWhite#4C3824
  • terminal.ansiYellow#F4E6BE
  • terminal.background#FDFDFC
  • terminal.foreground#4C3824
  • titleBar.activeBackground#F2F1ED
  • titleBar.activeForeground#4C3824
  • titleBar.inactiveBackground#F7F6F3
  • titleBar.inactiveForeground#786B5E
  • widget.shadow#66523D55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#81756Aitalic
string, constant.other.symbol, string.regexp, string.template#2F6A56
constant.character.escape#376C5A
constant.numeric#8C6908
constant.language.boolean, constant.language.null, constant.language.undefined#977A20
constant, entity.name.constant, support.constant#9A7B1D
keyword, storage.type, storage.modifier, storage.type.function#D58F15
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#AC7515
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#6E665E
storage.type.class, storage.type.interface, storage.type.enum#D58F15
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#90877F
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#833F56
support.type.builtin, entity.name.type.primitive#955067
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#6A4F10
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#B53E30
variable.parameter, variable.parameter.function#4D453D
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#967C2C
variable, meta.definition.variable, variable.other.readwrite#2E241A
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#D58F15
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#9F9489
entity.other.attribute-name, entity.other.attribute-name.html#833F56
support.class.component, entity.name.tag.template.value#8C6908
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#2F6A56
entity.other.attribute-name.class.css, entity.other.attribute-name.class#977A20
entity.other.attribute-name.id.css, entity.other.attribute-name.id#D58F15
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#833F56
markup.heading#D58F15bold
markup.boldbold
markup.italicitalic
markup.quote#2E241A
markup.inline.raw, markup.fenced_code#2F6A56
invalid, invalid.illegal#C22929