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.activeBackground#EF95A4
- activityBar.background#EA7588
- activityBarBadge.background#8A5C99
- badge.background#ECC5B4
- badge.foreground#40262F
- button.background#ECC5B4
- button.foreground#40262F
- button.hoverBackground#EB998D
- debugIcon.continueForeground#EF95A4
- debugIcon.disconnectForeground#EF95A4
- debugIcon.pauseForeground#EF95A4
- debugIcon.restartForeground#95E279
- debugIcon.startForeground#EF95A4
- debugIcon.stepBackForeground#EF95A4
- debugIcon.stepIntoForeground#EF95A4
- debugIcon.stepOutForeground#EF95A4
- debugIcon.stepOverForeground#EF95A4
- debugIcon.stopForeground#e07977f5
- dropdown.background#f5f5f5
- dropdown.border#ECC5B4
- dropdown.foreground#40262F
- dropdown.listBackground#f5f5f5
- editor.background#ffffff
- editor.findMatchBackground#EF95A4
- editor.findMatchHighlightBackground#EB998D
- editor.findRangeHighlightBackground#D2BFD9
- editor.foreground#331E26
- editor.hoverHighlightBackground#D2BFD9
- editor.lineHighlightBackground#FCEDF0
- editor.rangeHighlightBackground#FADCE1
- editor.selectionBackground#F7CAD1
- editor.selectionHighlightBackground#FADCE1
- editor.wordHighlightBackground#D2BFD9
- editor.wordHighlightStrongBackground#EF95A4
- editorBracketMatch.background#F7CAD1
- editorCursor.foreground#EA7588
- editorError.foreground#E23C57
- editorLineNumber.foreground#ECC5B4
- editorLink.activeForeground#EA7588
- editorOverviewRuler.background#FCEDF0
- editorSuggestWidget.highlightForeground#EB998D
- editorWarning.foreground#8A5C99
- focusBorder#EF95A4
- foreground#40262F
- gitDecoration.addedResourceForeground#95E279
- gitDecoration.conflictingResourceForeground#DA462F
- gitDecoration.deletedResourceForeground#E23C57
- gitDecoration.modifiedResourceForeground#E37463
- gitDecoration.untrackedResourceForeground#BDEDAB
- icon.foreground#EF95A4
- list.activeSelectionBackground#814B5E
- list.activeSelectionForeground#f5f5f5
- list.dropBackground#2D2B55
- list.errorForeground#E23C57
- list.focusBackground#744455
- list.focusForeground#f5f5f5
- list.highlightForeground#B899C2
- list.hoverBackground#744455
- list.hoverForeground#f5f5f5
- list.inactiveSelectionBackground#814B5E
- list.inactiveSelectionForeground#f5f5f5
- peekView.border#814B5E
- peekViewEditor.background#f5f5f5
- peekViewEditor.matchHighlightBackground#EF95A4
- peekViewResult.matchHighlightBackground#EB998D
- peekViewResult.selectionBackground#814B5E
- peekViewResult.selectionForeground#f5f5f5
- peekViewTitle.background#814B5E
- peekViewTitleDescription.foreground#f5f5f5
- peekViewTitleLabel.foreground#f5f5f5
- progressBar.background#EA7588
- scrollbar.shadow#FADCE1
- scrollbarSlider.activeBackground#EF95A4
- scrollbarSlider.background#FADCE1
- scrollbarSlider.hoverBackground#EF95A4
- selection.background#ECC5B4
- sideBar.background#5C3643
- sideBar.border#f5f5f5
- sideBar.foreground#f5f5f5
- sideBarSectionHeader.background#4D2D38
- statusBar.background#A781B4
- statusBar.debuggingBackground#B899C2
- terminal.ansiBlack#000000
- terminal.ansiBlue#508FFF
- terminal.ansiBrightBlack#5C5C61
- terminal.ansiBrightBlue#508FFF
- terminal.ansiBrightCyan#E37463
- terminal.ansiBrightGreen#9CFF6A
- terminal.ansiBrightMagenta#A781B4
- terminal.ansiBrightRed#E23C57
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#EF95A4
- terminal.ansiCyan#A781B4
- terminal.ansiGreen#95E279
- terminal.ansiMagenta#EC79BA
- terminal.ansiRed#DC6F83
- terminal.ansiWhite#FFFFFF
- terminal.ansiYellow#EF95A4
- terminal.background#ffffff
- terminal.foreground#331E26
- terminal.selectionBackground#f7cad160
- terminalCursor.background#EF95A4
- terminalCursor.foreground#EF95A4
- textLink.foreground#A781B4
- titleBar.activeBackground#5C3643
- titleBar.activeForeground#f5f5f5
- titleBar.inactiveBackground#40262F
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #a781b480 | italic bold |
| comment.block.preprocessor | #a781b480 | |
| comment.documentation, comment.block.documentation | #448C27 | — |
| invalid.illegal | #E23C57 | — |
| keyword.operator | #ECC5B4 | — |
| keyword, storage | #B899C2 | — |
| storage.type, support.type | #EA7588 | — |
| constant.language, support.constant, variable.language | #EB998D | — |
| variable, support.variable | #EA7588 | — |
| entity.name.function, support.function | #A781B4 | bold |
| entity.name.type, entity.other.inherited-class, support.class | #EA7588 | bold |
| entity.name.exception | #1fe429 | — |
| entity.name.section | — | bold |
| constant.numeric, constant.character, constant | #EB998D | — |
| string | #F2A6B3 | — |
| constant.character.escape | #ECC5B4 | — |
| string.regexp | #EB998D | — |
| constant.other.symbol | #EB998D | — |
| punctuation | #ECC5B4 | — |
| 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 | #ECC5B4 | — |
| entity.name.tag | #EB998D | — |
| meta.tag entity.other.attribute-name, entity.other.attribute-name.html | #A781B4 | italic |
| constant.character.entity, punctuation.definition.entity | #EB998D | — |
| meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css, punctuation.definition.entity, entity.name.tag.reference | #EB998D | bold |
| entity.other.attribute-name.class | #EA7588 | bold |
| entity.other.attribute-name.id | #A781B4 | bold |
| meta.property-name, support.type.property-name | #EB998D | — |
| meta.property-value, meta.property-value constant.other, support.constant.property-value | #A781B4 | — |
| keyword.other.important | — | bold |
| markup.changed | #000000 | — |
| markup.deleted | #000000 | — |
| markup.italic | — | italic |
| markup.error | #E23C57 | — |
| markup.inserted | #000000 | — |
| meta.link | #EB998D | — |
| markup.output, markup.raw | #ECC5B4 | — |
| markup.prompt | #ECC5B4 | — |
| markup.heading | #A781B4 | — |
| markup.bold | — | bold |
| markup.traceback | #E23C57 | — |
| markup.underline | — | underline |
| markup.quote | #EA7588 | — |
| markup.list | #EB998D | — |
| markup.bold, markup.italic | #EA7588 | — |
| markup.inline.raw | #EB998D | |
| meta.diff.range, meta.diff.index, meta.separator | #434343 | — |
| meta.diff.header.from-file | #434343 | — |
| meta.diff.header.to-file | #434343 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...