Fexend Theme
Publisher: FexendThemes in package: 6
A dark, vibrant Visual Studio Code theme inspired by Tailwind CSS and the Shades of Purple theme
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#0f172a
- activityBar.activeBorder#7c86ff
- activityBar.activeFocusBorder#7c86ff
- activityBar.background#0f172a
- activityBar.border#1e293b
- activityBar.dropBorder#7c86ff
- activityBar.foreground#e2e8f0
- activityBar.inactiveForeground#e2e8f080
- activityBarBadge.background#7c86ff
- activityBarBadge.foreground#fff
- activityBarTop.activeBackground#0f172a
- activityBarTop.activeBorder#7c86ff
- activityBarTop.background#0f172a
- activityBarTop.dropBorder#7c86ff
- activityBarTop.foreground#e2e8f0
- activityBarTop.inactiveForeground#e2e8f080
- activityErrorBadge.background#fb2c3620
- activityErrorBadge.foreground#fb2c36
- activityWarningBadge.background#f59e0820
- activityWarningBadge.foreground#f59e08
- badge.background#7c86ff
- badge.foreground#fff
- button.background#7c86ff
- button.border#7c86ff20
- button.foreground#ffffff
- button.hoverBackground#7c86ff
- button.secondaryBackground#7c86ff
- button.secondaryForeground#fff
- button.secondaryHoverBackground#7c86ff
- button.separator#7c86ff
- checkbox.background#7c86ff
- checkbox.border#7c86ff
- checkbox.disabled.background#7c86ff80
- checkbox.disabled.foreground#7c86ff80
- checkbox.foreground#fff
- checkbox.selectBackground#7c86ff20
- checkbox.selectBorder#7c86ff20
- commandCenter.activeBackground#0f172a
- commandCenter.activeBorder#7c86ff
- commandCenter.activeForeground#e2e8f0
- commandCenter.background#0f172a
- commandCenter.border#7c86ff20
- commandCenter.debuggingBackground#0f172a20
- commandCenter.foreground#e2e8f0
- commandCenter.inactiveBorder#7c86ff20
- commandCenter.inactiveForeground#e2e8f080
- debugExceptionWidget.background#0f172a
- debugExceptionWidget.border#7c86ff20
- descriptionForeground#e2e8f090
- disabledForeground#e2e8f080
- dropdown.background#7c86ff20
- dropdown.border#7c86ff20
- dropdown.foreground#7c86ff20
- dropdown.listBackground#7c86ff20
- editor.background#1e293b
- editor.findMatchBackground#7c86ff40
- editor.findMatchForeground#e2e8f0
- editor.findMatchHighlightBackground#7c86ff25
- editor.foreground#e2e8f0
- editor.inactiveSelectionBackground#7c86ff20
- editor.lineHighlightBackground#243448
- editor.lineHighlightBorder#2d3f55
- editor.selectionBackground#7c86ff30
- editor.selectionForeground#e2e8f0
- editor.selectionHighlightBackground#7c86ff25
- editor.wordHighlightBackground#7c86ff25
- editor.wordHighlightStrongBackground#7c86ff30
- editorActionList.background#162032
- editorActionList.focusBackground#7c86ff
- editorActionList.focusForeground#e2e8f0
- editorActionList.foreground#e2e8f0
- editorCursor.background#1e293b
- editorCursor.foreground#e2e8f0
- editorGroup.border#243448
- editorGroup.dropBackground#7c86ff20
- editorGroup.dropIntoPromptBackground#162032
- editorGroup.dropIntoPromptBorder#7c86ff
- editorGroup.dropIntoPromptForeground#e2e8f0
- editorGroup.emptyBackground#162032
- editorGroup.focusedEmptyBorder#243448
- editorGroupHeader.border#243448
- editorGroupHeader.noTabsBackground#162032
- editorGroupHeader.tabsBackground#162032
- editorGroupHeader.tabsBorder#243448
- editorGutter.background#1e293b
- editorHoverWidget.background#0f172a
- editorHoverWidget.border#7c86ff20
- editorHoverWidget.foreground#e2e8f0
- editorHoverWidget.highlightForeground#e2e8f0
- editorHoverWidget.statusBarBackground#0f172a
- editorIndentGuide.activeBackground1#7c86ff
- editorIndentGuide.background1#2d3f55
- editorLineNumber.activeForeground#e2e8f0
- editorLineNumber.dimmedForeground#e2e8f040
- editorLineNumber.foreground#e2e8f060
- editorMinimap.inlineChatInserted#00c95020
- editorOverviewRuler.background#1e293b
- editorOverviewRuler.border#2d3f55
- editorPane.background#1e293b
- editorRuler.foreground#2d3f55
- editorSuggestWidget.background#0f172a
- editorSuggestWidget.border#7c86ff20
- editorSuggestWidget.focusHighlightForeground#e2e8f0
- editorSuggestWidget.foreground#e2e8f0
- editorSuggestWidget.highlightForeground#e2e8f0
- editorSuggestWidget.selectedBackground#7c86ff20
- editorSuggestWidget.selectedForeground#e2e8f0
- editorSuggestWidget.selectedIconForeground#e2e8f0
- editorSuggestWidgetStatus.foreground#e2e8f080
- editorWhitespace.foreground#e2e8f015
- editorWidget.background#0f172a
- editorWidget.border#7c86ff20
- editorWidget.foreground#e2e8f0
- editorWidget.resizeBorder#7c86ff20
- errorForeground#fb2c36
- focusBorder#7c86ff
- foreground#e2e8f0
- icon.foreground#e2e8f090
- input.background#2d3f5540
- input.border#7c86ff30
- input.foreground#e2e8f0
- input.placeholderForeground#e2e8f0
- inputOption.activeBackground#7c86ff10
- inputOption.activeBorder#7c86ff
- inputOption.activeForeground#e2e8f0
- inputOption.hoverBackground#7c86ff10
- inputValidation.errorBackground#3b0808
- inputValidation.errorBorder#fb2c36
- inputValidation.errorForeground#fca5a5
- inputValidation.infoBackground#012a30
- inputValidation.infoBorder#00b8db
- inputValidation.infoForeground#a5f3fc
- inputValidation.warningBackground#2a1500
- inputValidation.warningBorder#f59e08
- inputValidation.warningForeground#fde68a
- list.activeSelectionBackground#7c86ff30
- list.activeSelectionForeground#e2e8f0
- list.activeSelectionIconForeground#e2e8f0
- list.deemphasizedForeground#e2e8f080
- list.dropBackground#7c86ff20
- list.dropBetweenBackground#7c86ff20
- list.errorForeground#fb2c36
- list.filterMatchBackground#7c86ff20
- list.filterMatchBorder#7c86ff
- list.focusAndSelectionOutline#7c86ff
- list.focusBackground#7c86ff25
- list.focusForeground#e2e8f0
- list.focusHighlightForeground#e2e8f0
- list.focusOutline#7c86ff
- list.highlightForeground#e2e8f0
- list.hoverBackground#7c86ff20
- list.hoverForeground#e2e8f0
- list.inactiveFocusBackground#7c86ff20
- list.inactiveFocusOutline#7c86ff
- list.inactiveSelectionBackground#7c86ff20
- list.inactiveSelectionForeground#e2e8f0
- list.inactiveSelectionIconForeground#e2e8f0
- list.invalidItemForeground#fb2c36
- list.warningForeground#f59e08
- listFilterWidget.background#7c86ff20
- listFilterWidget.noMatchesOutline#fb2c36
- listFilterWidget.outline#7c86ff
- listFilterWidget.shadow#7c86ff20
- menu.background#1e293b
- menu.border#243448
- menu.foreground#e2e8f0
- menu.selectionBackground#7c86ff30
- menu.selectionBorder#7c86ff
- menu.selectionForeground#e2e8f0
- menu.separatorBackground#7c86ff30
- menubar.selectionBackground#7c86ff20
- menubar.selectionBorder#7c86ff
- menubar.selectionForeground#e2e8f0
- minimap.background#1e293b
- minimap.chatEditHighlight#7c86ff20
- minimap.errorHighlight#fb2c3620
- minimap.findMatchHighlight#7c86ff20
- minimap.foregroundOpacity#7c86ff80
- minimap.infoHighlight#00b8db20
- minimap.selectionHighlight#7c86ff20
- minimap.selectionOccurrenceHighlight#7c86ff20
- minimap.warningHighlight#f59e0820
- minimapGutter.addedBackground#00c95020
- minimapGutter.deletedBackground#fb2c3620
- minimapGutter.modifiedBackground#7c86ff20
- minimapSlider.activeBackground#7c86ff60
- minimapSlider.background#7c86ff20
- minimapSlider.hoverBackground#7c86ff40
- notificationCenter.border#7c86ff20
- notificationCenterHeader.background#0f172a
- notificationCenterHeader.foreground#e2e8f0
- notificationLink.foreground#e2e8f0
- notifications.background#0f172a
- notifications.border#7c86ff20
- notifications.foreground#e2e8f0
- notificationsErrorIcon.foreground#fb2c36
- notificationsInfoIcon.foreground#00b8db
- notificationsWarningIcon.foreground#f59e08
- notificationToast.border#7c86ff20
- panel.background#162032
- panel.border#243448
- panel.dropBorder#7c86ff
- panelTitle.activeBorder#7c86ff
- panelTitle.activeForeground#e2e8f0
- panelTitle.border#243448
- panelTitle.inactiveForeground#e2e8f080
- pickerGroup.border#7c86ff
- pickerGroup.foreground#e2e8f0
- profileBadge.background#7c86ff
- profileBadge.foreground#fff
- profiles.sashBorder#7c86ff
- progressBar.background#7c86ff
- quickInput.background#0f172a
- quickInput.foreground#e2e8f0
- quickInputList.focusBackground#7c86ff20
- quickInputList.focusForeground#e2e8f0
- quickInputList.focusIconForeground#e2e8f0
- quickInputTitle.background#0f172a
- radio.activeBackground#7c86ff20
- radio.activeBorder#7c86ff
- radio.activeForeground#fff
- radio.inactiveBackground#7c86ff
- radio.inactiveBorder#7c86ff
- radio.inactiveForeground#fff
- radio.inactiveHoverBackground#7c86ff
- sash.hoverBorder#7c86ff
- scrollbar.shadow#7c86ff20
- scrollbarSlider.activeBackground#7c86ff
- scrollbarSlider.background#7c86ff60
- scrollbarSlider.hoverBackground#7c86ff80
- selection.background#7c86ff30
- sideBar.background#162032
- sideBar.border#243448
- sideBar.dropBackground#7c86ff20
- sideBar.foreground#e2e8f0
- sideBarActivityBarTop.border#243448
- sideBarSectionHeader.background#162032
- sideBarSectionHeader.border#243448
- sideBarSectionHeader.foreground#e2e8f0
- sideBarStickyScroll.background#162032
- sideBarStickyScroll.border#243448
- sideBarStickyScroll.shadow#7c86ff20
- sideBarTitle.background#162032
- sideBarTitle.border#243448
- sideBarTitle.foreground#e2e8f0
- statusBar.background#0f172a
- statusBar.border#1e293b
- statusBar.debuggingBackground#0f172a
- statusBar.debuggingBorder#1e293b
- statusBar.debuggingForeground#e2e8f0
- statusBar.foreground#e2e8f0
- statusBar.noFolderBackground#0f172a
- statusBar.noFolderBorder#1e293b
- statusBar.noFolderForeground#e2e8f0
- tab.activeBackground#1e293b
- tab.activeBorder#7c86ff
- tab.activeBorderTop#7c86ff
- tab.activeForeground#e2e8f0
- tab.activeModifiedBorder#7c86ff
- tab.border#243448
- tab.dragAndDropBorder#7c86ff
- tab.hoverBackground#243448
- tab.hoverBorder#7c86ff
- tab.hoverForeground#e2e8f0
- tab.inactiveBackground#162032
- tab.inactiveForeground#e2e8f080
- tab.inactiveModifiedBorder#7c86ff20
- tab.lastPinnedBorder#243448
- tab.selectedBackground#1e293b
- tab.selectedBorderTop#7c86ff
- tab.selectedForeground#e2e8f0
- tab.unfocusedActiveBackground#1e293b
- tab.unfocusedActiveBorder#7c86ff20
- tab.unfocusedActiveBorderTop#7c86ff20
- tab.unfocusedActiveForeground#e2e8f080
- tab.unfocusedActiveModifiedBorder#7c86ff20
- tab.unfocusedHoverBackground#243448
- tab.unfocusedHoverBorder#7c86ff20
- tab.unfocusedHoverForeground#e2e8f080
- tab.unfocusedInactiveBackground#162032
- tab.unfocusedInactiveForeground#e2e8f060
- tab.unfocusedInactiveModifiedBorder#7c86ff20
- terminal.background#1e293b
- terminal.border#243448
- terminal.foreground#e2e8f0
- terminal.selectionBackground#7c86ff30
- terminal.selectionForeground#e2e8f0
- textBlockQuote.background#2d3f55
- textBlockQuote.border#7c86ff
- textCodeBlock.background#2d3f55
- textLink.activeForeground#e2e8f0
- textLink.foreground#e2e8f0
- textPreformat.background#2d3f55
- textPreformat.foreground#e2e8f0
- textSeparator.foreground#e2e8f0
- titleBar.activeBackground#0f172a
- titleBar.activeForeground#e2e8f0
- titleBar.border#1e293b
- titleBar.inactiveBackground#0f172a
- titleBar.inactiveForeground#e2e8f080
- toolbar.activeBackground#7c86ff20
- toolbar.hoverBackground#7c86ff20
- toolbar.hoverOutline#7c86ff20
- tree.inactiveIndentGuidesStroke#7c86ff20
- tree.indentGuidesStroke#7c86ff20
- tree.tableColumnsBorder#7c86ff20
- tree.tableOddRowsBackground#7c86ff20
- widget.border#7c86ff
- widget.shadow#7c86ff40
- window.activeBorder#7c86ff
- window.inactiveBorder#7c86ff80
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment, comment.line, comment.block | #94a3b8 | italic |
| string, string.quoted, string.template, string.quoted.single, string.quoted.double, string.quoted.triple, string.unquoted | #34d399 | italic |
| constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary | #fbbf24 | italic |
| constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.nan | #f87171 | bold italic |
| variable, variable.other, variable.parameter, variable.assignment | #e2e8f0 | italic |
| variable.other.property, variable.other.object.property, meta.object-literal.key | #38bdf8 | italic |
| keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.other | #fb7185 | bold italic |
| storage.type, storage.modifier, storage.type.class, storage.type.function, storage.type.var | #fb7185 | bold italic |
| keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical | #fb7185 | italic |
| entity.name.function, support.function, meta.function-call, variable.function | #22d3ee | bold italic |
| entity.name.class, entity.name.type.class, support.class | #fbbf24 | bold italic |
| entity.name.type, support.type, entity.other.inherited-class | #38bdf8 | italic |
| markup.heading, entity.name.section.markdown | #f97316 | bold italic |
| punctuation.definition.heading.markdown, punctuation.definition.heading.setext | #fb7185 | — |
| markup.bold | #fbbf24 | bold italic |
| punctuation.definition.bold.markdown | #f59e0b | — |
| markup.italic | #22d3ee | italic |
| punctuation.definition.italic.markdown | #22d3ee | — |
| markup.strikethrough | #ef4444 | strikethrough italic |
| punctuation.definition.strikethrough.markdown | #ef4444 | — |
| markup.inline.raw, markup.fenced_code, markup.raw.block.markdown | #34d399 | italic |
| punctuation.definition.raw.markdown, punctuation.definition.markdown | #34d399 | — |
| fenced_code.block.language.markdown, markup.fenced_code.block.markdown | #fbbf24 | italic |
| markup.underline.link | #38bdf8 | italic |
| string.other.link.title.markdown, meta.link.inline.markdown | #7c86ff | italic |
| punctuation.definition.link.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown | #94a3b8 | — |
| markup.list, punctuation.definition.list.begin.markdown | #fb7185 | — |
| markup.quote | #94a3b8 | italic |
| punctuation.definition.quote.begin.markdown | #64748b | — |
| meta.separator.markdown | #475569 | — |
| punctuation.separator.table-cell.markdown, punctuation.section.table-header.markdown | #64748b | — |
| entity.name.tag, meta.tag, punctuation.definition.tag | #fb7185 | italic |
| entity.other.attribute-name, entity.other.attribute-name.html | #fde047 | italic |
| entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #fb7185 | italic |
| support.type.property-name.css | #38bdf8 | italic |
| support.type.property-name.json, string.quoted.double.json support.type.property-name.json | #38bdf8 | italic |
| entity.name.tag.yaml | #38bdf8 | italic |
| string.unquoted.yaml | #34d399 | italic |
| punctuation.separator, punctuation.terminator, punctuation.accessor | #94a3b8 | italic |