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#ce6345
- activityBar.background#151515
- activityBar.foreground#f2f0b8
- badge.background#ce6345
- badge.foreground#fdf4c1
- breadcrumb.foreground#f2f0b8
- dropdown.foreground#fdf4c1
- editor.background#151515
- editor.findMatchBackground#ce6345
- editor.foreground#f2f0b8
- editor.inactiveSelectionBackground#000000
- editor.lineHighlightBackground#000000
- editor.selectionBackground#735b5bf7
- editorCodeLens.foreground#d9ff00
- editorCursor.foreground#fde08c
- editorSuggestWidget.background#ce6345
- editorSuggestWidget.foreground#f2f0b8
- editorSuggestWidget.highlightForeground#66999d
- editorSuggestWidget.selectedBackground#232c2b
- editorWhitespace.foreground#000000
- editorWidget.background#64625d
- editorWidget.foreground#f2f0b8
- list.activeSelectionBackground#ce6345
- list.hoverBackground#ce6345
- list.inactiveSelectionBackground#ce6345
- list.inactiveSelectionForeground#fdf4c1
- menu.background#ce6345
- menu.foreground#f2f0b8
- menu.selectionBackground#ce6345
- menubar.selectionBackground#ce6345
- panel.background#151515
- panelInput.border#f2f0b8
- panelTitle.activeForeground#fdf4c1
- scrollbarSlider.hoverBackground#ce6345
- selection.background#ce6345
- settings.checkboxForeground#14d18f
- settings.headerForeground#fdf4c1
- settings.numberInputForeground#14d18f
- settings.textInputForeground#fdf4c1
- sideBar.background#151515
- sideBar.foreground#f2f0b8
- sideBarSectionHeader.background#000000
- sideBarTitle.foreground#2c7547
- statusBar.background#ce6345
- statusBar.foreground#fdf4c1
- statusBarItem.hoverBackground#ce6345
- tab.activeBackground#ce6345
- tab.activeForeground#fdf4c1
- tab.hoverBackground#ce6345
- tab.inactiveBackground#0e0c0c
- terminal.ansiBlack#fdf4c1
- terminal.ansiBlue#64625d
- terminal.ansiGreen#ce6345
- terminal.ansiWhite#66999d
- terminal.ansiYellow#9b3a3a
- terminal.foreground#8accc0
- welcomePage.background#000000
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 | — |
| string | #7EC669 | — |
| meta.embedded.assembly | #7EC669 | — |
| token.info-token | #6796E6 | — |
| token.warn-token | #CD9731 | — |
| token.error-token | #F44747 | — |
| token.debug-token | #B267E6 | — |
| entity.name.function | #D7875E | — |
| storage.type.js | #D7875E | — |
| string.template | #E4E188 | — |
| support.type.property-name | #D7875E | — |
| constant.numeric | #FFD7AE | bold |
| storage.type | #AF875E | — |
| keyword.operator | #C97449 | — |
| keyword.control | #D75E00 | — |
| meta.object.member | #FFD65E | — |
| entity.name.tag | #D7875E | — |
| punctuation.definition.string | #DF5B38 | — |
| comment | #FFFFFF | — |
| support.class | #47D5DA | — |
| meta.template.expression | #47D5DA | — |
| entity.other.attribute-name.js.jsx | #D7875E | — |
| entity.name.tag.js.jsx | #D7875E | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...