Dracula Pro Version

Name: Dracula Pro Version
Author: caiovellani

Publisher: caiovellaniThemes in package: 2

A sleek and vibrant dark theme inspired by Dracula Pro, customized for an elegant and modern coding experience.

GitHub

Color themes

VS Code preview

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

Dracula Pro Version — Dracula Pro

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.

actionBar.toggledBackground#424450
activityBar.activeBackground#9580FF20
activityBar.activeBorder#9580FF60
activityBar.background#2B2640
activityBar.border#0B0A10
activityBar.dropBorder#9580FF20
activityBar.foreground#F8F8F2
activityBar.inactiveForeground#7970A9
activityBarBadge.background#9580FF
activityBarBadge.foreground#FFFFFF
activityBarTop.activeBackground#9580FF20
activityBarTop.activeBorder#9580FF60
activityBarTop.background#2B2640
activityBarTop.dropBorder#9580FF20
activityBarTop.foreground#F8F8F2
activityBarTop.inactiveForeground#7970A9
badge.background#2B2640
badge.foreground#F8F8F2
banner.background#2B2640
banner.foreground#F8F8F2
banner.iconForeground#F8F8F2
breadcrumb.activeSelectionForeground#F8F8F2
breadcrumb.background#22212C
breadcrumb.focusForeground#9580FF
breadcrumb.foreground#7970A9
breadcrumbPicker.background#424450
button.background#F8F8F220
button.border#0B0A10
button.foreground#F8F8F2
button.hoverBackground#F8F8F210
button.secondaryBackground#F8F8F220
button.secondaryForeground#7970A9
button.secondaryHoverBackground#F8F8F210
button.separator#7970A9
charts.blue#80FFEA
charts.foreground#F8F8F2
charts.green#8AFF80
charts.lines#F8F8F2
charts.orange#FFCA80
charts.purple#9580FF
charts.red#FF9580
charts.yellow#FFFF80
chat.avatarBackground#2B2640
chat.avatarForeground#F8F8F2
chat.requestBackground#424450
chat.requestBorder#0B0A10
chat.slashCommandBackground#454158
chat.slashCommandForeground#F8F8F2
checkbox.background#2B2640
checkbox.border#0B0A10
checkbox.foreground#F8F8F2
checkbox.selectBackground#424450
checkbox.selectBorder#424450
commandCenter.activeBackground#22212C
commandCenter.activeBorder#0B0A10
commandCenter.activeForeground#F8F8F2
commandCenter.background#424450
commandCenter.border#0B0A10
commandCenter.debuggingBackground#FFCA80
commandCenter.foreground#F8F8F2
commandCenter.inactiveBorder#0B0A10
commandCenter.inactiveForeground#7970A9
commentsView.resolvedIcon#8AFF80
commentsView.unresolvedIcon#FF9580
debugConsole.errorForeground#FF9580
debugConsole.infoForeground#9580FF
debugConsole.sourceForeground#FF80BF
debugConsole.warningForeground#FFFF80
debugConsoleInputIcon.foreground#F8F8F2
debugIcon.breakpointCurrentStackframeForeground#151320
debugIcon.breakpointDisabledForeground#FF958060
debugIcon.breakpointForeground#FF958090
debugIcon.breakpointStackframeForeground#151320
debugIcon.breakpointUnverifiedForeground#FF958040
debugIcon.continueForeground#8AFF80
debugIcon.disconnectForeground#151320
debugIcon.pauseForeground#9580FF
debugIcon.restartForeground#80FFEA
debugIcon.startForeground#8AFF80
debugIcon.stepBackForeground#151320
debugIcon.stepIntoForeground#F8F8F2
debugIcon.stepOutForeground#F8F8F2
debugIcon.stepOverForeground#9580FF
debugIcon.stopForeground#FF9580
debugTokenExpression.boolean#9580FF
debugTokenExpression.error#FF9580
debugTokenExpression.name#80FFEA
debugTokenExpression.number#FFCA80
debugTokenExpression.string#8AFF80
debugTokenExpression.value#F8F8F2
debugToolBar.background#151320
debugToolBar.border#373252
debugView.exceptionLabelBackground#151320
debugView.exceptionLabelForeground#9580FF
debugView.stateLabelBackground#424450
debugView.stateLabelForeground#80FFEA
debugView.valueChangedHighlight#FF80BF60
descriptionForeground#7970A9
diffEditor.border#0B0A10
diffEditor.diagonalFill#2B2640
diffEditor.insertedLineBackground#8AFF8020
diffEditor.insertedTextBackground#8AFF8040
diffEditor.insertedTextBorder#8AFF8020
diffEditor.removedLineBackground#FF958020
diffEditor.removedTextBackground#FF958040
diffEditor.removedTextBorder#FF958020
diffEditor.unchangedCodeBackground#424450
diffEditor.unchangedRegionBackground#424450
diffEditor.unchangedRegionForeground#7970A9
diffEditorGutter.insertedLineBackground#8AFF8040
diffEditorGutter.removedLineBackground#FF958040
diffEditorOverview.insertedForeground#8AFF80
diffEditorOverview.removedForeground#FF9580
disabledForeground#7970A9
dropdown.background#2B2640
dropdown.border#0B0A10
dropdown.foreground#F8F8F2
dropdown.listBackground#424450
editor.background#22212C
editor.findMatchBackground#FFFF8040
editor.findMatchHighlightBackground#FFFF8040
editor.findRangeHighlightBackground#323040
editor.focusedStackFrameHighlightBackground#0B0A10
editor.foldBackground#151320
editor.foreground#F8F8F2
editor.hoverHighlightBackground#80FFEA40
editor.inactiveSelectionBackground#9580FF60
editor.inlineValuesBackground#151320
editor.inlineValuesForeground#F8F8F2
editor.lineHighlightBackground#32304095
editor.lineHighlightBorder#32304030
editor.linkedEditingBackground#9580FF20
editor.rangeHighlightBackground#9580FF20
editor.selectionBackground#9580FF95
editor.selectionForeground#F8F8F2
editor.selectionHighlightBackground#FFFF8040
editor.selectionHighlightBorder#FFFF8060
editor.snippetFinalTabstopHighlightBackground#22212C
editor.snippetFinalTabstopHighlightBorder#8AFF80
editor.snippetTabstopHighlightBackground#22212C
editor.snippetTabstopHighlightBorder#7970A9
editor.stackFrameHighlightBackground#151320
editor.wordHighlightBackground#80FFEA40
editor.wordHighlightStrongBackground#8AFF8040
editorBracketHighlight.foreground1#FF9580
editorBracketHighlight.foreground2#8AFF80
editorBracketHighlight.foreground3#FFCA80
editorBracketHighlight.foreground4#FFFF80
editorBracketHighlight.foreground5#9580FF
editorBracketHighlight.foreground6#80FFEA
editorBracketHighlight.unexpectedBracket.foreground#FF80BF
editorBracketMatch.background#323040
editorBracketPairGuide.activeBackground1#FF958020
editorBracketPairGuide.activeBackground2#8AFF8020
editorBracketPairGuide.activeBackground3#FFCA8020
editorBracketPairGuide.activeBackground4#FFFF8020
editorBracketPairGuide.activeBackground5#9580FF20
editorBracketPairGuide.activeBackground6#80FFEA20
editorBracketPairGuide.background1#FF958010
editorBracketPairGuide.background2#8AFF8010
editorBracketPairGuide.background3#FFCA8010
editorBracketPairGuide.background4#FFFF8010
editorBracketPairGuide.background5#9580FF10
editorBracketPairGuide.background6#80FFEA10
editorCodeLens.foreground#7970A9
editorCursor.foreground#F8F8F2
editorError.foreground#FF9580
editorGhostText.foreground#F8F8F260
editorGroup.border#9580FF20
editorGroup.dropBackground#2E2B41
editorGroup.emptyBackground#22212C
editorGroupHeader.border#151320
editorGroupHeader.tabsBackground#0B0A10
editorGroupHeader.tabsBorder#151320
editorGutter.addedBackground#8AFF8080
editorGutter.background#22212C
editorGutter.commentRangeForeground#9580FF40
editorGutter.deletedBackground#FF958080
editorGutter.foldingControlForeground#7970A9
editorGutter.modifiedBackground#FFFF8080
editorHint.foreground#F8F8F2
editorHoverWidget.background#22212C
editorHoverWidget.statusBarBackground#323040
editorIndentGuide.activeBackground#FFFFFF60
editorIndentGuide.background#373252
editorInfo.foreground#80FFEA
editorInlayHint.background#424450
editorInlayHint.foreground#151320
editorInlayHint.parameterBackground#424450
editorInlayHint.parameterForeground#F8F8F2
editorInlayHint.typeBackground#424450
editorInlayHint.typeForeground#F8F8F2
editorLightBulb.foreground#FFFF80
editorLightBulbAi.foreground#9580FF
editorLightBulbAutoFix.foreground#8AFF80
editorLineNumber.activeForeground#FF80BF
editorLineNumber.dimmedForeground#7970A9
editorLineNumber.foreground#7970A9
editorLink.activeForeground#80FFEA
editorMarkerNavigation.background#323040
editorMarkerNavigationError.background#FF9580
editorMarkerNavigationError.headerBackground#FF9580
editorMarkerNavigationInfo.background#80FFEA
editorMarkerNavigationInfo.headerBackground#80FFEA
editorMarkerNavigationWarning.background#FFFF80
editorMarkerNavigationWarning.headerBackground#FFFF80
editorOverviewRuler.addedForeground#8AFF8080
editorOverviewRuler.background#424450
editorOverviewRuler.border#9580FF
editorOverviewRuler.bracketMatchForeground#9580FF80
editorOverviewRuler.commentForeground#7970A9
editorOverviewRuler.commentUnresolvedForeground#FFCA80
editorOverviewRuler.commonContentForeground#9580FF80
editorOverviewRuler.currentContentForeground#8AFF8080
editorOverviewRuler.deletedForeground#FF958080
editorOverviewRuler.errorForeground#FF958080
editorOverviewRuler.findMatchForeground#FFCA8080
editorOverviewRuler.incomingContentForeground#80FFEA80
editorOverviewRuler.infoForeground#9580FF80
editorOverviewRuler.inlineChatInserted#8AFF8080
editorOverviewRuler.inlineChatRemoved#FF958080
editorOverviewRuler.modifiedForeground#FFCA8080
editorOverviewRuler.rangeHighlightForeground#80FFEA80
editorOverviewRuler.selectionHighlightForeground#FFFF8080
editorOverviewRuler.warningForeground#FFFF8080
editorOverviewRuler.wordHighlightForeground#80FFEA80
editorOverviewRuler.wordHighlightStrongForeground#8AFF8080
editorOverviewRuler.wordHighlightTextForeground#FF80BF80
editorRuler.foreground#373252
editorStickyScroll.background#2B2640
editorStickyScroll.border#151320
editorStickyScrollHover.background#323040
editorSuggestWidget.background#22212C
editorSuggestWidget.border#0B0A10
editorSuggestWidget.foreground#F8F8F260
editorSuggestWidget.highlightForeground#F8F8F2
editorSuggestWidget.selectedBackground#323040
editorWarning.foreground#FFFF80
editorWhitespace.foreground#373252
editorWidget.background#0B0A10
editorWidget.border#0B0A10
editorWidget.foreground#F8F8F2
editorWidget.resizeBorder#0B0A10
errorForeground#FF9580
extensionBadge.remoteBackground#151320
extensionBadge.remoteForeground#F8F8F2
extensionButton.background#F8F8F220
extensionButton.foreground#F8F8F2
extensionButton.hoverBackground#F8F8F210
extensionButton.prominentBackground#8AFF8090
extensionButton.prominentForeground#F8F8F2
extensionButton.prominentHoverBackground#8AFF8060
extensionButton.separator#7970A9
extensionIcon.preReleaseForeground#FF9580
extensionIcon.sponsorForeground#FF80BF
extensionIcon.starForeground#FFFF80
extensionIcon.verifiedForeground#8AFF80
focusBorder#0B0A10
foreground#F8F8F2
gitDecoration.addedResourceForeground#8AFF80
gitDecoration.conflictingResourceForeground#FF9580
gitDecoration.deletedResourceForeground#FF9580
gitDecoration.ignoredResourceForeground#7970A9
gitDecoration.modifiedResourceForeground#FFCA80
gitDecoration.renamedResourceForeground#80FFEA
gitDecoration.stageDeletedResourceForeground#FF9580
gitDecoration.stageModifiedResourceForeground#FFCA80
gitDecoration.submoduleResourceForeground#FF80BF
gitDecoration.untrackedResourceForeground#FFFF80
icon.foreground#F8F8F2
inlineChat.background#2B2640
inlineChat.border#0B0A10
inlineChatDiff.inserted#8AFF8020
inlineChatDiff.removed#FF958020
inlineChatInput.background#424450
inlineChatInput.border#151320
inlineChatInput.focusBorder#0B0A10
inlineChatInput.placeholderForeground#7970A9
input.background#22212C
input.border#151320
input.foreground#F8F8F2
input.placeholderForeground#F8F8F260
inputOption.activeBackground#151320
inputOption.activeBorder#9580FF
inputOption.activeForeground#F8F8F2
inputOption.hoverBackground#424450
inputValidation.errorBackground#FF9580
inputValidation.errorBorder#FF9580
inputValidation.errorForeground#FFFFFF
inputValidation.infoBackground#424450
inputValidation.infoBorder#0B0A10
inputValidation.infoForeground#F8F8F2
inputValidation.warningBackground#FFFF80
inputValidation.warningBorder#FFFF80
inputValidation.warningForeground#FFFFFF
keybindingLabel.background#424450
keybindingLabel.border#0B0A10
keybindingLabel.bottomBorder#0B0A10
keybindingLabel.foreground#F8F8F2
keybindingTable.headerBackground#424450
keybindingTable.rowsBackground#2B2640
list.activeSelectionBackground#2B2640
list.activeSelectionForeground#F8F8F2
list.activeSelectionIconForeground#F8F8F2
list.dropBackground#2E2B41
list.errorForeground#FF9580
list.filterMatchBackground#151320
list.focusBackground#424450
list.focusForeground#F8F8F2
list.highlightForeground#9580FF
list.hoverBackground#424450
list.hoverForeground#F8F8F2
list.inactiveSelectionBackground#2B2640
list.inactiveSelectionForeground#7970A9
list.inactiveSelectionIconForeground#7970A9
list.warningForeground#FFFF80
listFilterWidget.background#2B2640
listFilterWidget.noMatchesOutline#FF9580
menu.background#2B2640
menu.border#0B0A10
menu.foreground#F8F8F2
menu.selectionBackground#424450
menu.selectionBorder#0B0A10
menu.selectionForeground#F8F8F2
menu.separatorBackground#0B0A10
menubar.selectionBackground#424450
menubar.selectionBorder#0B0A10
menubar.selectionForeground#F8F8F2
merge.border#0B0A10
merge.commonContentBackground#2B2640
merge.commonHeaderBackground#424450
merge.currentContentBackground#8AFF8020
merge.currentHeaderBackground#8AFF8080
merge.incomingContentBackground#80FFEA20
merge.incomingHeaderBackground#80FFEA80
mergeEditor.change.background#0B0A10
mergeEditor.change.word.background#FFCA8020
mergeEditor.changeBase.background#424450
mergeEditor.changeBase.word.background#9580FF20
mergeEditor.conflict.handled.minimapOverViewRuler#FFCA80
mergeEditor.conflict.handledFocused.border#FFCA80
mergeEditor.conflict.handledUnfocused.border#FFCA80
mergeEditor.conflict.input1.background#FF958020
mergeEditor.conflict.input2.background#FF958020
mergeEditor.conflict.unhandled.minimapOverViewRuler#FF9580
mergeEditor.conflict.unhandledFocused.border#FF9580
mergeEditor.conflict.unhandledUnfocused.border#FF9580
mergeEditor.conflictingLines.background#FF958020
minimap.background#22212C
minimap.errorHighlight#FF958060
minimap.findMatchHighlight#80FFEA20
minimap.selectionHighlight#15132080
minimap.selectionOccurrenceHighlight#15132080
minimap.warningHighlight#FFFF8060
minimapGutter.addedBackground#8AFF8060
minimapGutter.deletedBackground#FF958060
minimapGutter.modifiedBackground#FFFF8060
minimapSlider.activeBackground#9580FF40
minimapSlider.background#9580FF10
minimapSlider.hoverBackground#9580FF20
notificationCenter.border#0B0A10
notificationCenterHeader.background#22212C
notificationCenterHeader.foreground#F8F8F2
notificationLink.foreground#80FFEA
notifications.background#2B2640
notifications.border#0B0A10
notifications.foreground#F8F8F2
notificationsErrorIcon.foreground#FF9580
notificationsInfoIcon.foreground#8AFF80
notificationsWarningIcon.foreground#FFCA80
notificationToast.border#0B0A10
outputView.background#22212C
outputViewStickyScroll.background#2B2640
panel.background#22212C
panel.border#0B0A10
panel.dropBorder#2E2B41
panelInput.border#0B0A10
panelSection.dropBackground#2E2B41
panelSectionHeader.background#0B0A10
panelSectionHeader.foreground#F8F8F2
panelTitle.activeBorder#9580FF
panelTitle.activeForeground#F8F8F2
panelTitle.inactiveForeground#7970A9
peekView.border#9580FF40
peekViewEditor.background#22212C
peekViewEditor.matchHighlightBackground#FFFF8080
peekViewEditorGutter.background#22212C
peekViewEditorStickyScroll.background#2B2640
peekViewResult.background#151320
peekViewResult.fileForeground#F8F8F2
peekViewResult.lineForeground#7970A9
peekViewResult.matchHighlightBackground#FFFF8080
peekViewResult.selectionBackground#454158
peekViewResult.selectionForeground#F8F8F2
peekViewTitle.background#0B0A10
peekViewTitleDescription.foreground#7970A9
peekViewTitleLabel.foreground#F8F8F2
pickerGroup.border#9580FF
pickerGroup.foreground#9580FF
ports.iconRunningProcessForeground#8AFF80
problemsErrorIcon.foreground#FF9580
problemsInfoIcon.foreground#80FFEA
problemsWarningIcon.foreground#FFFF80
profileBadge.background#2B2640
profileBadge.foreground#F8F8F2
progressBar.background#9580FF
quickInput.background#22212C
quickInput.foreground#F8F8F2
quickInputList.focusBackground#454158
quickInputList.focusForeground#F8F8F2
quickInputList.focusIconForeground#F8F8F2
quickInputTitle.background#323040
sash.hoverBorder#9580FF
scm.historyItemAdditionsForeground#8AFF80
scm.historyItemDeletionsForeground#FF9580
scm.historyItemSelectedStatisticsBorder#0B0A10
scm.historyItemStatisticsBorder#0B0A10
scrollbar.shadow#151320
scrollbarSlider.activeBackground#F8F8F280
scrollbarSlider.background#F8F8F220
scrollbarSlider.hoverBackground#F8F8F260
searchEditor.findMatchBackground#80FFEA20
searchEditor.textInputBorder#151320
selection.background#454158
settings.checkboxBackground#2B2640
settings.checkboxBorder#0B0A10
settings.checkboxForeground#F8F8F2
settings.dropdownBackground#2B2640
settings.dropdownBorder#0B0A10
settings.dropdownForeground#F8F8F2
settings.dropdownListBorder#0B0A10
settings.focusedRowBackground#323040
settings.focusedRowBorder#9580FF20
settings.headerBorder#0B0A10
settings.headerForeground#F8F8F2
settings.modifiedItemIndicator#FFCA80
settings.numberInputBackground#22212C
settings.numberInputBorder#0B0A10
settings.numberInputForeground#F8F8F2
settings.rowHoverBackground#2B2640
settings.sashBorder#0B0A10
settings.settingsHeaderHoverForeground#F8F8F2
settings.textInputBackground#22212C
settings.textInputBorder#0B0A10
settings.textInputForeground#F8F8F2
sideBar.background#151320
sideBar.border#0B0A10
sideBar.dropBackground#2E2B41
sideBar.foreground#F8F8F2
sideBarActivityBarTop.border#0B0A10
sideBarSectionHeader.background#22212C
sideBarSectionHeader.foreground#F8F8F2
sideBarTitle.foreground#F8F8F2
simpleFindWidget.sashBorder#0B0A10
statusBar.background#151320
statusBar.debuggingBackground#FFCA80
statusBar.debuggingBorder#0B0A10
statusBar.debuggingForeground#0B0A10
statusBar.focusBorder#0B0A10
statusBar.foreground#F8F8F2
statusBar.noFolderBackground#151320
statusBar.noFolderBorder#0B0A10
statusBar.noFolderForeground#F8F8F2
statusBarItem.activeBackground#424450
statusBarItem.compactHoverBackground#424450
statusBarItem.errorBackground#FF9580
statusBarItem.errorForeground#FFFFFF
statusBarItem.errorHoverBackground#FF958080
statusBarItem.errorHoverForeground#FFFFFF
statusBarItem.focusBorder#0B0A10
statusBarItem.hoverBackground#2B2640
statusBarItem.hoverForeground#9580FF
statusBarItem.offlineBackground#151320
statusBarItem.offlineForeground#7970A9
statusBarItem.offlineHoverBackground#0B0A10
statusBarItem.offlineHoverForeground#7970A9
statusBarItem.prominentBackground#FF9580
statusBarItem.prominentForeground#F8F8F2
statusBarItem.prominentHoverBackground#FFCA80
statusBarItem.prominentHoverForeground#9580FF
statusBarItem.remoteBackground#9580FF
statusBarItem.remoteForeground#22212C
statusBarItem.remoteHoverBackground#2B2640
statusBarItem.remoteHoverForeground#F8F8F2
statusBarItem.warningBackground#FFFF80
statusBarItem.warningForeground#F8F8F2
statusBarItem.warningHoverBackground#FFFF8080
statusBarItem.warningHoverForeground#F8F8F2
symbolIcon.arrayForeground#FFCA80
symbolIcon.booleanForeground#9580FF
symbolIcon.classForeground#FFFF80
symbolIcon.colorForeground#FF80BF
symbolIcon.constantForeground#FFCA80
symbolIcon.constructorForeground#9580FF
symbolIcon.enumeratorForeground#FFFF80
symbolIcon.enumeratorMemberForeground#FFFF80
symbolIcon.eventForeground#FF80BF
symbolIcon.fieldForeground#F8F8F2
symbolIcon.fileForeground#9580FF
symbolIcon.folderForeground#9580FF
symbolIcon.functionForeground#80FFEA
symbolIcon.interfaceForeground#FFFF80
symbolIcon.keyForeground#80FFEA
symbolIcon.keywordForeground#9580FF
symbolIcon.methodForeground#80FFEA
symbolIcon.moduleForeground#F8F8F2
symbolIcon.namespaceForeground#FFFF80
symbolIcon.nullForeground#FF9580
symbolIcon.numberForeground#FFCA80
symbolIcon.objectForeground#FFFF80
symbolIcon.operatorForeground#80FFEA
symbolIcon.packageForeground#FF80BF
symbolIcon.propertyForeground#FF9580
symbolIcon.referenceForeground#FFFF80
symbolIcon.snippetForeground#FF80BF
symbolIcon.stringForeground#8AFF80
symbolIcon.structForeground#80FFEA
symbolIcon.textForeground#F8F8F2
symbolIcon.typeParameterForeground#FF9580
symbolIcon.unitForeground#F8F8F2
symbolIcon.variableForeground#F8F8F2
tab.activeBackground#22212C
tab.activeBorderTop#9580FF
tab.activeForeground#F8F8F2
tab.activeModifiedBorder#FFFF80
tab.border#0B0A10
tab.hoverBackground#424450
tab.hoverForeground#9580FF
tab.inactiveBackground#151320
tab.inactiveForeground#7970A9
tab.inactiveModifiedBorder#FFFF8020
tab.lastPinnedBorder#9580FF
tab.unfocusedActiveBackground#424450
tab.unfocusedActiveBorder#9580FF20
tab.unfocusedActiveBorderTop#FF80BF20
tab.unfocusedHoverBackground#2B2640
tab.unfocusedInactiveBackground#0B0A10
terminal.ansiBlack#21222C
terminal.ansiBlue#9580FF
terminal.ansiBrightBlack#7970A9
terminal.ansiBrightBlue#BFB3FF
terminal.ansiBrightCyan#B3FFF2
terminal.ansiBrightGreen#B9FFB3
terminal.ansiBrightMagenta#FFB3D9
terminal.ansiBrightRed#FFBFB3
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFFFB3
terminal.ansiCyan#80FFEA
terminal.ansiGreen#8AFF80
terminal.ansiMagenta#FF80BF
terminal.ansiRed#FF9580
terminal.ansiWhite#F8F8F2
terminal.ansiYellow#FFFF80
terminal.background#22212C
terminal.border#424450
terminal.dropBackground#9580FF20
terminal.findMatchBackground#FFCA8060
terminal.findMatchBorder#FFCA80
terminal.findMatchHighlightBackground#FFFF8060
terminal.findMatchHighlightBorder#FFFF80
terminal.foreground#F8F8F2
terminal.hoverHighlightBackground#80FFEA60
terminal.inactiveSelectionBackground#9580FF40
terminal.selectionBackground#9580FF60
terminal.selectionForeground#F8F8F2
terminal.tab.activeBorder#FF80BF
terminalCommandDecoration.defaultBackground#80FFEA
terminalCommandDecoration.errorBackground#FF9580
terminalCommandDecoration.successBackground#8AFF80
terminalCursor.background#F8F8F2
terminalCursor.foreground#F8F8F2
terminalOverviewRuler.cursorForeground#F8F8F2
terminalOverviewRuler.findMatchForeground#FFCA80
terminalStickyScroll.background#9580FF20
terminalStickyScroll.border#22212C
terminalStickyScrollHover.background#9580FF60
testing.coverCountBadgeBackground#424450
testing.coverCountBadgeForeground#F8F8F2
testing.coveredBackground#8AFF8020
testing.coveredBorder#8AFF8020
testing.coveredGutterBackground#8AFF8040
testing.iconErrored#FF9580
testing.iconErrored.retired#FF9580
testing.iconFailed#FF9580
testing.iconFailed.retired#FF9580
testing.iconPassed#8AFF80
testing.iconPassed.retired#8AFF80
testing.iconQueued#FFFF80
testing.iconQueued.retired#FFFF80
testing.iconSkipped#7970A9
testing.iconSkipped.retired#7970A9
testing.iconUnset#7970A9
testing.iconUnset.retired#7970A9
testing.message.error.decorationForeground#FF9580
testing.message.error.lineBackground#FF958020
testing.message.info.decorationForeground#80FFEA
testing.message.info.lineBackground#80FFEA20
testing.messagePeekBorder#9580FF
testing.messagePeekHeaderBackground#22212C
testing.peekBorder#9580FF
testing.peekHeaderBackground#22212C
testing.runAction#8AFF80
testing.uncoveredBackground#FF958020
testing.uncoveredBorder#FF958020
testing.uncoveredBranchBackground#FF958020
testing.uncoveredGutterBackground#FF958040
textBlockQuote.background#2B2640
textBlockQuote.border#7970A9
textCodeBlock.background#424450
textLink.activeForeground#80FFEA
textLink.foreground#9580FF
textPreformat.background#2B2640
textPreformat.foreground#F8F8F2
textSeparator.foreground#7970A9
titleBar.activeBackground#22212C
titleBar.activeForeground#F8F8F2
titleBar.border#0B0A10
titleBar.inactiveBackground#0B0A10
titleBar.inactiveForeground#7970A9
toolbar.activeBackground#F8F8F210
toolbar.hoverBackground#F8F8F210
tree.inactiveIndentGuidesStroke#151320
tree.indentGuidesStroke#323040
walkThrough.embeddedEditorBackground#2B2640
walkthrough.stepTitle.foreground#F8F8F2
welcomePage.background#22212C
welcomePage.progress.background#0B0A10
welcomePage.progress.foreground#F8F8F2
welcomePage.tileBackground#2B2640
welcomePage.tileBorder#0B0A10
welcomePage.tileHoverBackground#424450
widget.border#0B0A10
window.activeBorder#0B0A10
window.inactiveBorder#151320

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—
strong	—	bold
header	#9580FF	—
source	#F8F8F2	—
meta.diff, meta.diff.header	#7970A9	—
markup.inserted	#8AFF80	—
markup.deleted	#FF9580	—
markup.changed	#FFCA80	—
invalid	#FF9580	underline
invalid.deprecated	#F8F8F2	underline
entity.name.filename	#FFFF80	—
markup.error	#FF9580	—
markup.underline	—	underline
markup.bold	#FFCA80	bold
markup.heading	#9580FF	bold
markup.	#FFFF80
markup.strikethrough	#7970A9	strikethrough
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext	#80FFEA	—
markup.inline.raw, markup.raw.restructuredtext	#8AFF80	—
markup.underline.link, markup.underline.link.image	#80FFEA	—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title	#FF80BF	—
entity.name.directive.restructuredtext, markup.quote	#FFFF80
meta.separator.markdown	#7970A9	—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown	#8AFF80	—
punctuation.definition.constant.restructuredtext	#9580FF	—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end	#9580FF	—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end	#F8F8F2	—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end	#FFFF80	—
entity.name.type.class, entity.name.class	#80FFEA	normal
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special	#9580FF
entity.other.inherited-class	#80FFEA
comment, punctuation.definition.comment, unused.comment, wildcard.comment	#7970A9	—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class	#FF80BF	—
comment.block.documentation entity.name.type	#80FFEA
comment.block.documentation entity.name.type punctuation.definition.bracket	#80FFEA	—
comment.block.documentation variable	#FFCA80
constant, variable.other.constant	#9580FF	—
constant.character.escape, constant.character.string.escape, constant.regexp	#FF80BF	—
entity.name.tag	#FF80BF	—
entity.other.attribute-name.parent-selector	#FF80BF	—
entity.other.attribute-name	#8AFF80
entity.name.function, meta.function-call.generic, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix	#8AFF80	—
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter	#FFCA80
meta.decorator variable.other.readwrite, meta.decorator variable.other.property	#8AFF80
meta.decorator variable.other.object	#8AFF80	—
keyword, punctuation.definition.keyword	#FF80BF	—
keyword.control.new, keyword.operator.new	—	bold
meta.selector	#FF80BF	—
support	#80FFEA
support.function.magic, support.variable, variable.other.predefined	#9580FF	regular
support.function, support.type.property-name	—	regular
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation	#FF80BF	—
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, punctuation.section.braces.begin, punctuation.section.braces.end, punctuation.section.parens.begin, punctuation.section.parens.end, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor	#F8F8F2	—
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile	#FF80BF	—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml	#80FFEA	—
constant.other.date, constant.other.timestamp	#FFCA80	—
variable.other.alias.yaml	#8AFF80	underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def	#FF80BF	regular
entity.name.namespace, entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.haskell, storage.type.objc, storage.type.ocaml, storage.type.php, variable.annotation	#80FFEA
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type	#FFCA80	—
storage.modifier	#FF80BF	—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp	#FFFF80	—
punctuation.definition.group.capture.regexp	#FF80BF	—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end	#FF9580	—
punctuation.definition.character-class.regexp	#80FFEA	—
punctuation.definition.group.regexp	#FFCA80	—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp	#FF9580	—
meta.assertion.look-ahead.regexp	#8AFF80	—
string	#FFFF80	—
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape	#7970A9	—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx	#F8F8F2	—
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable	#FFCA80
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable	#F8F8F2	normal
constant.language.ruby, constant.numeric.ruby	#9580FF	—
entity.name.type.class.ruby, entity.name.class.ruby, entity.name.type.module.ruby	#80FFEA	—
keyword.control.ruby	#FF80BF	—
entity.name.function.method.ruby, constant.other.symbol.ruby	#8AFF80	—
variable.other.readwrite.instance.ruby	#FFCA80	—
variable.other.block.ruby	#FFFF80	—
keyword.operator.ruby	#F8F8F2	—
punctuation.separator.method.ruby	#F8F8F2	—
source.terraform entity.name.tag.block	#80FFEA	—
source.terraform entity.name.tag.provider	#9580FF	—
source.terraform variable.other.attribute-name, source.hcl variable.other.attribute-name	#8AFF80	—
source.terraform string.quoted, source.hcl string.quoted	#FFFF80	—
source.hcl meta.function-call	#80FFEA	—
source.hcl keyword.type	#FF80BF	—
source.hcl constant.numeric, source.hcl constant.language.boolean	#FFCA80	—
source.hcl comment	#7970A9	—
entity.name.function.alias.graphql	#9580FF	—
entity.name.type.graphql	#8AFF80	—
constant.language.graphql	#FFCA80	—
variable.arguments.graphql	#80FFEA	—
meta.directive.graphql	#FF80BF	—
meta.selectionset.graphql meta.field.graphql	#F8F8F2	—
punctuation.definition.string.begin.php, punctuation.definition.string.end.php	#FFFF80	—
punctuation.separator.inheritance.php	#80FFEA	—
keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell	#F8F8F2	—
source.shell variable.other	#9580FF	—
support.constant	#9580FF	normal
meta.scope.prerequisites.makefile	#FFFF80	—
meta.attribute-selector.scss	#FFFF80	—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss	#F8F8F2	—
meta.preprocessor.haskell	#7970A9	—

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}!`;
}