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#F1EEEA
  • activityBar.border#CEC8C0
  • activityBar.foreground#B87C14
  • activityBarBadge.background#B87C14
  • activityBarBadge.foreground#FDFDFC
  • badge.background#B87C14
  • badge.foreground#FDFDFC
  • button.background#B87C14
  • button.foreground#FDFDFC
  • button.hoverBackground#B87C14
  • dropdown.background#FDFDFC
  • dropdown.border#CEC8C0
  • dropdown.foreground#000000
  • editor.background#FDFDFC
  • editor.foreground#000000
  • editor.lineHighlightBackground#F1EEEACC
  • editor.selectionBackground#DDEAEE66
  • editorBracketMatch.background#DDEAEE55
  • editorBracketMatch.border#B87C14
  • editorCursor.foreground#B87C14
  • editorGroupHeader.tabsBackground#F1EEEA
  • editorIndentGuide.activeBackground#CEC8C0
  • editorIndentGuide.background#CEC8C088
  • editorLineNumber.activeForeground#30647E
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#CEC8C066
  • focusBorder#CEC8C0
  • foreground#000000
  • gitDecoration.deletedResourceForeground#AD2B1F
  • gitDecoration.modifiedResourceForeground#B87C14
  • gitDecoration.untrackedResourceForeground#356E4D
  • input.background#FDFDFC
  • input.border#CEC8C0
  • input.foreground#000000
  • inputOption.activeBorder#B87C14
  • list.activeSelectionBackground#DDEAEE
  • list.activeSelectionForeground#000000
  • list.focusOutline#B87C14
  • list.hoverBackground#FDFDFC
  • list.inactiveSelectionBackground#DDEAEE
  • minimap.selectionHighlight#DDEAEEAA
  • panel.background#F1EEEA
  • panel.border#CEC8C0
  • peekView.border#CEC8C0
  • peekViewEditor.background#FDFDFC
  • peekViewTitle.background#F1EEEA
  • scrollbarSlider.activeBackground#B87C14AA
  • scrollbarSlider.background#CEC8C066
  • scrollbarSlider.hoverBackground#CEC8C099
  • sideBar.background#F8F6F2
  • sideBar.border#CEC8C0
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#F1EEEA
  • statusBar.border#CEC8C0
  • statusBar.foreground#000000
  • tab.activeBackground#FDFDFC
  • tab.activeForeground#000000
  • tab.border#CEC8C0
  • tab.inactiveBackground#DDEAEE
  • tab.inactiveForeground#30647E
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#30647E
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#30647E
  • terminal.ansiMagenta#B87C14
  • terminal.ansiRed#B87C14
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#DDEAEE
  • terminal.background#FDFDFC
  • terminal.foreground#000000
  • titleBar.activeBackground#F1EEEA
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#F8F6F2
  • titleBar.inactiveForeground#000000
  • widget.shadow#7E716755

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#7E7167italic
string, constant.other.symbol, string.regexp, string.template#30647E
constant.character.escape#B87C14
constant.numeric#B87C14
constant.language.boolean, constant.language.null, constant.language.undefined#B87C14
constant, entity.name.constant, support.constant#B87C14
keyword, storage.type, storage.modifier, storage.type.function#B87C14
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#B87C14
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#7E7167
storage.type.class, storage.type.interface, storage.type.enum#B87C14
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#7E7167
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#30647E
support.type.builtin, entity.name.type.primitive#30647E
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#3B2A21
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#B87C14
variable.parameter, variable.parameter.function#3B2A21
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#30647E
variable, meta.definition.variable, variable.other.readwrite#3B2A21
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#B87C14
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#7E7167
entity.other.attribute-name, entity.other.attribute-name.html#30647E
support.class.component, entity.name.tag.template.value#B87C14
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#356E4D
entity.other.attribute-name.class.css, entity.other.attribute-name.class#B87C14
entity.other.attribute-name.id.css, entity.other.attribute-name.id#B87C14
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#30647E
markup.heading#B87C14bold
markup.boldbold
markup.italicitalic
markup.quote#3B2A21
markup.inline.raw, markup.fenced_code#30647E
invalid, invalid.illegal#C22929