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#F8ECF3
  • activityBar.border#EBE0E7
  • activityBar.foreground#E25A9E
  • activityBarBadge.background#E25A9E
  • activityBarBadge.foreground#FFFFFF
  • badge.background#E25A9E
  • badge.foreground#FFFFFF
  • button.background#E25A9E
  • button.foreground#FFFFFF
  • button.hoverBackground#E25A9E
  • dropdown.background#F4FAFA
  • dropdown.border#DFC3D1
  • dropdown.foreground#000000
  • editor.background#FFFFFF
  • editor.foreground#000000
  • editor.lineHighlightBackground#F8ECF3CC
  • editor.selectionBackground#D1EDF066
  • editorBracketMatch.background#D1EDF055
  • editorBracketMatch.border#E25A9E
  • editorCursor.foreground#E25A9E
  • editorGroupHeader.tabsBackground#F8ECF3
  • editorIndentGuide.activeBackground#DFC3D1
  • editorIndentGuide.background#EBE0E788
  • editorLineNumber.activeForeground#478085
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#EBE0E766
  • focusBorder#DFC3D1
  • foreground#000000
  • gitDecoration.deletedResourceForeground#C43149
  • gitDecoration.modifiedResourceForeground#AE8813
  • gitDecoration.untrackedResourceForeground#3A886E
  • input.background#F4FAFA
  • input.border#DFC3D1
  • input.foreground#000000
  • inputOption.activeBorder#E25A9E
  • list.activeSelectionBackground#D1EDF0
  • list.activeSelectionForeground#000000
  • list.focusOutline#E25A9E
  • list.hoverBackground#FDFCF7
  • list.inactiveSelectionBackground#E5F4F5
  • minimap.selectionHighlight#D1EDF0AA
  • panel.background#F8ECF3
  • panel.border#EBE0E7
  • peekView.border#DFC3D1
  • peekViewEditor.background#F8E2ED
  • peekViewTitle.background#F8ECF3
  • scrollbarSlider.activeBackground#E25A9EAA
  • scrollbarSlider.background#DFC3D166
  • scrollbarSlider.hoverBackground#DFC3D199
  • sideBar.background#FCF3F7
  • sideBar.border#EBE0E7
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#F8ECF3
  • statusBar.border#EBE0E7
  • statusBar.foreground#000000
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#000000
  • tab.border#EBE0E7
  • tab.inactiveBackground#E5F4F5
  • tab.inactiveForeground#3A8188
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#3A8188
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#478085
  • terminal.ansiMagenta#F8E277
  • terminal.ansiRed#E25A9E
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#FDEEA5
  • terminal.background#FFFFFF
  • terminal.foreground#000000
  • titleBar.activeBackground#F8ECF3
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#FCF3F7
  • titleBar.inactiveForeground#000000
  • widget.shadow#86507455

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#785E78italic
string, constant.other.symbol, string.regexp, string.template#3A8188
constant.character.escape#F8E277
constant.numeric#E25A9E
constant.language.boolean, constant.language.null, constant.language.undefined#E25A9E
constant, entity.name.constant, support.constant#A6306B
keyword, storage.type, storage.modifier, storage.type.function#E25A9E
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#A6306B
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#785E78
storage.type.class, storage.type.interface, storage.type.enum#E25A9E
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#785E78
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#478085
support.type.builtin, entity.name.type.primitive#3A8188
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#48283D
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#E25A9E
variable.parameter, variable.parameter.function#48283D
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#478085
variable, meta.definition.variable, variable.other.readwrite#48283D
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#E25A9E
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#785E78
entity.other.attribute-name, entity.other.attribute-name.html#3A8188
support.class.component, entity.name.tag.template.value#E25A9E
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#3A886E
entity.other.attribute-name.class.css, entity.other.attribute-name.class#E25A9E
entity.other.attribute-name.id.css, entity.other.attribute-name.id#E25A9E
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#3A8188
markup.heading#E25A9Ebold
markup.boldbold
markup.italicitalic
markup.quote#5D324F
markup.inline.raw, markup.fenced_code#3A8188
invalid, invalid.illegal#C22929