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#1e1537
- activityBar.activeBorder#7c86ff
- activityBar.activeFocusBorder#7c86ff
- activityBar.background#1e1537
- activityBar.border#2a1f4d
- activityBar.dropBorder#7c86ff
- activityBar.foreground#ffffff
- activityBar.inactiveForeground#ffffff80
- activityBarBadge.background#7c86ff
- activityBarBadge.foreground#fff
- 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#1e1537
- commandCenter.activeBorder#7c86ff
- commandCenter.activeForeground#ffffff
- commandCenter.background#1e1537
- commandCenter.border#7c86ff20
- commandCenter.debuggingBackground#1e153720
- commandCenter.foreground#ffffff
- commandCenter.inactiveBorder#7c86ff20
- commandCenter.inactiveForeground#ffffff80
- debugExceptionWidget.background#1e1537
- debugExceptionWidget.border#7c86ff20
- descriptionForeground#ffffff90
- disabledForeground#ffffff80
- dropdown.background#7c86ff20
- dropdown.border#7c86ff20
- dropdown.foreground#7c86ff20
- dropdown.listBackground#7c86ff20
- editor.background#2d2148
- editor.findMatchBackground#7c86ff40
- editor.findMatchForeground#ffffff
- editor.findMatchHighlightBackground#7c86ff25
- editor.foreground#ffffff
- editor.inactiveSelectionBackground#7c86ff20
- editor.lineHighlightBackground#342856
- editor.lineHighlightBorder#3d2f62
- editor.selectionBackground#7c86ff30
- editor.selectionForeground#ffffff
- editor.selectionHighlightBackground#7c86ff25
- editor.wordHighlightBackground#7c86ff25
- editor.wordHighlightStrongBackground#7c86ff30
- editorActionList.background#252040
- editorActionList.focusBackground#7c86ff
- editorActionList.focusForeground#ffffff
- editorActionList.foreground#ffffff
- editorCursor.background#2d2148
- editorCursor.foreground#ffffff
- editorGroup.border#342856
- editorGroup.dropBackground#7c86ff20
- editorGroup.emptyBackground#252040
- editorGroup.focusedEmptyBorder#342856
- editorGroupHeader.border#342856
- editorGroupHeader.noTabsBackground#252040
- editorGroupHeader.tabsBackground#252040
- editorGroupHeader.tabsBorder#342856
- editorGutter.background#2d2148
- editorHoverWidget.background#1e1537
- editorHoverWidget.border#7c86ff20
- editorHoverWidget.foreground#ffffff
- editorHoverWidget.highlightForeground#fff
- editorHoverWidget.statusBarBackground#1e1537
- editorIndentGuide.activeBackground1#7c86ff
- editorIndentGuide.background1#3d2f62
- editorLineNumber.activeForeground#ffffff
- editorLineNumber.dimmedForeground#ffffff40
- editorLineNumber.foreground#ffffff60
- editorOverviewRuler.background#2d2148
- editorOverviewRuler.border#3d2f62
- editorPane.background#2d2148
- editorSuggestWidget.background#1e1537
- editorSuggestWidget.border#7c86ff20
- editorSuggestWidget.focusHighlightForeground#fff
- editorSuggestWidget.foreground#ffffff
- editorSuggestWidget.highlightForeground#fff
- editorSuggestWidget.selectedBackground#7c86ff20
- editorSuggestWidget.selectedForeground#ffffff
- editorSuggestWidget.selectedIconForeground#ffffff
- editorSuggestWidgetStatus.foreground#ffffff80
- editorWhitespace.foreground#ffffff15
- editorWidget.background#1e1537
- editorWidget.border#7c86ff20
- editorWidget.foreground#ffffff
- editorWidget.resizeBorder#7c86ff20
- errorForeground#fb2c36
- focusBorder#7c86ff
- foreground#ffffff
- icon.foreground#ffffff90
- input.background#3d2f6240
- input.border#7c86ff30
- input.foreground#ffffff
- input.placeholderForeground#fff
- inputOption.activeBackground#7c86ff10
- inputOption.activeBorder#7c86ff
- inputOption.activeForeground#fff
- 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#fff
- list.activeSelectionIconForeground#fff
- list.deemphasizedForeground#ffffff80
- list.dropBackground#7c86ff20
- list.dropBetweenBackground#7c86ff20
- list.errorForeground#fb2c36
- list.filterMatchBackground#7c86ff20
- list.filterMatchBorder#7c86ff
- list.focusAndSelectionOutline#7c86ff
- list.focusBackground#7c86ff25
- list.focusForeground#fff
- list.focusHighlightForeground#fff
- list.focusOutline#7c86ff
- list.highlightForeground#fff
- list.hoverBackground#7c86ff20
- list.hoverForeground#fff
- list.inactiveFocusBackground#7c86ff20
- list.inactiveFocusOutline#7c86ff
- list.inactiveSelectionBackground#7c86ff20
- list.inactiveSelectionForeground#ffffff
- list.inactiveSelectionIconForeground#fff
- list.invalidItemForeground#fb2c36
- list.warningForeground#f59e08
- listFilterWidget.background#7c86ff20
- listFilterWidget.noMatchesOutline#fb2c36
- listFilterWidget.outline#7c86ff
- listFilterWidget.shadow#7c86ff20
- menu.background#2d2148
- menu.border#3d2f62
- menu.foreground#ffffff
- menu.selectionBackground#7c86ff30
- menu.selectionBorder#7c86ff
- menu.selectionForeground#ffffff
- menu.separatorBackground#7c86ff30
- menubar.selectionBackground#7c86ff20
- menubar.selectionBorder#7c86ff
- menubar.selectionForeground#ffffff
- notificationCenter.border#7c86ff20
- notificationCenterHeader.background#1e1537
- notificationCenterHeader.foreground#ffffff
- notificationLink.foreground#fff
- notifications.background#1e1537
- notifications.border#7c86ff20
- notifications.foreground#ffffff
- notificationsErrorIcon.foreground#fb2c36
- notificationsInfoIcon.foreground#00b8db
- notificationsWarningIcon.foreground#f59e08
- notificationToast.border#7c86ff20
- panel.background#252040
- panel.border#342856
- panel.dropBorder#7c86ff
- panelTitle.activeBorder#7c86ff
- panelTitle.activeForeground#ffffff
- panelTitle.border#342856
- panelTitle.inactiveForeground#ffffff80
- pickerGroup.border#7c86ff
- pickerGroup.foreground#fff
- progressBar.background#7c86ff
- quickInput.background#1e1537
- quickInput.foreground#ffffff
- quickInputList.focusBackground#7c86ff20
- quickInputList.focusForeground#ffffff
- quickInputList.focusIconForeground#ffffff
- quickInputTitle.background#1e1537
- 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#252040
- sideBar.border#342856
- sideBar.dropBackground#7c86ff20
- sideBar.foreground#ffffff
- sideBarSectionHeader.background#252040
- sideBarSectionHeader.border#342856
- sideBarSectionHeader.foreground#ffffff
- sideBarTitle.foreground#ffffff
- statusBar.background#1e1537
- statusBar.border#2a1f4d
- statusBar.debuggingBackground#1e1537
- statusBar.debuggingBorder#2a1f4d
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#ffffff
- statusBar.noFolderBackground#1e1537
- statusBar.noFolderBorder#2a1f4d
- statusBar.noFolderForeground#ffffff
- tab.activeBackground#2d2148
- tab.activeBorder#7c86ff
- tab.activeForeground#ffffff
- tab.border#342856
- tab.hoverBackground#2d2148
- tab.hoverBorder#7c86ff
- tab.hoverForeground#ffffff
- tab.inactiveBackground#252040
- tab.inactiveForeground#ffffff80
- tab.selectedBackground#2d2148
- tab.selectedBorderTop#7c86ff
- tab.selectedForeground#ffffff
- tab.unfocusedActiveBackground#252040
- tab.unfocusedActiveForeground#ffffff80
- tab.unfocusedHoverBackground#2d2148
- tab.unfocusedHoverForeground#ffffff80
- tab.unfocusedInactiveBackground#252040
- tab.unfocusedInactiveForeground#ffffff60
- terminal.background#2d2148
- terminal.border#3d2f62
- terminal.foreground#ffffff
- terminal.selectionBackground#7c86ff30
- terminal.selectionForeground#ffffff
- textBlockQuote.background#3d2f62
- textBlockQuote.border#7c86ff
- textCodeBlock.background#3d2f62
- textLink.activeForeground#fff
- textLink.foreground#fff
- textPreformat.background#3d2f62
- textPreformat.foreground#fff
- textSeparator.foreground#fff
- titleBar.activeBackground#1e1537
- titleBar.activeForeground#ffffff
- titleBar.border#2a1f4d
- titleBar.inactiveBackground#1e1537
- titleBar.inactiveForeground#ffffff80
- 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 | #9ca3af | 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 | #ffffff | 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 | #67e8f9 | bold italic |
| entity.name.class, entity.name.type.class, support.class | #fde047 | 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 | #67e8f9 | italic |
| string.other.link.title.markdown, meta.link.inline.markdown | #c27aff | 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 |