Flux Dark Theme
Publisher: YasserElgammalThemes in package: 1
A modern, minimal dark theme with carbon tones and metallic highlights designed for focus and clarity.
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#111111
- activityBar.border#535353
- activityBar.foreground#E4E4E4
- activityBar.inactiveForeground#868786
- activityBarBadge.background#868786
- activityBarBadge.foreground#111111
- badge.background#868786
- badge.foreground#111111
- breadcrumb.activeSelectionForeground#E4E4E4
- breadcrumb.background#232424
- breadcrumb.focusForeground#E4E4E4
- breadcrumb.foreground#A6A6A6
- breadcrumbPicker.background#1A1A1A
- button.background#868786
- button.foreground#111111
- button.hoverBackground#9A9B9A
- diffEditor.insertedTextBackground#7BB8A220
- diffEditor.removedTextBackground#D86A6A20
- dropdown.background#1A1A1A
- dropdown.border#535353
- dropdown.foreground#E4E4E4
- editor.background#232424
- editor.foreground#E4E4E4
- editor.lineHighlightBackground#373737
- editor.lineHighlightBorder#00000000
- editor.selectionBackground#37474F80
- editor.selectionHighlightBackground#37474F60
- editorBracketMatch.background#37474F
- editorBracketMatch.border#9ED4D0
- editorCursor.foreground#E4E4E4
- editorError.foreground#D86A6A
- editorGroupHeader.tabsBackground#1A1A1A
- editorGroupHeader.tabsBorder#535353
- editorGutter.addedBackground#7BB8A2
- editorGutter.deletedBackground#D86A6A
- editorGutter.modifiedBackground#E2B565
- editorHoverWidget.background#1A1A1A
- editorHoverWidget.border#535353
- editorIndentGuide.activeBackground#535353
- editorIndentGuide.background#373737
- editorInfo.foreground#9EB3C2
- editorLineNumber.activeForeground#868786
- editorLineNumber.foreground#535353
- editorRuler.foreground#373737
- editorSuggestWidget.background#1A1A1A
- editorSuggestWidget.border#535353
- editorSuggestWidget.foreground#E4E4E4
- editorSuggestWidget.highlightForeground#9ED4D0
- editorSuggestWidget.selectedBackground#373737
- editorWarning.foreground#E2B565
- editorWhitespace.foreground#535353
- editorWidget.background#1A1A1A
- editorWidget.border#535353
- gitDecoration.addedResourceForeground#7BB8A2
- gitDecoration.conflictingResourceForeground#E2B565
- gitDecoration.deletedResourceForeground#D86A6A
- gitDecoration.ignoredResourceForeground#868786
- gitDecoration.modifiedResourceForeground#E2B565
- gitDecoration.untrackedResourceForeground#9ED4D0
- input.background#1A1A1A
- input.border#535353
- input.foreground#E4E4E4
- input.placeholderForeground#868786
- inputOption.activeBorder#868786
- inputValidation.errorBackground#1A1A1A
- inputValidation.errorBorder#D86A6A
- inputValidation.warningBackground#1A1A1A
- inputValidation.warningBorder#E2B565
- list.activeSelectionBackground#373737
- list.activeSelectionForeground#E4E4E4
- list.focusBackground#373737
- list.focusForeground#E4E4E4
- list.highlightForeground#9ED4D0
- list.hoverBackground#2A2A2A
- list.hoverForeground#E4E4E4
- list.inactiveSelectionBackground#2A2A2A
- list.inactiveSelectionForeground#E4E4E4
- minimap.background#1A1A1A
- minimapSlider.activeBackground#53535370
- minimapSlider.background#53535330
- minimapSlider.hoverBackground#53535350
- panel.background#1A1A1A
- panel.border#535353
- panelTitle.activeBorder#868786
- panelTitle.activeForeground#E4E4E4
- panelTitle.inactiveForeground#A6A6A6
- peekView.border#868786
- peekViewEditor.background#1A1A1A
- peekViewResult.background#1A1A1A
- peekViewTitle.background#111111
- progressBar.background#868786
- scrollbar.shadow#00000050
- scrollbarSlider.activeBackground#86878690
- scrollbarSlider.background#53535350
- scrollbarSlider.hoverBackground#53535370
- sideBar.background#1A1A1A
- sideBar.border#535353
- sideBar.foreground#E4E4E4
- sideBarSectionHeader.background#232424
- sideBarSectionHeader.border#535353
- sideBarSectionHeader.foreground#E4E4E4
- sideBarTitle.foreground#E4E4E4
- statusBar.background#111111
- statusBar.border#535353
- statusBar.debuggingBackground#E2B565
- statusBar.debuggingForeground#111111
- statusBar.foreground#E4E4E4
- statusBar.noFolderBackground#111111
- statusBarItem.prominentBackground#373737
- tab.activeBackground#232424
- tab.activeBorder#00000000
- tab.activeBorderTop#868786
- tab.activeForeground#E4E4E4
- tab.border#535353
- tab.inactiveBackground#1A1A1A
- tab.inactiveForeground#A6A6A6
- terminal.ansiBlack#111111
- terminal.ansiBlue#9EB3C2
- terminal.ansiBrightBlack#535353
- terminal.ansiBrightBlue#C4D7E3
- terminal.ansiBrightCyan#B8E5E2
- terminal.ansiBrightGreen#A7D6C1
- terminal.ansiBrightMagenta#C8D0F0
- terminal.ansiBrightRed#E08080
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#ECC780
- terminal.ansiCyan#9ED4D0
- terminal.ansiGreen#7BB8A2
- terminal.ansiMagenta#B7C0E8
- terminal.ansiRed#D86A6A
- terminal.ansiWhite#E4E4E4
- terminal.ansiYellow#E2B565
- terminal.background#232424
- terminal.foreground#E4E4E4
- titleBar.activeBackground#111111
- titleBar.activeForeground#E4E4E4
- titleBar.border#535353
- titleBar.inactiveBackground#111111
- titleBar.inactiveForeground#868786
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #868786 | italic |
| string, string.quoted, string.template | #A7D6C1 | — |
| string.regexp | #9ED4D0 | — |
| constant.numeric, constant.language.boolean, constant.language.null, constant.language.undefined | #9ED4D0 | — |
| constant.language, constant.character.escape | #7BB8A2 | — |
| constant.other | #7BB8A2 | — |
| keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.other | #9EB3C2 | — |
| keyword.operator, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.assignment | #868786 | — |
| storage, storage.type, storage.modifier | #9EB3C2 | — |
| entity.name.function, meta.function-call, support.function | #C4D7E3 | — |
| entity.name.type, entity.name.class, support.class, support.type | #B7C0E8 | — |
| entity.other.inherited-class | #B7C0E8 | italic |
| variable, variable.other, variable.parameter, variable.language | #DADADA | — |
| variable.other.constant, variable.other.enummember | #7BB8A2 | — |
| entity.name.tag, meta.tag | #9EB3C2 | — |
| entity.other.attribute-name | #C4D7E3 | — |
| support.constant, constant.other.caps | #7BB8A2 | — |
| punctuation, meta.brace, punctuation.section | #868786 | — |
| punctuation.definition.string, punctuation.definition.template-expression | #A7D6C1 | — |
| invalid, invalid.illegal | #D86A6A | — |
| invalid.deprecated | #E2B565 | — |
| markup.heading | #C4D7E3 | bold |
| markup.bold | #E4E4E4 | bold |
| markup.italic | #E4E4E4 | italic |
| markup.underline.link | #9ED4D0 | — |
| markup.inserted | #7BB8A2 | — |
| markup.deleted | #D86A6A | — |
| markup.changed | #E2B565 | — |
| markup.inline.raw, markup.fenced_code | #A7D6C1 | — |
| meta.import, meta.export | #9EB3C2 | — |
| meta.decorator, punctuation.decorator | #E2B565 | — |
| entity.name.section | #C4D7E3 | — |