Earl Grey
Publisher: Earl GreyThemes in package: 1
A gentle color scheme, for code
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#F0EBED
- activityBar.activeBorder#83577D
- activityBar.background#F7F3EE
- activityBar.border#F7F3EE
- activityBar.dropBorder#DDDBD8
- activityBar.foreground#605A52
- activityBar.inactiveForeground#9E9A95
- activityBarBadge.background#7686A9
- activityBarBadge.foreground#FCFBF9
- badge.background#DDDBD8
- badge.foreground#605A52
- banner.background#556995
- banner.foreground#FCFBF9
- banner.iconForeground#EBECEF
- breadcrumb.activeSelectionForeground#83577D
- breadcrumb.background#FCFBF9
- breadcrumb.focusForeground#706A63
- breadcrumb.foreground#8F8A84
- button.background#556995
- button.foreground#FCFBF9
- button.hoverBackground#66789F
- button.secondaryBackground#83577D
- button.secondaryForeground#F7F3EE
- button.secondaryHoverBackground#8F6789
- checkbox.background#FCFBF9
- checkbox.border#7F7A73
- checkbox.foreground#83577D
- debugExceptionWidget.background#FCFBF9
- debugExceptionWidget.border#DDDBD8
- debugToolBar.background#F7F3EE
- debugToolBar.border#F7F3EE
- descriptionForeground#605A52
- diffEditor.border#DDDBD8
- diffEditor.diagonalFill#DDDBD8
- diffEditor.insertedTextBackground#D3D5C533
- diffEditor.removedTextBackground#D0B9B633
- dropdown.background#FCFBF9
- dropdown.border#9E9A95
- dropdown.foreground#605A52
- editor.background#FCFBF9
- editor.findMatchBackground#EBECEF
- editor.findMatchBorder#55699544
- editor.findMatchHighlightBackground#55699511
- editor.findMatchHighlightBorder#55699511
- editor.findRangeHighlightBackground#55699522
- editor.foldBackground#F7F3EE
- editor.foreground#605A52
- editor.hoverHighlightBackground#5569951d
- editor.inactiveSelectionBackground#BEBBB633
- editor.lineHighlightBorder#BEBBB633
- editor.linkedEditingBackground#F7F3EE
- editor.rangeHighlightBackground#F0EBED33
- editor.rangeHighlightBorder#F0EBED33
- editor.selectionBackground#F0EBED
- editor.selectionHighlightBackground#83577D11
- editor.selectionHighlightBorder#E4DAE022
- editor.symbolHighlightBackground#83577D11
- editor.symbolHighlightBorder#83577D33
- editor.wordHighlightBackground#83577D11
- editor.wordHighlightStrongBackground#83577D11
- editor.wordHighlightStrongBorder#83577D33
- editorBracketHighlight.foreground1#9B7896
- editorBracketHighlight.foreground2#7686A9
- editorBracketHighlight.foreground3#6B9494
- editorBracketHighlight.foreground4#9F8768
- editorBracketHighlight.foreground5#8F956F
- editorBracketHighlight.foreground6#A57773
- editorBracketMatch.background#F7F3EE
- editorBracketMatch.border#DDDBD8
- editorCodeLens.foreground#9E9A95
- editorCursor.background#FCFBF9
- editorCursor.foreground#8795B3
- editorError.foreground#8F5652
- editorGhostText.foreground#BEBBB6
- editorGroup.border#CDCBC7
- editorGroup.dropBackground#CCB9C744
- editorGroup.emptyBackground#FCFBF9
- editorGroupHeader.noTabsBackground#F7F3EE
- editorGroupHeader.tabsBackground#ECEBE8
- editorGutter.addedBackground#AAAE92
- editorGutter.background#FCFBF9
- editorGutter.commentRangeForeground#7F7A73
- editorGutter.deletedBackground#C6A9A6
- editorGutter.foldingControlForeground#9E9A95
- editorGutter.modifiedBackground#A9B2C7
- editorHint.border#BEBBB6
- editorHint.foreground#7F7A73
- editorHoverWidget.background#F7F3EE
- editorHoverWidget.border#BEBBB6
- editorHoverWidget.foreground#605A52
- editorIndentGuide.activeBackground#DDDBD8
- editorIndentGuide.background#ECEBE8
- editorInfo.foreground#556995
- editorInlayHint.background#F7F3EE
- editorInlayHint.foreground#7F7A73
- editorLineNumber.activeForeground#8F8A84
- editorLineNumber.foreground#CDCBC7
- editorLink.activeForeground#556995
- editorMarkerNavigation.background#FCFBF9
- editorMarkerNavigationError.background#E6DAD8
- editorMarkerNavigationInfo.background#DBDEE5
- editorMarkerNavigationWarning.background#E5DED5
- editorOverviewRuler.addedForeground#747B4D44
- editorOverviewRuler.background#F7F3EE
- editorOverviewRuler.border#ECEBE8
- editorOverviewRuler.bracketMatchForeground#7F7A7388
- editorOverviewRuler.currentContentForeground#477A7B44
- editorOverviewRuler.deletedForeground#8F565244
- editorOverviewRuler.errorForeground#8F5652dd
- editorOverviewRuler.findMatchForeground#83577D88
- editorOverviewRuler.incomingContentForeground#55699544
- editorOverviewRuler.infoForeground#556995dd
- editorOverviewRuler.modifiedForeground#55699544
- editorOverviewRuler.rangeHighlightForeground#886A4488
- editorOverviewRuler.selectionHighlightForeground#83577D88
- editorOverviewRuler.warningForeground#886A44dd
- editorOverviewRuler.wordHighlightForeground#477A7B88
- editorOverviewRuler.wordHighlightStrongForeground#477A7B88
- editorPane.background#F7F3EE
- editorRuler.foreground#DDDBD8
- editorSuggestWidget.background#FCFBF9
- editorSuggestWidget.border#DDDBD8
- editorSuggestWidget.focusHighlightForeground#F0EBED
- editorSuggestWidget.foreground#605A52
- editorSuggestWidget.highlightForeground#9B7896
- editorSuggestWidget.selectedBackground#9B7896
- editorSuggestWidget.selectedForeground#FCFBF9
- editorSuggestWidget.selectedIconForeground#F0EBED
- editorWarning.foreground#477A7B
- editorWhitespace.foreground#BEBBB6
- editorWidget.background#FCFBF9
- editorWidget.border#DDDBD8
- editorWidget.foreground#605A52
- editorWidget.resizeBorder#CDCBC7
- errorForeground#8F5652
- focusBorder#9B7896
- foreground#605A52
- gitDecoration.addedResourceForeground#747B4D
- gitDecoration.conflictingResourceForeground#477A7B
- gitDecoration.deletedResourceForeground#8F5652
- gitDecoration.ignoredResourceForeground#886A44
- gitDecoration.modifiedResourceForeground#556995
- gitDecoration.stageDeletedResourceForeground#8F5652
- gitDecoration.stageModifiedResourceForeground#556995
- gitDecoration.submoduleResourceForeground#886A44
- gitDecoration.untrackedResourceForeground#605A52
- icon.foreground#605A52
- input.background#FCFBF9
- input.border#7F7A73
- input.foreground#605A52
- input.placeholderForeground#9E9A95
- inputOption.activeBackground#DBDEE5
- inputOption.activeBorder#DBDEE5
- inputOption.activeForeground#605A52
- inputValidation.errorBackground#A57773
- inputValidation.errorBorder#8F5652
- inputValidation.errorForeground#FCFBF9
- inputValidation.infoBackground#7686A9
- inputValidation.infoBorder#556995
- inputValidation.infoForeground#FCFBF9
- inputValidation.warningBackground#9F8768
- inputValidation.warningBorder#886A44
- inputValidation.warningForeground#FCFBF9
- list.activeSelectionBackground#9B7896
- list.activeSelectionForeground#FCFBF9
- list.activeSelectionIconForeground#ECEBE8
- list.dropBackground#DBDEE5
- list.errorForground#8F5652
- list.focusBackground#E4DAE0
- list.focusForeground#605A52
- list.focusHighlightForeground#E4DAE0
- list.highlightForeground#8F6789
- list.hoverBackground#F0EBED
- list.hoverForeground#605A52
- list.inactiveSelectionBackground#A788A2
- list.inactiveSelectionForeground#FCFBF9
- list.inactiveSelectionIconForeground#BEBBB6
- list.warningForeground#886A44
- listFilterWidget.background#FCFBF9
- listFilterWidget.noMatchesOutline#A57773
- listFilterWidget.outline#9B7896
- menu.background#F7F3EE
- menu.border#BEBBB6
- menu.foreground#605A52
- menu.selectionBackground#83577D
- menu.selectionBorder#605A52
- menu.selectionForeground#605A52
- menu.separatorBackground#BEBBB6
- menubar.selectionBackground#F7F3EE
- menubar.selectionForeground#605A52
- merge.commonContentBackground#9F876811
- merge.commonHeaderBackground#9F876828
- merge.currentContentBackground#477A7B11
- merge.currentHeaderBackground#477A7B28
- merge.incomingContentBackground#55699511
- merge.incomingHeaderBackground#55699528
- minimap.background#FCFBF9
- minimap.errorHighlight#A57773
- minimap.findMatchHighlight#BEBBB6
- minimap.selectionHighlight#E4DAE0
- minimap.warningHighlight#9F8768
- minimapGutter.addedBackground#9DA181
- minimapGutter.deletedBackground#B08884
- minimapGutter.modifiedBackground#8795B3
- minimapSlider.background#7F7A7325
- minimapSlider.hoverBackground#7F7A7335
- notificationCenter.border#ECEBE8
- notificationCenterHeader.background#F7F3EE
- notificationCenterHeader.foreground#605A52
- notifications.background#F7F3EE
- notifications.border#ECEBE8
- notifications.foreground#605A52
- notificationsErrorIcon.foreground#8F5652
- notificationsInfoIcon.foreground#556995
- notificationsWarningIcon.foreground#886A44
- notificationToast.border#DDDBD8
- panel.background#F7F3EE
- panel.border#DDDBD8
- panel.dropBorder#BEBBB6
- panelSection.border#BEBBB6
- panelSectionHeader.background#F0EDE7
- panelTitle.activeBorder#9E9A95
- panelTitle.activeForeground#605A52
- panelTitle.inactiveForeground#9E9A95
- peekView.border#B9C1D1
- peekViewEditor.background#F7F3EE
- peekViewEditor.matchHighlightBackground#55699522
- peekViewEditor.matchHighlightBorder#55699528
- peekViewEditorGutter.background#F7F3EE
- peekViewResult.background#F7F3EE
- peekViewResult.fileForeground#605A52
- peekViewResult.lineForeground#9E9A95
- peekViewResult.matchHighlightBackground#83577D1d
- peekViewResult.selectionBackground#83577D22
- peekViewResult.selectionForeground#605A52
- peekViewTitle.background#F7F3EE
- peekViewTitleDescription.foreground#556995
- peekViewTitleLabel.foreground#605A52
- pickerGroup.border#DDDBD8
- pickerGroup.foreground#605A52
- progressBar.background#9B7896
- sash.hoverBorder#9B7896
- scrollbar.shadow#CDCBC7
- scrollbarSlider.activeBackground#CDCBC7
- scrollbarSlider.background#AEABA6
- scrollbarSlider.hoverBackground#BEBBB6
- searchEditor.findMatchBackground#F0EDE7
- searchEditor.findMatchBorder#C2B39F33
- searchEditor.textInputBorder#9F8768
- selection.background#F0EBED
- settings.focusedRowBackground#F7F3EE
- settings.headerForeground#605A52
- sideBar.background#F7F3EE
- sideBar.dropBackground#DBDEE5
- sideBar.foreground#605A52
- sideBarSectionHeader.background#F7F3EE
- sideBarSectionHeader.border#CDCBC7
- sideBarSectionHeader.foreground#7F7A73
- sideBarTitle.foreground#7F7A73
- statusBar.background#556995
- statusBar.debuggingBackground#886A44
- statusBar.debuggingForeground#FCFBF9
- statusBar.foreground#FCFBF9
- statusBar.noFolderBackground#556995
- statusBar.noFolderForeground#FCFBF9
- statusBarItem.activeBackground#7686A9
- statusBarItem.errorBackground#8F5652
- statusBarItem.errorForeground#E6DAD8
- statusBarItem.hoverBackground#66789F
- statusBarItem.remoteBackground#477A7B
- statusBarItem.remoteForeground#FCFBF9
- tab.activeBackground#FCFBF9
- tab.activeBorder#FCFBF9
- tab.activeBorderTop#83577D
- tab.activeForeground#605A52
- tab.border#ECEBE8
- tab.inactiveBackground#F7F3EE
- tab.inactiveForeground#8F8A84
- tab.lastPinnedBorder#DDDBD8
- terminal.ansiBlack#605A52
- terminal.ansiBlue#7686A9
- terminal.ansiBrightBlack#605A52
- terminal.ansiBrightBlue#556995
- terminal.ansiBrightCyan#477A7B
- terminal.ansiBrightGreen#747B4D
- terminal.ansiBrightMagenta#83577D
- terminal.ansiBrightRed#8F5652
- terminal.ansiBrightWhite#FCFBF9
- terminal.ansiBrightYellow#886A44
- terminal.ansiCyan#6B9494
- terminal.ansiGreen#8F956F
- terminal.ansiMagenta#9B7896
- terminal.ansiRed#A57773
- terminal.ansiWhite#FCFBF9
- terminal.ansiYellow#9F8768
- terminal.border#BEBBB6
- terminal.foreground#605A52
- terminal.selectionBackground#F7F3EE
- terminalCursor.background#F7F3EE
- terminalCursor.foreground#605A52
- textBlockQuote.background#F7F3EE
- textBlockQuote.border#B6A48C
- textCodeBlock.background#F7F3EE
- textLink.activeForeground#83577D
- textLink.foreground#556995
- textPreformat.foreground#886A44
- textSeparator.foreground#7F7A73
- titleBar.activeBackground#DDDBD8
- titleBar.activeForeground#AEABA6
- titleBar.border#605A52
- titleBar.inactiveBackground#ECEBE8
- titleBar.inactiveForeground#BEBBB6
- tree.indentGuidesStroke#BEBBB6
- tree.tableColumnsBorder#BEBBB6
- walkThrough.embeddedEditorBackground#FCFBF9
- widget.shadow#CDCBC7
- window.activeBorder#83577D
- window.inactiveBorder#BEBBB6
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #9E9A95 | italic |
| comment.block.preprocessor | #9E9A95 | |
| comment.documentation, comment.block.documentation | #9E9A95 | — |
| invalid.illegal | — | — |
| keyword.operator | #605A52 | — |
| keyword, storage | #83577D | — |
| storage.type, support.type | #83577D | — |
| constant.language, support.constant, variable.language | #477A7B | — |
| variable, support.variable | #556995 | — |
| entity.name.function, support.function | #605A52 | italic |
| entity.name.type, entity.other.inherited-class, support.class | #605A52 | italic |
| entity.name.exception | #605A52 | italic |
| entity.name.section | #83577D | bold |
| constant.numeric, constant.character, constant | #477A7B | — |
| string | #747B4D | — |
| constant.character.escape | #477A7B | — |
| string.regexp | #886A44 | — |
| constant.other.symbol | #477A7B | — |
| punctuation | #7F7A73 | — |
| meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html | #9E9A95 | — |
| meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html | #9E9A95 | — |
| entity.name.tag | #83577D | — |
| meta.tag entity.other.attribute-name, entity.other.attribute-name.html | #556995 | — |
| constant.character.entity, punctuation.definition.entity | #477A7B | — |
| meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css | #83577D | — |
| meta.property-name, support.type.property-name | #556995 | italic |
| meta.property-value, meta.property-value constant.other, support.constant.property-value | #605A52 | — |
| keyword.other.important | #886A44 | — |
| markup.changed | #605A52 | — |
| markup.deleted | #605A52 | — |
| markup.italic | — | italic |
| markup.error | #8F5652 | — |
| markup.inserted | #605A52 | — |
| meta.link | #556995 | — |
| markup.output, markup.raw | #886A44 | — |
| markup.fenced_code.block | #886A44 | — |
| markup.prompt | #605A52 | — |
| markup.heading | #83577D | — |
| markup.bold | — | bold |
| markup.traceback | #8F5652 | — |
| markup.underline | — | underline |
| markup.quote | #886A44 | italic |
| markup.list | #605A52 | — |
| markup.bold, markup.italic | #605A52 | — |
| markup.inline.raw | #886A44 | |
| meta.diff.range, meta.diff.index, meta.separator | #605A52 | — |
| meta.diff.header.from-file | #605A52 | — |
| meta.diff.header.to-file | #605A52 | — |
| keyword.operator.new.js | #83577D | — |
| variable.other.object.js | #605A52 | — |
| variable.other.object.property.js, variable.other.property.js | #605A52 | — |
| string.other.link.title | #477A7B | — |
| constant.keyword.clojure | #556995 | — |
| storage.modifier.import.java | #605A52 | — |
| storage.type.java | #605A52 | italic |
| variable.language.this.java | #83577D | — |
| variable.other.object.property.java | #605A52 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...