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#F2E7ED
  • activityBar.foreground#FF7AB3
  • activityBarBadge.background#FF7AB3
  • badge.background#FC7AA8
  • button.background#FF7AB3
  • button.hoverBackground#FF678D
  • dropdown.background#F5F5F5
  • editor.background#f5f5f5
  • editor.findMatchBackground#F3D5B9
  • editor.findMatchHighlightBackground#FBE0C599
  • editor.lineHighlightBackground#EDE8FD
  • editor.selectionBackground#D6D1E8
  • editorCursor.foreground#54494B
  • editorGroup.dropBackground#ebdeee88
  • editorIndentGuide.activeBackground#9F7B83b0
  • editorIndentGuide.background#9F7B8360
  • editorLineNumber.activeForeground#C46B81
  • editorLineNumber.foreground#736A6D
  • editorWhitespace.foreground#AAAAAA
  • errorForeground#f1897f
  • focusBorder#9D3C5E
  • inputOption.activeBorder#adafb7
  • inputValidation.errorBackground#ffeaea
  • inputValidation.errorBorder#f1897f
  • inputValidation.infoBackground#f2fcff
  • inputValidation.infoBorder#7DA5B4
  • inputValidation.warningBackground#fffee2
  • inputValidation.warningBorder#ffe055
  • list.activeSelectionBackground#F1DDE9
  • list.activeSelectionForeground#736A6D
  • list.dropBackground#e3c8f5
  • list.highlightForeground#F58BB2
  • list.hoverBackground#DDDCDA
  • list.inactiveSelectionBackground#FFB8CA
  • minimap.selectionHighlight#D6D1E8b4
  • panel.background#F5F5F5
  • peekView.border#FF7AB3
  • peekViewEditor.background#F2F8FC
  • peekViewEditor.matchHighlightBackground#C2DFE3
  • peekViewResult.background#F2F8FC
  • peekViewResult.matchHighlightBackground#93C6D6
  • peekViewTitle.background#F2F8FC
  • pickerGroup.border#E27092
  • pickerGroup.foreground#9D3C5E
  • progressBar.background#FF7AB3
  • quickInputList.focusBackground#EDE8FC
  • selection.background#F0DCE3
  • sideBar.background#f5f0f3
  • sideBarSectionHeader.background#F5E3EF
  • statusBar.background#FF7AB3
  • statusBar.debuggingBackground#FF7AB3
  • statusBar.noFolderBackground#FF7AB3
  • statusBarItem.remoteBackground#8C1A4A
  • tab.lastPinnedBorder#ebdeee
  • titleBar.activeBackground#F5BEDB
  • titleBar.activeForeground#736A6D
  • walkThrough.embeddedEditorBackground#00000014

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#BA9AB9italic
comment.block.preprocessor#BA9AB9
comment.documentation, comment.block.documentation#1F6E89
invalid#D2304B
invalid.illegal#44132D
keyword.operator#777777
keyword, storage#E17092
storage.type, support.type#9466AA
constant.language, support.constant, variable.language#B08B35
variable, support.variable#9466AA
entity.name.function, support.function#9D3C5Ebold
entity.name.type, entity.other.inherited-class, support.class#9466AAbold
entity.name.exception#44132D
entity.name.sectionbold
constant.numeric, constant.character, constant#B08B35
string#1F6E89
constant.character.escape#777777
string.regexp#E17092
constant.other.symbol#B08B35
punctuation#777777
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#AAAAAA
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#91B3E0
entity.name.tag#E17092
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#8190A0italic
constant.character.entity, punctuation.definition.entity#B08B35
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#9466AA
meta.property-name, support.type.property-name#B08B35
meta.property-value, meta.property-value constant.other, support.constant.property-value#1F6E89
keyword.other.importantbold
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#44132D
markup.inserted#000000
meta.link#E17092
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#9D3C5E
markup.boldbold
markup.traceback#44132D
markup.underlineunderline
markup.quote#9466AA
markup.list#E17092
markup.bold, markup.italic#1F6E89
markup.inline.raw#B08B35
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343
markup.deleted.diff#C73D20
markup.changed.diff#B08B35
markup.inserted.diff#1F6E89
punctuation.definition.tag.js, punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js#91B3E0
meta.jsx.children.js#333333ff

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...