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.activeBackground#194d2c
- activityBar.background#0f0f0f
- activityBar.foreground#fdf4c1
- badge.background#194d2c
- badge.foreground#fdf4c1
- breadcrumb.foreground#fdf4c1
- dropdown.foreground#fdf4c1
- editor.background#151515
- editor.findMatchBackground#194d2c
- editor.foreground#fdf4c1
- editor.inactiveSelectionBackground#0f0f0f
- editor.lineHighlightBackground#0f0f0f
- editor.selectionBackground#735b5bf7
- editorBracketHighlight.foreground5#3ff1e3
- editorCodeLens.foreground#d9ff00
- editorCursor.foreground#fde08c
- editorSuggestWidget.background#194d2c
- editorSuggestWidget.foreground#fdf4c1
- editorSuggestWidget.highlightForeground#66999d
- editorSuggestWidget.selectedBackground#232c2b
- editorWhitespace.foreground#0f0f0f
- editorWidget.background#64625d
- editorWidget.foreground#fdf4c1
- list.activeSelectionBackground#194d2c
- list.hoverBackground#194d2c
- list.inactiveSelectionBackground#194d2c
- list.inactiveSelectionForeground#fdf4c1
- menu.background#194d2c
- menu.foreground#fdf4c1
- menu.selectionBackground#194d2c
- menubar.selectionBackground#194d2c
- panel.background#0f0f0f
- panelInput.border#fdf4c1
- panelTitle.activeForeground#fdf4c1
- scrollbarSlider.hoverBackground#194d2c
- selection.background#194d2c
- settings.checkboxForeground#14d18f
- settings.headerForeground#fdf4c1
- settings.numberInputForeground#14d18f
- settings.textInputForeground#fdf4c1
- sideBar.background#151515
- sideBar.foreground#fdf4c1
- sideBarSectionHeader.background#0f0f0f
- sideBarTitle.foreground#194d2c
- statusBar.background#194d2c
- statusBar.foreground#fdf4c1
- statusBarItem.hoverBackground#194d2c
- tab.activeBackground#194d2c
- tab.activeForeground#fdf4c1
- tab.hoverBackground#194d2c
- tab.inactiveBackground#0f0f0f
- terminal.ansiBlack#fdf4c1
- terminal.ansiBlue#64625d
- terminal.ansiGreen#194d2c
- terminal.ansiWhite#66999d
- terminal.ansiYellow#9b3a3a
- terminal.foreground#8accc0
- welcomePage.background#0f0f0f
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment | #C48888 | |
| entity | #A88D6A | |
| keyword | #DD6C41 | |
| keyword.control | #DD6C41 | — |
| keyword.operator | #DD6F48 | — |
| entity.name.type | #FFA66B | underline |
| support | #FE801F | — |
| storage | #66999D | — |
| storage.modifier | #66CCFF | — |
| constant | #EFF4C1 | — |
| string | #14D18F | — |
| constant.numeric | #D3869B | bold |
| punctuation | — | — |
| variable | #FDF4C1 | — |
| invalid.deprecated | #D3869B | italic underline |
| invalid.illegal | #D3869B | — |
| text source | — | |
| entity.other.inherited-class | #9B5C2E | italic |
| source string source | #FDF4C1 | — |
| source string source punctuation.section.embedded | #00A0A0 | |
| string constant | #269E9E | |
| string.regexp | #E9C062 | — |
| string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition | #FF8000 | |
| string.regexp.group | #BD9C4F | |
| string.regexp.character-class | #B18A3D | |
| string variable | #77A598 | |
| support.function | #DAD085 | |
| support.constant | #FFD2A7 | |
| meta.preprocessor.c | #8996A8 | — |
| meta.preprocessor.c keyword | #AFC4DB | |
| meta.cast | #676767 | italic |
| meta.sgml.html meta.doctype, meta.sgml.html meta.doctype entity, meta.sgml.html meta.doctype string, meta.xml-processing, meta.xml-processing entity, meta.xml-processing string | #494949 | — |
| meta.tag entity | #DD6C41 | normal |
| source entity.name.tag, source entity.other.attribute-name, meta.tag.inline entity | #DD6C41 | — |
| entity.other.attribute-name | #AAAAAA | |
| entity.name.tag.namespace, entity.other.attribute-name.namespace | #E18964 | |
| meta.selector.css entity.name.tag | #66CCFF | underline |
| meta.selector.css entity.other.attribute-name.tag.pseudo-class | #8F9D6A | |
| meta.selector.css entity.other.attribute-name.id | #83A598 | |
| meta.selector.css entity.other.attribute-name.class | #83A598 | |
| support.type.property-name.css,tag | #FDF4C1 | — |
| meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css | #DD6C41 | — |
| meta.preprocessor.at-rule keyword.control.at-rule | #8693A5 | — |
| meta.property-value support.constant.named-color.css, meta.property-value constant | #87C38A | — |
| meta.constructor.argument.css | #8F9D6A | — |
| meta.diff, meta.diff.header | #F8F8F8 | italic |
| markup.deleted | #F8F8F8 | — |
| markup.changed | #F8F8F8 | — |
| markup.inserted | #F8F8F8 | — |
| markup.italic | #E9C062 | italic |
| markup.bold | #E9C062 | bold |
| markup.underline | #E18964 | underline |
| markup.quote | #E1D4B9 | italic |
| markup.heading, markup.heading entity | #FEDCC5 | |
| markup.list | #E1D4B9 | — |
| markup.raw | #578BB3 | |
| markup comment | — | italic |
| meta.separator | #60A633 | — |
| meta.line.entry.logfile, meta.line.exit.logfile | — | — |
| meta.line.error.logfile | — | — |
| sideBar.background | #111 | — |
| string | #7EC669 | — |
| meta.embedded.assembly | #7EC669 | — |
| token.info-token | #6796E6 | — |
| token.warn-token | #CD9731 | — |
| token.error-token | #F44747 | — |
| token.debug-token | #B267E6 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...