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#ECE9E4
  • activityBar.border#CDD5D1
  • activityBar.foreground#356E4A
  • activityBarBadge.background#356E4A
  • activityBarBadge.foreground#FBFAF9
  • badge.background#356E4A
  • badge.foreground#FBFAF9
  • button.background#356E4A
  • button.foreground#FBFAF9
  • button.hoverBackground#356E4A
  • dropdown.background#FDFDFC
  • dropdown.border#B0BFB8
  • dropdown.foreground#28332F
  • editor.background#FBFAF9
  • editor.foreground#323E39
  • editor.lineHighlightBackground#ECE9E4CC
  • editor.selectionBackground#D9E8DE66
  • editorBracketMatch.background#D9E8DE55
  • editorBracketMatch.border#356E4A
  • editorCursor.foreground#356E4A
  • editorGroupHeader.tabsBackground#ECE9E4
  • editorIndentGuide.activeBackground#B0BFB8
  • editorIndentGuide.background#CDD5D188
  • editorLineNumber.activeForeground#407253
  • editorLineNumber.foreground#63746BAA
  • editorWhitespace.foreground#CDD5D166
  • focusBorder#B0BFB8
  • foreground#323E39
  • gitDecoration.deletedResourceForeground#A63030
  • gitDecoration.modifiedResourceForeground#977B0C
  • gitDecoration.untrackedResourceForeground#396A4B
  • input.background#FDFDFC
  • input.border#B0BFB8
  • input.foreground#28332F
  • inputOption.activeBorder#356E4A
  • list.activeSelectionBackground#D9E8DE
  • list.activeSelectionForeground#323E39
  • list.focusOutline#356E4A
  • list.hoverBackground#F7F8F8
  • list.inactiveSelectionBackground#E2E7E9
  • minimap.selectionHighlight#D9E8DEAA
  • panel.background#ECE9E4
  • panel.border#CDD5D1
  • peekView.border#B0BFB8
  • peekViewEditor.background#F4F2EB
  • peekViewTitle.background#ECE9E4
  • scrollbarSlider.activeBackground#356E4AAA
  • scrollbarSlider.background#B0BFB866
  • scrollbarSlider.hoverBackground#B0BFB899
  • sideBar.background#F1EFE9
  • sideBar.border#CDD5D1
  • sideBar.foreground#2E3834
  • sideBarTitle.foreground#323E39
  • statusBar.background#ECE9E4
  • statusBar.border#CDD5D1
  • statusBar.foreground#4D6B5E
  • tab.activeBackground#FBFAF9
  • tab.activeForeground#323E39
  • tab.border#CDD5D1
  • tab.inactiveBackground#E2E7E9
  • tab.inactiveForeground#52666F
  • terminal.ansiBlack#323E39
  • terminal.ansiBlue#52666F
  • terminal.ansiCyan#63746B
  • terminal.ansiGreen#407253
  • terminal.ansiMagenta#D6B11F
  • terminal.ansiRed#356E4A
  • terminal.ansiWhite#323E39
  • terminal.ansiYellow#F6E7AC
  • terminal.background#FBFAF9
  • terminal.foreground#323E39
  • titleBar.activeBackground#ECE9E4
  • titleBar.activeForeground#323E39
  • titleBar.inactiveBackground#F1EFE9
  • titleBar.inactiveForeground#63746B
  • widget.shadow#485B5255

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#63746Bitalic
string, constant.other.symbol, string.regexp, string.template#396A4B
constant.character.escape#AA8D18
constant.numeric#977B0C
constant.language.boolean, constant.language.null, constant.language.undefined#A18517
constant, entity.name.constant, support.constant#7E2525
keyword, storage.type, storage.modifier, storage.type.function#962C2C
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#792A2A
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#596962
storage.type.class, storage.type.interface, storage.type.enum#962C2C
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#73827A
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#52666F
support.type.builtin, entity.name.type.primitive#5C7784
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#356E4A
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#4D8963
variable.parameter, variable.parameter.function#4B5853
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#556D61
variable, meta.definition.variable, variable.other.readwrite#323E39
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#962C2C
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#63746B
entity.other.attribute-name, entity.other.attribute-name.html#52666F
support.class.component, entity.name.tag.template.value#977B0C
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#396A4B
entity.other.attribute-name.class.css, entity.other.attribute-name.class#356E4A
entity.other.attribute-name.id.css, entity.other.attribute-name.id#962C2C
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#52666F
markup.heading#962C2Cbold
markup.boldbold
markup.italicitalic
markup.quote#323E39
markup.inline.raw, markup.fenced_code#396A4B
invalid, invalid.illegal#C22929
Minor Themes by Lenik - VS Code Theme