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 3

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#af75eaff
activityBar.activeBorder#ba7cf8cc
activityBar.activeFocusBorder#bd7efdcc
activityBar.background#8f60bfff
activityBar.border#af75eacc
activityBar.dropBorder#af75eacc
activityBar.foreground#000000ff
activityBar.inactiveForeground#ffffffff
activityBarBadge.background#af75eacc
activityBarBadge.foreground#000000ff
badge.background#753aeacc
badge.foreground#ffffffff
banner.background#6030bfff
banner.foreground#ffffffff
banner.iconForeground#ffffffff
bookmarks.lineBackground#6030bfff
bookmarks.lineBorder#753aeacc
bookmarks.overviewRuler#6030bfff
breadcrumb.activeSelectionForeground#ffffffff
breadcrumb.background#4010bfff
breadcrumb.focusForeground#ffffffff
breadcrumb.foreground#ffffffff
breadcrumbPicker.background#4e13eacc
button.background#753aeacc
button.border#7c3ef899
button.foreground#ffffffff
button.hoverBackground#7c3ef8cc
button.secondaryBackground#753aeacc
button.secondaryForeground#ffffffff
button.secondaryHoverBackground#7c3ef8cc
charts.blue#6030bfff
charts.foreground#ffffffff
charts.green#6030bfff
charts.lines#6030bfff
charts.orange#6030bfff
charts.purple#6030bfff
charts.red#6030bfff
charts.yellow#6030bfff
checkbox.background#753aeacc
checkbox.border#7c3ef899
checkbox.foreground#ffffffff
debugConsole.errorForeground#ffffffff
debugConsole.infoForeground#ffffffff
debugConsole.sourceForeground#ffffffff
debugConsole.warningForeground#ffffffff
debugConsoleInputIcon.foreground#ffffffff
debugExceptionWidget.background#753aeacc
debugExceptionWidget.border#7c3ef899
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#6030bfff
debugTokenExpression.error#6030bfff
debugTokenExpression.name#6030bfff
debugTokenExpression.number#6030bfff
debugTokenExpression.string#6030bfff
debugTokenExpression.value#6030bfff
debugToolBar.background#6030bfff
debugToolBar.border#753aeacc
debugView.exceptionLabelBackground#753aeacc
debugView.exceptionLabelForeground#ffffffff
debugView.stateLabelBackground#753aeacc
debugView.stateLabelForeground#ffffffff
debugView.valueChangedHighlight#7c3ef8cc
descriptionForeground#ffffffff
diffEditor.border#753aeacc
diffEditor.diagonalFill#6030bfff
diffEditor.insertedTextBackground#6030bfff
diffEditor.insertedTextBorder#753aeacc
diffEditor.removedTextBackground#6030bfff
diffEditor.removedTextBorder#753aeacc
dropdown.background#6030bfff
dropdown.border#753aeacc
dropdown.foreground#ffffffff
dropdown.listBackground#8050bfff
editor.background#3000bfff
editor.findMatchBackground#3000bfff
editor.findMatchBorder#3a00eacc
editor.findMatchHighlightBackground#3a00eaff
editor.findMatchHighlightBorder#3e00f8cc
editor.findRangeHighlightBackground#3a00eaff
editor.findRangeHighlightBorder#3e00f8cc
editor.focusedStackFrameHighlightBackground#3e00f8ff
editor.foldBackground#3000bfff
editor.foreground#ffffffff
editor.hoverHighlightBackground#3e00f8ff
editor.inactiveSelectionBackground#3000bfff
editor.inlineValuesBackground#3000bfff
editor.inlineValuesForeground#ffffffff
editor.lineHighlightBackground#3a00eaff
editor.linkedEditingBackground#3000bfff
editor.rangeHighlightBackground#3a00eaff
editor.rangeHighlightBorder#3e00f8cc
editor.selectionBackground#3a00eaff
editor.selectionForeground#ffffffff
editor.selectionHighlightBackground#3e00f8ff
editor.selectionHighlightBorder#3f00fdcc
editor.snippetFinalTabstopHighlightBackground#3a00eaff
editor.snippetFinalTabstopHighlightBorder#3e00f8cc
editor.snippetTabstopHighlightBackground#3a00eaff
editor.snippetTabstopHighlightBorder#3e00f8cc
editor.stackFrameHighlightBackground#3a00eaff
editor.symbolHighlightBackground#3e00f8cc
editor.symbolHighlightBorder#3f00fd99
editor.wordHighlightBackground#3a00eaff
editor.wordHighlightBorder#3e00f8cc
editor.wordHighlightStrongBackground#3a00eaff
editor.wordHighlightStrongBorder#3e00f8cc
editorBracketHighlight.foreground1#4000ffff
editorBracketHighlight.foreground2#4000ffff
editorBracketHighlight.foreground3#4000ffff
editorBracketHighlight.foreground4#4000ffff
editorBracketHighlight.foreground5#4000ffff
editorBracketHighlight.foreground6#4000ffff
editorBracketHighlight.unexpectedBracket.foreground#7f7f7fff
editorBracketMatch.background#3000bfff
editorBracketMatch.border#3a00eacc
editorCodeLens.foreground#ffffffff
editorCursor.background#3000bfff
editorCursor.foreground#ffffffff
editorError.background#3000bfff
editorError.border#3a00eacc
editorError.foreground#ffffffff
editorGhostText.border#3a00eacc
editorGhostText.foreground#ffffffff
editorGroup.border#4e13eacc
editorGroup.dropBackground#4010bfff
editorGroup.emptyBackground#4010bfff
editorGroup.focusedEmptyBorder#5315f8cc
editorGroupHeader.border#4e13eacc
editorGroupHeader.noTabsBackground#4010bfff
editorGroupHeader.tabsBackground#4010bfff
editorGroupHeader.tabsBorder#4e13eacc
editorGutter.addedBackground#4e13eaff
editorGutter.background#4010bfff
editorGutter.commentRangeForeground#ffffffff
editorGutter.deletedBackground#4e13eaff
editorGutter.foldingControlForeground#ffffffff
editorGutter.modifiedBackground#4e13eaff
editorHint.border#3a00eacc
editorHint.foreground#ffffffff
editorHoverWidget.background#3e00f8cc
editorHoverWidget.border#3f00fd99
editorHoverWidget.foreground#ffffffff
editorHoverWidget.statusBarBackground#7c3ef8cc
editorIndentGuide.activeBackground#4000ffff
editorIndentGuide.background#3800dfff
editorInfo.background#3000bfff
editorInfo.border#3a00eacc
editorInfo.foreground#ffffffff
editorInlayHint.background#3000bfff
editorInlayHint.foreground#ffffffff
editorLightBulb.foreground#ffffffff
editorLightBulbAutoFix.foreground#7f7f7fff
editorLineNumber.activeForeground#ffffffff
editorLineNumber.foreground#ffffffff
editorLink.activeForeground#ffffffff
editorMarkerNavigation.background#3000bfff
editorMarkerNavigationError.background#3000bfff
editorMarkerNavigationError.headerBackground#3000bfff
editorMarkerNavigationInfo.background#3000bfff
editorMarkerNavigationInfo.headerBackground#3000bfff
editorMarkerNavigationWarning.background#3000bfff
editorMarkerNavigationWarning.headerBackground#3000bfff
editorOverviewRuler.addedForeground#ffffffff
editorOverviewRuler.background#3000bfff
editorOverviewRuler.border#3a00eacc
editorOverviewRuler.bracketMatchForeground#ffffffff
editorOverviewRuler.commonContentForeground#ffffffff
editorOverviewRuler.currentContentForeground#ffffffff
editorOverviewRuler.deletedForeground#ffffffff
editorOverviewRuler.errorForeground#ffffffff
editorOverviewRuler.findMatchForeground#ffffffff
editorOverviewRuler.incomingContentForeground#ffffffff
editorOverviewRuler.infoForeground#ffffffff
editorOverviewRuler.modifiedForeground#ffffffff
editorOverviewRuler.rangeHighlightForeground#ffffffff
editorOverviewRuler.selectionHighlightForeground#ffffffff
editorOverviewRuler.warningForeground#ffffffff
editorOverviewRuler.wordHighlightForeground#ffffffff
editorOverviewRuler.wordHighlightStrongForeground#ffffffff
editorPane.background#3000bfff
editorRuler.foreground#ffffffff
editorSuggestWidget.background#3a00eacc
editorSuggestWidget.border#3e00f899
editorSuggestWidget.focusHighlightForeground#ffffffff
editorSuggestWidget.foreground#ffffffff
editorSuggestWidget.highlightForeground#ffffffff
editorSuggestWidget.selectedBackground#3e00f8cc
editorSuggestWidget.selectedForeground#ffffffff
editorSuggestWidget.selectedIconForeground#ffffffff
editorUnnecessaryCode.border#3a00ea66
editorUnnecessaryCode.opacity#3000bf99
editorWarning.background#3000bfff
editorWarning.border#3a00eacc
editorWarning.foreground#ffffffff
editorWhitespace.foreground#3200caff
editorWidget.background#3a00eacc
editorWidget.border#3e00f899
editorWidget.foreground#ffffffff
editorWidget.resizeBorder#3e00f899
errorForeground#ffffffff
errorLens.errorBackground#6030bfff
errorLens.errorBackgroundLight#6030bfff
errorLens.errorForeground#ffffffff
errorLens.errorForegroundLight#ffffffff
errorLens.errorMessageBackground#6030bfff
errorLens.hintBackground#6030bfff
errorLens.hintBackgroundLight#6030bfff
errorLens.hintForeground#ffffffff
errorLens.hintForegroundLight#ffffffff
errorLens.hintMessageBackground#6030bfff
errorLens.infoBackground#6030bfff
errorLens.infoBackgroundLight#6030bfff
errorLens.infoForeground#ffffffff
errorLens.infoForegroundLight#ffffffff
errorLens.infoMessageBackground#6030bfff
errorLens.statusBarErrorForeground#ffffffff
errorLens.statusBarHintForeground#ffffffff
errorLens.statusBarInfoForeground#ffffffff
errorLens.statusBarWarningForeground#ffffffff
errorLens.warningBackground#6030bfff
errorLens.warningBackgroundLight#6030bfff
errorLens.warningForeground#ffffffff
errorLens.warningForegroundLight#ffffffff
errorLens.warningMessageBackground#6030bfff
extensionBadge.remoteBackground#753aeacc
extensionBadge.remoteForeground#ffffffff
extensionButton.prominentBackground#753aeacc
extensionButton.prominentForeground#ffffffff
extensionButton.prominentHoverBackground#7c3ef8cc
extensionIcon.starForeground#ffffffff
focusBorder#7c3ef8cc
foreground#ffffffff
gitlens.closedPullRequestIconColor#753aeacc
gitlens.decorations.addedForegroundColor#ffffffff
gitlens.decorations.branchAheadForegroundColor#ffffffff
gitlens.decorations.branchBehindForegroundColor#ffffffff
gitlens.decorations.branchDivergedForegroundColor#ffffffff
gitlens.decorations.branchMissingUpstreamForegroundColor#ffffffff
gitlens.decorations.branchUnpublishedForegroundColor#ffffffff
gitlens.decorations.branchUpToDateForegroundColor#ffffffff
gitlens.decorations.copiedForegroundColor#ffffffff
gitlens.decorations.deletedForegroundColor#ffffffff
gitlens.decorations.ignoredForegroundColor#ffffffff
gitlens.decorations.modifiedForegroundColor#ffffffff
gitlens.decorations.renamedForegroundColor#ffffffff
gitlens.decorations.untrackedForegroundColor#ffffffff
gitlens.gutterBackgroundColor#6030bfff
gitlens.gutterForegroundColor#ffffffff
gitlens.gutterUncommittedForegroundColor#ffffffff
gitlens.lineHighlightBackgroundColor#753aeaff
gitlens.lineHighlightOverviewRulerColor#753aeaff
gitlens.mergedPullRequestIconColor#753aeacc
gitlens.openPullRequestIconColor#753aeacc
gitlens.trailingLineBackgroundColor#6030bfff
gitlens.trailingLineForegroundColor#ffffffff
gitlens.unpublishedCommitIconColor#753aeacc
gitlens.unpulledChangesIconColor#753aeacc
gitlens.unpushlishedChangesIconColor#753aeacc
icon.foreground#ffffffff
inlineTitleBar.background#6030bfff
input.background#6030bfff
input.border#753aeacc
input.foreground#ffffffff
input.placeholderForeground#ffffffff
inputOption.activeBackground#753aeaff
inputOption.activeBorder#7c3ef8cc
inputOption.activeForeground#ffffffff
inputValidation.errorBackground#6030bfff
inputValidation.errorBorder#753aeacc
inputValidation.errorForeground#ffffffff
inputValidation.infoBackground#6030bfff
inputValidation.infoBorder#753aeacc
inputValidation.infoForeground#ffffffff
inputValidation.warningBackground#6030bfff
inputValidation.warningBorder#753aeacc
inputValidation.warningForeground#ffffffff
interactive.activeCodeBorder#7c3ef8cc
interactive.inactiveCodeBorder#7138e1cc
issues.closed#6030bfff
issues.newIssueDecoration#6030bfff
issues.open#6030bfff
keybindingLabel.background#6030bfff
keybindingLabel.border#753aeacc
keybindingLabel.bottomBorder#753aeacc
keybindingLabel.foreground#ffffffff
lintlens.annotationColor#6030bfff
list.activeSelectionBackground#a567f8ff
list.activeSelectionForeground#000000ff
list.activeSelectionIconForeground#000000ff
list.deemphasizedForeground#ffffffff
list.dropBackground#8050bfff
list.errorForeground#ffffffff
list.filterMatchBackground#8050bfff
list.filterMatchBorder#9c61eacc
list.focusBackground#9c61eaff
list.focusForeground#000000ff
list.focusHighlightForeground#000000ff
list.focusOutline#a567f8cc
list.highlightForeground#000000ff
list.hoverBackground#9c61eaff
list.hoverForeground#000000ff
list.inactiveFocusBackground#9c61eaff
list.inactiveFocusOutline#a567f8cc
list.inactiveSelectionBackground#9c61eaff
list.inactiveSelectionForeground#000000ff
list.inactiveSelectionIconForeground#ffffffff
list.invalidItemForeground#ffffffff
list.warningForeground#ffffffff
listFilterWidget.background#9c61eacc
listFilterWidget.noMatchesOutline#a567f899
listFilterWidget.outline#a567f899
menu.background#6030bfff
menu.border#753aeacc
menu.foreground#ffffffff
menu.selectionBackground#753aeaff
menu.selectionBorder#7c3ef8cc
menu.selectionForeground#ffffffff
menu.separatorBackground#6030bfff
menubar.selectionBackground#753aeaff
menubar.selectionBorder#7c3ef8cc
menubar.selectionForeground#ffffffff
merge.border#753aeacc
merge.commonContentBackground#6030bfff
merge.commonHeaderBackground#6030bfff
merge.currentContentBackground#6030bfff
merge.currentHeaderBackground#6030bfff
merge.incomingContentBackground#6030bfff
merge.incomingHeaderBackground#6030bfff
minimap.background#3000bfff
minimap.errorHighlight#3a00eaff
minimap.findMatchHighlight#3a00eaff
minimap.selectionHighlight#3e00f8ff
minimap.warningHighlight#3a00eaff
minimapGutter.addedBackground#3a00eaff
minimapGutter.deletedBackground#3a00eaff
minimapGutter.modifiedBackground#3a00eaff
minimapSlider.activeBackground#3e00f87a
minimapSlider.background#3a00ea7a
minimapSlider.hoverBackground#3e00f87a
notebook.cellBorderColor#753aeacc
notebook.cellEditorBackground#6030bfff
notebook.cellHoverBackground#753aeaff
notebook.cellInsertionIndicator#6030bfff
notebook.cellStatusBarItemHoverBackground#753aeaff
notebook.cellToolbarSeparator#6030bfff
notebook.focusedCellBackground#753aeaff
notebook.focusedCellBorder#7c3ef8cc
notebook.focusedEditorBorder#7c3ef8cc
notebook.inactiveFocusedCellBorder#753aeacc
notebook.inactiveSelectedCellBorder#753aeacc
notebook.outputContainerBackgroundColor#6030bfff
notebook.selectedCellBackground#753aeaff
notebook.selectedCellBorder#7c3ef8cc
notebook.symbolHighlightBackground#7c3ef8cc
notebookScrollbarSlider.activeBackground#7c3ef87a
notebookScrollbarSlider.background#753aea7a
notebookScrollbarSlider.hoverBackground#7c3ef87a
notebookStatusErrorIcon.foreground#ffffffff
notebookStatusRunningIcon.foreground#ffffffff
notebookStatusSuccessIcon.foreground#ffffffff
notificationCenter.border#753aeacc
notificationCenterHeader.background#6030bfff
notificationCenterHeader.foreground#ffffffff
notificationLink.foreground#ffffffff
notifications.background#6030bfff
notifications.border#753aeacc
notifications.foreground#ffffffff
notificationsErrorIcon.foreground#ffffffff
notificationsInfoIcon.foreground#ffffffff
notificationsWarningIcon.foreground#ffffffff
notificationToast.border#753aeacc
panel.background#7040bfff
panel.border#884eeacc
panel.dropBorder#884eeacc
panelInput.border#884eeacc
panelSection.border#884eeacc
panelSection.dropBackground#7040bfff
panelSectionHeader.background#7040bfff
panelSectionHeader.border#884eeacc
panelSectionHeader.foreground#ffffffff
panelTitle.activeBorder#9153f8cc
panelTitle.activeForeground#ffffffff
panelTitle.inactiveForeground#ffffffff
peekView.border#7c3ef899
peekViewEditor.background#753aeacc
peekViewEditor.matchHighlightBackground#7c3ef8cc
peekViewEditor.matchHighlightBorder#7e3ffd99
peekViewEditorGutter.background#753aeacc
peekViewResult.background#753aeacc
peekViewResult.fileForeground#ffffffff
peekViewResult.lineForeground#ffffffff
peekViewResult.matchHighlightBackground#7c3ef8cc
peekViewResult.selectionBackground#7c3ef8cc
peekViewResult.selectionForeground#ffffffff
peekViewTitle.background#753aeacc
peekViewTitleDescription.foreground#ffffffff
peekViewTitleLabel.foreground#ffffffff
pickerGroup.border#7c3ef899
pickerGroup.foreground#ffffffff
ports.iconRunningProcessForeground#ffffffff
problemsErrorIcon.foreground#ffffffff
problemsInfoIcon.foreground#ffffffff
problemsWarningIcon.foreground#ffffffff
progressBar.background#6030bfff
quickInput.background#6030bfff
quickInput.foreground#ffffffff
quickInputList.focusBackground#9c61eaff
quickInputList.focusForeground#000000ff
quickInputList.focusIconForeground#000000ff
quickInputTitle.background#6030bfff
sash.hoverBorder#7c3ef8cc
scm.providerBorder#753aeacc
scrollbar.shadow#753aeacc
scrollbarSlider.activeBackground#7c3ef87a
scrollbarSlider.background#753aea7a
scrollbarSlider.hoverBackground#7c3ef87a
searchEditor.findMatchBackground#6030bfff
searchEditor.findMatchBorder#753aeacc
searchEditor.textInputBorder#753aeacc
selection.background#753aeaff
settings.checkboxBackground#753aeacc
settings.checkboxBorder#7c3ef899
settings.checkboxForeground#ffffffff
settings.dropdownBackground#6030bfff
settings.dropdownBorder#753aeacc
settings.dropdownForeground#ffffffff
settings.dropdownListBorder#9c61eacc
settings.focusedRowBackground#753aeaff
settings.focusedRowBorder#7c3ef8cc
settings.headerForeground#ffffffff
settings.modifiedItemIndicator#753aeaff
settings.numberInputBackground#6030bfff
settings.numberInputBorder#753aeacc
settings.numberInputForeground#ffffffff
settings.rowHoverBackground#753aeaff
settings.textInputBackground#6030bfff
settings.textInputBorder#753aeacc
settings.textInputForeground#ffffffff
sideBar.background#8050bfff
sideBar.border#9c61eacc
sideBar.dropBackground#8050bfff
sideBar.foreground#ffffffff
sideBarSectionHeader.background#8050bfff
sideBarSectionHeader.border#9c61eacc
sideBarSectionHeader.foreground#ffffffff
sideBarTitle.foreground#ffffffff
statusBar.background#6030bfff
statusBar.border#753aeacc
statusBar.debuggingBackground#6030bfff
statusBar.debuggingBorder#753aeacc
statusBar.debuggingForeground#ffffffff
statusBar.foreground#ffffffff
statusBar.noFolderBackground#6030bfff
statusBar.noFolderBorder#753aeacc
statusBar.noFolderForeground#ffffffff
statusBarItem.activeBackground#753aeaff
statusBarItem.errorBackground#6030bfff
statusBarItem.errorForeground#ffffffff
statusBarItem.hoverBackground#753aeaff
statusBarItem.prominentBackground#6030bfff
statusBarItem.prominentForeground#ffffffff
statusBarItem.prominentHoverBackground#753aeaff
statusBarItem.remoteBackground#6030bfff
statusBarItem.remoteForeground#ffffffff
statusBarItem.warningBackground#6030bfff
statusBarItem.warningForeground#ffffffff
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#6127eaff
tab.activeBorder#6729f8cc
tab.activeBorderTop#6729f8cc
tab.activeForeground#ffffffff
tab.activeModifiedBorder#692afdcc
tab.border#6127eacc
tab.hoverBackground#6127eaff
tab.hoverBorder#6729f8cc
tab.hoverForeground#ffffffff
tab.inactiveBackground#5020bfff
tab.inactiveForeground#ffffffff
tab.inactiveModifiedBorder#6127eacc
tab.lastPinnedBorder#6127eacc
tab.unfocusedActiveBackground#6127eaff
tab.unfocusedActiveBorder#6729f8cc
tab.unfocusedActiveBorderTop#6729f8cc
tab.unfocusedActiveForeground#ffffffff
tab.unfocusedActiveModifiedBorder#692afdcc
tab.unfocusedHoverBackground#6127eaff
tab.unfocusedHoverBorder#6729f8cc
tab.unfocusedHoverForeground#ffffffff
tab.unfocusedInactiveBackground#451ca6ff
tab.unfocusedInactiveForeground#ffffffff
tab.unfocusedInactiveModifiedBorder#6127eacc
testing.iconErrored#753aeacc
testing.iconFailed#753aeacc
testing.iconPassed#753aeacc
testing.iconQueued#753aeacc
testing.iconSkipped#753aeacc
testing.iconUnset#753aeacc
testing.message.error.decorationForeground#ffffffff
testing.message.error.lineBackground#6030bfff
testing.message.info.decorationForeground#ffffffff
testing.message.info.lineBackground#6030bfff
testing.peekBorder#753aeacc
testing.peekHeaderBackground#6030bfff
testing.runAction#6030bfff
textBlockQuote.background#6030bfff
textBlockQuote.border#753aeacc
textCodeBlock.background#6030bfff
textLink.activeForeground#ffffffff
textLink.foreground#ffffffff
textPreformat.foreground#ffffffff
textSeparator.foreground#ffffffff
titleBar.activeBackground#753aeaff
titleBar.activeForeground#ffffffff
titleBar.border#753aeacc
titleBar.inactiveBackground#5329a6ff
titleBar.inactiveForeground#ffffffff
toolbar.activeBackground#753aeaff
toolbar.hoverBackground#753aeaff
toolbar.hoverOutline#7c3ef8cc
tree.indentGuidesStroke#a567f8ff
tree.tableColumnsBorder#9c61eacc
walkThrough.embeddedEditorBackground#6030bfff
welcomePage.background#6030bfff
welcomePage.buttonBackground#753aeacc
welcomePage.buttonHoverBackground#7c3ef8cc
welcomePage.progress.background#6030bfff
welcomePage.progress.foreground#ffffffff
welcomePage.tileBackground#6030bfff
welcomePage.tileHoverBackground#753aeaff
welcomePage.tileShadow.#753aeacc
widget.shadow#7c3ef899
window.activeBorder#7c3ef8cc
window.inactiveBorder#7138e1cc
workspace.hiddenColor#6030bf99

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	#ffffffff	italic
variable.other.constant , variable.other.dollar , variable.other.readwrite	#ffffffff	bold
entity	#ffffffff	bold
support	#ffffffff	bold
variable	#ffffffff	bold
keyword.operator	#ffffffff
constant	#ffffffff
string	#ffffffff
keyword	#4000ffff
meta	#4000ffff
punctuation	#4000ffff
storage	#4000ffff
comment	#3500d5ff
source	#3200caff

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