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#141619
- activityBar.border#292D32
- activityBar.foreground#C2C7CE
- activityBar.inactiveForeground#737A84
- activityBarBadge.background#718D9D
- activityBarBadge.foreground#141619
- badge.background#718D9D
- badge.foreground#141619
- breadcrumb.activeSelectionForeground#C9CDD3
- breadcrumb.background#1B1D20
- breadcrumb.focusForeground#C9CDD3
- breadcrumb.foreground#7F8791
- breadcrumbPicker.background#202328
- button.background#607D8B
- button.foreground#F0F2F4
- button.hoverBackground#6D8A98
- debugIcon.continueForeground#7FA994
- debugIcon.disconnectForeground#D86A6A
- debugIcon.pauseForeground#8FA8B8
- debugIcon.restartForeground#7FA994
- debugIcon.startForeground#7FA994
- debugIcon.stepIntoForeground#A9BFCC
- debugIcon.stepOutForeground#A9BFCC
- debugIcon.stepOverForeground#A9BFCC
- debugIcon.stopForeground#D86A6A
- debugToolBar.background#202328
- debugToolBar.border#343940
- descriptionForeground#9299A3
- diffEditor.insertedTextBackground#7BB8A220
- diffEditor.removedTextBackground#D86A6A20
- dropdown.background#202328
- dropdown.border#343940
- dropdown.foreground#C9CDD3
- editor.background#1B1D20
- editor.findMatchBackground#8E713B80
- editor.findMatchHighlightBackground#68593660
- editor.findRangeHighlightBackground#34434F50
- editor.foreground#C9CDD3
- editor.hoverHighlightBackground#34434F50
- editor.lineHighlightBackground#22262B
- editor.lineHighlightBorder#00000000
- editor.selectionBackground#3B4C5A80
- editor.selectionHighlightBackground#34434F60
- editorBracketMatch.background#33414A80
- editorBracketMatch.border#84B6B2
- editorCursor.foreground#B8C7D1
- editorError.foreground#D86A6A
- editorGroupHeader.tabsBackground#17191C
- editorGroupHeader.tabsBorder#292D32
- editorGutter.addedBackground#7BB8A2
- editorGutter.deletedBackground#D86A6A
- editorGutter.modifiedBackground#E2B565
- editorHoverWidget.background#202328
- editorHoverWidget.border#343940
- editorIndentGuide.activeBackground1#454C55
- editorIndentGuide.background1#2A2E34
- editorInfo.foreground#9EB3C2
- editorLineNumber.activeForeground#9299A3
- editorLineNumber.foreground#555B63
- editorRuler.foreground#2A2E34
- editorSuggestWidget.background#202328
- editorSuggestWidget.border#343940
- editorSuggestWidget.foreground#C9CDD3
- editorSuggestWidget.highlightForeground#84B6B2
- editorSuggestWidget.selectedBackground#2D3740
- editorWarning.foreground#E2B565
- editorWhitespace.foreground#3D4249
- editorWidget.background#202328
- editorWidget.border#343940
- errorForeground#D86A6A
- focusBorder#718D9D80
- foreground#C9CDD3
- gitDecoration.addedResourceForeground#7BB8A2
- gitDecoration.conflictingResourceForeground#E2B565
- gitDecoration.deletedResourceForeground#D86A6A
- gitDecoration.ignoredResourceForeground#707780
- gitDecoration.modifiedResourceForeground#E2B565
- gitDecoration.untrackedResourceForeground#9ED4D0
- input.background#202328
- input.border#343940
- input.foreground#C9CDD3
- input.placeholderForeground#737A84
- inputOption.activeBorder#718D9D
- inputValidation.errorBackground#202328
- inputValidation.errorBorder#D86A6A
- inputValidation.warningBackground#202328
- inputValidation.warningBorder#E2B565
- list.activeSelectionBackground#2D3740
- list.activeSelectionForeground#D5D8DC
- list.focusBackground#2A323A
- list.focusForeground#D5D8DC
- list.highlightForeground#84B6B2
- list.hoverBackground#22262B
- list.hoverForeground#C9CDD3
- list.inactiveSelectionBackground#24282D
- list.inactiveSelectionForeground#C2C7CE
- minimap.background#17191C
- minimapSlider.activeBackground#78838F70
- minimapSlider.background#59616B30
- minimapSlider.hoverBackground#68727D50
- notificationCenter.border#343940
- notificationCenterHeader.background#1D2024
- notifications.background#202328
- notifications.foreground#C9CDD3
- notificationsErrorIcon.foreground#D86A6A
- notificationsInfoIcon.foreground#8FA8B8
- notificationsWarningIcon.foreground#E2B565
- notificationToast.border#343940
- panel.background#17191C
- panel.border#292D32
- panelTitle.activeBorder#718D9D
- panelTitle.activeForeground#C9CDD3
- panelTitle.inactiveForeground#7F8791
- peekView.border#607D8B
- peekViewEditor.background#1B1D20
- peekViewResult.background#17191C
- peekViewTitle.background#141619
- progressBar.background#718D9D
- quickInput.background#202328
- quickInput.foreground#C9CDD3
- quickInputList.focusBackground#2D3740
- quickInputList.focusForeground#D5D8DC
- quickInputList.focusIconForeground#84B6B2
- scrollbar.shadow#00000050
- scrollbarSlider.activeBackground#78838F80
- scrollbarSlider.background#59616B40
- scrollbarSlider.hoverBackground#68727D60
- sideBar.background#17191C
- sideBar.border#292D32
- sideBar.foreground#B9BEC5
- sideBarSectionHeader.background#1D2024
- sideBarSectionHeader.border#292D32
- sideBarSectionHeader.foreground#B9BEC5
- sideBarTitle.foreground#C9CDD3
- statusBar.background#141619
- statusBar.border#292D32
- statusBar.debuggingBackground#E2B565
- statusBar.debuggingForeground#111111
- statusBar.foreground#B9BEC5
- statusBar.noFolderBackground#141619
- statusBarItem.prominentBackground#24282D
- tab.activeBackground#1B1D20
- tab.activeBorder#00000000
- tab.activeBorderTop#718D9D
- tab.activeForeground#C9CDD3
- tab.border#292D32
- tab.inactiveBackground#17191C
- tab.inactiveForeground#7F8791
- 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#E2E5E9
- terminal.ansiBrightYellow#ECC780
- terminal.ansiCyan#9ED4D0
- terminal.ansiGreen#7BB8A2
- terminal.ansiMagenta#B7C0E8
- terminal.ansiRed#D86A6A
- terminal.ansiWhite#C9CDD3
- terminal.ansiYellow#E2B565
- terminal.background#1B1D20
- terminal.foreground#C9CDD3
- textLink.activeForeground#A4CECA
- textLink.foreground#84B6B2
- titleBar.activeBackground#141619
- titleBar.activeForeground#B9BEC5
- titleBar.border#292D32
- titleBar.inactiveBackground#141619
- titleBar.inactiveForeground#737A84
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #707780 | italic |
| string, string.quoted, string.template | #93BFAE | — |
| string.regexp | #84B6B2 | — |
| constant.numeric, constant.language.boolean, constant.language.null, constant.language.undefined | #84B6B2 | — |
| constant.language, constant.character.escape | #7FA994 | — |
| constant.other | #7FA994 | — |
| keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.other | #8FA8B8 | — |
| keyword.operator, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.assignment | #858B93 | — |
| storage, storage.type, storage.modifier | #8FA8B8 | — |
| entity.name.function, meta.function-call, support.function | #A9BFCC | — |
| entity.name.type, entity.name.class, support.class, support.type | #A9AFD0 | — |
| entity.other.inherited-class | #A9AFD0 | italic |
| variable, variable.other, variable.parameter, variable.language | #C3C7CC | — |
| variable.other.constant, variable.other.enummember | #7FA994 | — |
| entity.name.tag, meta.tag | #8FA8B8 | — |
| entity.other.attribute-name | #A9BFCC | — |
| support.constant, constant.other.caps | #7FA994 | — |
| punctuation, meta.brace, punctuation.section | #858B93 | — |
| punctuation.definition.string, punctuation.definition.template-expression | #93BFAE | — |
| invalid, invalid.illegal | #D86A6A | — |
| invalid.deprecated | #E2B565 | — |
| markup.heading | #A9BFCC | bold |
| markup.bold | #C9CDD3 | bold |
| markup.italic | #C9CDD3 | italic |
| markup.underline.link | #84B6B2 | — |
| markup.inserted | #7FA994 | — |
| markup.deleted | #D86A6A | — |
| markup.changed | #E2B565 | — |
| markup.inline.raw, markup.fenced_code | #93BFAE | — |
| meta.import, meta.export | #8FA8B8 | — |
| meta.decorator, punctuation.decorator | #E2B565 | — |
| entity.name.section | #A9BFCC | — |