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#F9F5F7
  • activityBar.border#E9E2E9
  • activityBar.foreground#AF7994
  • activityBarBadge.background#AF7994
  • activityBarBadge.foreground#FFFFFF
  • badge.background#AF7994
  • badge.foreground#FFFFFF
  • button.background#AF7994
  • button.foreground#FFFFFF
  • button.hoverBackground#C18BA6
  • dropdown.background#FDFCFC
  • dropdown.border#DED3DB
  • dropdown.foreground#504158
  • editor.background#FFFFFF
  • editor.foreground#5D4F64
  • editor.lineHighlightBackground#F9F5F7CC
  • editor.selectionBackground#EEEAF666
  • editorBracketMatch.background#EEEAF655
  • editorBracketMatch.border#AF7994
  • editorCursor.foreground#AF7994
  • editorGroupHeader.tabsBackground#F9F5F7
  • editorIndentGuide.activeBackground#DED3DB
  • editorIndentGuide.background#E9E2E988
  • editorLineNumber.activeForeground#736284
  • editorLineNumber.foreground#8E7B8EAA
  • editorWhitespace.foreground#E9E2E966
  • focusBorder#DED3DB
  • foreground#5D4F64
  • gitDecoration.deletedResourceForeground#B94B63
  • gitDecoration.modifiedResourceForeground#9A7109
  • gitDecoration.untrackedResourceForeground#496E58
  • input.background#FDFCFC
  • input.border#DED3DB
  • input.foreground#504158
  • inputOption.activeBorder#AF7994
  • list.activeSelectionBackground#EEEAF6
  • list.activeSelectionForeground#5D4F64
  • list.focusOutline#AF7994
  • list.hoverBackground#FDFCFC
  • list.inactiveSelectionBackground#F1EEF7
  • minimap.selectionHighlight#EEEAF6AA
  • panel.background#F9F5F7
  • panel.border#E9E2E9
  • peekView.border#DED3DB
  • peekViewEditor.background#FAF4F7
  • peekViewTitle.background#F9F5F7
  • scrollbarSlider.activeBackground#AF7994AA
  • scrollbarSlider.background#DED3DB66
  • scrollbarSlider.hoverBackground#DED3DB99
  • sideBar.background#FBF8F9
  • sideBar.border#E9E2E9
  • sideBar.foreground#4F4455
  • sideBarTitle.foreground#5D4F64
  • statusBar.background#F9F5F7
  • statusBar.border#E9E2E9
  • statusBar.foreground#795E88
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#5D4F64
  • tab.border#E9E2E9
  • tab.inactiveBackground#F1EEF7
  • tab.inactiveForeground#7A6293
  • terminal.ansiBlack#5D4F64
  • terminal.ansiBlue#7A6293
  • terminal.ansiCyan#8E7B8E
  • terminal.ansiGreen#736284
  • terminal.ansiMagenta#D4E0ED
  • terminal.ansiRed#AF7994
  • terminal.ansiWhite#5D4F64
  • terminal.ansiYellow#F7E8F0
  • terminal.background#FFFFFF
  • terminal.foreground#5D4F64
  • titleBar.activeBackground#F9F5F7
  • titleBar.activeForeground#5D4F64
  • titleBar.inactiveBackground#FBF8F9
  • titleBar.inactiveForeground#8E7B8E
  • widget.shadow#7E587E55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#8D7E91italic
string, constant.other.symbol, string.regexp, string.template#5D6C83
constant.character.escape#597997
constant.numeric#9A6A89
constant.language.boolean, constant.language.null, constant.language.undefined#8C5F7B
constant, entity.name.constant, support.constant#5A4068
keyword, storage.type, storage.modifier, storage.type.function#AF7994
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#9F5B81
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#796A81
storage.type.class, storage.type.interface, storage.type.enum#AF7994
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#998E9F
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#6E5A81
support.type.builtin, entity.name.type.primitive#7C6892
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#6A577F
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#B87A9C
variable.parameter, variable.parameter.function#5B4E65
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#7A628D
variable, meta.definition.variable, variable.other.readwrite#3D3248
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#AF7994
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#8D7E91
entity.other.attribute-name, entity.other.attribute-name.html#6E5A81
support.class.component, entity.name.tag.template.value#9A6A89
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#5C7A6E
entity.other.attribute-name.class.css, entity.other.attribute-name.class#9A6A89
entity.other.attribute-name.id.css, entity.other.attribute-name.id#AF7994
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#6E5A81
markup.heading#AF7994bold
markup.boldbold
markup.italicitalic
markup.quote#3D3248
markup.inline.raw, markup.fenced_code#5D6C83
invalid, invalid.illegal#C22929