Aloe Theme
Publisher: Lab829Themes in package: 1
Aloe is a dark color theme for Visual Studio Code. Inspired by the Aloe plant.
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#1a1d1a
- activityBar.foreground#f5e67a
- activityBar.inactiveForeground#6b8370
- activityBarBadge.background#f5e67a
- activityBarBadge.foreground#1a1d1a
- badge.background#2d4733
- badge.foreground#d9ebe0
- breadcrumb.activeSelectionForeground#d9ebe0
- breadcrumb.background#1a1d1a
- breadcrumb.focusForeground#a8e6a3
- breadcrumb.foreground#6b8370
- breadcrumbPicker.background#1f221f
- button.background#2d4733
- button.foreground#d9ebe0
- button.hoverBackground#2d4733cc
- button.secondaryBackground#1f221f
- button.secondaryForeground#d9ebe0
- checkbox.background#1f221f
- checkbox.border#2d4733
- contrastActiveBorder#00000000
- contrastBorder#00000000
- debugToolBar.background#1f221f
- descriptionForeground#6b8370
- diffEditor.diagonalFill#1a1d1a
- diffEditor.insertedLineBackground#1e362a40
- diffEditor.insertedTextBackground#2c4f3c40
- diffEditor.removedLineBackground#36202044
- diffEditor.removedTextBackground#5a2d2d44
- diffEditorGutter.insertedLineBackground#264a3499
- diffEditorGutter.removedLineBackground#73333399
- disabledForeground#6b837088
- dropdown.background#1f221f
- dropdown.foreground#d9ebe0
- dropdown.listBackground#1a1d1a
- editor.background#1a1d1a
- editor.foreground#d9ebe0
- editor.lineHighlightBackground#1f221f
- editor.lineHighlightBorder#00000000
- editor.selectionBackground#2d4733
- editorBracketHighlight.foreground1#8fc3a5
- editorBracketHighlight.foreground2#4fa7c7
- editorBracketHighlight.foreground3#c89a55
- editorBracketHighlight.foreground4#a879a9
- editorBracketHighlight.foreground5#57b79e
- editorBracketHighlight.foreground6#d9c76e
- editorBracketHighlight.unexpectedBracket.foreground#ff6b6b
- editorBracketMatch.background#1f221f
- editorBracketMatch.border#2d4733
- editorCursor.foreground#a8e6a3
- editorGroup.border#1f221f
- editorGroupHeader.border#00000000
- editorGroupHeader.tabsBackground#1a1d1a
- editorGroupHeader.tabsBorder#00000040
- editorGutter.addedBackground#264a3499
- editorGutter.background#1C221C
- editorGutter.deletedBackground#73333399
- editorGutter.modifiedBackground#1f4a4099
- editorHoverWidget.background#1f221f
- editorHoverWidget.border#2d4733
- editorLineNumber.activeForeground#d9ebe0
- editorLineNumber.foreground#8eb8a1
- editorOverviewRuler.addedForeground#264a3499
- editorOverviewRuler.background#232a23
- editorOverviewRuler.border#1f221f
- editorOverviewRuler.deletedForeground#73333399
- editorOverviewRuler.modifiedForeground#1f4a4099
- editorSuggestWidget.background#1f221f
- editorSuggestWidget.border#2d4733
- editorSuggestWidget.highlightForeground#7dc3e8
- editorSuggestWidget.selectedBackground#2d473344
- editorWhitespace.foreground#4a685044
- editorWidget.background#1f221f
- editorWidget.border#2d4733
- focusBorder#00000000
- foreground#d9ebe0
- gitDecoration.addedResourceForeground#a8e6a3
- gitDecoration.conflictingResourceForeground#f5c97a
- gitDecoration.deletedResourceForeground#d99ce8
- gitDecoration.ignoredResourceForeground#4a6850
- gitDecoration.modifiedResourceForeground#7dc3e8
- gitDecoration.untrackedResourceForeground#7dd3c0
- input.background#1f221f
- input.border#2d473366
- input.foreground#d9ebe0
- input.placeholderForeground#6b837088
- inputValidation.errorBorder#d99ce8
- inputValidation.infoBorder#7dc3e8
- inputValidation.warningBorder#f5c97a
- list.activeSelectionBackground#2d473344
- list.activeSelectionForeground#d9ebe0
- list.errorForeground#d99ce8
- list.focusBackground#2d473322
- list.focusForeground#d9ebe0
- list.focusOutline#00000000
- list.highlightForeground#7dc3e8
- list.hoverBackground#1f221f
- list.hoverForeground#d9ebe0
- list.inactiveSelectionBackground#1f221f
- list.inactiveSelectionForeground#d9ebe0
- list.invalidItemForeground#f5e67a
- list.warningForeground#f5c97a
- listFilterWidget.outline#2d4733
- minimap.background#232a23
- minimapGutter.addedBackground#264a3499
- minimapGutter.deletedBackground#73333399
- minimapGutter.modifiedBackground#1f4a4099
- notificationCenter.border#1f221f
- notificationCenterHeader.background#1a1d1a
- notificationCenterHeader.foreground#a8e6a3
- panel.background#1a1d1a
- panel.border#1f221f
- panel.dropBorder#2d4733
- panelInput.border#1f221f
- panelTitle.activeForeground#d9ebe0
- panelTitle.inactiveForeground#6b8370
- peekView.border#2d4733
- peekViewEditor.background#1f221f
- peekViewEditor.matchHighlightBackground#2d473344
- peekViewEditor.matchHighlightBorder#00000000
- peekViewEditorGutter.background#1a1d1a
- peekViewResult.background#1f221f
- peekViewResult.matchHighlightBackground#2d473344
- peekViewResult.selectionBackground#2d473344
- peekViewResult.selectionForeground#d9ebe0
- peekViewTitle.background#1a1d1a
- peekViewTitleDescription.foreground#6b8370
- peekViewTitleLabel.foreground#d9ebe0
- progressBar.background#7dd3c0
- scrollbar.shadow#1f221fcc
- scrollbarSlider.activeBackground#4a685066
- scrollbarSlider.background#4a685022
- scrollbarSlider.hoverBackground#4a685044
- selection.background#2d473344
- sideBar.background#131613
- sideBar.border#1f221f
- sideBar.foreground#d9ebe0
- sideBarSectionHeader.background#1f221f
- sideBarSectionHeader.foreground#a8e6a3
- sideBarTitle.foreground#d9ebe0
- statusBar.background#1a1d1a
- statusBar.border#1f221f
- statusBar.debuggingBackground#2d4733
- statusBar.debuggingForeground#d9ebe0
- statusBar.foreground#d9ebe0
- statusBar.noFolderBackground#1a1d1a
- statusBarItem.hoverBackground#2d473322
- tab.activeBackground#1a1d1a
- tab.activeBorder#00000000
- tab.activeBorderTop#2d4733
- tab.activeForeground#d9ebe0
- tab.border#1f221f
- tab.hoverForeground#d9ebe0
- tab.inactiveBackground#1f221f
- tab.inactiveForeground#6b8370
- tab.unfocusedActiveForeground#d9ebe0
- tab.unfocusedHoverForeground#d9ebe0
- tab.unfocusedInactiveForeground#6b8370
- terminal.ansiBlack#1f221f
- terminal.ansiBlue#7dc3e8
- terminal.ansiBrightBlack#4a6850
- terminal.ansiBrightBlue#7dc3e8
- terminal.ansiBrightCyan#7dd3c0
- terminal.ansiBrightGreen#a8e6a3
- terminal.ansiBrightMagenta#d99ce8
- terminal.ansiBrightRed#f5c97a
- terminal.ansiBrightWhite#d9ebe0
- terminal.ansiBrightYellow#f5e67a
- terminal.ansiCyan#7dd3c0
- terminal.ansiGreen#a8e6a3
- terminal.ansiMagenta#d99ce8
- terminal.ansiRed#f5c97a
- terminal.ansiWhite#d9ebe0
- terminal.ansiYellow#f5e67a
- terminal.background#1a1d1a
- terminal.foreground#d9ebe0
- terminal.selectionBackground#2d473344
- terminalCursor.foreground#a8e6a3
- textLink.activeForeground#a8e6a3
- textLink.foreground#7dc3e8
- textPreformat.foreground#f5c97a
- textSeparator.foreground#4a6850
- titleBar.activeBackground#1a1d1a
- titleBar.activeForeground#d9ebe0
- titleBar.border#1f221f
- titleBar.inactiveBackground#1f221f
- titleBar.inactiveForeground#6b8370
- walkThrough.embeddedEditorBackground#1a1d1a
- widget.shadow#1f221f
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #6b8370 | italic |
| string, string.quoted, string.template | #f5e67a | — |
| constant.numeric, constant.language, punctuation.definition.block.js.jsx | #d99ce8 | — |
| keyword, keyword.control, storage.type, storage.modifier | #a8e6a3 | — |
| keyword.operator, punctuation | #cbd7d1 | — |
| keyword.operator.spread.js.jsx | #f5c97a | italic |
| punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js, punctuation.definition.template-expression.begin.jsx, punctuation.definition.template-expression.end.jsx, punctuation.definition.template-expression.begin.js.jsx, punctuation.definition.template-expression.end.js.jsx, meta.template.expression, meta.template.expression.js, meta.template.expression.jsx, meta.template.expression.js.jsx, string.template, string.template.js, string.template.jsx, string.template.js.jsx | #a8e6a3 | — |
| entity.name.function, support.function | #7dd3c0 | — |
| variable.parameter | #f5c97a | — |
| variable | #d9ebe0 | — |
| variable.other, variable.other.readwrite, variable.other.readwrite.js, variable.other.readwrite.jsx, variable.other.readwrite.js.jsx, meta.embedded.line.js.jsx variable.other, meta.template.expression.js.jsx variable.other, string.template.js.jsx variable.other, meta.block.js.jsx variable.other, meta.function.js.jsx variable.other, source.js.jsx variable.other | #f5c97a | italic |
| entity.name.class, entity.name.type, support.class | #7dc3e8 | — |
| variable.other.property, support.variable.property, meta.object-literal.key | #a8e6a3 | — |
| constant, variable.language, support.constant | #7dc3e8 | — |
| entity.name.function.decorator, meta.decorator, support.type.decorator | #7dd3c0 | — |
| entity.name.tag, meta.tag, support.class.component | #a8e6a3 | — |
| entity.other.attribute-name, support.type.property-name | #f5c97a | — |
| markup.heading, entity.name.section | #7dc3e8 | — |
| markup.bold, markup.strong | #f5e67a | bold |
| markup.italic, markup.emphasis | #d99ce8 | italic |
| markup.inline.raw, markup.fenced_code.block | #7dd3c0 | — |
| entity.name.namespace, support.other.namespace | #7dc3e8 | — |
| support.type.property-name.json, meta.brace.round.js.jsx | #a8e6a3 | — |
| punctuation.bracket, punctuation.definition.brace, punctuation.section.block, meta.brace, meta.brace.round, meta.brace.square | #8fc3a5 | — |