Four Sages Theme
Publisher: Sage FennelThemes in package: 1
A dark theme with green, teal, purple, and orange!
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#00000000
- activityBar.activeBorder#81d943
- activityBar.background#2f3e3d
- activityBar.border#41514f
- activityBar.foreground#81d943
- activityBar.inactiveForeground#c0d2d0
- activityBarBadge.background#00ddd4
- activityBarBadge.foreground#223130
- activityBarTop.activeBorder#81d943
- activityBarTop.dropBorder#81d943
- activityBarTop.foreground#81d943
- activityBarTop.inactiveForeground#c0d2d0
- badge.background#00ddd4
- badge.foreground#223130
- breadcrumb.background#223130
- button.background#c0d2d0
- button.border#c0d2d0
- button.foreground#223130
- button.hoverBackground#c0d2d0f2
- button.secondaryBackground#223130
- button.secondaryForeground#c0d2d0
- button.secondaryHoverBackground#223130f2
- button.separator#2231304d
- commandCenter.activeBackground#798a891a
- commandCenter.activeBorder#41514f
- commandCenter.background#2f3e3d
- commandCenter.border#41514f
- commandCenter.foreground#c0d2d0
- commandCenter.inactiveBorder#41514f
- commandCenter.inactiveForeground#798a89
- debugToolBar.background#223130
- diffEditor.border#41514f
- diffEditor.diagonalFill#d0e3e11a
- diffEditor.insertedLineBackground#00269f40
- diffEditor.insertedTextBackground#00269f40
- diffEditor.removedLineBackground#a6003b40
- diffEditor.removedTextBackground#a6003b40
- diffEditorGutter.insertedLineBackground#00269f40
- diffEditorGutter.removedLineBackground#a6003b40
- diffEditorOverview.insertedForeground#8fbeff
- diffEditorOverview.removedForeground#ff95a9
- disabledForeground#798a89
- dropdown.background#223130
- dropdown.border#798a89
- dropdown.foreground#c0d2d0
- dropdown.listBackground#223130
- editor.background#223130
- editor.findMatchBackground#a63c0c80
- editor.findMatchHighlightBackground#a63c0c80
- editor.findRangeHighlightBackground#69680080
- editor.foldBackground#00000000
- editor.foreground#c0d2d0
- editor.inactiveSelectionBackground#ff67284d
- editor.lineHighlightBackground#2f3e3d
- editor.rangeHighlightBackground#69680080
- editor.selectionBackground#ff67284d
- editor.wordHighlightBackground#2a5fb780
- editor.wordHighlightStrongBackground#903d8b80
- editorBracketHighlight.foreground1#83ad6d
- editorBracketHighlight.foreground2#43b2ac
- editorBracketHighlight.foreground3#d4896e
- editorBracketHighlight.foreground4#83ad6d
- editorBracketHighlight.foreground5#43b2ac
- editorBracketHighlight.foreground6#d4896e
- editorBracketHighlight.unexpectedBracket.foreground#ff92b8
- editorBracketMatch.background#ff672826
- editorBracketMatch.border#ff672880
- editorCodeLens.foreground#91a3a1
- editorCursor.foreground#81d943
- editorGroup.border#41514f
- editorGroup.dropBackground#ff67284d
- editorGroupHeader.border#41514f
- editorGroupHeader.noTabsBackground#223130
- editorGroupHeader.tabsBackground#2f3e3d
- editorGroupHeader.tabsBorder#41514f
- editorGutter.addedBackground#8fbeff
- editorGutter.deletedBackground#ff95a9
- editorGutter.modifiedBackground#f58eff
- editorHoverWidget.background#223130
- editorHoverWidget.border#798a89
- editorIndentGuide.activeBackground1#c0d2d080
- editorIndentGuide.background1#c0d2d01a
- editorLightBulb.foreground#ff9c75
- editorLightBulbAutoFix.foreground#ff9c75
- editorLineNumber.activeForeground#c0d2d0
- editorLineNumber.foreground#798a89
- editorLink.activeForeground#8fbeff
- editorOverviewRuler.border#41514f40
- editorRuler.foreground#41514f80
- editorStickyScroll.border#41514f
- editorSuggestWidget.background#223130
- editorSuggestWidget.border#798a89
- editorWidget.background#223130
- editorWidget.border#798a89
- editorWidget.foreground#c0d2d0
- editorWidget.resizeBorder#223130
- errorForeground#ff95a9
- focusBorder#81d943
- foreground#c0d2d0
- gitDecoration.conflictingResourceForeground#00ddd4
- gitDecoration.deletedResourceForeground#ff95a9
- gitDecoration.ignoredResourceForeground#c0d2d066
- gitDecoration.modifiedResourceForeground#8fbeff
- gitDecoration.untrackedResourceForeground#f58eff
- icon.foreground#c0d2d0
- input.background#223130
- input.border#798a89
- input.placeholderForeground#798a89
- inputOption.activeBorder#c0d2d0
- keybindingLabel.background#00000000
- keybindingLabel.border#41514f
- keybindingLabel.bottomBorder#41514f
- keybindingLabel.foreground#c0d2d0
- list.activeSelectionBackground#00ddd4
- list.activeSelectionForeground#223130
- list.activeSelectionIconForeground#223130
- list.dropBackground#ff67284d
- list.errorForeground#ff95a9
- list.focusForeground#c0d2d0
- list.focusHighlightForeground#223130
- list.highlightForeground#81d943
- list.hoverBackground#798a8926
- list.inactiveSelectionBackground#00ddd440
- list.inactiveSelectionForeground#c0d2d0
- list.inactiveSelectionIconForeground#c0d2d0
- list.warningForeground#ff9c75
- menu.background#2f3e3d
- menu.border#41514f
- menu.foreground#c0d2d0
- menu.separatorBackground#41514f
- merge.currentContentBackground#00269f40
- merge.currentHeaderBackground#00269fa6
- merge.incomingContentBackground#a6003b40
- merge.incomingHeaderBackground#a6003ba6
- notificationCenterHeader.background#2f3e3d
- notificationCenterHeader.foreground#c0d2d0
- notificationLink.foreground#43b2ac
- notifications.background#2f3e3d
- notifications.foreground#c0d2d0
- notificationToast.border#41514f
- panel.background#223130
- panel.border#41514f
- panelSection.border#41514f
- panelSectionHeader.border#41514f
- panelTitle.activeBorder#81d943
- panelTitle.activeForeground#81d943
- panelTitle.inactiveForeground#c0d2d0
- peekView.border#798a89
- peekViewEditor.background#223130
- peekViewResult.background#223130
- peekViewResult.fileForeground#c0d2d0
- peekViewResult.lineForeground#c0d2d0
- peekViewTitle.background#223130
- peekViewTitleDescription.foreground#43b2ac
- peekViewTitleLabel.foreground#c0d2d0
- pickerGroup.border#41514f
- progressBar.background#c0d2d0
- quickInput.background#2f3e3d
- quickInputList.focusBackground#00ddd4
- quickInputList.focusForeground#223130
- quickInputList.focusIconForeground#223130
- scrollbar.shadow#00000000
- scrollbarSlider.activeBackground#c0d2d099
- scrollbarSlider.background#c0d2d066
- scrollbarSlider.hoverBackground#c0d2d080
- settings.checkboxBackground#2f3e3d
- settings.dropdownBackground#2f3e3d
- settings.headerForeground#81d943
- settings.modifiedItemIndicator#ff9c75
- settings.numberInputBackground#2f3e3d
- settings.rowHoverBackground#2f3e3d40
- settings.textInputBackground#2f3e3d
- sideBar.background#2f3e3d
- sideBar.border#41514f
- sideBar.dropBackground#ff67284d
- sideBarSectionHeader.background#2f3e3d
- sideBarSectionHeader.border#41514f
- statusBar.background#2f3e3d
- statusBar.border#41514f
- statusBar.debuggingBackground#2f3e3d
- statusBar.foreground#c0d2d0
- statusBar.noFolderBackground#2f3e3d
- statusBarItem.activeBackground#798a8966
- statusBarItem.hoverBackground#798a8933
- statusBarItem.remoteBackground#2f3e3d
- statusBarItem.remoteForeground#c0d2d0
- statusBarItem.remoteHoverBackground#798a8933
- statusBarItem.remoteHoverForeground#c0d2d0
- tab.activeBackground#223130
- tab.activeBorder#41514f
- tab.activeBorderTop#81d943
- tab.activeForeground#d0e3e1
- tab.border#41514f
- tab.inactiveBackground#2f3e3d
- tab.inactiveForeground#c0d2d0
- tab.unfocusedActiveBorder#41514f
- tab.unfocusedActiveBorderTop#81d943
- terminal.ansiBlack#23504e
- terminal.ansiBlue#8fbeff
- terminal.ansiBrightBlack#23504e
- terminal.ansiBrightBlue#8fbeff
- terminal.ansiBrightCyan#00ddd4
- terminal.ansiBrightGreen#81d943
- terminal.ansiBrightMagenta#f58eff
- terminal.ansiBrightRed#ff95a9
- terminal.ansiBrightWhite#fff
- terminal.ansiBrightYellow#ff9c75
- terminal.ansiCyan#00ddd4
- terminal.ansiGreen#81d943
- terminal.ansiMagenta#f58eff
- terminal.ansiRed#ff95a9
- terminal.ansiWhite#fff
- terminal.ansiYellow#ff9c75
- terminal.background#223130
- terminal.foreground#d0e3e1
- terminal.tab.activeBorder#00ddd4
- textBlockQuote.background#00000000
- textBlockQuote.border#d0e3e1
- textLink.activeForeground#a1fa68
- textLink.foreground#a1fa68
- textPreformat.foreground#ff9c75
- titleBar.activeBackground#2f3e3d
- titleBar.activeForeground#c0d2d0
- titleBar.border#41514f
- titleBar.inactiveBackground#2f3e3d
- titleBar.inactiveForeground#798a89
- toolbar.activeBackground#798a8966
- toolbar.hoverBackground#798a8933
- tree.indentGuidesStroke#c0d2d040
- widget.border#41514f
- widget.shadow#00000000
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| meta.embedded, source.groovy.embedded, string meta.image.inline.markdown | #d0e3e1 | — |
| emphasis | — | italic |
| strong | — | bold |
| header | #81d943 | — |
| comment, punctuation.definition.comment | #91a3a1 | — |
| constant.language | #b37bff | — |
| constant.regexp | #cca7ff | — |
| support.class.component, entity.name.tag | #c2edaa | — |
| entity.name.tag.css | #d0e3e1 | — |
| entity.other.attribute-name | #ff9c75 | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss | #ff9c75 | — |
| entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #ff6728 | — |
| invalid | #ff92b8 | — |
| markup.underline | — | underline |
| markup.bold | #ff9c75 | bold |
| markup.heading | #81d943 | bold |
| markup.italic | #ff9c75 | italic |
| markup.strikethrough | — | strikethrough |
| markup.inserted | #8fbeff | — |
| markup.deleted | #ff95a9 | — |
| markup.changed | #ff9c75 | — |
| punctuation.definition.quote.begin.markdown | #43b2ac | — |
| punctuation.definition.list.begin.markdown | #43b2ac | — |
| markup.inline.raw | #ff9c75 | — |
| punctuation.definition.tag | #43b2ac | — |
| meta.preprocessor, entity.name.function.preprocessor | #ff9c75 | — |
| meta.preprocessor.string | #cca7ff | — |
| constant.numeric, meta.preprocessor.numeric | #e6d2ff | — |
| meta.structure.dictionary.key.python | #81d943 | — |
| source.diff | #43b2ac | — |
| meta.diff.header | #fff | — |
| storage | #d0e3e1 | — |
| source.java storage.type, source.go storage.type | #ff9c75 | — |
| storage.type | #81d943 | — |
| storage.modifier, keyword.operator.noexcept | #81d943 | — |
| string, meta.embedded.assembly, constant.other.symbol | #cca7ff | — |
| string.tag | #cca7ff | — |
| string.value | #cca7ff | — |
| string.regexp | #cca7ff | — |
| punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded | #43b2ac | — |
| meta.template.expression, meta.interpolation | #d0e3e1 | — |
| support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded | #c2edaa | — |
| keyword | #81d943 | — |
| keyword.control | #81d943 | — |
| keyword.operator.type.annotation | #43b2ac | — |
| keyword.operator | #81d943 | — |
| keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike | #81d943 | — |
| keyword.other.unit | #b37bff | — |
| punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php | #43b2ac | — |
| storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java | #d0e3e1 | — |
| variable.language | #ff6728 | — |
| entity.name.function, meta.function-call.generic, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal | #ffcdb8 | — |
| support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class | #ff9c75 | — |
| meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class | #ff9c75 | — |
| keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator | #81d943 | — |
| variable, meta.definition.variable.name, support.variable, entity.name.variable | #d0e3e1 | — |
| meta.object-literal.key | #c2edaa | — |
| support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color | #ffcdb8 | — |
| constant.other.placeholder | #81d943 | — |
| punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp | #e6d2ff | — |
| constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp | #e6d2ff | — |
| keyword.operator.or.regexp, keyword.control.anchor.regexp | #43b2ac | — |
| keyword.operator.quantifier.regexp | #e6d2ff | — |
| constant.character, constant.other.option | #e6d2ff | — |
| constant.character.escape | #e6d2ff | — |
| entity.name.label | #d0e3e1 | — |
| punctuation, meta.brace | #43b2ac | — |