Forest Mist Theme
Publisher: TheMistProjectThemes in package: 2
A calming nature-inspired dark theme with forest and mist colors designed to reduce eye strain and improve focus
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.activeBackground#5f8a5f20
- activityBar.activeBorder#5f8a5f
- activityBar.background#1a1f2a
- activityBar.foreground#eef0f2
- activityBar.inactiveForeground#8b9199
- activityBarBadge.background#5f8a5f
- activityBarBadge.foreground#eef0f2
- badge.background#5f8a5f
- badge.foreground#eef0f2
- breadcrumb.activeSelectionForeground#87ceeb
- breadcrumb.background#2d3142
- breadcrumb.focusForeground#eef0f2
- breadcrumb.foreground#bfc5ca
- breadcrumbPicker.background#242936
- button.background#5f8a5f
- button.foreground#eef0f2
- button.hoverBackground#7ba05b
- button.secondaryBackground#8b7355
- button.secondaryForeground#eef0f2
- button.secondaryHoverBackground#a0855f
- diffEditor.insertedTextBackground#5f8a5f20
- diffEditor.removedTextBackground#cd853f20
- dropdown.background#242936
- dropdown.border#5f8a5f
- dropdown.foreground#eef0f2
- editor.background#2d3142
- editor.findMatchBackground#8fbc8f40
- editor.findMatchHighlightBackground#8fbc8f20
- editor.findRangeHighlightBackground#5f8a5f15
- editor.foldBackground#5f8a5f15
- editor.foreground#eef0f2
- editor.hoverHighlightBackground#5f8a5f15
- editor.lineHighlightBorder#5f8a5f20
- editor.rangeHighlightBackground#5f8a5f15
- editor.selectionBackground#5f8a5f30
- editor.selectionHighlightBackground#5f8a5f20
- editor.wordHighlightBackground#87ceeb20
- editor.wordHighlightStrongBackground#87ceeb30
- editorBracketHighlight.foreground1#87ceeb
- editorBracketHighlight.foreground2#8fbc8f
- editorBracketHighlight.foreground3#b0c4de
- editorBracketHighlight.foreground4#cd853f
- editorBracketHighlight.foreground5#5f8a5f
- editorBracketHighlight.foreground6#8b7355
- editorBracketHighlight.unexpectedBracket.foreground#cd853f
- editorError.foreground#cd853f
- editorGroup.border#5f8a5f30
- editorGroup.dropBackground#5f8a5f20
- editorGroupHeader.tabsBackground#1a1f2a
- editorGutter.addedBackground#5f8a5f
- editorGutter.deletedBackground#cd853f
- editorGutter.modifiedBackground#8fbc8f
- editorHoverWidget.background#242936
- editorHoverWidget.border#5f8a5f
- editorInfo.foreground#87ceeb
- editorLineNumber.activeForeground#bfc5ca
- editorLineNumber.foreground#8b9199
- editorLink.activeForeground#87ceeb
- editorOverviewRuler.addedForeground#5f8a5f
- editorOverviewRuler.border#1a1f2a
- editorOverviewRuler.deletedForeground#cd853f
- editorOverviewRuler.errorForeground#cd853f
- editorOverviewRuler.infoForeground#87ceeb
- editorOverviewRuler.modifiedForeground#8fbc8f
- editorOverviewRuler.selectionHighlightForeground#5f8a5f
- editorOverviewRuler.warningForeground#8fbc8f
- editorOverviewRuler.wordHighlightForeground#87ceeb
- editorOverviewRuler.wordHighlightStrongForeground#87ceeb
- editorSuggestWidget.background#242936
- editorSuggestWidget.foreground#eef0f2
- editorSuggestWidget.selectedBackground#5f8a5f30
- editorWarning.foreground#8fbc8f
- editorWidget.background#242936
- editorWidget.border#5f8a5f
- errorForeground#cd853f
- focusBorder#5f8a5f
- foreground#eef0f2
- gitDecoration.conflictingResourceForeground#b0c4de
- gitDecoration.deletedResourceForeground#cd853f
- gitDecoration.ignoredResourceForeground#8b9199
- gitDecoration.modifiedResourceForeground#8fbc8f
- gitDecoration.untrackedResourceForeground#87ceeb
- input.background#242936
- input.border#5f8a5f
- input.foreground#eef0f2
- input.placeholderForeground#8b9199
- inputOption.activeBorder#87ceeb
- inputValidation.errorBorder#cd853f
- inputValidation.infoBorder#87ceeb
- inputValidation.warningBorder#8fbc8f
- list.activeSelectionBackground#5f8a5f30
- list.activeSelectionForeground#eef0f2
- list.dropBackground#5f8a5f20
- list.errorForeground#cd853f
- list.focusBackground#5f8a5f20
- list.highlightForeground#87ceeb
- list.hoverBackground#5f8a5f15
- list.inactiveSelectionBackground#5f8a5f20
- list.warningForeground#8fbc8f
- panel.background#242936
- panel.border#5f8a5f30
- panelTitle.activeBorder#5f8a5f
- panelTitle.activeForeground#eef0f2
- panelTitle.inactiveForeground#bfc5ca
- progressBar.background#5f8a5f
- selection.background#5f8a5f40
- settings.checkboxBackground#242936
- settings.checkboxBorder#5f8a5f
- settings.checkboxForeground#eef0f2
- settings.dropdownBackground#242936
- settings.dropdownBorder#5f8a5f
- settings.dropdownForeground#eef0f2
- settings.headerForeground#eef0f2
- settings.modifiedItemIndicator#5f8a5f
- settings.numberInputBackground#242936
- settings.numberInputBorder#5f8a5f
- settings.numberInputForeground#eef0f2
- settings.textInputBackground#242936
- settings.textInputBorder#5f8a5f
- settings.textInputForeground#eef0f2
- sideBar.background#242936
- sideBarSectionHeader.background#1a1f2a
- sideBarSectionHeader.border#5f8a5f30
- sideBarTitle.foreground#eef0f2
- statusBar.background#1a1f2a
- statusBar.debuggingBackground#8fbc8f
- statusBar.debuggingForeground#1a1f2a
- statusBar.foreground#eef0f2
- statusBar.noFolderBackground#8b7355
- statusBar.noFolderForeground#eef0f2
- statusBarItem.prominentBackground#5f8a5f
- statusBarItem.prominentHoverBackground#7ba05b
- statusBarItem.remoteBackground#87ceeb
- statusBarItem.remoteForeground#eef0f2
- tab.activeBackground#2d3142
- tab.activeBorderTop#5f8a5f
- tab.activeForeground#eef0f2
- tab.border#1a1f2a
- tab.inactiveBackground#1a1f2a
- tab.inactiveForeground#bfc5ca
- terminal.ansiBlack#1a1f2a
- terminal.ansiBlue#87ceeb
- terminal.ansiBrightBlack#8b9199
- terminal.ansiBrightBlue#5dade2
- terminal.ansiBrightCyan#a0d468
- terminal.ansiBrightGreen#7ba05b
- terminal.ansiBrightMagenta#c5d9ed
- terminal.ansiBrightRed#d2691e
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#a0d468
- terminal.ansiCyan#8fbc8f
- terminal.ansiGreen#5f8a5f
- terminal.ansiMagenta#b0c4de
- terminal.ansiRed#cd853f
- terminal.ansiWhite#eef0f2
- terminal.ansiYellow#8fbc8f
- terminal.background#2d3142
- terminal.foreground#eef0f2
- titleBar.activeBackground#1a1f2a
- titleBar.activeForeground#eef0f2
- titleBar.inactiveBackground#1a1f2a
- titleBar.inactiveForeground#8b9199
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| emphasis | — | italic |
| strong | — | bold |
| header | #87ceeb | — |
| comment, punctuation.definition.comment | #8b9199 | italic |
| comment keyword.codetag.notation, comment.block.documentation keyword | #b0c4de | — |
| string | #8fbc8f | — |
| punctuation.definition.string.begin, punctuation.definition.string.end | #8fbc8f | — |
| constant, variable.other.constant | #cd853f | — |
| constant.numeric | #cd853f | — |
| keyword, storage.type, storage.modifier | #5f8a5f | bold |
| entity.name.function, meta.function-call | #87ceeb | — |
| variable.parameter | #b0c4de | italic |
| entity.name.type.class, entity.name.class | #87ceeb | — |
| entity.name.type, storage.type | #b0c4de | italic |
| variable | #eef0f2 | — |
| variable.language | #8b7355 | italic |
| entity.name.tag | #5f8a5f | — |
| entity.other.attribute-name | #87ceeb | italic |
| meta.selector | #87ceeb | — |
| support.type.property-name | #b0c4de | — |
| keyword.operator | #8b7355 | — |
| punctuation | #bfc5ca | — |
| string.regexp | #cd853f | — |
| markup.heading | #87ceeb | bold |
| markup.bold | #eef0f2 | bold |
| markup.italic | #eef0f2 | italic |
| markup.underline.link | #87ceeb | — |
| markup.inline.raw | #8fbc8f | — |
| invalid | #cd853f | underline |
| invalid.deprecated | #8b9199 | strikethrough |