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#F3F2ED
  • activityBar.border#D1DBD5
  • activityBar.foreground#1B984F
  • activityBarBadge.background#1B984F
  • activityBarBadge.foreground#FFFFFF
  • badge.background#1B984F
  • badge.foreground#FFFFFF
  • button.background#1B984F
  • button.foreground#FFFFFF
  • button.hoverBackground#C32230
  • dropdown.background#FFFFFF
  • dropdown.border#B7CDC0
  • dropdown.foreground#17452A
  • editor.background#FFFFFF
  • editor.foreground#195733
  • editor.lineHighlightBackground#F3F2EDCC
  • editor.selectionBackground#EEE9D366
  • editorBracketMatch.background#EEE9D355
  • editorBracketMatch.border#1B984F
  • editorCursor.foreground#1B984F
  • editorGroupHeader.tabsBackground#F3F2ED
  • editorIndentGuide.activeBackground#B7CDC0
  • editorIndentGuide.background#D1DBD588
  • editorLineNumber.activeForeground#306191
  • editorLineNumber.foreground#5E7869AA
  • editorWhitespace.foreground#D1DBD566
  • focusBorder#B7CDC0
  • foreground#195733
  • gitDecoration.deletedResourceForeground#BF3A2B
  • gitDecoration.modifiedResourceForeground#8A7300
  • gitDecoration.untrackedResourceForeground#047C36
  • input.background#FFFFFF
  • input.border#B7CDC0
  • input.foreground#17452A
  • inputOption.activeBorder#1B984F
  • list.activeSelectionBackground#EEE9D3
  • list.activeSelectionForeground#195733
  • list.focusOutline#1B984F
  • list.hoverBackground#F9FBFA
  • list.inactiveSelectionBackground#F3EFE2
  • minimap.selectionHighlight#EEE9D3AA
  • panel.background#F3F2ED
  • panel.border#D1DBD5
  • peekView.border#B7CDC0
  • peekViewEditor.background#EAF0ED
  • peekViewTitle.background#F3F2ED
  • scrollbarSlider.activeBackground#1B984FAA
  • scrollbarSlider.background#B7CDC066
  • scrollbarSlider.hoverBackground#B7CDC099
  • sideBar.background#F3F7F4
  • sideBar.border#D1DBD5
  • sideBar.foreground#17452A
  • sideBarTitle.foreground#195733
  • statusBar.background#F3F2ED
  • statusBar.border#D1DBD5
  • statusBar.foreground#4C6C58
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#195733
  • tab.border#D1DBD5
  • tab.inactiveBackground#F3EFE2
  • tab.inactiveForeground#C19F15
  • terminal.ansiBlack#195733
  • terminal.ansiBlue#C19F15
  • terminal.ansiCyan#5E7869
  • terminal.ansiGreen#306191
  • terminal.ansiMagenta#2E73B8
  • terminal.ansiRed#1B984F
  • terminal.ansiWhite#195733
  • terminal.ansiYellow#F5E4A3
  • terminal.background#FFFFFF
  • terminal.foreground#195733
  • titleBar.activeBackground#F3F2ED
  • titleBar.activeForeground#195733
  • titleBar.inactiveBackground#F3F7F4
  • titleBar.inactiveForeground#5E7869
  • widget.shadow#396A4E55

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#047C36
constant.character.escape#8C5908
constant.numeric#8A7300
constant.language.boolean, constant.language.null, constant.language.undefined#A28A10
constant, entity.name.constant, support.constant#B13120
keyword, storage.type, storage.modifier, storage.type.function#BF3A2B
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#A23120
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#BF3A2B
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#143D8F
support.type.builtin, entity.name.type.primitive#1A4F9E
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#6A5810
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#D04839
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#2B60B1
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#BF3A2B
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#8B9890
entity.other.attribute-name, entity.other.attribute-name.html#143D8F
support.class.component, entity.name.tag.template.value#8A7300
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#047C36
entity.other.attribute-name.class.css, entity.other.attribute-name.class#A28A10
entity.other.attribute-name.id.css, entity.other.attribute-name.id#BF3A2B
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#143D8F
markup.heading#BF3A2Bbold
markup.boldbold
markup.italicitalic
markup.quote#1A2820
markup.inline.raw, markup.fenced_code#047C36
invalid, invalid.illegal#C22929
Minor Themes by Lenik - VS Code Theme