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#085f61
- activityBar.background#0f0f0f
- activityBar.foreground#f4647d
- badge.background#085f61
- badge.foreground#fd839b
- breadcrumb.foreground#fd839b
- dropdown.foreground#fd839b
- editor.background#0f0f0f
- editor.findMatchBackground#085f61
- editor.foreground#fd839b
- editor.inactiveSelectionBackground#0f0f0f
- editor.lineHighlightBackground#0f0f0f
- editor.selectionBackground#735b5bf7
- editorCodeLens.foreground#d9ff00
- editorCursor.foreground#fde08c
- editorSuggestWidget.background#085f61
- editorSuggestWidget.foreground#fd839b
- editorSuggestWidget.highlightForeground#66999d
- editorSuggestWidget.selectedBackground#232c2b
- editorWhitespace.foreground#0f0f0f
- editorWidget.background#64625d
- editorWidget.foreground#fd839b
- list.activeSelectionBackground#085f61
- list.hoverBackground#085f61
- list.inactiveSelectionBackground#085f61
- list.inactiveSelectionForeground#fd839b
- menu.background#085f61
- menu.foreground#fd839b
- menu.selectionBackground#085f61
- menubar.selectionBackground#085f61
- panel.background#080808
- panelInput.border#fd839b
- panelTitle.activeForeground#fd839b
- scrollbarSlider.hoverBackground#085f61
- selection.background#085f61
- settings.checkboxForeground#14d18f
- settings.headerForeground#fd839b
- settings.numberInputForeground#14d18f
- settings.textInputForeground#fd839b
- sideBar.background#0f0f0f
- sideBar.foreground#f3758a
- sideBarSectionHeader.background#0f0f0f
- sideBarTitle.foreground#085f61
- statusBar.background#085f61
- statusBar.foreground#fa647d
- statusBarItem.hoverBackground#085f61
- tab.activeBackground#085f61
- tab.activeForeground#fd839b
- tab.hoverBackground#085f61
- tab.inactiveBackground#0f0f0f
- tab.inactiveForeground#14d18f
- terminal.ansiBlack#fd839b
- terminal.ansiBlue#64625d
- terminal.ansiGreen#085f61
- 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 | normal |
| 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 | #000000 | — |
| punctuation.separator.key-value | #DD6C41 | — |
| meta.object | #CCC04F | — |
| meta.tag.attributes.js | #D85656 | — |
| entity.other.attribute-name.js.jsx | #8ACCC0 | — |
| entity.other.attribute-name | #8ACCC0 | — |
| variable.language.this.js.jsx | #66999D | — |
| variable.other.object.js | #77A598 | — |
| entity.name.tag.js.jsx | — | — |
| support.class.component.js.jsx | — | italic |
| entity.name.function | #C9D184 | — |
| string | #99CC99 | — |
| constant.numeric | #ECB4AE | bold |
| token.info-token | #6796E6 | — |
| token.warn-token | #CD9731 | — |
| token.error-token | #F44747 | — |
| token.debug-token | #B267E6 | — |
| string | #14D18F | — |
| constant.numeric | #99CC99 | bold |
| entity.name.function | #A3EBD0 | — |
| support.function | #A3EBD0 | — |
| entity.name.tag | #FDF4C1 | — |
| entity.other.attribute-name | #C56B63 | — |
| keyword.control | #FFF1B9 | — |
| string | #43F9CC | — |
| keyword.operator | #FFF1B9 | — |
| variable | #FD839B | — |
| support.type | #539394 | — |
| meta.object.member | #83A598 | — |
| storage.type | #FFD2A7 | — |
| support.class.component | #69F2C9 | italic |
| support.class | #A6DEC7 | bold |
| meta.tag | #CEE521 | — |
| entity.name.type | #FDF4C1 | — |
| constant.numeric | #CEE521 | bold |
| support.type.property-name.css | #FA647D | — |
| meta.property-value.scss | #43F9CC | — |
| entity.other.attribute-name.class.css | #B4DD41 | bold |
| meta.property-value support.constant.property-value.css | #43F9CC | — |
| keyword | #B4DD41 | — |
| source entity.name.tag | #B4DD41 | — |
| source entity.other.attribute-name | #43F9CC | — |
| variable | #FA647D | — |
| string | #14D18F | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...