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 E 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#35506aff
activityBar.activeBorder#3c5a78ff
activityBar.activeFocusBorder#3f5e7dff
activityBar.background#203040ff
activityBar.border#35506aff
activityBar.dropBorder#35506aff
activityBar.foreground#ffffffff
activityBar.inactiveForeground#e9e9e9ff
activityBarBadge.background#35506aff
activityBarBadge.foreground#ffffffff
badge.background#1b356aff
badge.foreground#ffffffff
banner.background#102040ff
banner.foreground#efefefff
banner.iconForeground#ffffffff
bookmarks.lineBackground#102040ff
bookmarks.lineBorder#1b356aff
bookmarks.overviewRuler#102040ff
breadcrumb.activeSelectionForeground#ffffffff
breadcrumb.background#051540ff
breadcrumb.focusForeground#fdfdfdff
breadcrumb.foreground#e5e5e5ff
breadcrumbPicker.background#09236aff
button.background#1b356aff
button.border#1e3c78ff
button.foreground#ffffffff
button.hoverBackground#1e3c78ff
button.secondaryBackground#1b356aff
button.secondaryForeground#ffffffff
button.secondaryHoverBackground#1e3c78ff
charts.blue#102040ff
charts.foreground#efefefff
charts.green#102040ff
charts.lines#102040ff
charts.orange#102040ff
charts.purple#102040ff
charts.red#102040ff
charts.yellow#102040ff
checkbox.background#1b356aff
checkbox.border#1e3c78ff
checkbox.foreground#ffffffff
debugConsole.errorForeground#efefefff
debugConsole.infoForeground#efefefff
debugConsole.sourceForeground#efefefff
debugConsole.warningForeground#efefefff
debugConsoleInputIcon.foreground#ffffffff
debugExceptionWidget.background#1b356aff
debugExceptionWidget.border#1e3c78ff
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#102040ff
debugTokenExpression.error#102040ff
debugTokenExpression.name#102040ff
debugTokenExpression.number#102040ff
debugTokenExpression.string#102040ff
debugTokenExpression.value#102040ff
debugToolBar.background#102040ff
debugToolBar.border#1b356aff
debugView.exceptionLabelBackground#1b356aff
debugView.exceptionLabelForeground#ffffffff
debugView.stateLabelBackground#1b356aff
debugView.stateLabelForeground#ffffffff
debugView.valueChangedHighlight#1e3c78ff
descriptionForeground#efefefff
diffEditor.border#1b356aff
diffEditor.diagonalFill#102040ff
diffEditor.insertedTextBackground#102040ff
diffEditor.insertedTextBorder#1b356aff
diffEditor.removedTextBackground#102040ff
diffEditor.removedTextBorder#1b356aff
dropdown.background#102040ff
dropdown.border#1b356aff
dropdown.foreground#efefefff
dropdown.listBackground#1b2b40ff
editor.background#001040ff
editor.findMatchBackground#001040ff
editor.findMatchBorder#001b6aff
editor.findMatchHighlightBackground#001b6aff
editor.findMatchHighlightBorder#001e78ff
editor.findRangeHighlightBackground#001b6aff
editor.findRangeHighlightBorder#001e78ff
editor.focusedStackFrameHighlightBackground#001e78ff
editor.foldBackground#001040ff
editor.foreground#e2e2e2ff
editor.hoverHighlightBackground#001e78ff
editor.inactiveSelectionBackground#001040ff
editor.inlineValuesBackground#001040ff
editor.inlineValuesForeground#e2e2e2ff
editor.lineHighlightBackground#001b6aff
editor.linkedEditingBackground#001040ff
editor.rangeHighlightBackground#001b6aff
editor.rangeHighlightBorder#001e78ff
editor.selectionBackground#001b6aff
editor.selectionForeground#f4f4f4ff
editor.selectionHighlightBackground#001e78ff
editor.selectionHighlightBorder#001f7dff
editor.snippetFinalTabstopHighlightBackground#001b6aff
editor.snippetFinalTabstopHighlightBorder#001e78ff
editor.snippetTabstopHighlightBackground#001b6aff
editor.snippetTabstopHighlightBorder#001e78ff
editor.stackFrameHighlightBackground#001b6aff
editor.symbolHighlightBackground#001e78ff
editor.symbolHighlightBorder#001f7dff
editor.wordHighlightBackground#001b6aff
editor.wordHighlightBorder#001e78ff
editor.wordHighlightStrongBackground#001b6aff
editor.wordHighlightStrongBorder#001e78ff
editorBracketHighlight.foreground1#0040ffff
editorBracketHighlight.foreground2#0040ffff
editorBracketHighlight.foreground3#0040ffff
editorBracketHighlight.foreground4#0040ffff
editorBracketHighlight.foreground5#0040ffff
editorBracketHighlight.foreground6#0040ffff
editorBracketHighlight.unexpectedBracket.foreground#7f7f7fff
editorBracketMatch.background#001040ff
editorBracketMatch.border#001b6aff
editorCodeLens.foreground#e2e2e2ff
editorCursor.background#001040ff
editorCursor.foreground#e2e2e2ff
editorError.background#001040ff
editorError.border#001b6aff
editorError.foreground#e2e2e2ff
editorGhostText.border#001b6aff
editorGhostText.foreground#e2e2e2ff
editorGroup.border#09236aff
editorGroup.dropBackground#051540ff
editorGroup.emptyBackground#051540ff
editorGroup.focusedEmptyBorder#0a2878ff
editorGroupHeader.border#09236aff
editorGroupHeader.noTabsBackground#051540ff
editorGroupHeader.tabsBackground#051540ff
editorGroupHeader.tabsBorder#09236aff
editorGutter.addedBackground#09236aff
editorGutter.background#051540ff
editorGutter.commentRangeForeground#e5e5e5ff
editorGutter.deletedBackground#09236aff
editorGutter.foldingControlForeground#e5e5e5ff
editorGutter.modifiedBackground#09236aff
editorHint.border#001b6aff
editorHint.foreground#e2e2e2ff
editorHoverWidget.background#001e78ff
editorHoverWidget.border#001f7dff
editorHoverWidget.foreground#fcfcfcff
editorHoverWidget.statusBarBackground#1e3c78ff
editorIndentGuide.activeBackground#0040ffff
editorIndentGuide.background#00289fff
editorInfo.background#001040ff
editorInfo.border#001b6aff
editorInfo.foreground#e2e2e2ff
editorInlayHint.background#001040ff
editorInlayHint.foreground#e2e2e2ff
editorLightBulb.foreground#ffffffff
editorLightBulbAutoFix.foreground#7f7f7fff
editorLineNumber.activeForeground#f4f4f4ff
editorLineNumber.foreground#e2e2e2ff
editorLink.activeForeground#f4f4f4ff
editorMarkerNavigation.background#001040ff
editorMarkerNavigationError.background#001040ff
editorMarkerNavigationError.headerBackground#001040ff
editorMarkerNavigationInfo.background#001040ff
editorMarkerNavigationInfo.headerBackground#001040ff
editorMarkerNavigationWarning.background#001040ff
editorMarkerNavigationWarning.headerBackground#001040ff
editorOverviewRuler.addedForeground#f4f4f4ff
editorOverviewRuler.background#001040ff
editorOverviewRuler.border#001b6aff
editorOverviewRuler.bracketMatchForeground#e2e2e2ff
editorOverviewRuler.commonContentForeground#e2e2e2ff
editorOverviewRuler.currentContentForeground#e2e2e2ff
editorOverviewRuler.deletedForeground#f4f4f4ff
editorOverviewRuler.errorForeground#e2e2e2ff
editorOverviewRuler.findMatchForeground#e2e2e2ff
editorOverviewRuler.incomingContentForeground#e2e2e2ff
editorOverviewRuler.infoForeground#e2e2e2ff
editorOverviewRuler.modifiedForeground#f4f4f4ff
editorOverviewRuler.rangeHighlightForeground#f4f4f4ff
editorOverviewRuler.selectionHighlightForeground#fcfcfcff
editorOverviewRuler.warningForeground#e2e2e2ff
editorOverviewRuler.wordHighlightForeground#f4f4f4ff
editorOverviewRuler.wordHighlightStrongForeground#f4f4f4ff
editorPane.background#001040ff
editorRuler.foreground#e2e2e2ff
editorSuggestWidget.background#001b6aff
editorSuggestWidget.border#001e78ff
editorSuggestWidget.focusHighlightForeground#ffffffff
editorSuggestWidget.foreground#f4f4f4ff
editorSuggestWidget.highlightForeground#fcfcfcff
editorSuggestWidget.selectedBackground#001e78ff
editorSuggestWidget.selectedForeground#fcfcfcff
editorSuggestWidget.selectedIconForeground#fcfcfcff
editorUnnecessaryCode.border#001b6a99
editorUnnecessaryCode.opacity#00104099
editorWarning.background#001040ff
editorWarning.border#001b6aff
editorWarning.foreground#e2e2e2ff
editorWhitespace.foreground#001860ff
editorWidget.background#001b6aff
editorWidget.border#001e78ff
editorWidget.foreground#f4f4f4ff
editorWidget.resizeBorder#001e78ff
errorForeground#efefefff
errorLens.errorBackground#102040ff
errorLens.errorBackgroundLight#102040ff
errorLens.errorForeground#efefefff
errorLens.errorForegroundLight#efefefff
errorLens.errorMessageBackground#102040ff
errorLens.hintBackground#102040ff
errorLens.hintBackgroundLight#102040ff
errorLens.hintForeground#efefefff
errorLens.hintForegroundLight#efefefff
errorLens.hintMessageBackground#102040ff
errorLens.infoBackground#102040ff
errorLens.infoBackgroundLight#102040ff
errorLens.infoForeground#efefefff
errorLens.infoForegroundLight#efefefff
errorLens.infoMessageBackground#102040ff
errorLens.statusBarErrorForeground#efefefff
errorLens.statusBarHintForeground#efefefff
errorLens.statusBarInfoForeground#efefefff
errorLens.statusBarWarningForeground#efefefff
errorLens.warningBackground#102040ff
errorLens.warningBackgroundLight#102040ff
errorLens.warningForeground#efefefff
errorLens.warningForegroundLight#efefefff
errorLens.warningMessageBackground#102040ff
extensionBadge.remoteBackground#1b356aff
extensionBadge.remoteForeground#ffffffff
extensionButton.prominentBackground#1b356aff
extensionButton.prominentForeground#ffffffff
extensionButton.prominentHoverBackground#1e3c78ff
extensionIcon.starForeground#ffffffff
focusBorder#1e3c78ff
foreground#efefefff
gitlens.closedPullRequestIconColor#1b356aff
gitlens.decorations.addedForegroundColor#ffffffff
gitlens.decorations.branchAheadForegroundColor#efefefff
gitlens.decorations.branchBehindForegroundColor#efefefff
gitlens.decorations.branchDivergedForegroundColor#efefefff
gitlens.decorations.branchMissingUpstreamForegroundColor#efefefff
gitlens.decorations.branchUnpublishedForegroundColor#efefefff
gitlens.decorations.branchUpToDateForegroundColor#efefefff
gitlens.decorations.copiedForegroundColor#efefefff
gitlens.decorations.deletedForegroundColor#ffffffff
gitlens.decorations.ignoredForegroundColor#efefefff
gitlens.decorations.modifiedForegroundColor#ffffffff
gitlens.decorations.renamedForegroundColor#efefefff
gitlens.decorations.untrackedForegroundColor#efefefff
gitlens.gutterBackgroundColor#102040ff
gitlens.gutterForegroundColor#efefefff
gitlens.gutterUncommittedForegroundColor#efefefff
gitlens.lineHighlightBackgroundColor#1b356aff
gitlens.lineHighlightOverviewRulerColor#1b356aff
gitlens.mergedPullRequestIconColor#1b356aff
gitlens.openPullRequestIconColor#1b356aff
gitlens.trailingLineBackgroundColor#102040ff
gitlens.trailingLineForegroundColor#efefefff
gitlens.unpublishedCommitIconColor#1b356aff
gitlens.unpulledChangesIconColor#1b356aff
gitlens.unpushlishedChangesIconColor#1b356aff
icon.foreground#ffffffff
inlineTitleBar.background#102040ff
input.background#102040ff
input.border#1b356aff
input.foreground#efefefff
input.placeholderForeground#efefefff
inputOption.activeBackground#1b356aff
inputOption.activeBorder#1e3c78ff
inputOption.activeForeground#ffffffff
inputValidation.errorBackground#102040ff
inputValidation.errorBorder#1b356aff
inputValidation.errorForeground#efefefff
inputValidation.infoBackground#102040ff
inputValidation.infoBorder#1b356aff
inputValidation.infoForeground#efefefff
inputValidation.warningBackground#102040ff
inputValidation.warningBorder#1b356aff
inputValidation.warningForeground#efefefff
interactive.activeCodeBorder#1e3c78ff
interactive.inactiveCodeBorder#183162ff
issues.closed#102040ff
issues.newIssueDecoration#102040ff
issues.open#102040ff
keybindingLabel.background#102040ff
keybindingLabel.border#1b356aff
keybindingLabel.bottomBorder#1b356aff
keybindingLabel.foreground#efefefff
lintlens.annotationColor#102040ff
list.activeSelectionBackground#325078ff
list.activeSelectionForeground#ffffffff
list.activeSelectionIconForeground#ffffffff
list.deemphasizedForeground#fcfcfcff
list.dropBackground#1b2b40ff
list.errorForeground#fcfcfcff
list.filterMatchBackground#1b2b40ff
list.filterMatchBorder#2c476aff
list.focusBackground#2c476aff
list.focusForeground#ffffffff
list.focusHighlightForeground#ffffffff
list.focusOutline#325078ff
list.highlightForeground#ffffffff
list.hoverBackground#2c476aff
list.hoverForeground#ffffffff
list.inactiveFocusBackground#2c476aff
list.inactiveFocusOutline#325078ff
list.inactiveSelectionBackground#2c476aff
list.inactiveSelectionForeground#ffffffff
list.inactiveSelectionIconForeground#ffffffff
list.invalidItemForeground#fcfcfcff
list.warningForeground#fcfcfcff
listFilterWidget.background#2c476aff
listFilterWidget.noMatchesOutline#325078ff
listFilterWidget.outline#325078ff
menu.background#102040ff
menu.border#1b356aff
menu.foreground#efefefff
menu.selectionBackground#1b356aff
menu.selectionBorder#1e3c78ff
menu.selectionForeground#ffffffff
menu.separatorBackground#102040ff
menubar.selectionBackground#1b356aff
menubar.selectionBorder#1e3c78ff
menubar.selectionForeground#ffffffff
merge.border#1b356aff
merge.commonContentBackground#102040ff
merge.commonHeaderBackground#102040ff
merge.currentContentBackground#102040ff
merge.currentHeaderBackground#102040ff
merge.incomingContentBackground#102040ff
merge.incomingHeaderBackground#102040ff
minimap.background#001040ff
minimap.errorHighlight#001b6aff
minimap.findMatchHighlight#001b6aff
minimap.selectionHighlight#001e78ff
minimap.warningHighlight#001b6aff
minimapGutter.addedBackground#001b6aff
minimapGutter.deletedBackground#001b6aff
minimapGutter.modifiedBackground#001b6aff
minimapSlider.activeBackground#001e7899
minimapSlider.background#001b6a99
minimapSlider.hoverBackground#001e7899
notebook.cellBorderColor#1b356aff
notebook.cellEditorBackground#102040ff
notebook.cellHoverBackground#1b356aff
notebook.cellInsertionIndicator#102040ff
notebook.cellStatusBarItemHoverBackground#1b356aff
notebook.cellToolbarSeparator#102040ff
notebook.focusedCellBackground#1b356aff
notebook.focusedCellBorder#1e3c78ff
notebook.focusedEditorBorder#1e3c78ff
notebook.inactiveFocusedCellBorder#1b356aff
notebook.inactiveSelectedCellBorder#1b356aff
notebook.outputContainerBackgroundColor#102040ff
notebook.selectedCellBackground#1b356aff
notebook.selectedCellBorder#1e3c78ff
notebook.symbolHighlightBackground#1e3c78ff
notebookScrollbarSlider.activeBackground#1e3c7899
notebookScrollbarSlider.background#1b356a99
notebookScrollbarSlider.hoverBackground#1e3c7899
notebookStatusErrorIcon.foreground#ffffffff
notebookStatusRunningIcon.foreground#ffffffff
notebookStatusSuccessIcon.foreground#ffffffff
notificationCenter.border#1b356aff
notificationCenterHeader.background#102040ff
notificationCenterHeader.foreground#efefefff
notificationLink.foreground#efefefff
notifications.background#102040ff
notifications.border#1b356aff
notifications.foreground#efefefff
notificationsErrorIcon.foreground#ffffffff
notificationsInfoIcon.foreground#ffffffff
notificationsWarningIcon.foreground#ffffffff
notificationToast.border#1b356aff
panel.background#152540ff
panel.border#233e6aff
panel.dropBorder#233e6aff
panelInput.border#233e6aff
panelSection.border#233e6aff
panelSection.dropBackground#152540ff
panelSectionHeader.background#152540ff
panelSectionHeader.border#233e6aff
panelSectionHeader.foreground#f5f5f5ff
panelTitle.activeBorder#284678ff
panelTitle.activeForeground#ffffffff
panelTitle.inactiveForeground#e3e3e3ff
peekView.border#1e3c78ff
peekViewEditor.background#1b356aff
peekViewEditor.matchHighlightBackground#1e3c78ff
peekViewEditor.matchHighlightBorder#1f3f7dff
peekViewEditorGutter.background#1b356aff
peekViewResult.background#1b356aff
peekViewResult.fileForeground#ffffffff
peekViewResult.lineForeground#ffffffff
peekViewResult.matchHighlightBackground#1e3c78ff
peekViewResult.selectionBackground#1e3c78ff
peekViewResult.selectionForeground#ffffffff
peekViewTitle.background#1b356aff
peekViewTitleDescription.foreground#ffffffff
peekViewTitleLabel.foreground#ffffffff
pickerGroup.border#1e3c78ff
pickerGroup.foreground#ffffffff
ports.iconRunningProcessForeground#ffffffff
problemsErrorIcon.foreground#ffffffff
problemsInfoIcon.foreground#ffffffff
problemsWarningIcon.foreground#ffffffff
progressBar.background#102040ff
quickInput.background#102040ff
quickInput.foreground#efefefff
quickInputList.focusBackground#2c476aff
quickInputList.focusForeground#ffffffff
quickInputList.focusIconForeground#ffffffff
quickInputTitle.background#102040ff
sash.hoverBorder#1e3c78ff
scm.providerBorder#1b356aff
scrollbar.shadow#1b356aff
scrollbarSlider.activeBackground#1e3c7899
scrollbarSlider.background#1b356a99
scrollbarSlider.hoverBackground#1e3c7899
searchEditor.findMatchBackground#102040ff
searchEditor.findMatchBorder#1b356aff
searchEditor.textInputBorder#1b356aff
selection.background#1b356aff
settings.checkboxBackground#1b356aff
settings.checkboxBorder#1e3c78ff
settings.checkboxForeground#ffffffff
settings.dropdownBackground#102040ff
settings.dropdownBorder#1b356aff
settings.dropdownForeground#efefefff
settings.dropdownListBorder#2c476aff
settings.focusedRowBackground#1b356aff
settings.focusedRowBorder#1e3c78ff
settings.headerForeground#efefefff
settings.modifiedItemIndicator#1b356aff
settings.numberInputBackground#102040ff
settings.numberInputBorder#1b356aff
settings.numberInputForeground#efefefff
settings.rowHoverBackground#1b356aff
settings.textInputBackground#102040ff
settings.textInputBorder#1b356aff
settings.textInputForeground#efefefff
sideBar.background#1b2b40ff
sideBar.border#2c476aff
sideBar.dropBackground#1b2b40ff
sideBar.foreground#fcfcfcff
sideBarSectionHeader.background#1b2b40ff
sideBarSectionHeader.border#2c476aff
sideBarSectionHeader.foreground#fcfcfcff
sideBarTitle.foreground#fcfcfcff
statusBar.background#102040ff
statusBar.border#1b356aff
statusBar.debuggingBackground#102040ff
statusBar.debuggingBorder#1b356aff
statusBar.debuggingForeground#efefefff
statusBar.foreground#efefefff
statusBar.noFolderBackground#102040ff
statusBar.noFolderBorder#1b356aff
statusBar.noFolderForeground#efefefff
statusBarItem.activeBackground#1b356aff
statusBarItem.errorBackground#102040ff
statusBarItem.errorForeground#efefefff
statusBarItem.hoverBackground#1b356aff
statusBarItem.prominentBackground#102040ff
statusBarItem.prominentForeground#efefefff
statusBarItem.prominentHoverBackground#1b356aff
statusBarItem.remoteBackground#102040ff
statusBarItem.remoteForeground#efefefff
statusBarItem.warningBackground#102040ff
statusBarItem.warningForeground#efefefff
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#122c6aff
tab.activeBorder#143278ff
tab.activeBorderTop#143278ff
tab.activeForeground#ffffffff
tab.activeModifiedBorder#15347dff
tab.border#122c6aff
tab.hoverBackground#122c6aff
tab.hoverBorder#143278ff
tab.hoverForeground#ffffffff
tab.inactiveBackground#0b1b40ff
tab.inactiveForeground#eaeaeaff
tab.inactiveModifiedBorder#122c6aff
tab.lastPinnedBorder#122c6aff
tab.unfocusedActiveBackground#122c6aff
tab.unfocusedActiveBorder#143278ff
tab.unfocusedActiveBorderTop#143278ff
tab.unfocusedActiveForeground#ffffffff
tab.unfocusedActiveModifiedBorder#15347dff
tab.unfocusedHoverBackground#122c6aff
tab.unfocusedHoverBorder#143278ff
tab.unfocusedHoverForeground#ffffffff
tab.unfocusedInactiveBackground#061026ff
tab.unfocusedInactiveForeground#dededeff
tab.unfocusedInactiveModifiedBorder#122c6aff
testing.iconErrored#1b356aff
testing.iconFailed#1b356aff
testing.iconPassed#1b356aff
testing.iconQueued#1b356aff
testing.iconSkipped#1b356aff
testing.iconUnset#1b356aff
testing.message.error.decorationForeground#efefefff
testing.message.error.lineBackground#102040ff
testing.message.info.decorationForeground#efefefff
testing.message.info.lineBackground#102040ff
testing.peekBorder#1b356aff
testing.peekHeaderBackground#102040ff
testing.runAction#102040ff
textBlockQuote.background#102040ff
textBlockQuote.border#1b356aff
textCodeBlock.background#102040ff
textLink.activeForeground#ffffffff
textLink.foreground#efefefff
textPreformat.foreground#efefefff
textSeparator.foreground#efefefff
titleBar.activeBackground#1b356aff
titleBar.activeForeground#ffffffff
titleBar.border#1b356aff
titleBar.inactiveBackground#0a1326ff
titleBar.inactiveForeground#e0e0e0ff
toolbar.activeBackground#1b356aff
toolbar.hoverBackground#1b356aff
toolbar.hoverOutline#1e3c78ff
tree.indentGuidesStroke#325078ff
tree.tableColumnsBorder#2c476aff
walkThrough.embeddedEditorBackground#102040ff
welcomePage.background#102040ff
welcomePage.buttonBackground#1b356aff
welcomePage.buttonHoverBackground#1e3c78ff
welcomePage.progress.background#102040ff
welcomePage.progress.foreground#efefefff
welcomePage.tileBackground#102040ff
welcomePage.tileHoverBackground#1b356aff
welcomePage.tileShadow.#1b356aff
widget.shadow#1e3c78ff
window.activeBorder#1e3c78ff
window.inactiveBorder#183162ff
workspace.hiddenColor#10204099

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	#fafafaff	italic
variable.other.constant , variable.other.dollar , variable.other.readwrite	#ffffffff	bold
entity	#ffffffff	bold
support	#ffffffff	bold
variable	#ffffffff	bold
keyword.operator	#f5f5f5ff
constant	#e7e7e7ff
string	#e7e7e7ff
keyword	#0040ffff
meta	#0040ffff
punctuation	#0040ffff
storage	#0040ffff
comment	#002080ff
source	#001860ff

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