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#F7EDEF
  • activityBar.border#E6DBDF
  • activityBar.foreground#D3224B
  • activityBarBadge.background#D3224B
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D3224B
  • badge.foreground#FFFFFF
  • button.background#D3224B
  • button.foreground#FFFFFF
  • button.hoverBackground#D3224B
  • dropdown.background#FBF8F4
  • dropdown.border#D7B7BF
  • dropdown.foreground#000000
  • editor.background#FFFFFF
  • editor.foreground#000000
  • editor.lineHighlightBackground#F7EDEFCC
  • editor.selectionBackground#F1DAE966
  • editorBracketMatch.background#F1DAE955
  • editorBracketMatch.border#D3224B
  • editorCursor.foreground#D3224B
  • editorGroupHeader.tabsBackground#F7EDEF
  • editorIndentGuide.activeBackground#D7B7BF
  • editorIndentGuide.background#E6DBDF88
  • editorLineNumber.activeForeground#834979
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#E6DBDF66
  • focusBorder#D7B7BF
  • foreground#000000
  • gitDecoration.deletedResourceForeground#B62039
  • gitDecoration.modifiedResourceForeground#936C10
  • gitDecoration.untrackedResourceForeground#3C7C67
  • input.background#FBF8F4
  • input.border#D7B7BF
  • input.foreground#000000
  • inputOption.activeBorder#D3224B
  • list.activeSelectionBackground#F1DAE9
  • list.activeSelectionForeground#000000
  • list.focusOutline#D3224B
  • list.hoverBackground#FCFBF7
  • list.inactiveSelectionBackground#F5EAF1
  • minimap.selectionHighlight#F1DAE9AA
  • panel.background#F7EDEF
  • panel.border#E6DBDF
  • peekView.border#D7B7BF
  • peekViewEditor.background#F6DFE5
  • peekViewTitle.background#F7EDEF
  • scrollbarSlider.activeBackground#D3224BAA
  • scrollbarSlider.background#D7B7BF66
  • scrollbarSlider.hoverBackground#D7B7BF99
  • sideBar.background#FBF4F5
  • sideBar.border#E6DBDF
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#F7EDEF
  • statusBar.border#E6DBDF
  • statusBar.foreground#000000
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#000000
  • tab.border#E6DBDF
  • tab.inactiveBackground#F5EAF1
  • tab.inactiveForeground#964088
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#964088
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#834979
  • terminal.ansiMagenta#EACC86
  • terminal.ansiRed#D3224B
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#F8E1AA
  • terminal.background#FFFFFF
  • terminal.foreground#000000
  • titleBar.activeBackground#F7EDEF
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#FBF4F5
  • titleBar.inactiveForeground#000000
  • widget.shadow#83495C55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#6D5561italic
string, constant.other.symbol, string.regexp, string.template#964088
constant.character.escape#EACC86
constant.numeric#D3224B
constant.language.boolean, constant.language.null, constant.language.undefined#D3224B
constant, entity.name.constant, support.constant#8E2941
keyword, storage.type, storage.modifier, storage.type.function#D3224B
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#8E2941
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#6D5561
storage.type.class, storage.type.interface, storage.type.enum#D3224B
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#6D5561
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#834979
support.type.builtin, entity.name.type.primitive#964088
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#3E1E29
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#D3224B
variable.parameter, variable.parameter.function#3E1E29
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#834979
variable, meta.definition.variable, variable.other.readwrite#3E1E29
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#D3224B
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#6D5561
entity.other.attribute-name, entity.other.attribute-name.html#964088
support.class.component, entity.name.tag.template.value#D3224B
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#3C7C67
entity.other.attribute-name.class.css, entity.other.attribute-name.class#D3224B
entity.other.attribute-name.id.css, entity.other.attribute-name.id#D3224B
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#964088
markup.heading#D3224Bbold
markup.boldbold
markup.italicitalic
markup.quote#5D3240
markup.inline.raw, markup.fenced_code#964088
invalid, invalid.illegal#C22929
Minor Themes by Lenik - VS Code Theme