Colour

Name: Colour
Author: language-anew

Publisher: language-anewThemes in package: 36

Colour

Color themes

VS Code preview

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

Colour — Colour B 1

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...

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#50356aff
activityBar.activeBorder#5a3c78ff
activityBar.activeFocusBorder#5e3f7dff
activityBar.background#302040ff
activityBar.border#50356aff
activityBar.dropBorder#50356aff
activityBar.foreground#f8f8f8ff
activityBar.inactiveForeground#e4e4e4ff
activityBarBadge.background#50356aff
activityBarBadge.foreground#ffffffff
badge.background#351b6aff
badge.foreground#ffffffff
banner.background#201040ff
banner.foreground#e7e7e7ff
banner.iconForeground#ffffffff
bookmarks.lineBackground#201040ff
bookmarks.lineBorder#351b6aff
bookmarks.overviewRuler#201040ff
breadcrumb.activeSelectionForeground#f8f8f8ff
breadcrumb.background#150540ff
breadcrumb.focusForeground#f1f1f1ff
breadcrumb.foreground#e0e0e0ff
breadcrumbPicker.background#23096aff
button.background#351b6aff
button.border#3c1e78ff
button.foreground#ffffffff
button.hoverBackground#3c1e78ff
button.secondaryBackground#351b6aff
button.secondaryForeground#ffffffff
button.secondaryHoverBackground#3c1e78ff
charts.blue#201040ff
charts.foreground#e7e7e7ff
charts.green#201040ff
charts.lines#201040ff
charts.orange#201040ff
charts.purple#201040ff
charts.red#201040ff
charts.yellow#201040ff
checkbox.background#351b6aff
checkbox.border#3c1e78ff
checkbox.foreground#ffffffff
debugConsole.errorForeground#e7e7e7ff
debugConsole.infoForeground#e7e7e7ff
debugConsole.sourceForeground#e7e7e7ff
debugConsole.warningForeground#e7e7e7ff
debugConsoleInputIcon.foreground#ffffffff
debugExceptionWidget.background#351b6aff
debugExceptionWidget.border#3c1e78ff
debugIcon.breakpointCurrentStackframeForeground#ffffffff
debugIcon.breakpointDisabledForeground#ffffffff
debugIcon.breakpointForeground#ffffffff
debugIcon.breakpointStackframeForeground#ffffffff
debugIcon.breakpointUnverifiedForeground#ffffffff
debugIcon.continueForeground#ffffffff
debugIcon.disconnectForeground#ffffffff
debugIcon.pauseForeground#ffffffff
debugIcon.restartForeground#ffffffff
debugIcon.startForeground#ffffffff
debugIcon.stepBackForeground#ffffffff
debugIcon.stepIntoForeground#ffffffff
debugIcon.stepOutForeground#ffffffff
debugIcon.stepOverForeground#ffffffff
debugIcon.stopForeground#ffffffff
debugTokenExpression.boolean#201040ff
debugTokenExpression.error#201040ff
debugTokenExpression.name#201040ff
debugTokenExpression.number#201040ff
debugTokenExpression.string#201040ff
debugTokenExpression.value#201040ff
debugToolBar.background#201040ff
debugToolBar.border#351b6aff
debugView.exceptionLabelBackground#351b6aff
debugView.exceptionLabelForeground#ffffffff
debugView.stateLabelBackground#351b6aff
debugView.stateLabelForeground#ffffffff
debugView.valueChangedHighlight#3c1e78ff
descriptionForeground#e7e7e7ff
diffEditor.border#351b6aff
diffEditor.diagonalFill#201040ff
diffEditor.insertedTextBackground#201040ff
diffEditor.insertedTextBorder#351b6aff
diffEditor.removedTextBackground#201040ff
diffEditor.removedTextBorder#351b6aff
dropdown.background#201040ff
dropdown.border#351b6aff
dropdown.foreground#e7e7e7ff
dropdown.listBackground#2b1b40ff
editor.background#100040ff
editor.findMatchBackground#100040ff
editor.findMatchBorder#1b006aff
editor.findMatchHighlightBackground#1b006aff
editor.findMatchHighlightBorder#1e0078ff
editor.findRangeHighlightBackground#1b006aff
editor.findRangeHighlightBorder#1e0078ff
editor.focusedStackFrameHighlightBackground#1e0078ff
editor.foldBackground#100040ff
editor.foreground#ddddddff
editor.hoverHighlightBackground#1e0078ff
editor.inactiveSelectionBackground#100040ff
editor.inlineValuesBackground#100040ff
editor.inlineValuesForeground#ddddddff
editor.lineHighlightBackground#1b006aff
editor.linkedEditingBackground#100040ff
editor.rangeHighlightBackground#1b006aff
editor.rangeHighlightBorder#1e0078ff
editor.selectionBackground#1b006aff
editor.selectionForeground#ebebebff
editor.selectionHighlightBackground#1e0078ff
editor.selectionHighlightBorder#1f007dff
editor.snippetFinalTabstopHighlightBackground#1b006aff
editor.snippetFinalTabstopHighlightBorder#1e0078ff
editor.snippetTabstopHighlightBackground#1b006aff
editor.snippetTabstopHighlightBorder#1e0078ff
editor.stackFrameHighlightBackground#1b006aff
editor.symbolHighlightBackground#1e0078ff
editor.symbolHighlightBorder#1f007dff
editor.wordHighlightBackground#1b006aff
editor.wordHighlightBorder#1e0078ff
editor.wordHighlightStrongBackground#1b006aff
editor.wordHighlightStrongBorder#1e0078ff
editorBracketHighlight.foreground1#4000ffff
editorBracketHighlight.foreground2#4000ffff
editorBracketHighlight.foreground3#4000ffff
editorBracketHighlight.foreground4#4000ffff
editorBracketHighlight.foreground5#4000ffff
editorBracketHighlight.foreground6#4000ffff
editorBracketHighlight.unexpectedBracket.foreground#7f7f7fff
editorBracketMatch.background#100040ff
editorBracketMatch.border#1b006aff
editorCodeLens.foreground#ddddddff
editorCursor.background#100040ff
editorCursor.foreground#ddddddff
editorError.background#100040ff
editorError.border#1b006aff
editorError.foreground#ddddddff
editorGhostText.border#1b006aff
editorGhostText.foreground#ddddddff
editorGroup.border#23096aff
editorGroup.dropBackground#150540ff
editorGroup.emptyBackground#150540ff
editorGroup.focusedEmptyBorder#280a78ff
editorGroupHeader.border#23096aff
editorGroupHeader.noTabsBackground#150540ff
editorGroupHeader.tabsBackground#150540ff
editorGroupHeader.tabsBorder#23096aff
editorGutter.addedBackground#23096aff
editorGutter.background#150540ff
editorGutter.commentRangeForeground#e0e0e0ff
editorGutter.deletedBackground#23096aff
editorGutter.foldingControlForeground#e0e0e0ff
editorGutter.modifiedBackground#23096aff
editorHint.border#1b006aff
editorHint.foreground#ddddddff
editorHoverWidget.background#1e0078ff
editorHoverWidget.border#1f007dff
editorHoverWidget.foreground#f2f2f2ff
editorHoverWidget.statusBarBackground#3c1e78ff
editorIndentGuide.activeBackground#4000ffff
editorIndentGuide.background#28009fff
editorInfo.background#100040ff
editorInfo.border#1b006aff
editorInfo.foreground#ddddddff
editorInlayHint.background#100040ff
editorInlayHint.foreground#ddddddff
editorLightBulb.foreground#ffffffff
editorLightBulbAutoFix.foreground#7f7f7fff
editorLineNumber.activeForeground#ebebebff
editorLineNumber.foreground#ddddddff
editorLink.activeForeground#ebebebff
editorMarkerNavigation.background#100040ff
editorMarkerNavigationError.background#100040ff
editorMarkerNavigationError.headerBackground#100040ff
editorMarkerNavigationInfo.background#100040ff
editorMarkerNavigationInfo.headerBackground#100040ff
editorMarkerNavigationWarning.background#100040ff
editorMarkerNavigationWarning.headerBackground#100040ff
editorOverviewRuler.addedForeground#ebebebff
editorOverviewRuler.background#100040ff
editorOverviewRuler.border#1b006aff
editorOverviewRuler.bracketMatchForeground#ddddddff
editorOverviewRuler.commonContentForeground#ddddddff
editorOverviewRuler.currentContentForeground#ddddddff
editorOverviewRuler.deletedForeground#ebebebff
editorOverviewRuler.errorForeground#ddddddff
editorOverviewRuler.findMatchForeground#ddddddff
editorOverviewRuler.incomingContentForeground#ddddddff
editorOverviewRuler.infoForeground#ddddddff
editorOverviewRuler.modifiedForeground#ebebebff
editorOverviewRuler.rangeHighlightForeground#ebebebff
editorOverviewRuler.selectionHighlightForeground#f2f2f2ff
editorOverviewRuler.warningForeground#ddddddff
editorOverviewRuler.wordHighlightForeground#ebebebff
editorOverviewRuler.wordHighlightStrongForeground#ebebebff
editorPane.background#100040ff
editorRuler.foreground#ddddddff
editorSuggestWidget.background#1b006aff
editorSuggestWidget.border#1e0078ff
editorSuggestWidget.focusHighlightForeground#f4f4f4ff
editorSuggestWidget.foreground#ebebebff
editorSuggestWidget.highlightForeground#f2f2f2ff
editorSuggestWidget.selectedBackground#1e0078ff
editorSuggestWidget.selectedForeground#f2f2f2ff
editorSuggestWidget.selectedIconForeground#f2f2f2ff
editorUnnecessaryCode.border#1b006a99
editorUnnecessaryCode.opacity#10004099
editorWarning.background#100040ff
editorWarning.border#1b006aff
editorWarning.foreground#ddddddff
editorWhitespace.foreground#180060ff
editorWidget.background#1b006aff
editorWidget.border#1e0078ff
editorWidget.foreground#ebebebff
editorWidget.resizeBorder#1e0078ff
errorForeground#e7e7e7ff
errorLens.errorBackground#201040ff
errorLens.errorBackgroundLight#201040ff
errorLens.errorForeground#e7e7e7ff
errorLens.errorForegroundLight#e7e7e7ff
errorLens.errorMessageBackground#201040ff
errorLens.hintBackground#201040ff
errorLens.hintBackgroundLight#201040ff
errorLens.hintForeground#e7e7e7ff
errorLens.hintForegroundLight#e7e7e7ff
errorLens.hintMessageBackground#201040ff
errorLens.infoBackground#201040ff
errorLens.infoBackgroundLight#201040ff
errorLens.infoForeground#e7e7e7ff
errorLens.infoForegroundLight#e7e7e7ff
errorLens.infoMessageBackground#201040ff
errorLens.statusBarErrorForeground#e7e7e7ff
errorLens.statusBarHintForeground#e7e7e7ff
errorLens.statusBarInfoForeground#e7e7e7ff
errorLens.statusBarWarningForeground#e7e7e7ff
errorLens.warningBackground#201040ff
errorLens.warningBackgroundLight#201040ff
errorLens.warningForeground#e7e7e7ff
errorLens.warningForegroundLight#e7e7e7ff
errorLens.warningMessageBackground#201040ff
extensionBadge.remoteBackground#351b6aff
extensionBadge.remoteForeground#ffffffff
extensionButton.prominentBackground#351b6aff
extensionButton.prominentForeground#ffffffff
extensionButton.prominentHoverBackground#3c1e78ff
extensionIcon.starForeground#ffffffff
focusBorder#3c1e78ff
foreground#e7e7e7ff
gitlens.closedPullRequestIconColor#351b6aff
gitlens.decorations.addedForegroundColor#ffffffff
gitlens.decorations.branchAheadForegroundColor#e7e7e7ff
gitlens.decorations.branchBehindForegroundColor#e7e7e7ff
gitlens.decorations.branchDivergedForegroundColor#e7e7e7ff
gitlens.decorations.branchMissingUpstreamForegroundColor#e7e7e7ff
gitlens.decorations.branchUnpublishedForegroundColor#e7e7e7ff
gitlens.decorations.branchUpToDateForegroundColor#e7e7e7ff
gitlens.decorations.copiedForegroundColor#e7e7e7ff
gitlens.decorations.deletedForegroundColor#ffffffff
gitlens.decorations.ignoredForegroundColor#e7e7e7ff
gitlens.decorations.modifiedForegroundColor#ffffffff
gitlens.decorations.renamedForegroundColor#e7e7e7ff
gitlens.decorations.untrackedForegroundColor#e7e7e7ff
gitlens.gutterBackgroundColor#201040ff
gitlens.gutterForegroundColor#e7e7e7ff
gitlens.gutterUncommittedForegroundColor#e7e7e7ff
gitlens.lineHighlightBackgroundColor#351b6aff
gitlens.lineHighlightOverviewRulerColor#351b6aff
gitlens.mergedPullRequestIconColor#351b6aff
gitlens.openPullRequestIconColor#351b6aff
gitlens.trailingLineBackgroundColor#201040ff
gitlens.trailingLineForegroundColor#e7e7e7ff
gitlens.unpublishedCommitIconColor#351b6aff
gitlens.unpulledChangesIconColor#351b6aff
gitlens.unpushlishedChangesIconColor#351b6aff
icon.foreground#ffffffff
inlineTitleBar.background#201040ff
input.background#201040ff
input.border#351b6aff
input.foreground#e7e7e7ff
input.placeholderForeground#e7e7e7ff
inputOption.activeBackground#351b6aff
inputOption.activeBorder#3c1e78ff
inputOption.activeForeground#ffffffff
inputValidation.errorBackground#201040ff
inputValidation.errorBorder#351b6aff
inputValidation.errorForeground#e7e7e7ff
inputValidation.infoBackground#201040ff
inputValidation.infoBorder#351b6aff
inputValidation.infoForeground#e7e7e7ff
inputValidation.warningBackground#201040ff
inputValidation.warningBorder#351b6aff
inputValidation.warningForeground#e7e7e7ff
interactive.activeCodeBorder#3c1e78ff
interactive.inactiveCodeBorder#311862ff
issues.closed#201040ff
issues.newIssueDecoration#201040ff
issues.open#201040ff
keybindingLabel.background#201040ff
keybindingLabel.border#351b6aff
keybindingLabel.bottomBorder#351b6aff
keybindingLabel.foreground#e7e7e7ff
lintlens.annotationColor#201040ff
list.activeSelectionBackground#503278ff
list.activeSelectionForeground#ffffffff
list.activeSelectionIconForeground#ffffffff
list.deemphasizedForeground#f1f1f1ff
list.dropBackground#2b1b40ff
list.errorForeground#f1f1f1ff
list.filterMatchBackground#2b1b40ff
list.filterMatchBorder#472c6aff
list.focusBackground#472c6aff
list.focusForeground#ffffffff
list.focusHighlightForeground#ffffffff
list.focusOutline#503278ff
list.highlightForeground#ffffffff
list.hoverBackground#472c6aff
list.hoverForeground#ffffffff
list.inactiveFocusBackground#472c6aff
list.inactiveFocusOutline#503278ff
list.inactiveSelectionBackground#472c6aff
list.inactiveSelectionForeground#ffffffff
list.inactiveSelectionIconForeground#f8f8f8ff
list.invalidItemForeground#f1f1f1ff
list.warningForeground#f1f1f1ff
listFilterWidget.background#472c6aff
listFilterWidget.noMatchesOutline#503278ff
listFilterWidget.outline#503278ff
menu.background#201040ff
menu.border#351b6aff
menu.foreground#e7e7e7ff
menu.selectionBackground#351b6aff
menu.selectionBorder#3c1e78ff
menu.selectionForeground#ffffffff
menu.separatorBackground#201040ff
menubar.selectionBackground#351b6aff
menubar.selectionBorder#3c1e78ff
menubar.selectionForeground#ffffffff
merge.border#351b6aff
merge.commonContentBackground#201040ff
merge.commonHeaderBackground#201040ff
merge.currentContentBackground#201040ff
merge.currentHeaderBackground#201040ff
merge.incomingContentBackground#201040ff
merge.incomingHeaderBackground#201040ff
minimap.background#100040ff
minimap.errorHighlight#1b006aff
minimap.findMatchHighlight#1b006aff
minimap.selectionHighlight#1e0078ff
minimap.warningHighlight#1b006aff
minimapGutter.addedBackground#1b006aff
minimapGutter.deletedBackground#1b006aff
minimapGutter.modifiedBackground#1b006aff
minimapSlider.activeBackground#1e007899
minimapSlider.background#1b006a99
minimapSlider.hoverBackground#1e007899
notebook.cellBorderColor#351b6aff
notebook.cellEditorBackground#201040ff
notebook.cellHoverBackground#351b6aff
notebook.cellInsertionIndicator#201040ff
notebook.cellStatusBarItemHoverBackground#351b6aff
notebook.cellToolbarSeparator#201040ff
notebook.focusedCellBackground#351b6aff
notebook.focusedCellBorder#3c1e78ff
notebook.focusedEditorBorder#3c1e78ff
notebook.inactiveFocusedCellBorder#351b6aff
notebook.inactiveSelectedCellBorder#351b6aff
notebook.outputContainerBackgroundColor#201040ff
notebook.selectedCellBackground#351b6aff
notebook.selectedCellBorder#3c1e78ff
notebook.symbolHighlightBackground#3c1e78ff
notebookScrollbarSlider.activeBackground#3c1e7899
notebookScrollbarSlider.background#351b6a99
notebookScrollbarSlider.hoverBackground#3c1e7899
notebookStatusErrorIcon.foreground#ffffffff
notebookStatusRunningIcon.foreground#ffffffff
notebookStatusSuccessIcon.foreground#ffffffff
notificationCenter.border#351b6aff
notificationCenterHeader.background#201040ff
notificationCenterHeader.foreground#e7e7e7ff
notificationLink.foreground#e7e7e7ff
notifications.background#201040ff
notifications.border#351b6aff
notifications.foreground#e7e7e7ff
notificationsErrorIcon.foreground#ffffffff
notificationsInfoIcon.foreground#ffffffff
notificationsWarningIcon.foreground#ffffffff
notificationToast.border#351b6aff
panel.background#251540ff
panel.border#3e236aff
panel.dropBorder#3e236aff
panelInput.border#3e236aff
panelSection.border#3e236aff
panelSection.dropBackground#251540ff
panelSectionHeader.background#251540ff
panelSectionHeader.border#3e236aff
panelSectionHeader.foreground#ecececff
panelTitle.activeBorder#462878ff
panelTitle.activeForeground#ffffffff
panelTitle.inactiveForeground#dfdfdfff
peekView.border#3c1e78ff
peekViewEditor.background#351b6aff
peekViewEditor.matchHighlightBackground#3c1e78ff
peekViewEditor.matchHighlightBorder#3f1f7dff
peekViewEditorGutter.background#351b6aff
peekViewResult.background#351b6aff
peekViewResult.fileForeground#ffffffff
peekViewResult.lineForeground#ffffffff
peekViewResult.matchHighlightBackground#3c1e78ff
peekViewResult.selectionBackground#3c1e78ff
peekViewResult.selectionForeground#ffffffff
peekViewTitle.background#351b6aff
peekViewTitleDescription.foreground#ffffffff
peekViewTitleLabel.foreground#ffffffff
pickerGroup.border#3c1e78ff
pickerGroup.foreground#ffffffff
ports.iconRunningProcessForeground#ffffffff
problemsErrorIcon.foreground#ffffffff
problemsInfoIcon.foreground#ffffffff
problemsWarningIcon.foreground#ffffffff
progressBar.background#201040ff
quickInput.background#201040ff
quickInput.foreground#e7e7e7ff
quickInputList.focusBackground#472c6aff
quickInputList.focusForeground#ffffffff
quickInputList.focusIconForeground#ffffffff
quickInputTitle.background#201040ff
sash.hoverBorder#3c1e78ff
scm.providerBorder#351b6aff
scrollbar.shadow#351b6aff
scrollbarSlider.activeBackground#3c1e7899
scrollbarSlider.background#351b6a99
scrollbarSlider.hoverBackground#3c1e7899
searchEditor.findMatchBackground#201040ff
searchEditor.findMatchBorder#351b6aff
searchEditor.textInputBorder#351b6aff
selection.background#351b6aff
settings.checkboxBackground#351b6aff
settings.checkboxBorder#3c1e78ff
settings.checkboxForeground#ffffffff
settings.dropdownBackground#201040ff
settings.dropdownBorder#351b6aff
settings.dropdownForeground#e7e7e7ff
settings.dropdownListBorder#472c6aff
settings.focusedRowBackground#351b6aff
settings.focusedRowBorder#3c1e78ff
settings.headerForeground#e7e7e7ff
settings.modifiedItemIndicator#351b6aff
settings.numberInputBackground#201040ff
settings.numberInputBorder#351b6aff
settings.numberInputForeground#e7e7e7ff
settings.rowHoverBackground#351b6aff
settings.textInputBackground#201040ff
settings.textInputBorder#351b6aff
settings.textInputForeground#e7e7e7ff
sideBar.background#2b1b40ff
sideBar.border#472c6aff
sideBar.dropBackground#2b1b40ff
sideBar.foreground#f1f1f1ff
sideBarSectionHeader.background#2b1b40ff
sideBarSectionHeader.border#472c6aff
sideBarSectionHeader.foreground#f1f1f1ff
sideBarTitle.foreground#f1f1f1ff
statusBar.background#201040ff
statusBar.border#351b6aff
statusBar.debuggingBackground#201040ff
statusBar.debuggingBorder#351b6aff
statusBar.debuggingForeground#e7e7e7ff
statusBar.foreground#e7e7e7ff
statusBar.noFolderBackground#201040ff
statusBar.noFolderBorder#351b6aff
statusBar.noFolderForeground#e7e7e7ff
statusBarItem.activeBackground#351b6aff
statusBarItem.errorBackground#201040ff
statusBarItem.errorForeground#e7e7e7ff
statusBarItem.hoverBackground#351b6aff
statusBarItem.prominentBackground#201040ff
statusBarItem.prominentForeground#e7e7e7ff
statusBarItem.prominentHoverBackground#351b6aff
statusBarItem.remoteBackground#201040ff
statusBarItem.remoteForeground#e7e7e7ff
statusBarItem.warningBackground#201040ff
statusBarItem.warningForeground#e7e7e7ff
symbolIcon.arrayForeground#ffffffff
symbolIcon.booleanForeground#ffffffff
symbolIcon.classForeground#ffffffff
symbolIcon.colorForeground#ffffffff
symbolIcon.constantForeground#ffffffff
symbolIcon.constructorForeground#ffffffff
symbolIcon.enumeratorForeground#ffffffff
symbolIcon.enumeratorMemberForeground#ffffffff
symbolIcon.eventForeground#ffffffff
symbolIcon.fieldForeground#ffffffff
symbolIcon.fileForeground#ffffffff
symbolIcon.folderForeground#ffffffff
symbolIcon.functionForeground#ffffffff
symbolIcon.interfaceForeground#ffffffff
symbolIcon.keyForeground#ffffffff
symbolIcon.keywordForeground#ffffffff
symbolIcon.methodForeground#ffffffff
symbolIcon.moduleForeground#ffffffff
symbolIcon.namespaceForeground#ffffffff
symbolIcon.nullForeground#ffffffff
symbolIcon.numberForeground#ffffffff
symbolIcon.objectForeground#ffffffff
symbolIcon.operatorForeground#ffffffff
symbolIcon.packageForeground#ffffffff
symbolIcon.propertyForeground#ffffffff
symbolIcon.referenceForeground#ffffffff
symbolIcon.snippetForeground#ffffffff
symbolIcon.stringForeground#ffffffff
symbolIcon.structForeground#ffffffff
symbolIcon.textForeground#ffffffff
symbolIcon.typeParameterForeground#ffffffff
symbolIcon.unitForeground#ffffffff
symbolIcon.variableForeground#ffffffff
tab.activeBackground#2c126aff
tab.activeBorder#321478ff
tab.activeBorderTop#321478ff
tab.activeForeground#f8f8f8ff
tab.activeModifiedBorder#34157dff
tab.border#2c126aff
tab.hoverBackground#2c126aff
tab.hoverBorder#321478ff
tab.hoverForeground#f8f8f8ff
tab.inactiveBackground#1b0b40ff
tab.inactiveForeground#e3e3e3ff
tab.inactiveModifiedBorder#2c126aff
tab.lastPinnedBorder#2c126aff
tab.unfocusedActiveBackground#2c126aff
tab.unfocusedActiveBorder#321478ff
tab.unfocusedActiveBorderTop#321478ff
tab.unfocusedActiveForeground#f8f8f8ff
tab.unfocusedActiveModifiedBorder#34157dff
tab.unfocusedHoverBackground#2c126aff
tab.unfocusedHoverBorder#321478ff
tab.unfocusedHoverForeground#f8f8f8ff
tab.unfocusedInactiveBackground#100626ff
tab.unfocusedInactiveForeground#dbdbdbff
tab.unfocusedInactiveModifiedBorder#2c126aff
testing.iconErrored#351b6aff
testing.iconFailed#351b6aff
testing.iconPassed#351b6aff
testing.iconQueued#351b6aff
testing.iconSkipped#351b6aff
testing.iconUnset#351b6aff
testing.message.error.decorationForeground#e7e7e7ff
testing.message.error.lineBackground#201040ff
testing.message.info.decorationForeground#e7e7e7ff
testing.message.info.lineBackground#201040ff
testing.peekBorder#351b6aff
testing.peekHeaderBackground#201040ff
testing.runAction#201040ff
textBlockQuote.background#201040ff
textBlockQuote.border#351b6aff
textCodeBlock.background#201040ff
textLink.activeForeground#ffffffff
textLink.foreground#e7e7e7ff
textPreformat.foreground#e7e7e7ff
textSeparator.foreground#e7e7e7ff
titleBar.activeBackground#351b6aff
titleBar.activeForeground#ffffffff
titleBar.border#351b6aff
titleBar.inactiveBackground#130a26ff
titleBar.inactiveForeground#ddddddff
toolbar.activeBackground#351b6aff
toolbar.hoverBackground#351b6aff
toolbar.hoverOutline#3c1e78ff
tree.indentGuidesStroke#503278ff
tree.tableColumnsBorder#472c6aff
walkThrough.embeddedEditorBackground#201040ff
welcomePage.background#201040ff
welcomePage.buttonBackground#351b6aff
welcomePage.buttonHoverBackground#3c1e78ff
welcomePage.progress.background#201040ff
welcomePage.progress.foreground#e7e7e7ff
welcomePage.tileBackground#201040ff
welcomePage.tileHoverBackground#351b6aff
welcomePage.tileShadow.#351b6aff
widget.shadow#3c1e78ff
window.activeBorder#3c1e78ff
window.inactiveBorder#311862ff
workspace.hiddenColor#20104099

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.tag.jsx support.class.component.open.jsx	#ffffffff	bold
meta.tag.jsx support.class.component.close.jsx	#ffffffff	bold
meta.tag.jsx entity.other.attribute-name.jsx	#f9f9f9ff	italic
variable.other.constant , variable.other.dollar , variable.other.readwrite	#ffffffff	bold
entity	#ffffffff	bold
support	#ffffffff	bold
variable	#ffffffff	bold
keyword.operator	#f4f4f4ff
constant	#e3e3e3ff
string	#e3e3e3ff
keyword	#4000ffff
meta	#4000ffff
punctuation	#4000ffff
storage	#4000ffff
comment	#200080ff
source	#180060ff

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