Ghibli Inspired Theme
Publisher: Daniel BiedmaThemes in package: 3
A dreamy, nature-inspired color theme inspired by Studio Ghibli films
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#E8E2D8
- activityBar.border#E0D8CC
- activityBar.foreground#5A7A68
- activityBar.inactiveForeground#9A9588
- activityBarBadge.background#D47040
- activityBarBadge.foreground#FFFFFF
- badge.background#D47040
- badge.foreground#FFFFFF
- breadcrumb.activeSelectionForeground#4A4540
- breadcrumb.background#F8F4ED
- breadcrumb.focusForeground#4A4540
- breadcrumb.foreground#8A8580
- breadcrumbPicker.background#F0EBE2
- button.background#5A8A68
- button.foreground#FFFFFF
- button.hoverBackground#6A9A78
- button.secondaryBackground#D0C8BC
- button.secondaryForeground#4A4540
- button.secondaryHoverBackground#C0B8AC
- diffEditor.insertedTextBackground#4A8A5822
- diffEditor.removedTextBackground#A8585822
- dropdown.background#FFFFFF
- dropdown.border#D0C8BC
- dropdown.foreground#4A4540
- editor.background#F8F4ED
- editor.findMatchBackground#E8B86044
- editor.findMatchBorder#D4A040
- editor.findMatchHighlightBackground#E8B86033
- editor.foreground#4A4540
- editor.inactiveSelectionBackground#A8C8E822
- editor.lineHighlightBackground#EDE8E0
- editor.lineHighlightBorder#00000000
- editor.selectionBackground#A8C8E855
- editor.selectionHighlightBackground#A8C8E833
- editor.wordHighlightBackground#B8D4F033
- editor.wordHighlightStrongBackground#B8D4F055
- editorBracketMatch.background#E8B86033
- editorBracketMatch.border#D4A040
- editorCursor.background#F8F4ED
- editorCursor.foreground#D47040
- editorError.foreground#A85858
- editorGroupHeader.tabsBackground#F0EBE2
- editorGroupHeader.tabsBorder#E0D8CC
- editorHoverWidget.background#F8F4ED
- editorHoverWidget.border#D0C8BC
- editorHoverWidget.foreground#4A4540
- editorIndentGuide.activeBackground#B8A898
- editorIndentGuide.background#DCD4C8
- editorInfo.foreground#4878A8
- editorLineNumber.activeForeground#6A6560
- editorLineNumber.foreground#A8A098
- editorSuggestWidget.background#F8F4ED
- editorSuggestWidget.border#D0C8BC
- editorSuggestWidget.foreground#4A4540
- editorSuggestWidget.highlightForeground#B88A28
- editorSuggestWidget.selectedBackground#E0D8CC
- editorWarning.foreground#B88A28
- editorWhitespace.foreground#D0C8BC66
- editorWidget.background#F0EBE2
- editorWidget.border#D0C8BC
- editorWidget.foreground#4A4540
- gitDecoration.addedResourceForeground#4A8A58
- gitDecoration.conflictingResourceForeground#8A5888
- gitDecoration.deletedResourceForeground#A85858
- gitDecoration.ignoredResourceForeground#A8A098
- gitDecoration.modifiedResourceForeground#B88A28
- gitDecoration.untrackedResourceForeground#388888
- input.background#FFFFFF
- input.border#D0C8BC
- input.foreground#4A4540
- input.placeholderForeground#A8A098
- inputOption.activeBackground#A8C8E855
- inputOption.activeForeground#4A4540
- list.activeSelectionBackground#C8D8E0
- list.activeSelectionForeground#4A4540
- list.errorForeground#A85858
- list.focusBackground#C8D8E0
- list.highlightForeground#B88A28
- list.hoverBackground#E8E2D8
- list.hoverForeground#4A4540
- list.inactiveSelectionBackground#DCD4C8
- list.inactiveSelectionForeground#4A4540
- list.warningForeground#B88A28
- minimap.background#F0EBE2
- minimap.findMatchHighlight#E8B86088
- minimap.selectionHighlight#A8C8E888
- notificationCenterHeader.background#E8E2D8
- notifications.background#F0EBE2
- notifications.border#D0C8BC
- notifications.foreground#4A4540
- panel.background#F0EBE2
- panel.border#E0D8CC
- panelTitle.activeBorder#5A8A68
- panelTitle.activeForeground#4A4540
- panelTitle.inactiveForeground#8A8580
- quickInput.background#F0EBE2
- quickInput.foreground#4A4540
- quickInputList.focusBackground#E0D8CC
- quickInputList.focusForeground#4A4540
- scrollbar.shadow#00000011
- scrollbarSlider.activeBackground#A8988888
- scrollbarSlider.background#B8A89844
- scrollbarSlider.hoverBackground#A8988866
- sideBar.background#F0EBE2
- sideBar.border#E0D8CC
- sideBar.foreground#5A5550
- sideBarSectionHeader.background#E8E2D8
- sideBarSectionHeader.foreground#5A5550
- sideBarTitle.foreground#4A4540
- statusBar.background#E8E2D8
- statusBar.border#E0D8CC
- statusBar.debuggingBackground#A85858
- statusBar.debuggingForeground#FFFFFF
- statusBar.foreground#5A5550
- statusBar.noFolderBackground#D0C8BC
- statusBarItem.hoverBackground#DCD4C8
- statusBarItem.remoteBackground#5A8A68
- statusBarItem.remoteForeground#FFFFFF
- tab.activeBackground#F8F4ED
- tab.activeBorder#00000000
- tab.activeBorderTop#5A8A68
- tab.activeForeground#4A4540
- tab.border#E0D8CC
- tab.hoverBackground#EDE8E0
- tab.inactiveBackground#F0EBE2
- tab.inactiveForeground#8A8580
- terminal.ansiBlack#4A4540
- terminal.ansiBlue#4878A8
- terminal.ansiBrightBlack#7A7570
- terminal.ansiBrightBlue#5890C0
- terminal.ansiBrightCyan#48A0A0
- terminal.ansiBrightGreen#5AA868
- terminal.ansiBrightMagenta#A870A0
- terminal.ansiBrightRed#C87070
- terminal.ansiBrightWhite#F8F4ED
- terminal.ansiBrightYellow#D4A838
- terminal.ansiCyan#388888
- terminal.ansiGreen#4A8A58
- terminal.ansiMagenta#8A5888
- terminal.ansiRed#A85858
- terminal.ansiWhite#E8E2D8
- terminal.ansiYellow#B88A28
- terminal.background#F0EBE2
- terminal.foreground#4A4540
- terminalCursor.foreground#D47040
- titleBar.activeBackground#E8E2D8
- titleBar.activeForeground#4A4540
- titleBar.border#E0D8CC
- titleBar.inactiveBackground#E8E2D8
- titleBar.inactiveForeground#8A8580
- tree.indentGuidesStroke#D0C8BC
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #A09890 | italic |
| string, string.quoted | #B07828 | — |
| constant.character.escape | #C88838 | — |
| string.template, punctuation.definition.string.template | #B07828 | — |
| punctuation.definition.template-expression | #8A5888 | — |
| constant.numeric | #C86050 | — |
| constant.language | #C86050 | italic |
| constant.other, variable.other.constant | #B07828 | — |
| keyword, keyword.control | #8A5888 | — |
| keyword.operator | #388888 | — |
| storage, storage.type | #8A5888 | — |
| storage.modifier | #8A5888 | italic |
| entity.name.function, meta.function-call, support.function | #4A8A58 | — |
| variable.parameter, meta.parameter | #B88A28 | italic |
| entity.name.class, entity.name.type.class, support.class | #4878A8 | — |
| entity.other.inherited-class | #5890C0 | italic |
| entity.name.type, support.type, support.type.primitive | #388888 | — |
| entity.name.type.interface | #388888 | italic |
| variable, variable.other | #4A4540 | — |
| variable.other.property, variable.other.object.property, meta.object-literal.key | #5A9A68 | — |
| variable.language.this, variable.language.self | #C86050 | italic |
| entity.name.tag | #A85858 | — |
| entity.other.attribute-name | #B07828 | italic |
| support.class.component, entity.name.tag.js, entity.name.tag support.class.component | #4878A8 | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #B07828 | — |
| support.type.property-name.css | #4A8A58 | — |
| support.constant.property-value.css | #B88A28 | — |
| keyword.other.unit.css | #C86050 | — |
| entity.other.attribute-name.pseudo-class.css | #8A5888 | — |
| support.type.property-name.json | #4A8A58 | — |
| string.quoted.double.json | #B07828 | — |
| heading.1.markdown, heading.2.markdown, heading.3.markdown, heading.4.markdown, heading.5.markdown, heading.6.markdown, markup.heading | #4878A8 | bold |
| markup.bold | #B88A28 | bold |
| markup.italic | #8A5888 | italic |
| markup.underline.link | #388888 | — |
| markup.inline.raw, markup.fenced_code | #4A8A58 | — |
| markup.quote | #A09890 | italic |
| punctuation | #7A7570 | — |
| punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.arguments | #7A7570 | — |
| string.regexp | #388888 | — |
| meta.decorator, meta.annotation | #B07828 | italic |
| keyword.control.import, keyword.control.export, keyword.control.from | #8A5888 | — |
| invalid, invalid.illegal | #A85858 | underline |
| invalid.deprecated | #D47040 | strikethrough |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...