Vesper Purple Ox

Name: Vesper Purple Ox
Author: 0xfell

Publisher: 0xfellThemes in package: 2

A beautiful dark and light Vesper Purple theme with vibrant accents, semantic highlighting, and full UI coverage

GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Vesper Purple Ox — Vesper Purple Dark

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#1a1a1a
activityBar.activeBorder#a855f7
activityBar.background#000000
activityBar.border#1a1a1a
activityBar.dropBorder#a855f7
activityBar.foreground#e4e0d4
activityBar.inactiveForeground#505050
activityBarBadge.background#a855f7
activityBarBadge.foreground#000000
activityBarTop.activeBorder#a855f7
activityBarTop.dropBorder#a855f7
activityBarTop.foreground#e4e0d4
activityBarTop.inactiveForeground#505050
badge.background#a855f7
badge.foreground#000000
banner.background#a855f7
banner.foreground#000000
banner.iconForeground#000000
breadcrumb.activeSelectionForeground#a855f7
breadcrumb.background#000000
breadcrumb.focusForeground#e4e0d4
breadcrumb.foreground#737373
breadcrumbPicker.background#0a0a0a
button.background#a855f7
button.border#00000000
button.foreground#000000
button.hoverBackground#c084fc
button.secondaryBackground#1a1a1a
button.secondaryForeground#e4e0d4
button.secondaryHoverBackground#2a2a2a
charts.blue#38bdf8
charts.foreground#e4e0d4
charts.green#4ade80
charts.lines#737373
charts.orange#fb923c
charts.purple#a855f7
charts.red#fb7185
charts.yellow#fbbf24
chat.avatarBackground#1a1a1a
chat.avatarForeground#a855f7
chat.requestBackground#0a0a0a
chat.requestBorder#1a1a1a
chat.slashCommandBackground#a855f720
chat.slashCommandForeground#c084fc
checkbox.background#1a1a1a
checkbox.border#333333
checkbox.foreground#e4e0d4
checkbox.selectBackground#a855f7
checkbox.selectBorder#a855f7
commandCenter.activeBackground#1a1a1a
commandCenter.activeBorder#a855f750
commandCenter.activeForeground#e4e0d4
commandCenter.background#000000
commandCenter.border#1a1a1a
commandCenter.debuggingBackground#a855f720
commandCenter.foreground#a3a3a3
commandCenter.inactiveBorder#1a1a1a
commandCenter.inactiveForeground#505050
commentsView.resolvedIcon#4ade80
commentsView.unresolvedIcon#fbbf24
contrastActiveBorder#ffffff00
contrastBorder#ffffff00
debugConsole.errorForeground#fb7185
debugConsole.infoForeground#38bdf8
debugConsole.sourceForeground#a3a3a3
debugConsole.warningForeground#fbbf24
debugConsoleInputIcon.foreground#a855f7
debugExceptionWidget.background#fb718520
debugExceptionWidget.border#fb7185
debugIcon.breakpointCurrentStackframeForeground#fbbf24
debugIcon.breakpointDisabledForeground#505050
debugIcon.breakpointForeground#fb7185
debugIcon.breakpointStackframeForeground#4ade80
debugIcon.breakpointUnverifiedForeground#737373
debugIcon.continueForeground#4ade80
debugIcon.disconnectForeground#fb7185
debugIcon.pauseForeground#fbbf24
debugIcon.restartForeground#4ade80
debugIcon.startForeground#4ade80
debugIcon.stepBackForeground#c084fc
debugIcon.stepIntoForeground#38bdf8
debugIcon.stepOutForeground#38bdf8
debugIcon.stepOverForeground#38bdf8
debugIcon.stopForeground#fb7185
debugTokenExpression.boolean#fbbf24
debugTokenExpression.error#fb7185
debugTokenExpression.name#f472b6
debugTokenExpression.number#fbbf24
debugTokenExpression.string#a8a8a8
debugTokenExpression.value#a3a3a3
debugToolBar.background#0a0a0a
debugToolBar.border#1a1a1a
debugView.exceptionLabelBackground#fb718530
debugView.exceptionLabelForeground#fb7185
debugView.stateLabelBackground#a855f730
debugView.stateLabelForeground#c084fc
debugView.valueChangedHighlight#fbbf2450
descriptionForeground#a3a3a3
diffEditor.diagonalFill#1a1a1a
diffEditor.insertedLineBackground#4ade8015
diffEditor.insertedTextBackground#4ade8020
diffEditor.insertedTextBorder#00000000
diffEditor.removedLineBackground#fb718515
diffEditor.removedTextBackground#fb718520
diffEditor.removedTextBorder#00000000
diffEditor.unchangedCodeBackground#1a1a1a30
diffEditor.unchangedRegionBackground#0a0a0a
diffEditor.unchangedRegionForeground#737373
diffEditorGutter.insertedLineBackground#4ade8030
diffEditorGutter.removedLineBackground#fb718530
diffEditorOverview.insertedForeground#4ade80
diffEditorOverview.removedForeground#fb7185
disabledForeground#505050
dropdown.background#0a0a0a
dropdown.border#1a1a1a
dropdown.foreground#e4e0d4
dropdown.listBackground#0a0a0a
editor.background#000000
editor.findMatchBackground#fbbf2440
editor.findMatchBorder#fbbf24
editor.findMatchHighlightBackground#fbbf2425
editor.findMatchHighlightBorder#fbbf2450
editor.findRangeHighlightBackground#a855f720
editor.focusedStackFrameHighlightBackground#4ade8020
editor.foldBackground#a855f715
editor.foreground#e4e0d4
editor.hoverHighlightBackground#a855f720
editor.inactiveSelectionBackground#2a2a2a60
editor.inlineValuesBackground#a855f720
editor.inlineValuesForeground#a3a3a3
editor.lineHighlightBackground#1a1a1a
editor.lineHighlightBorder#00000000
editor.linkedEditingBackground#a855f730
editor.rangeHighlightBackground#a855f715
editor.rangeHighlightBorder#a855f730
editor.selectionBackground#40404080
editor.selectionForeground#e4e0d4
editor.selectionHighlightBackground#a855f720
editor.selectionHighlightBorder#a855f750
editor.stackFrameHighlightBackground#fbbf2420
editor.wordHighlightBackground#a855f720
editor.wordHighlightBorder#a855f750
editor.wordHighlightStrongBackground#c084fc30
editor.wordHighlightStrongBorder#c084fc60
editor.wordHighlightTextBackground#a855f715
editorBracketHighlight.foreground1#22d3ee
editorBracketHighlight.foreground2#4ade80
editorBracketHighlight.foreground3#fbbf24
editorBracketHighlight.foreground4#a855f7
editorBracketHighlight.foreground5#fb7185
editorBracketHighlight.foreground6#38bdf8
editorBracketHighlight.unexpectedBracket.foreground#fb7185
editorBracketMatch.background#a855f730
editorBracketMatch.border#a855f7
editorBracketPairGuide.activeBackground1#22d3ee50
editorBracketPairGuide.activeBackground2#4ade8050
editorBracketPairGuide.activeBackground3#fbbf2450
editorBracketPairGuide.activeBackground4#a855f750
editorBracketPairGuide.activeBackground5#fb718550
editorBracketPairGuide.activeBackground6#38bdf850
editorCodeLens.foreground#737373
editorCommentsWidget.rangeActiveBackground#a855f720
editorCommentsWidget.rangeBackground#a855f710
editorCommentsWidget.replyInputBackground#1a1a1a
editorCommentsWidget.resolvedBorder#4ade80
editorCommentsWidget.unresolvedBorder#fbbf24
editorCursor.background#000000
editorCursor.foreground#a855f7
editorError.border#00000000
editorError.foreground#fb7185
editorGhostText.background#00000000
editorGhostText.border#00000000
editorGhostText.foreground#50505080
editorGroup.border#1a1a1a
editorGroup.dropBackground#a855f730
editorGroup.emptyBackground#000000
editorGroup.focusedEmptyBorder#a855f7
editorGroupHeader.border#1a1a1a
editorGroupHeader.noTabsBackground#000000
editorGroupHeader.tabsBackground#000000
editorGroupHeader.tabsBorder#1a1a1a
editorGutter.addedBackground#4ade80
editorGutter.background#000000
editorGutter.commentGlyphForeground#737373
editorGutter.commentRangeForeground#505050
editorGutter.commentUnresolvedGlyphForeground#fbbf24
editorGutter.deletedBackground#fb7185
editorGutter.foldingControlForeground#737373
editorGutter.modifiedBackground#38bdf8
editorHint.border#00000000
editorHint.foreground#4ade80
editorHoverWidget.background#0a0a0a
editorHoverWidget.border#1a1a1a
editorHoverWidget.foreground#e4e0d4
editorHoverWidget.highlightForeground#a855f7
editorHoverWidget.statusBarBackground#1a1a1a
editorIndentGuide.activeBackground1#505050
editorIndentGuide.background1#333333
editorInfo.border#00000000
editorInfo.foreground#38bdf8
editorInlayHint.background#1a1a1a80
editorInlayHint.foreground#737373
editorInlayHint.parameterBackground#1a1a1a80
editorInlayHint.parameterForeground#a3a3a3
editorInlayHint.typeBackground#1a1a1a80
editorInlayHint.typeForeground#a3a3a3
editorLightBulb.foreground#fbbf24
editorLightBulbAi.foreground#a855f7
editorLightBulbAutoFix.foreground#4ade80
editorLineNumber.activeForeground#a3a3a3
editorLineNumber.dimmedForeground#333333
editorLineNumber.foreground#505050
editorLink.activeForeground#a855f7
editorMarkerNavigation.background#0a0a0a
editorMarkerNavigationError.background#fb718530
editorMarkerNavigationError.headerBackground#fb718520
editorMarkerNavigationInfo.background#38bdf830
editorMarkerNavigationInfo.headerBackground#38bdf820
editorMarkerNavigationWarning.background#fbbf2430
editorMarkerNavigationWarning.headerBackground#fbbf2420
editorOverviewRuler.addedForeground#4ade80
editorOverviewRuler.border#1a1a1a
editorOverviewRuler.bracketMatchForeground#a855f7
editorOverviewRuler.deletedForeground#fb7185
editorOverviewRuler.errorForeground#fb7185
editorOverviewRuler.findMatchForeground#fbbf2480
editorOverviewRuler.infoForeground#38bdf8
editorOverviewRuler.modifiedForeground#38bdf8
editorOverviewRuler.rangeHighlightForeground#a855f750
editorOverviewRuler.selectionHighlightForeground#a855f750
editorOverviewRuler.warningForeground#fbbf24
editorOverviewRuler.wordHighlightForeground#a855f750
editorOverviewRuler.wordHighlightStrongForeground#c084fc80
editorOverviewRuler.wordHighlightTextForeground#a855f750
editorRuler.foreground#333333
editorStickyScroll.background#000000
editorStickyScroll.shadow#00000080
editorStickyScrollHover.background#1a1a1a
editorSuggestWidget.background#0a0a0a
editorSuggestWidget.border#1a1a1a
editorSuggestWidget.focusHighlightForeground#a855f7
editorSuggestWidget.foreground#e4e0d4
editorSuggestWidget.highlightForeground#a855f7
editorSuggestWidget.selectedBackground#1a1a1a
editorSuggestWidget.selectedForeground#e4e0d4
editorSuggestWidget.selectedIconForeground#e4e0d4
editorSuggestWidgetStatus.foreground#737373
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#00000080
editorWarning.border#00000000
editorWarning.foreground#fbbf24
editorWatermark.foreground#333333
editorWhitespace.foreground#333333
editorWidget.background#0a0a0a
editorWidget.border#1a1a1a
editorWidget.foreground#e4e0d4
editorWidget.resizeBorder#a855f7
errorForeground#fb7185
extensionBadge.remoteBackground#a855f7
extensionBadge.remoteForeground#000000
extensionButton.background#a855f7
extensionButton.foreground#000000
extensionButton.hoverBackground#c084fc
extensionButton.prominentBackground#a855f7
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#c084fc
extensionButton.separator#00000030
extensionIcon.preReleaseForeground#fbbf24
extensionIcon.sponsorForeground#f472b6
extensionIcon.starForeground#fbbf24
extensionIcon.verifiedForeground#4ade80
focusBorder#a855f7
foreground#e4e0d4
gitDecoration.addedResourceForeground#4ade80
gitDecoration.conflictingResourceForeground#fbbf24
gitDecoration.deletedResourceForeground#fb7185
gitDecoration.ignoredResourceForeground#505050
gitDecoration.modifiedResourceForeground#38bdf8
gitDecoration.renamedResourceForeground#22d3ee
gitDecoration.stageDeletedResourceForeground#fb7185
gitDecoration.stageModifiedResourceForeground#38bdf8
gitDecoration.submoduleResourceForeground#c084fc
gitDecoration.untrackedResourceForeground#4ade80
icon.foreground#c8c4b8
inlineChat.background#0a0a0a
inlineChat.border#a855f750
inlineChat.regionHighlight#a855f715
inlineChat.shadow#00000080
inlineChatDiff.inserted#4ade8030
inlineChatDiff.removed#fb718530
inlineChatInput.background#1a1a1a
inlineChatInput.border#333333
inlineChatInput.focusBorder#a855f7
inlineChatInput.placeholderForeground#505050
input.background#1a1a1a
input.border#333333
input.foreground#e4e0d4
input.placeholderForeground#505050
inputOption.activeBackground#a855f730
inputOption.activeBorder#a855f7
inputOption.activeForeground#e4e0d4
inputOption.hoverBackground#1a1a1a
inputValidation.errorBackground#fb718520
inputValidation.errorBorder#fb7185
inputValidation.errorForeground#fb7185
inputValidation.infoBackground#38bdf820
inputValidation.infoBorder#38bdf8
inputValidation.infoForeground#38bdf8
inputValidation.warningBackground#fbbf2420
inputValidation.warningBorder#fbbf24
inputValidation.warningForeground#fbbf24
keybindingLabel.background#1a1a1a
keybindingLabel.border#333333
keybindingLabel.bottomBorder#1a1a1a
keybindingLabel.foreground#e4e0d4
keybindingTable.headerBackground#0a0a0a
keybindingTable.rowsBackground#000000
list.activeSelectionBackground#2a2a2a
list.activeSelectionForeground#e4e0d4
list.activeSelectionIconForeground#e4e0d4
list.dropBackground#a855f730
list.errorForeground#fb7185
list.filterMatchBackground#a855f730
list.filterMatchBorder#a855f7
list.focusBackground#1a1a1a
list.focusForeground#e4e0d4
list.focusHighlightForeground#a855f7
list.focusOutline#a855f7
list.highlightForeground#a855f7
list.hoverBackground#1a1a1a
list.hoverForeground#e4e0d4
list.inactiveFocusBackground#0a0a0a
list.inactiveFocusOutline#333333
list.inactiveSelectionBackground#1a1a1a
list.inactiveSelectionForeground#e4e0d4
list.invalidItemForeground#fb7185
list.warningForeground#fbbf24
listFilterWidget.background#0a0a0a
listFilterWidget.noMatchesOutline#fb7185
listFilterWidget.outline#a855f7
listFilterWidget.shadow#00000080
menu.background#0a0a0a
menu.border#1a1a1a
menu.foreground#e4e0d4
menu.selectionBackground#1a1a1a
menu.selectionBorder#00000000
menu.selectionForeground#e4e0d4
menu.separatorBackground#333333
menubar.selectionBackground#1a1a1a
menubar.selectionBorder#00000000
menubar.selectionForeground#e4e0d4
mergeEditor.change.background#38bdf820
mergeEditor.change.word.background#38bdf840
mergeEditor.changeBase.background#fbbf2420
mergeEditor.changeBase.word.background#fbbf2440
mergeEditor.conflict.handled.minimapOverViewRuler#4ade80
mergeEditor.conflict.handledUnfocused.border#4ade8060
mergeEditor.conflict.input1.background#4ade8020
mergeEditor.conflict.input2.background#38bdf820
mergeEditor.conflict.unhandled.minimapOverViewRuler#fbbf24
mergeEditor.conflict.unhandledUnfocused.border#fbbf2460
mergeEditor.conflictingLines.background#fbbf2420
minimap.background#000000
minimap.errorHighlight#fb718580
minimap.findMatchHighlight#a855f780
minimap.foregroundOpacity#000000c0
minimap.selectionHighlight#40404080
minimap.selectionOccurrenceHighlight#a855f750
minimap.warningHighlight#fbbf2480
minimapGutter.addedBackground#4ade80
minimapGutter.deletedBackground#fb7185
minimapGutter.modifiedBackground#38bdf8
minimapSlider.activeBackground#e4e0d450
minimapSlider.background#e4e0d420
minimapSlider.hoverBackground#e4e0d435
notebook.cellBorderColor#1a1a1a
notebook.cellHoverBackground#0a0a0a
notebook.cellInsertionIndicator#a855f7
notebook.cellStatusBarItemHoverBackground#1a1a1a
notebook.cellToolbarSeparator#1a1a1a
notebook.editorBackground#000000
notebook.focusedCellBackground#0a0a0a
notebook.focusedCellBorder#a855f7
notebook.focusedEditorBorder#a855f7
notebook.inactiveFocusedCellBorder#333333
notebook.outputContainerBackgroundColor#0a0a0a
notebook.outputContainerBorderColor#1a1a1a
notebook.selectedCellBackground#1a1a1a
notebook.selectedCellBorder#a855f750
notebook.symbolHighlightBackground#a855f720
notebookEditorOverviewRuler.runningCellForeground#a855f7
notebookScrollbarSlider.activeBackground#e4e0d450
notebookScrollbarSlider.background#e4e0d420
notebookScrollbarSlider.hoverBackground#e4e0d435
notebookStatusErrorIcon.foreground#fb7185
notebookStatusRunningIcon.foreground#a855f7
notebookStatusSuccessIcon.foreground#4ade80
notificationCenter.border#1a1a1a
notificationCenterHeader.background#0a0a0a
notificationCenterHeader.foreground#e4e0d4
notificationLink.foreground#a855f7
notifications.background#0a0a0a
notifications.border#1a1a1a
notifications.foreground#e4e0d4
notificationsErrorIcon.foreground#fb7185
notificationsInfoIcon.foreground#38bdf8
notificationsWarningIcon.foreground#fbbf24
notificationToast.border#1a1a1a
outputView.background#000000
outputViewStickyScroll.background#000000
panel.background#000000
panel.border#1a1a1a
panel.dropBorder#a855f7
panelInput.border#333333
panelSection.border#1a1a1a
panelSection.dropBackground#a855f730
panelSectionHeader.background#0a0a0a
panelSectionHeader.border#1a1a1a
panelSectionHeader.foreground#e4e0d4
panelStickyScroll.background#000000
panelStickyScroll.shadow#00000080
panelTitle.activeBorder#a855f7
panelTitle.activeForeground#e4e0d4
panelTitle.inactiveForeground#737373
peekView.border#a855f7
peekViewEditor.background#0a0a0a
peekViewEditor.matchHighlightBackground#fbbf2440
peekViewEditor.matchHighlightBorder#fbbf24
peekViewEditorGutter.background#0a0a0a
peekViewResult.background#000000
peekViewResult.fileForeground#e4e0d4
peekViewResult.lineForeground#a3a3a3
peekViewResult.matchHighlightBackground#fbbf2440
peekViewResult.selectionBackground#1a1a1a
peekViewResult.selectionForeground#e4e0d4
peekViewTitle.background#0a0a0a
peekViewTitleDescription.foreground#a3a3a3
peekViewTitleLabel.foreground#e4e0d4
pickerGroup.border#333333
pickerGroup.foreground#a855f7
ports.iconRunningProcessForeground#4ade80
problemsErrorIcon.foreground#fb7185
problemsInfoIcon.foreground#38bdf8
problemsWarningIcon.foreground#fbbf24
progressBar.background#a855f7
quickInput.background#0a0a0a
quickInput.foreground#e4e0d4
quickInputList.focusBackground#1a1a1a
quickInputList.focusForeground#e4e0d4
quickInputList.focusIconForeground#e4e0d4
quickInputTitle.background#0a0a0a
sash.hoverBorder#a855f7
scrollbar.shadow#00000080
scrollbarSlider.activeBackground#e4e0d450
scrollbarSlider.background#e4e0d420
scrollbarSlider.hoverBackground#e4e0d435
settings.checkboxBackground#1a1a1a
settings.checkboxBorder#333333
settings.checkboxForeground#e4e0d4
settings.dropdownBackground#1a1a1a
settings.dropdownBorder#333333
settings.dropdownForeground#e4e0d4
settings.dropdownListBorder#1a1a1a
settings.focusedRowBackground#1a1a1a
settings.focusedRowBorder#a855f750
settings.headerForeground#e4e0d4
settings.modifiedItemIndicator#a855f7
settings.numberInputBackground#1a1a1a
settings.numberInputBorder#333333
settings.numberInputForeground#e4e0d4
settings.rowHoverBackground#0a0a0a
settings.sashBorder#a855f7
settings.settingsHeaderHoverForeground#c084fc
settings.textInputBackground#1a1a1a
settings.textInputBorder#333333
settings.textInputForeground#e4e0d4
sideBar.background#000000
sideBar.border#1a1a1a
sideBar.dropBackground#a855f730
sideBar.foreground#c8c4b8
sideBarSectionHeader.background#000000
sideBarSectionHeader.border#1a1a1a
sideBarSectionHeader.foreground#e4e0d4
sideBarStickyScroll.background#000000
sideBarStickyScroll.shadow#00000080
sideBarTitle.foreground#e4e0d4
statusBar.background#000000
statusBar.border#1a1a1a
statusBar.debuggingBackground#a855f7
statusBar.debuggingBorder#a855f7
statusBar.debuggingForeground#000000
statusBar.focusBorder#a855f7
statusBar.foreground#a3a3a3
statusBar.noFolderBackground#000000
statusBar.noFolderBorder#1a1a1a
statusBar.noFolderForeground#a3a3a3
statusBarItem.activeBackground#2a2a2a
statusBarItem.compactHoverBackground#1a1a1a
statusBarItem.errorBackground#fb7185
statusBarItem.errorForeground#000000
statusBarItem.errorHoverBackground#fda4af
statusBarItem.errorHoverForeground#000000
statusBarItem.focusBorder#a855f7
statusBarItem.hoverBackground#1a1a1a
statusBarItem.hoverForeground#e4e0d4
statusBarItem.offlineBackground#737373
statusBarItem.offlineForeground#000000
statusBarItem.offlineHoverBackground#a3a3a3
statusBarItem.offlineHoverForeground#000000
statusBarItem.prominentBackground#1a1a1a
statusBarItem.prominentForeground#e4e0d4
statusBarItem.prominentHoverBackground#2a2a2a
statusBarItem.remoteBackground#a855f7
statusBarItem.remoteForeground#000000
statusBarItem.remoteHoverBackground#c084fc
statusBarItem.remoteHoverForeground#000000
statusBarItem.warningBackground#fbbf24
statusBarItem.warningForeground#000000
statusBarItem.warningHoverBackground#fcd34d
statusBarItem.warningHoverForeground#000000
symbolIcon.arrayForeground#f472b6
symbolIcon.booleanForeground#fbbf24
symbolIcon.classForeground#c084fc
symbolIcon.colorForeground#f472b6
symbolIcon.constantForeground#fbbf24
symbolIcon.constructorForeground#c084fc
symbolIcon.enumeratorForeground#e879f9
symbolIcon.enumeratorMemberForeground#fbbf24
symbolIcon.eventForeground#38bdf8
symbolIcon.fieldForeground#f472b6
symbolIcon.fileForeground#e4e0d4
symbolIcon.folderForeground#fbbf24
symbolIcon.functionForeground#c084fc
symbolIcon.interfaceForeground#f472b6
symbolIcon.keyForeground#f472b6
symbolIcon.keywordForeground#d4d4d4
symbolIcon.methodForeground#c084fc
symbolIcon.moduleForeground#f472b6
symbolIcon.namespaceForeground#f472b6
symbolIcon.nullForeground#737373
symbolIcon.numberForeground#fbbf24
symbolIcon.objectForeground#f472b6
symbolIcon.operatorForeground#737373
symbolIcon.packageForeground#f472b6
symbolIcon.propertyForeground#f472b6
symbolIcon.referenceForeground#38bdf8
symbolIcon.snippetForeground#a855f7
symbolIcon.stringForeground#a8a8a8
symbolIcon.structForeground#c084fc
symbolIcon.textForeground#e4e0d4
symbolIcon.typeParameterForeground#f9a8d4
symbolIcon.unitForeground#fbbf24
symbolIcon.variableForeground#f472b6
tab.activeBackground#0a0a0a
tab.activeBorder#0a0a0a
tab.activeBorderTop#a855f7
tab.activeForeground#e4e0d4
tab.border#1a1a1a
tab.hoverBackground#1a1a1a
tab.hoverBorder#a855f750
tab.hoverForeground#e4e0d4
tab.inactiveBackground#000000
tab.inactiveForeground#737373
tab.lastPinnedBorder#333333
tab.selectedBackground#0a0a0a
tab.selectedForeground#e4e0d4
tab.unfocusedActiveBackground#0a0a0a
tab.unfocusedActiveBorder#0a0a0a
tab.unfocusedActiveBorderTop#505050
tab.unfocusedActiveForeground#a3a3a3
tab.unfocusedHoverBackground#1a1a1a
tab.unfocusedHoverForeground#e4e0d4
tab.unfocusedInactiveBackground#000000
tab.unfocusedInactiveForeground#505050
terminal.ansiBlack#1a1a1a
terminal.ansiBlue#38bdf8
terminal.ansiBrightBlack#737373
terminal.ansiBrightBlue#38bdf8
terminal.ansiBrightCyan#22d3ee
terminal.ansiBrightGreen#4ade80
terminal.ansiBrightMagenta#c084fc
terminal.ansiBrightRed#fb7185
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#fbbf24
terminal.ansiCyan#22d3ee
terminal.ansiGreen#4ade80
terminal.ansiMagenta#a855f7
terminal.ansiRed#fb7185
terminal.ansiWhite#e4e0d4
terminal.ansiYellow#fbbf24
terminal.background#000000
terminal.border#1a1a1a
terminal.dropBackground#a855f730
terminal.findMatchBackground#fbbf2440
terminal.findMatchBorder#fbbf24
terminal.findMatchHighlightBackground#fbbf2425
terminal.findMatchHighlightBorder#00000000
terminal.foreground#e4e0d4
terminal.hoverHighlightBackground#a855f730
terminal.inactiveSelectionBackground#2a2a2a60
terminal.selectionBackground#40404080
terminal.selectionForeground#e4e0d4
terminal.tab.activeBorder#a855f7
terminalCommandDecoration.defaultBackground#a3a3a3
terminalCommandDecoration.errorBackground#fb7185
terminalCommandDecoration.successBackground#4ade80
terminalCursor.background#000000
terminalCursor.foreground#a855f7
terminalOverviewRuler.cursorForeground#a855f7
terminalOverviewRuler.findMatchForeground#fbbf2480
terminalStickyScroll.background#000000
terminalStickyScrollHover.background#1a1a1a
testing.coverCountBadgeBackground#a855f7
testing.coverCountBadgeForeground#000000
testing.iconErrored#fb7185
testing.iconFailed#fb7185
testing.iconPassed#4ade80
testing.iconQueued#fbbf24
testing.iconSkipped#737373
testing.iconUnset#505050
testing.message.error.decorationForeground#fb7185
testing.message.error.lineBackground#fb718510
testing.message.info.decorationForeground#38bdf8
testing.message.info.lineBackground#38bdf810
testing.peekBorder#fb7185
testing.peekHeaderBackground#fb718520
testing.runAction#4ade80
textBlockQuote.background#0a0a0a
textBlockQuote.border#a855f750
textCodeBlock.background#1a1a1a
textLink.activeForeground#c084fc
textLink.foreground#a855f7
textPreformat.foreground#c084fc
textSeparator.foreground#333333
titleBar.activeBackground#000000
titleBar.activeForeground#c8c4b8
titleBar.border#1a1a1a
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#505050
tree.indentGuidesStroke#333333
tree.tableColumnsBorder#333333
tree.tableOddRowsBackground#0a0a0a
walkThrough.embeddedEditorBackground#0a0a0a
walkthrough.stepTitle.foreground#e4e0d4
welcomePage.background#000000
welcomePage.progress.background#1a1a1a
welcomePage.progress.foreground#a855f7
welcomePage.tileBackground#0a0a0a
welcomePage.tileBorder#1a1a1a
welcomePage.tileHoverBackground#1a1a1a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#6b7280	italic
punctuation, delimiter, delimiter.bracket, meta.brace, meta.tag.block.any.html, meta.tag.inline.any.html, meta.tag.structure.input.void.html, meta.type.annotation, meta.embedded.block.github-actions-expression, storage.type.function.arrow, meta.objectliteral.ts	#737373	—
constant, entity.name.constant, variable.language, meta.definition.variable	#f472b6	—
entity, entity.name	#a855f7	—
variable.parameter.function	#e4e0d4	italic
entity.name.tag, tag.html	#a855f7	—
entity.name.function	#c084fc	—
keyword, storage.type.class.jsdoc	#d4d4d4	italic
storage, storage.type, support.type.builtin, constant.language.undefined, constant.language.null	#d4d4d4	italic
storage.modifier	#a855f7	italic
text.html.derivative, storage.modifier.package, storage.modifier.import, storage.type.java	#e4e0d4	italic
string, string punctuation.section.embedded source, attribute.value	#a8a8a8	—
punctuation.definition.string, punctuation.support.type.property-name	#73737380	—
support	#c084fc	—
property, meta.property-name, meta.object-literal.key, entity.name.tag.yaml, attribute.name	#f472b6	—
entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html	#f472b6	italic
variable, identifier	#f472b6	—
support.type.primitive, entity.name.type	#f472b6	italic
namespace	#f472b6	italic
keyword.operator, keyword.operator.assignment.compound, meta.var.expr.ts	#d4d4d4	—
keyword.control, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.conditional, keyword.control.loop, keyword.control.trycatch	#a855f7	italic
keyword.control.async, keyword.control.await	#22d3ee	italic
meta.decorator, meta.decorator punctuation, entity.name.function.decorator, punctuation.decorator	#22d3ee	italic
variable.language.this, variable.language.self, variable.language.super	#e879f9	italic
invalid.broken	#fb7185	italic
invalid.deprecated	#737373	strikethrough
invalid.illegal	#fb7185	italic
invalid.unimplemented	#fb7185	italic
carriage-return	#000000	italic underline
message.error	#fb7185	—
string variable	#c084fc	—
source.regexp, string.regexp	#fbbf24	—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#a8a8a8	—
string.regexp constant.character.escape	#fbbf24	—
support.constant	#f472b6	—
keyword.operator.quantifier.regexp, constant.numeric, number	#fbbf24	—
keyword.other.unit	#d4d4d4	—
constant.language.boolean, constant.language	#fbbf24	italic
meta.module-reference	#a855f7	italic
punctuation.definition.list.begin.markdown	#fbbf24	—
markup.heading, markup.heading entity.name	#a855f7	bold
punctuation.definition.heading.markdown	#a855f7	—
markup.quote	#f472b6	italic
markup.italic	#e4e0d4	italic
markup.bold	#e4e0d4	bold
markup.strikethrough	#737373	strikethrough
markup.raw	#c084fc	—
markup.fenced_code.block.markdown	#c084fc	—
fenced_code.block.language.markdown	#737373	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#fb7185	—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted	#4ade80	—
markup.changed, punctuation.definition.changed	#fbbf24	—
markup.ignored, markup.untracked	#505050	—
meta.diff.range	#a855f7	bold
meta.diff.header	#38bdf8	—
meta.separator	#38bdf8	bold
meta.output	#38bdf8	—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote	#a3a3a3	—
brackethighlighter.unmatched	#fb7185	—
constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown	#a8a8a8	—
markup.underline.link.markdown, markup.underline.link.image.markdown	#c084fc	underline
type.identifier, constant.other.character-class.regexp	#f472b6	italic
entity.other.attribute-name.html.vue	#a855f7	—
invalid.illegal.unrecognized-tag.html	—
entity.name.type.class, entity.name.type.module	#c084fc	italic
support.class, support.type	#f472b6	italic
support.function.builtin, support.function.magic	#a3a3a3	—
meta.import, meta.export	—	italic
variable.other.constant	#fbbf24	—
meta.return.type, meta.type.annotation	#f472b6	italic
string.template, punctuation.definition.template-expression	#a8a8a8	—
meta.template.expression, meta.embedded.line	#f472b6	—
entity.name.tag.tsx, entity.name.tag.jsx	#a855f7	—
support.class.component.tsx, support.class.component.jsx	#c084fc	—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss	#fbbf24	—
entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss	#f472b6	—
support.type.property-name.css, support.type.property-name.scss	#38bdf8	—
support.constant.property-value.css, constant.other.color.rgb-value.css	#a8a8a8	—
variable.css, variable.scss, variable.argument.css	#f472b6	—
support.type.property-name.json	#f472b6	—
string.quoted.double.json	#a8a8a8	—
entity.name.tag.yaml	#f472b6	—
string.unquoted.plain.out.yaml	#a8a8a8	—
meta.function.parameters.python	#e4e0d4	—
constant.language.python	#fbbf24	italic
support.type.python	#f472b6	italic
keyword.function.go, keyword.type.go	#a855f7	italic
entity.name.type.lifetime.rust	#e879f9	italic
keyword.other.rust	#a855f7	italic
variable.other.normal.shell, variable.other.positional.shell	#f472b6	—
support.function.builtin.shell	#a3a3a3	—

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id  
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}