Neutral Flow
Publisher: JenuelDevOfficialThemes in package: 7
A clean, calm dark theme with neutral tones designed for focused and comfortable coding.
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#21252b
- activityBar.foreground#abb2bf
- activityBarBadge.background#61afef
- activityBarBadge.foreground#ffffff
- badge.background#21252b
- button.background#4d78cc
- button.secondaryBackground#3a3f4b
- button.secondaryForeground#abb2bf
- checkbox.border#3a3f4b
- debugToolBar.background#21252b
- descriptionForeground#abb2bf
- diffEditor.insertedTextBackground#264f3a4d
- diffEditor.removedTextBackground#f437534d
- dropdown.background#21252b
- dropdown.border#181a1f
- editor.background#282c34
- editor.findMatchBackground#528bff4d
- editor.findMatchBorder#528bff
- editor.findMatchHighlightBackground#528bff4d
- editor.foreground#abb2bf
- editor.lineHighlightBackground#2c313a
- editor.selectionBackground#3e4451
- editor.selectionHighlightBackground#3e4451
- editor.selectionHighlightBorder#3e4451
- editor.wordHighlightBackground#528bff4d
- editor.wordHighlightBorder#528bff
- editor.wordHighlightStrongBackground#528bff4d
- editor.wordHighlightStrongBorder#528bff
- editorBracketHighlight.foreground1#e06c75
- editorBracketHighlight.foreground2#d19a66
- editorBracketHighlight.foreground3#e5c07b
- editorBracketHighlight.foreground4#98c379
- editorBracketHighlight.foreground5#56b6c2
- editorBracketHighlight.foreground6#61afef
- editorBracketHighlight.unexpectedBracket.foreground#f43753
- editorBracketMatch.background#282c34
- editorBracketMatch.border#abb2bf
- editorBracketPairGuide.activeBackground1#e06c75
- editorBracketPairGuide.activeBackground2#d19a66
- editorBracketPairGuide.activeBackground3#e5c07b
- editorBracketPairGuide.activeBackground4#98c379
- editorBracketPairGuide.activeBackground5#56b6c2
- editorBracketPairGuide.activeBackground6#61afef
- editorCursor.background#abb2bf
- editorCursor.foreground#528bff
- editorError.foreground#f43753
- editorGroup.border#181a1f
- editorGroupHeader.tabsBackground#21252b
- editorGutter.addedBackground#98c379
- editorGutter.deletedBackground#f43753
- editorGutter.modifiedBackground#e5c07b
- editorHoverWidget.background#21252b
- editorHoverWidget.border#181a1f
- editorIndentGuide.activeBackground1#495162
- editorIndentGuide.background1#3b4048
- editorInlayHint.background#282c34
- editorInlayHint.foreground#5c6370
- editorLineNumber.activeForeground#abb2bf
- editorLineNumber.foreground#495162
- editorMarkerNavigation.background#21252b
- editorRuler.foreground#3b4048
- editorSuggestWidget.background#21252b
- editorSuggestWidget.border#181a1f
- editorSuggestWidget.selectedBackground#3e4451
- editorWarning.foreground#e5c07b
- editorWidget.background#21252b
- focusBorder#3e4451
- gitDecoration.ignoredResourceForeground#5c6370
- input.background#181a1f
- input.border#3e4451
- list.activeSelectionBackground#3e4451
- list.activeSelectionForeground#ffffff
- list.focusBackground#3e4451
- list.focusForeground#abb2bf
- list.highlightForeground#61afef
- list.hoverBackground#2c313a
- list.hoverForeground#abb2bf
- list.inactiveSelectionBackground#3e4451
- list.inactiveSelectionForeground#abb2bf
- list.warningForeground#e5c07b
- menu.foreground#abb2bf
- menu.separatorBackground#181a1f
- minimapGutter.addedBackground#98c379
- minimapGutter.deletedBackground#f43753
- minimapGutter.modifiedBackground#e5c07b
- panel.border#181a1f
- panelSectionHeader.background#21252b
- peekView.border#3e4451
- peekViewEditor.background#282c34
- peekViewEditor.matchHighlightBackground#528bff4d
- peekViewResult.background#21252b
- scrollbar.shadow#21252b
- scrollbarSlider.activeBackground#5c637080
- scrollbarSlider.background#49516280
- scrollbarSlider.hoverBackground#5c637080
- settings.focusedRowBackground#2c313a
- settings.headerForeground#abb2bf
- sideBar.background#21252b
- sideBar.border#181a1f
- sideBar.foreground#abb2bf
- sideBarSectionHeader.background#2c313a
- sideBarSectionHeader.foreground#abb2bf
- statusBar.background#21252b
- statusBar.debuggingBackground#d19a66
- statusBar.debuggingBorder#e06c75
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#abb2bf
- statusBar.noFolderBackground#21252b
- statusBarItem.hoverBackground#3e4451
- statusBarItem.remoteBackground#98c379
- statusBarItem.remoteForeground#282c34
- tab.activeBackground#282c34
- tab.activeForeground#abb2bf
- tab.border#181a1f
- tab.hoverBackground#2c313a
- tab.inactiveBackground#21252b
- tab.unfocusedHoverBackground#2c313a
- terminal.ansiBlack#000000
- terminal.ansiBlue#61afef
- terminal.ansiBrightBlack#5c6370
- terminal.ansiBrightBlue#61afef
- terminal.ansiBrightCyan#56b6c2
- terminal.ansiBrightGreen#98c379
- terminal.ansiBrightMagenta#c678dd
- terminal.ansiBrightRed#e06c75
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#e5c07b
- terminal.ansiCyan#56b6c2
- terminal.ansiGreen#98c379
- terminal.ansiMagenta#c678dd
- terminal.ansiRed#e06c75
- terminal.ansiWhite#abb2bf
- terminal.ansiYellow#e5c07b
- terminal.background#282c34
- terminal.border#181a1f
- terminal.foreground#abb2bf
- terminal.selectionBackground#3e4451
- textBlockQuote.background#282c34
- textBlockQuote.border#181a1f
- textLink.foreground#61afef
- textPreformat.foreground#d19a66
- titleBar.activeBackground#21252b
- titleBar.activeForeground#abb2bf
- titleBar.inactiveBackground#282c34
- titleBar.inactiveForeground#abb2bf
- walkThrough.embeddedEditorBackground#282c34
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, comment.block, comment.block.documentation, comment.line, punctuation.definition.comment | #5c6370 | italic |
| variable, support.variable, variable.other.property, variable.other.object.property, entity.name.variable, constant.other.placeholder, string constant.other.placeholder | #e06c75 | — |
| constant.other.color | #56b6c2 | — |
| invalid, invalid.illegal | #f43753 | bold italic |
| storage.type, storage.type.class, storage.type.function, storage.type.namespace, storage.type.module, storage.type.enum, storage.type.interface, storage.type.struct, storage.type.trait, storage.type.implementation, storage.type.type | #c678dd | italic |
| storage.modifier, storage.modifier.access, storage.modifier.async, storage.modifier.const, storage.modifier.default, storage.modifier.final, storage.modifier.override, storage.modifier.static, storage.modifier.abstract | #c678dd | — |
| keyword.control, keyword.control.conditional, keyword.control.trycatch, keyword.control.loop, keyword.control.return, keyword.control.flow | #c678dd | — |
| keyword.operator, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.logical, keyword.operator.string, keyword.operator.word | #56b6c2 | — |
| variable.function, entity.name.function, support.function | #61afef | — |
| entity.name.function, meta.function-call, support.function | #61afef | — |
| keyword, keyword.other, keyword.other.definition.ini, entity.name.tag, meta.tag.sgml | #e06c75 | — |
| entity.name.tag, entity.name.tag.html, entity.name.tag.xml | #e06c75 | — |
| entity.name.type, entity.name.class, support.class, support.type, entity.name.type.class, entity.name.type.module, entity.name.type.interface, entity.name.type.enum, support.type.sys-types | #e5c07b | — |
| entity.name.namespace, entity.name.scope-resolution, entity.name.module, entity.name.import | #e5c07b | — |
| string, string.other, string.quoted, string.quoted.double, string.quoted.single, string.quoted.template, string.regexp, string.interpolated, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted, entity.name.tag.css, entity.name.tag.scss, entity.other.attribute-name | #98c379 | — |
| constant.numeric, constant.numeric.decimal, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal, constant.other.color.numeric | #d19a66 | — |
| constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.this, constant.language.self, constant.language.super, variable.language, variable.language.this, variable.language.super, variable.language.self, support.constant, constant.character, constant.escape, keyword.other.unit | #d19a66 | — |
| entity.other.attribute-name.class, entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss | #e5c07b | — |
| entity.other.attribute-name.id, entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss | #d19a66 | — |
| support.constant.property-value, support.constant.color, meta.property-value.css, meta.property-value.scss | #d19a66 | — |
| markup.deleted | #f43753 | — |
| markup.changed | #e5c07b | — |
| constant.character.escape | #56b6c2 | — |
| string.regexp, constant.character.escape | #56b6c2 | — |
| *uri*, *url* | #61afef | underline |
| source.json meta.structure.dictionary.json support.type.property-name.json | #e06c75 | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #d19a66 | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #e5c07b | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #98c379 | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #56b6c2 | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #61afef | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #c678dd | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #f43753 | — |
| text.html.markdown, punctuation.definition.list_item.markdown | #abb2bf | — |
| text.html.markdown markup.inline.raw.markdown | #c678dd | — |
| text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown | #56b6c2 | — |
| markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown | #e06c75 | bold |
| markup.italic | #abb2bf | italic |
| markup.bold, markup.bold string | #abb2bf | bold |
| markup.bold markup.italic, markup.bold markup.italic string | #abb2bf | bold italic |
| markup.underline | #d19a66 | underline |
| markup.strike | #5c6370 | italic |
| markup.quote punctuation.definition.blockquote.markdown | #56b6c2 | — |
| markup.quote | — | italic |
| string.other.link.title.markdown, string.other.link.description.title.markdown, constant.other.reference.link.markdown, markup.substitution.attribute-reference | #61afef | — |
| string.other.link.description.title.markdown | #c678dd | — |
| constant.other.reference.link.markdown | #e5c07b | — |
| markup.raw.block | #c678dd | — |
| markup.raw.block.fenced.markdown | #282c34 | — |
| punctuation.definition.fenced.markdown, variable.language.fenced.markdown | #5c6370 | — |
| markup.raw.block.fenced.markdown, variable.language.fenced.markdown | #5c6370 | — |
| meta.separator | #5c6370 | bold |
| markup.table | #abb2bf | — |
| token.info-token | #61afef | — |
| token.warn-token | #e5c07b | — |
| token.error-token | #f43753 | — |
| token.debug-token | #c678dd | — |