Espresso theme
Publisher: VitaliyThemes in package: 2
Espresso light and dark themes for Visual Studio Code
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#373F4B
- activityBar.dropBackground#241628
- activityBar.foreground#edeef0
- activityBarBadge.background#dde46c
- activityBarBadge.foreground#152849
- badge.background#dde46c
- badge.foreground#373F4b
- button.background#B7D064
- button.foreground#677392
- button.hoverBackground#dde46c
- debugExceptionWidget.background#ffe1a3
- debugExceptionWidget.border#c06a83
- debugToolBar.background#152844
- diffEditor.insertedTextBackground#373F49
- diffEditor.insertedTextBorder#B7D06f
- diffEditor.removedTextBackground#103659
- diffEditor.removedTextBorder#d2461e
- dropdown.background#373F4B
- dropdown.border#edeef4
- dropdown.foreground#fffae3
- editor.background#272C35
- editor.findMatchBackground#373F4b
- editor.findMatchHighlightBackground#515E70
- editor.findRangeHighlightBackground#c06a8e
- editor.foreground#fffae3
- editor.hoverHighlightBackground#515E70
- editor.inactiveSelectionBackground#10365D
- editor.lineHighlightBackground#111721
- editor.lineHighlightBorder#111721
- editor.rangeHighlightBackground#515E70
- editor.selectionBackground#373F4b
- editor.selectionHighlightBackground#515E70
- editor.wordHighlightBackground#515E70
- editor.wordHighlightStrongBackground#c06a8e
- editorBracketMatch.background#D34E24
- editorBracketMatch.border#ffe1a2
- editorCodeLens.foreground#dde46c
- editorCursor.foreground#b7d064
- editorError.foreground#F16950
- editorGroup.background#fffae2
- editorGroup.border#515E70
- editorGroupHeader.noTabsBackground#373F44
- editorGroupHeader.tabsBackground#373F48
- editorGutter.addedBackground#b7d064
- editorGutter.background#272C35
- editorGutter.deletedBackground#DA4167
- editorGutter.modifiedBackground#ffe1a3
- editorHoverWidget.background#373F4b
- editorHoverWidget.border#dde46c
- editorIndentGuide.background#373F4b
- editorLineNumber.foreground#9da3a4
- editorLink.activeForeground#BBDB9B
- editorMarkerNavigation.background#c06a8e
- editorMarkerNavigationError.background#e66a12
- editorMarkerNavigationWarning.background#c06a8e
- editorRuler.foreground#dde46c
- editorSuggestWidget.background#373F48
- editorSuggestWidget.border#373F48
- editorSuggestWidget.foreground#dde46c
- editorSuggestWidget.highlightForeground#dde46c
- editorSuggestWidget.selectedBackground#10365D
- editorWhitespace.foreground#373F48
- editorWidget.background#515E70
- extensionButton.prominentBackground#dde46c
- extensionButton.prominentForeground#061626
- extensionButton.prominentHoverBackground#B7D064
- focusBorder#D9EB52
- foreground#fffae3
- gitDecoration.conflictingResourceForeground#F16950
- gitDecoration.deletedResourceForeground#F16950
- gitDecoration.ignoredResourceForeground#F4F1BB
- gitDecoration.modifiedResourceForeground#B7D064
- gitDecoration.untrackedResourceForeground#dde46c
- input.background#152844
- input.border#D9EB52
- input.foreground#fffae3
- inputOption.activeBorder#D9EB52
- inputValidation.errorBackground#fffae3
- inputValidation.errorBorder#e66a18
- inputValidation.infoBackground#677392
- inputValidation.infoBorder#c06a8e
- inputValidation.warningBackground#e66a18
- inputValidation.warningBorder#ffe1a2
- list.activeSelectionBackground#272C35
- list.activeSelectionForeground#dde46c
- list.dropBackground#dde46c
- list.focusBackground#272C35
- list.focusForeground#B7D06f
- list.highlightForeground#dde46c
- list.hoverBackground#272C35
- list.hoverForeground#dde46c
- list.inactiveSelectionBackground#272C35
- list.inactiveSelectionForeground#dde46c
- notificationCenter.border#fffae9
- notificationCenterHeader.background#373F4B
- notificationCenterHeader.foreground#B7D064
- notificationLink.foreground#677392
- notifications.background#dde46c
- notifications.border#fffae9
- notifications.foreground#061626
- notificationToast.border#fffae9
- panel.background#373F4b
- panel.border#373F4b
- panelTitle.activeBorder#D9EB52
- panelTitle.activeForeground#D9EB52
- panelTitle.inactiveForeground#F0F2DC
- peekView.border#373F4b
- peekViewEditor.background#373F4b
- peekViewEditor.matchHighlightBackground#152844
- peekViewResult.background#373f4b
- peekViewResult.fileForeground#F16950
- peekViewResult.lineForeground#677392
- peekViewResult.matchHighlightBackground#152844
- peekViewResult.selectionBackground#2E353F
- peekViewResult.selectionForeground#ffe1a2
- peekViewTitle.background#373F4b
- peekViewTitleDescription.foreground#dde46c
- peekViewTitleLabel.foreground#ffe1a2
- pickerGroup.border#F4F1BB
- pickerGroup.foreground#dde46c
- progressBar.background#D9EB52
- scrollbar.shadow#061626
- scrollbarSlider.activeBackground#ffe1a399
- scrollbarSlider.background#515e7099
- scrollbarSlider.hoverBackground#dde46c99
- sideBar.background#373F4B
- sideBar.foreground#fffae3
- sideBarSectionHeader.background#2E353F
- sideBarSectionHeader.foreground#dde46c
- sideBarTitle.foreground#dde46c
- statusBar.background#373F4B
- statusBar.debuggingBackground#B7D064
- statusBar.foreground#fffae3
- statusBar.noFolderBackground#373F4B
- statusBarItem.activeBackground#dde46c
- statusBarItem.hoverBackground#061626
- statusBarItem.prominentBackground#fff
- statusBarItem.prominentHoverBackground#B7D06f
- tab.activeBackground#272C35
- tab.activeForeground#D9EB52
- tab.border#2E353F
- tab.inactiveBackground#2E353F
- tab.inactiveForeground#fff
- terminal.ansiBlack#fff
- terminal.ansiBlue#fff
- terminal.ansiBrightBlack#fff
- terminal.ansiBrightBlue#fff
- terminal.ansiBrightCyan#fff
- terminal.ansiBrightGreen#dde46c
- terminal.ansiBrightRed#ed3b69
- terminal.ansiBrightWhite#fff
- terminal.ansiBrightYellow#fffae9
- terminal.ansiCyan#fff
- terminal.ansiGreen#B7D064
- terminal.ansiRed#F16950
- terminal.ansiWhite#fff
- terminal.ansiYellow#ffe1a3
- terminal.background#373F4b
- terminal.foreground#fffae2
- terminalCursor.background#111721
- terminalCursor.foreground#dde46c
- titleBar.activeBackground#373F4b
- titleBar.activeForeground#D9EB52
- titleBar.inactiveBackground#dde46c
- titleBar.inactiveForeground#373F4b
- walkThrough.embeddedEditorBackground#373f4b
- welcomePage.buttonBackground#515e70
- welcomePage.buttonHoverBackground#10365D
- widget.shadow#272C35
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| string.quoted | #d1df5c | — |
| — | #6688cc | — |
| comment | #B7D06c | italic |
| string | #d1df5c | — |
| string.interpolated.single | #d1df5c | — |
| constant.numeric | #ed3b60 | — |
| constant.language | #ed3b60 | — |
| constant.character, constant.other | #ed3b60 | — |
| variable | — | |
| keyword | #ff3853 | — |
| storage | #225588 | |
| storage.type | #FFCC00 | italic |
| entity.name.class, entity.name.type | #FFCC00 | bold |
| entity.other.inherited-class | #ddbb88 | italic underline |
| entity.name.function | #FFCE80 | italic |
| variable.parameter | #2277ff | italic |
| entity.name.tag | #D33860 | |
| entity.other.attribute-name | #DA2710 | — |
| support.function | #FFCC00 | |
| support.constant | #FFCC00 | |
| support.type, support.class | #FFCC00 | italic |
| support.type.property-name | #FFCE80 | — |
| invalid | #F8F8F0 | — |
| meta.diff, meta.diff.header | #E0EDDD | italic |
| markup.deleted | #dc322f | — |
| markup.changed | #cb4b16 | — |
| markup.inserted | #219186 | — |
| variable.parameter | #e66a18 | — |
| markup.quote | #B7D06c | — |
| markup.bold, markup.italic | #B7D06c | — |
| markup.inline.raw | #c06a8f | — |
| markup.heading.setext | #ED6A5A | — |
| entity.other.attribute-name.class | #ed3b6F | — |
| entity.other.attribute-name.id | #ed3b6F | — |
| source.css entity.name.tag | #B7D065 | — |
| support.constant.property-value.css | #D33860 | — |
| support.type.property-name.css | #FFCE80 | — |
| entity.name.tag.custom.css | #FFCE80 | — |
| source.json support.type.property-name.json | #FFCE80 | — |
| invalid | #F16950 | — |
| punctuation.definition.tag.html | #F16950 | — |
| punctuation.definition.tag.begin.html | #F16950 | — |
| punctuation.definition.tag.end.html | #F16950 | — |
| entity.other.attribute-name.html | #F26B7A | — |
| entity.name.tag.other.html | #FFCE80 | — |
| entity.name.tag.block.any.html | #FFCE80 | — |
| entity.name.tag.structure.any.html | #FFCE80 | — |
| entity.name.tag.inline.any.html | #FFCE80 | — |
| meta.tag.inline.any.html | #ffe1a2 | — |
| meta.tag.other.html | #ffe1a2 | — |
| keyword.other.import.dart | #ed3b69 | — |
| storage.type.annotation.dart | #ffe1a2 | normal |
| variable.parameter.dart | #ed3b69 | — |
| storage.modifier.dart | #ed3b69 | — |
| storage.type.primitive.dart | #ed3b69 | — |
| support.class.dart | #FFCE80 | — |
| punctuation.other.bracket.curly.go | #ed3b6B | — |
| constant.other.placeholder.go | #BBDB9B | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...