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#F5F0EB
  • activityBar.border#E2DBD5
  • activityBar.foreground#7A5038
  • activityBarBadge.background#7A5038
  • activityBarBadge.foreground#FFF9F5
  • badge.background#7A5038
  • badge.foreground#FFF9F5
  • button.background#7A5038
  • button.foreground#FFF9F5
  • button.hoverBackground#7A5038
  • dropdown.background#FFFFFF
  • dropdown.border#D0C7BE
  • dropdown.foreground#000000
  • editor.background#FFF9F5
  • editor.foreground#000000
  • editor.lineHighlightBackground#F5F0EBCC
  • editor.selectionBackground#EEE7DD66
  • editorBracketMatch.background#EEE7DD55
  • editorBracketMatch.border#7A5038
  • editorCursor.foreground#7A5038
  • editorGroupHeader.tabsBackground#F5F0EB
  • editorIndentGuide.activeBackground#D0C7BE
  • editorIndentGuide.background#E2DBD588
  • editorLineNumber.activeForeground#44683C
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#E2DBD566
  • focusBorder#D0C7BE
  • foreground#000000
  • gitDecoration.deletedResourceForeground#984A3E
  • gitDecoration.modifiedResourceForeground#996A3D
  • gitDecoration.untrackedResourceForeground#44683C
  • input.background#FFFFFF
  • input.border#D0C7BE
  • input.foreground#000000
  • inputOption.activeBorder#7A5038
  • list.activeSelectionBackground#EEE7DD
  • list.activeSelectionForeground#000000
  • list.focusOutline#7A5038
  • list.hoverBackground#FFFFFF
  • list.inactiveSelectionBackground#EFF4EC
  • minimap.selectionHighlight#EEE7DDAA
  • panel.background#F5F0EB
  • panel.border#E2DBD5
  • peekView.border#D0C7BE
  • peekViewEditor.background#F7F2ED
  • peekViewTitle.background#F5F0EB
  • scrollbarSlider.activeBackground#7A5038AA
  • scrollbarSlider.background#D0C7BE66
  • scrollbarSlider.hoverBackground#D0C7BE99
  • sideBar.background#F9F9F6
  • sideBar.border#E2DBD5
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#F5F0EB
  • statusBar.border#E2DBD5
  • statusBar.foreground#000000
  • tab.activeBackground#FFF9F5
  • tab.activeForeground#000000
  • tab.border#E2DBD5
  • tab.inactiveBackground#EFF4EC
  • tab.inactiveForeground#44683C
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#44683C
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#44683C
  • terminal.ansiMagenta#C39569
  • terminal.ansiRed#7A5038
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#EEE0D3
  • terminal.background#FFF9F5
  • terminal.foreground#000000
  • titleBar.activeBackground#F5F0EB
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#F9F9F6
  • titleBar.inactiveForeground#000000
  • widget.shadow#5B493955

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#8A7A6Aitalic
string, constant.other.symbol, string.regexp, string.template#44683C
constant.character.escape#AF7946
constant.numeric#996A3D
constant.language.boolean, constant.language.null, constant.language.undefined#8D653F
constant, entity.name.constant, support.constant#704A33
keyword, storage.type, storage.modifier, storage.type.function#7A5038
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#6B442E
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#706051
storage.type.class, storage.type.interface, storage.type.enum#7A5038
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#8F8070
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#7C5B46
support.type.builtin, entity.name.type.primitive#8B654B
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#704A33
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#916446
variable.parameter, variable.parameter.function#54473B
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#685645
variable, meta.definition.variable, variable.other.readwrite#2C2420
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#7A5038
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#8A7A6A
entity.other.attribute-name, entity.other.attribute-name.html#7C5B46
support.class.component, entity.name.tag.template.value#996A3D
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#44683C
entity.other.attribute-name.class.css, entity.other.attribute-name.class#6B5543
entity.other.attribute-name.id.css, entity.other.attribute-name.id#7A5038
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#7C5B46
markup.heading#7A5038bold
markup.boldbold
markup.italicitalic
markup.quote#2C2420
markup.inline.raw, markup.fenced_code#44683C
invalid, invalid.illegal#C22929