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 F 2

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#aa8055ff
activityBar.activeBorder#b88a5ce6
activityBar.activeFocusBorder#bd8e5ee6
activityBar.background#806040ff
activityBar.border#aa8055e6
activityBar.dropBorder#aa8055e6
activityBar.foreground#ffffffff
activityBar.inactiveForeground#ffffffff
activityBarBadge.background#aa8055e6
activityBarBadge.foreground#000000ff
badge.background#aa552be6
badge.foreground#ffffffff
banner.background#804020ff
banner.foreground#ffffffff
banner.iconForeground#ffffffff
bookmarks.lineBackground#804020ff
bookmarks.lineBorder#aa552be6
bookmarks.overviewRuler#804020ff
breadcrumb.activeSelectionForeground#ffffffff
breadcrumb.background#802b0bff
breadcrumb.focusForeground#ffffffff
breadcrumb.foreground#ffffffff
breadcrumbPicker.background#aa390ee6
button.background#aa552be6
button.border#b85c2ecc
button.foreground#ffffffff
button.hoverBackground#b85c2ee6
button.secondaryBackground#aa552be6
button.secondaryForeground#ffffffff
button.secondaryHoverBackground#b85c2ee6
charts.blue#804020ff
charts.foreground#ffffffff
charts.green#804020ff
charts.lines#804020ff
charts.orange#804020ff
charts.purple#804020ff
charts.red#804020ff
charts.yellow#804020ff
checkbox.background#aa552be6
checkbox.border#b85c2ecc
checkbox.foreground#ffffffff
debugConsole.errorForeground#ffffffff
debugConsole.infoForeground#ffffffff
debugConsole.sourceForeground#ffffffff
debugConsole.warningForeground#ffffffff
debugConsoleInputIcon.foreground#ffffffff
debugExceptionWidget.background#aa552be6
debugExceptionWidget.border#b85c2ecc
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#804020ff
debugTokenExpression.error#804020ff
debugTokenExpression.name#804020ff
debugTokenExpression.number#804020ff
debugTokenExpression.string#804020ff
debugTokenExpression.value#804020ff
debugToolBar.background#804020ff
debugToolBar.border#aa552be6
debugView.exceptionLabelBackground#aa552be6
debugView.exceptionLabelForeground#ffffffff
debugView.stateLabelBackground#aa552be6
debugView.stateLabelForeground#ffffffff
debugView.valueChangedHighlight#b85c2ee6
descriptionForeground#ffffffff
diffEditor.border#aa552be6
diffEditor.diagonalFill#804020ff
diffEditor.insertedTextBackground#804020ff
diffEditor.insertedTextBorder#aa552be6
diffEditor.removedTextBackground#804020ff
diffEditor.removedTextBorder#aa552be6
dropdown.background#804020ff
dropdown.border#aa552be6
dropdown.foreground#ffffffff
dropdown.listBackground#805535ff
editor.background#802000ff
editor.findMatchBackground#802000ff
editor.findMatchBorder#aa2b00e6
editor.findMatchHighlightBackground#aa2b00ff
editor.findMatchHighlightBorder#b82e00e6
editor.findRangeHighlightBackground#aa2b00ff
editor.findRangeHighlightBorder#b82e00e6
editor.focusedStackFrameHighlightBackground#b82e00ff
editor.foldBackground#802000ff
editor.foreground#ffffffff
editor.hoverHighlightBackground#b82e00ff
editor.inactiveSelectionBackground#802000ff
editor.inlineValuesBackground#802000ff
editor.inlineValuesForeground#ffffffff
editor.lineHighlightBackground#aa2b00ff
editor.linkedEditingBackground#802000ff
editor.rangeHighlightBackground#aa2b00ff
editor.rangeHighlightBorder#b82e00e6
editor.selectionBackground#aa2b00ff
editor.selectionForeground#ffffffff
editor.selectionHighlightBackground#b82e00ff
editor.selectionHighlightBorder#bd2f00e6
editor.snippetFinalTabstopHighlightBackground#aa2b00ff
editor.snippetFinalTabstopHighlightBorder#b82e00e6
editor.snippetTabstopHighlightBackground#aa2b00ff
editor.snippetTabstopHighlightBorder#b82e00e6
editor.stackFrameHighlightBackground#aa2b00ff
editor.symbolHighlightBackground#b82e00e6
editor.symbolHighlightBorder#bd2f00cc
editor.wordHighlightBackground#aa2b00ff
editor.wordHighlightBorder#b82e00e6
editor.wordHighlightStrongBackground#aa2b00ff
editor.wordHighlightStrongBorder#b82e00e6
editorBracketHighlight.foreground1#ff4000ff
editorBracketHighlight.foreground2#ff4000ff
editorBracketHighlight.foreground3#ff4000ff
editorBracketHighlight.foreground4#ff4000ff
editorBracketHighlight.foreground5#ff4000ff
editorBracketHighlight.foreground6#ff4000ff
editorBracketHighlight.unexpectedBracket.foreground#7f7f7fff
editorBracketMatch.background#802000ff
editorBracketMatch.border#aa2b00e6
editorCodeLens.foreground#ffffffff
editorCursor.background#802000ff
editorCursor.foreground#ffffffff
editorError.background#802000ff
editorError.border#aa2b00e6
editorError.foreground#ffffffff
editorGhostText.border#aa2b00e6
editorGhostText.foreground#ffffffff
editorGroup.border#aa390ee6
editorGroup.dropBackground#802b0bff
editorGroup.emptyBackground#802b0bff
editorGroup.focusedEmptyBorder#b83d0fe6
editorGroupHeader.border#aa390ee6
editorGroupHeader.noTabsBackground#802b0bff
editorGroupHeader.tabsBackground#802b0bff
editorGroupHeader.tabsBorder#aa390ee6
editorGutter.addedBackground#aa390eff
editorGutter.background#802b0bff
editorGutter.commentRangeForeground#ffffffff
editorGutter.deletedBackground#aa390eff
editorGutter.foldingControlForeground#ffffffff
editorGutter.modifiedBackground#aa390eff
editorHint.border#aa2b00e6
editorHint.foreground#ffffffff
editorHoverWidget.background#b82e00e6
editorHoverWidget.border#bd2f00cc
editorHoverWidget.foreground#ffffffff
editorHoverWidget.statusBarBackground#b85c2ee6
editorIndentGuide.activeBackground#ff4000ff
editorIndentGuide.background#bf3000ff
editorInfo.background#802000ff
editorInfo.border#aa2b00e6
editorInfo.foreground#ffffffff
editorInlayHint.background#802000ff
editorInlayHint.foreground#ffffffff
editorLightBulb.foreground#ffffffff
editorLightBulbAutoFix.foreground#7f7f7fff
editorLineNumber.activeForeground#ffffffff
editorLineNumber.foreground#ffffffff
editorLink.activeForeground#ffffffff
editorMarkerNavigation.background#802000ff
editorMarkerNavigationError.background#802000ff
editorMarkerNavigationError.headerBackground#802000ff
editorMarkerNavigationInfo.background#802000ff
editorMarkerNavigationInfo.headerBackground#802000ff
editorMarkerNavigationWarning.background#802000ff
editorMarkerNavigationWarning.headerBackground#802000ff
editorOverviewRuler.addedForeground#ffffffff
editorOverviewRuler.background#802000ff
editorOverviewRuler.border#aa2b00e6
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#802000ff
editorRuler.foreground#ffffffff
editorSuggestWidget.background#aa2b00e6
editorSuggestWidget.border#b82e00cc
editorSuggestWidget.focusHighlightForeground#ffffffff
editorSuggestWidget.foreground#ffffffff
editorSuggestWidget.highlightForeground#ffffffff
editorSuggestWidget.selectedBackground#b82e00e6
editorSuggestWidget.selectedForeground#ffffffff
editorSuggestWidget.selectedIconForeground#ffffffff
editorUnnecessaryCode.border#aa2b0080
editorUnnecessaryCode.opacity#80200099
editorWarning.background#802000ff
editorWarning.border#aa2b00e6
editorWarning.foreground#ffffffff
editorWhitespace.foreground#952500ff
editorWidget.background#aa2b00e6
editorWidget.border#b82e00cc
editorWidget.foreground#ffffffff
editorWidget.resizeBorder#b82e00cc
errorForeground#ffffffff
errorLens.errorBackground#804020ff
errorLens.errorBackgroundLight#804020ff
errorLens.errorForeground#ffffffff
errorLens.errorForegroundLight#ffffffff
errorLens.errorMessageBackground#804020ff
errorLens.hintBackground#804020ff
errorLens.hintBackgroundLight#804020ff
errorLens.hintForeground#ffffffff
errorLens.hintForegroundLight#ffffffff
errorLens.hintMessageBackground#804020ff
errorLens.infoBackground#804020ff
errorLens.infoBackgroundLight#804020ff
errorLens.infoForeground#ffffffff
errorLens.infoForegroundLight#ffffffff
errorLens.infoMessageBackground#804020ff
errorLens.statusBarErrorForeground#ffffffff
errorLens.statusBarHintForeground#ffffffff
errorLens.statusBarInfoForeground#ffffffff
errorLens.statusBarWarningForeground#ffffffff
errorLens.warningBackground#804020ff
errorLens.warningBackgroundLight#804020ff
errorLens.warningForeground#ffffffff
errorLens.warningForegroundLight#ffffffff
errorLens.warningMessageBackground#804020ff
extensionBadge.remoteBackground#aa552be6
extensionBadge.remoteForeground#ffffffff
extensionButton.prominentBackground#aa552be6
extensionButton.prominentForeground#ffffffff
extensionButton.prominentHoverBackground#b85c2ee6
extensionIcon.starForeground#ffffffff
focusBorder#b85c2ee6
foreground#ffffffff
gitlens.closedPullRequestIconColor#aa552be6
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#804020ff
gitlens.gutterForegroundColor#ffffffff
gitlens.gutterUncommittedForegroundColor#ffffffff
gitlens.lineHighlightBackgroundColor#aa552bff
gitlens.lineHighlightOverviewRulerColor#aa552bff
gitlens.mergedPullRequestIconColor#aa552be6
gitlens.openPullRequestIconColor#aa552be6
gitlens.trailingLineBackgroundColor#804020ff
gitlens.trailingLineForegroundColor#ffffffff
gitlens.unpublishedCommitIconColor#aa552be6
gitlens.unpulledChangesIconColor#aa552be6
gitlens.unpushlishedChangesIconColor#aa552be6
icon.foreground#ffffffff
inlineTitleBar.background#804020ff
input.background#804020ff
input.border#aa552be6
input.foreground#ffffffff
input.placeholderForeground#ffffffff
inputOption.activeBackground#aa552bff
inputOption.activeBorder#b85c2ee6
inputOption.activeForeground#ffffffff
inputValidation.errorBackground#804020ff
inputValidation.errorBorder#aa552be6
inputValidation.errorForeground#ffffffff
inputValidation.infoBackground#804020ff
inputValidation.infoBorder#aa552be6
inputValidation.infoForeground#ffffffff
inputValidation.warningBackground#804020ff
inputValidation.warningBorder#aa552be6
inputValidation.warningForeground#ffffffff
interactive.activeCodeBorder#b85c2ee6
interactive.inactiveCodeBorder#a25128e6
issues.closed#804020ff
issues.newIssueDecoration#804020ff
issues.open#804020ff
keybindingLabel.background#804020ff
keybindingLabel.border#aa552be6
keybindingLabel.bottomBorder#aa552be6
keybindingLabel.foreground#ffffffff
lintlens.annotationColor#804020ff
list.activeSelectionBackground#b87b4dff
list.activeSelectionForeground#000000ff
list.activeSelectionIconForeground#000000ff
list.deemphasizedForeground#ffffffff
list.dropBackground#805535ff
list.errorForeground#ffffffff
list.filterMatchBackground#805535ff
list.filterMatchBorder#aa7147e6
list.focusBackground#aa7147ff
list.focusForeground#000000ff
list.focusHighlightForeground#000000ff
list.focusOutline#b87b4de6
list.highlightForeground#000000ff
list.hoverBackground#aa7147ff
list.hoverForeground#000000ff
list.inactiveFocusBackground#aa7147ff
list.inactiveFocusOutline#b87b4de6
list.inactiveSelectionBackground#aa7147ff
list.inactiveSelectionForeground#000000ff
list.inactiveSelectionIconForeground#ffffffff
list.invalidItemForeground#ffffffff
list.warningForeground#ffffffff
listFilterWidget.background#aa7147e6
listFilterWidget.noMatchesOutline#b87b4dcc
listFilterWidget.outline#b87b4dcc
menu.background#804020ff
menu.border#aa552be6
menu.foreground#ffffffff
menu.selectionBackground#aa552bff
menu.selectionBorder#b85c2ee6
menu.selectionForeground#ffffffff
menu.separatorBackground#804020ff
menubar.selectionBackground#aa552bff
menubar.selectionBorder#b85c2ee6
menubar.selectionForeground#ffffffff
merge.border#aa552be6
merge.commonContentBackground#804020ff
merge.commonHeaderBackground#804020ff
merge.currentContentBackground#804020ff
merge.currentHeaderBackground#804020ff
merge.incomingContentBackground#804020ff
merge.incomingHeaderBackground#804020ff
minimap.background#802000ff
minimap.errorHighlight#aa2b00ff
minimap.findMatchHighlight#aa2b00ff
minimap.selectionHighlight#b82e00ff
minimap.warningHighlight#aa2b00ff
minimapGutter.addedBackground#aa2b00ff
minimapGutter.deletedBackground#aa2b00ff
minimapGutter.modifiedBackground#aa2b00ff
minimapSlider.activeBackground#b82e008a
minimapSlider.background#aa2b008a
minimapSlider.hoverBackground#b82e008a
notebook.cellBorderColor#aa552be6
notebook.cellEditorBackground#804020ff
notebook.cellHoverBackground#aa552bff
notebook.cellInsertionIndicator#804020ff
notebook.cellStatusBarItemHoverBackground#aa552bff
notebook.cellToolbarSeparator#804020ff
notebook.focusedCellBackground#aa552bff
notebook.focusedCellBorder#b85c2ee6
notebook.focusedEditorBorder#b85c2ee6
notebook.inactiveFocusedCellBorder#aa552be6
notebook.inactiveSelectedCellBorder#aa552be6
notebook.outputContainerBackgroundColor#804020ff
notebook.selectedCellBackground#aa552bff
notebook.selectedCellBorder#b85c2ee6
notebook.symbolHighlightBackground#b85c2ee6
notebookScrollbarSlider.activeBackground#b85c2e8a
notebookScrollbarSlider.background#aa552b8a
notebookScrollbarSlider.hoverBackground#b85c2e8a
notebookStatusErrorIcon.foreground#ffffffff
notebookStatusRunningIcon.foreground#ffffffff
notebookStatusSuccessIcon.foreground#ffffffff
notificationCenter.border#aa552be6
notificationCenterHeader.background#804020ff
notificationCenterHeader.foreground#ffffffff
notificationLink.foreground#ffffffff
notifications.background#804020ff
notifications.border#aa552be6
notifications.foreground#ffffffff
notificationsErrorIcon.foreground#ffffffff
notificationsInfoIcon.foreground#ffffffff
notificationsWarningIcon.foreground#ffffffff
notificationToast.border#aa552be6
panel.background#804a2bff
panel.border#aa6339e6
panel.dropBorder#aa6339e6
panelInput.border#aa6339e6
panelSection.border#aa6339e6
panelSection.dropBackground#804a2bff
panelSectionHeader.background#804a2bff
panelSectionHeader.border#aa6339e6
panelSectionHeader.foreground#ffffffff
panelTitle.activeBorder#b86b3de6
panelTitle.activeForeground#ffffffff
panelTitle.inactiveForeground#ffffffff
peekView.border#b85c2ecc
peekViewEditor.background#aa552be6
peekViewEditor.matchHighlightBackground#b85c2ee6
peekViewEditor.matchHighlightBorder#bd5e2fcc
peekViewEditorGutter.background#aa552be6
peekViewResult.background#aa552be6
peekViewResult.fileForeground#ffffffff
peekViewResult.lineForeground#ffffffff
peekViewResult.matchHighlightBackground#b85c2ee6
peekViewResult.selectionBackground#b85c2ee6
peekViewResult.selectionForeground#000000ff
peekViewTitle.background#aa552be6
peekViewTitleDescription.foreground#ffffffff
peekViewTitleLabel.foreground#ffffffff
pickerGroup.border#b85c2ecc
pickerGroup.foreground#ffffffff
ports.iconRunningProcessForeground#ffffffff
problemsErrorIcon.foreground#ffffffff
problemsInfoIcon.foreground#ffffffff
problemsWarningIcon.foreground#ffffffff
progressBar.background#804020ff
quickInput.background#804020ff
quickInput.foreground#ffffffff
quickInputList.focusBackground#aa7147ff
quickInputList.focusForeground#000000ff
quickInputList.focusIconForeground#000000ff
quickInputTitle.background#804020ff
sash.hoverBorder#b85c2ee6
scm.providerBorder#aa552be6
scrollbar.shadow#aa552be6
scrollbarSlider.activeBackground#b85c2e8a
scrollbarSlider.background#aa552b8a
scrollbarSlider.hoverBackground#b85c2e8a
searchEditor.findMatchBackground#804020ff
searchEditor.findMatchBorder#aa552be6
searchEditor.textInputBorder#aa552be6
selection.background#aa552bff
settings.checkboxBackground#aa552be6
settings.checkboxBorder#b85c2ecc
settings.checkboxForeground#ffffffff
settings.dropdownBackground#804020ff
settings.dropdownBorder#aa552be6
settings.dropdownForeground#ffffffff
settings.dropdownListBorder#aa7147e6
settings.focusedRowBackground#aa552bff
settings.focusedRowBorder#b85c2ee6
settings.headerForeground#ffffffff
settings.modifiedItemIndicator#aa552bff
settings.numberInputBackground#804020ff
settings.numberInputBorder#aa552be6
settings.numberInputForeground#ffffffff
settings.rowHoverBackground#aa552bff
settings.textInputBackground#804020ff
settings.textInputBorder#aa552be6
settings.textInputForeground#ffffffff
sideBar.background#805535ff
sideBar.border#aa7147e6
sideBar.dropBackground#805535ff
sideBar.foreground#ffffffff
sideBarSectionHeader.background#805535ff
sideBarSectionHeader.border#aa7147e6
sideBarSectionHeader.foreground#ffffffff
sideBarTitle.foreground#ffffffff
statusBar.background#804020ff
statusBar.border#aa552be6
statusBar.debuggingBackground#804020ff
statusBar.debuggingBorder#aa552be6
statusBar.debuggingForeground#ffffffff
statusBar.foreground#ffffffff
statusBar.noFolderBackground#804020ff
statusBar.noFolderBorder#aa552be6
statusBar.noFolderForeground#ffffffff
statusBarItem.activeBackground#aa552bff
statusBarItem.errorBackground#804020ff
statusBarItem.errorForeground#ffffffff
statusBarItem.hoverBackground#aa552bff
statusBarItem.prominentBackground#804020ff
statusBarItem.prominentForeground#ffffffff
statusBarItem.prominentHoverBackground#aa552bff
statusBarItem.remoteBackground#804020ff
statusBarItem.remoteForeground#ffffffff
statusBarItem.warningBackground#804020ff
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#aa471cff
tab.activeBorder#b84d1fe6
tab.activeBorderTop#b84d1fe6
tab.activeForeground#ffffffff
tab.activeModifiedBorder#bd4f1fe6
tab.border#aa471ce6
tab.hoverBackground#aa471cff
tab.hoverBorder#b84d1fe6
tab.hoverForeground#ffffffff
tab.inactiveBackground#803515ff
tab.inactiveForeground#ffffffff
tab.inactiveModifiedBorder#aa471ce6
tab.lastPinnedBorder#aa471ce6
tab.unfocusedActiveBackground#aa471cff
tab.unfocusedActiveBorder#b84d1fe6
tab.unfocusedActiveBorderTop#b84d1fe6
tab.unfocusedActiveForeground#ffffffff
tab.unfocusedActiveModifiedBorder#bd4f1fe6
tab.unfocusedHoverBackground#aa471cff
tab.unfocusedHoverBorder#b84d1fe6
tab.unfocusedHoverForeground#ffffffff
tab.unfocusedInactiveBackground#662b11ff
tab.unfocusedInactiveForeground#ffffffff
tab.unfocusedInactiveModifiedBorder#aa471ce6
testing.iconErrored#aa552be6
testing.iconFailed#aa552be6
testing.iconPassed#aa552be6
testing.iconQueued#aa552be6
testing.iconSkipped#aa552be6
testing.iconUnset#aa552be6
testing.message.error.decorationForeground#ffffffff
testing.message.error.lineBackground#804020ff
testing.message.info.decorationForeground#ffffffff
testing.message.info.lineBackground#804020ff
testing.peekBorder#aa552be6
testing.peekHeaderBackground#804020ff
testing.runAction#804020ff
textBlockQuote.background#804020ff
textBlockQuote.border#aa552be6
textCodeBlock.background#804020ff
textLink.activeForeground#ffffffff
textLink.foreground#ffffffff
textPreformat.foreground#ffffffff
textSeparator.foreground#ffffffff
titleBar.activeBackground#aa552bff
titleBar.activeForeground#ffffffff
titleBar.border#aa552be6
titleBar.inactiveBackground#66331aff
titleBar.inactiveForeground#ffffffff
toolbar.activeBackground#aa552bff
toolbar.hoverBackground#aa552bff
toolbar.hoverOutline#b85c2ee6
tree.indentGuidesStroke#b87b4dff
tree.tableColumnsBorder#aa7147e6
walkThrough.embeddedEditorBackground#804020ff
welcomePage.background#804020ff
welcomePage.buttonBackground#aa552be6
welcomePage.buttonHoverBackground#b85c2ee6
welcomePage.progress.background#804020ff
welcomePage.progress.foreground#ffffffff
welcomePage.tileBackground#804020ff
welcomePage.tileHoverBackground#aa552bff
welcomePage.tileShadow.#aa552be6
widget.shadow#b85c2ecc
window.activeBorder#b85c2ee6
window.inactiveBorder#a25128e6
workspace.hiddenColor#80402099

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	#ff4000ff
meta	#ff4000ff
punctuation	#ff4000ff
storage	#ff4000ff
comment	#aa2b00ff
source	#952500ff

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