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 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#8055aaff
activityBar.activeBorder#8a5cb8e6
activityBar.activeFocusBorder#8e5ebde6
activityBar.background#604080ff
activityBar.border#8055aae6
activityBar.dropBorder#8055aae6
activityBar.foreground#ffffffff
activityBar.inactiveForeground#ffffffff
activityBarBadge.background#8055aae6
activityBarBadge.foreground#ffffffff
badge.background#552baae6
badge.foreground#ffffffff
banner.background#402080ff
banner.foreground#ffffffff
banner.iconForeground#ffffffff
bookmarks.lineBackground#402080ff
bookmarks.lineBorder#552baae6
bookmarks.overviewRuler#402080ff
breadcrumb.activeSelectionForeground#ffffffff
breadcrumb.background#2b0b80ff
breadcrumb.focusForeground#ffffffff
breadcrumb.foreground#fcfcfcff
breadcrumbPicker.background#390eaae6
button.background#552baae6
button.border#5c2eb8cc
button.foreground#ffffffff
button.hoverBackground#5c2eb8e6
button.secondaryBackground#552baae6
button.secondaryForeground#ffffffff
button.secondaryHoverBackground#5c2eb8e6
charts.blue#402080ff
charts.foreground#ffffffff
charts.green#402080ff
charts.lines#402080ff
charts.orange#402080ff
charts.purple#402080ff
charts.red#402080ff
charts.yellow#402080ff
checkbox.background#552baae6
checkbox.border#5c2eb8cc
checkbox.foreground#ffffffff
debugConsole.errorForeground#ffffffff
debugConsole.infoForeground#ffffffff
debugConsole.sourceForeground#ffffffff
debugConsole.warningForeground#ffffffff
debugConsoleInputIcon.foreground#ffffffff
debugExceptionWidget.background#552baae6
debugExceptionWidget.border#5c2eb8cc
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#402080ff
debugTokenExpression.error#402080ff
debugTokenExpression.name#402080ff
debugTokenExpression.number#402080ff
debugTokenExpression.string#402080ff
debugTokenExpression.value#402080ff
debugToolBar.background#402080ff
debugToolBar.border#552baae6
debugView.exceptionLabelBackground#552baae6
debugView.exceptionLabelForeground#ffffffff
debugView.stateLabelBackground#552baae6
debugView.stateLabelForeground#ffffffff
debugView.valueChangedHighlight#5c2eb8e6
descriptionForeground#ffffffff
diffEditor.border#552baae6
diffEditor.diagonalFill#402080ff
diffEditor.insertedTextBackground#402080ff
diffEditor.insertedTextBorder#552baae6
diffEditor.removedTextBackground#402080ff
diffEditor.removedTextBorder#552baae6
dropdown.background#402080ff
dropdown.border#552baae6
dropdown.foreground#ffffffff
dropdown.listBackground#553580ff
editor.background#200080ff
editor.findMatchBackground#200080ff
editor.findMatchBorder#2b00aae6
editor.findMatchHighlightBackground#2b00aaff
editor.findMatchHighlightBorder#2e00b8e6
editor.findRangeHighlightBackground#2b00aaff
editor.findRangeHighlightBorder#2e00b8e6
editor.focusedStackFrameHighlightBackground#2e00b8ff
editor.foldBackground#200080ff
editor.foreground#f5f5f5ff
editor.hoverHighlightBackground#2e00b8ff
editor.inactiveSelectionBackground#200080ff
editor.inlineValuesBackground#200080ff
editor.inlineValuesForeground#f5f5f5ff
editor.lineHighlightBackground#2b00aaff
editor.linkedEditingBackground#200080ff
editor.rangeHighlightBackground#2b00aaff
editor.rangeHighlightBorder#2e00b8e6
editor.selectionBackground#2b00aaff
editor.selectionForeground#ffffffff
editor.selectionHighlightBackground#2e00b8ff
editor.selectionHighlightBorder#2f00bde6
editor.snippetFinalTabstopHighlightBackground#2b00aaff
editor.snippetFinalTabstopHighlightBorder#2e00b8e6
editor.snippetTabstopHighlightBackground#2b00aaff
editor.snippetTabstopHighlightBorder#2e00b8e6
editor.stackFrameHighlightBackground#2b00aaff
editor.symbolHighlightBackground#2e00b8e6
editor.symbolHighlightBorder#2f00bdcc
editor.wordHighlightBackground#2b00aaff
editor.wordHighlightBorder#2e00b8e6
editor.wordHighlightStrongBackground#2b00aaff
editor.wordHighlightStrongBorder#2e00b8e6
editorBracketHighlight.foreground1#4000ffff
editorBracketHighlight.foreground2#4000ffff
editorBracketHighlight.foreground3#4000ffff
editorBracketHighlight.foreground4#4000ffff
editorBracketHighlight.foreground5#4000ffff
editorBracketHighlight.foreground6#4000ffff
editorBracketHighlight.unexpectedBracket.foreground#7f7f7fff
editorBracketMatch.background#200080ff
editorBracketMatch.border#2b00aae6
editorCodeLens.foreground#f5f5f5ff
editorCursor.background#200080ff
editorCursor.foreground#f5f5f5ff
editorError.background#200080ff
editorError.border#2b00aae6
editorError.foreground#f5f5f5ff
editorGhostText.border#2b00aae6
editorGhostText.foreground#f5f5f5ff
editorGroup.border#390eaae6
editorGroup.dropBackground#2b0b80ff
editorGroup.emptyBackground#2b0b80ff
editorGroup.focusedEmptyBorder#3d0fb8e6
editorGroupHeader.border#390eaae6
editorGroupHeader.noTabsBackground#2b0b80ff
editorGroupHeader.tabsBackground#2b0b80ff
editorGroupHeader.tabsBorder#390eaae6
editorGutter.addedBackground#390eaaff
editorGutter.background#2b0b80ff
editorGutter.commentRangeForeground#fcfcfcff
editorGutter.deletedBackground#390eaaff
editorGutter.foldingControlForeground#fcfcfcff
editorGutter.modifiedBackground#390eaaff
editorHint.border#2b00aae6
editorHint.foreground#f5f5f5ff
editorHoverWidget.background#2e00b8e6
editorHoverWidget.border#2f00bdcc
editorHoverWidget.foreground#ffffffff
editorHoverWidget.statusBarBackground#5c2eb8e6
editorIndentGuide.activeBackground#4000ffff
editorIndentGuide.background#3000bfff
editorInfo.background#200080ff
editorInfo.border#2b00aae6
editorInfo.foreground#f5f5f5ff
editorInlayHint.background#200080ff
editorInlayHint.foreground#f5f5f5ff
editorLightBulb.foreground#ffffffff
editorLightBulbAutoFix.foreground#7f7f7fff
editorLineNumber.activeForeground#ffffffff
editorLineNumber.foreground#f5f5f5ff
editorLink.activeForeground#ffffffff
editorMarkerNavigation.background#200080ff
editorMarkerNavigationError.background#200080ff
editorMarkerNavigationError.headerBackground#200080ff
editorMarkerNavigationInfo.background#200080ff
editorMarkerNavigationInfo.headerBackground#200080ff
editorMarkerNavigationWarning.background#200080ff
editorMarkerNavigationWarning.headerBackground#200080ff
editorOverviewRuler.addedForeground#ffffffff
editorOverviewRuler.background#200080ff
editorOverviewRuler.border#2b00aae6
editorOverviewRuler.bracketMatchForeground#f5f5f5ff
editorOverviewRuler.commonContentForeground#f5f5f5ff
editorOverviewRuler.currentContentForeground#f5f5f5ff
editorOverviewRuler.deletedForeground#ffffffff
editorOverviewRuler.errorForeground#f5f5f5ff
editorOverviewRuler.findMatchForeground#f5f5f5ff
editorOverviewRuler.incomingContentForeground#f5f5f5ff
editorOverviewRuler.infoForeground#f5f5f5ff
editorOverviewRuler.modifiedForeground#ffffffff
editorOverviewRuler.rangeHighlightForeground#ffffffff
editorOverviewRuler.selectionHighlightForeground#ffffffff
editorOverviewRuler.warningForeground#f5f5f5ff
editorOverviewRuler.wordHighlightForeground#ffffffff
editorOverviewRuler.wordHighlightStrongForeground#ffffffff
editorPane.background#200080ff
editorRuler.foreground#f5f5f5ff
editorSuggestWidget.background#2b00aae6
editorSuggestWidget.border#2e00b8cc
editorSuggestWidget.focusHighlightForeground#ffffffff
editorSuggestWidget.foreground#ffffffff
editorSuggestWidget.highlightForeground#ffffffff
editorSuggestWidget.selectedBackground#2e00b8e6
editorSuggestWidget.selectedForeground#ffffffff
editorSuggestWidget.selectedIconForeground#ffffffff
editorUnnecessaryCode.border#2b00aa80
editorUnnecessaryCode.opacity#20008099
editorWarning.background#200080ff
editorWarning.border#2b00aae6
editorWarning.foreground#f5f5f5ff
editorWhitespace.foreground#250095ff
editorWidget.background#2b00aae6
editorWidget.border#2e00b8cc
editorWidget.foreground#ffffffff
editorWidget.resizeBorder#2e00b8cc
errorForeground#ffffffff
errorLens.errorBackground#402080ff
errorLens.errorBackgroundLight#402080ff
errorLens.errorForeground#ffffffff
errorLens.errorForegroundLight#ffffffff
errorLens.errorMessageBackground#402080ff
errorLens.hintBackground#402080ff
errorLens.hintBackgroundLight#402080ff
errorLens.hintForeground#ffffffff
errorLens.hintForegroundLight#ffffffff
errorLens.hintMessageBackground#402080ff
errorLens.infoBackground#402080ff
errorLens.infoBackgroundLight#402080ff
errorLens.infoForeground#ffffffff
errorLens.infoForegroundLight#ffffffff
errorLens.infoMessageBackground#402080ff
errorLens.statusBarErrorForeground#ffffffff
errorLens.statusBarHintForeground#ffffffff
errorLens.statusBarInfoForeground#ffffffff
errorLens.statusBarWarningForeground#ffffffff
errorLens.warningBackground#402080ff
errorLens.warningBackgroundLight#402080ff
errorLens.warningForeground#ffffffff
errorLens.warningForegroundLight#ffffffff
errorLens.warningMessageBackground#402080ff
extensionBadge.remoteBackground#552baae6
extensionBadge.remoteForeground#ffffffff
extensionButton.prominentBackground#552baae6
extensionButton.prominentForeground#ffffffff
extensionButton.prominentHoverBackground#5c2eb8e6
extensionIcon.starForeground#ffffffff
focusBorder#5c2eb8e6
foreground#ffffffff
gitlens.closedPullRequestIconColor#552baae6
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#402080ff
gitlens.gutterForegroundColor#ffffffff
gitlens.gutterUncommittedForegroundColor#ffffffff
gitlens.lineHighlightBackgroundColor#552baaff
gitlens.lineHighlightOverviewRulerColor#552baaff
gitlens.mergedPullRequestIconColor#552baae6
gitlens.openPullRequestIconColor#552baae6
gitlens.trailingLineBackgroundColor#402080ff
gitlens.trailingLineForegroundColor#ffffffff
gitlens.unpublishedCommitIconColor#552baae6
gitlens.unpulledChangesIconColor#552baae6
gitlens.unpushlishedChangesIconColor#552baae6
icon.foreground#ffffffff
inlineTitleBar.background#402080ff
input.background#402080ff
input.border#552baae6
input.foreground#ffffffff
input.placeholderForeground#ffffffff
inputOption.activeBackground#552baaff
inputOption.activeBorder#5c2eb8e6
inputOption.activeForeground#ffffffff
inputValidation.errorBackground#402080ff
inputValidation.errorBorder#552baae6
inputValidation.errorForeground#ffffffff
inputValidation.infoBackground#402080ff
inputValidation.infoBorder#552baae6
inputValidation.infoForeground#ffffffff
inputValidation.warningBackground#402080ff
inputValidation.warningBorder#552baae6
inputValidation.warningForeground#ffffffff
interactive.activeCodeBorder#5c2eb8e6
interactive.inactiveCodeBorder#5128a2e6
issues.closed#402080ff
issues.newIssueDecoration#402080ff
issues.open#402080ff
keybindingLabel.background#402080ff
keybindingLabel.border#552baae6
keybindingLabel.bottomBorder#552baae6
keybindingLabel.foreground#ffffffff
lintlens.annotationColor#402080ff
list.activeSelectionBackground#7b4db8ff
list.activeSelectionForeground#ffffffff
list.activeSelectionIconForeground#ffffffff
list.deemphasizedForeground#ffffffff
list.dropBackground#553580ff
list.errorForeground#ffffffff
list.filterMatchBackground#553580ff
list.filterMatchBorder#7147aae6
list.focusBackground#7147aaff
list.focusForeground#ffffffff
list.focusHighlightForeground#ffffffff
list.focusOutline#7b4db8e6
list.highlightForeground#ffffffff
list.hoverBackground#7147aaff
list.hoverForeground#ffffffff
list.inactiveFocusBackground#7147aaff
list.inactiveFocusOutline#7b4db8e6
list.inactiveSelectionBackground#7147aaff
list.inactiveSelectionForeground#ffffffff
list.inactiveSelectionIconForeground#ffffffff
list.invalidItemForeground#ffffffff
list.warningForeground#ffffffff
listFilterWidget.background#7147aae6
listFilterWidget.noMatchesOutline#7b4db8cc
listFilterWidget.outline#7b4db8cc
menu.background#402080ff
menu.border#552baae6
menu.foreground#ffffffff
menu.selectionBackground#552baaff
menu.selectionBorder#5c2eb8e6
menu.selectionForeground#ffffffff
menu.separatorBackground#402080ff
menubar.selectionBackground#552baaff
menubar.selectionBorder#5c2eb8e6
menubar.selectionForeground#ffffffff
merge.border#552baae6
merge.commonContentBackground#402080ff
merge.commonHeaderBackground#402080ff
merge.currentContentBackground#402080ff
merge.currentHeaderBackground#402080ff
merge.incomingContentBackground#402080ff
merge.incomingHeaderBackground#402080ff
minimap.background#200080ff
minimap.errorHighlight#2b00aaff
minimap.findMatchHighlight#2b00aaff
minimap.selectionHighlight#2e00b8ff
minimap.warningHighlight#2b00aaff
minimapGutter.addedBackground#2b00aaff
minimapGutter.deletedBackground#2b00aaff
minimapGutter.modifiedBackground#2b00aaff
minimapSlider.activeBackground#2e00b88a
minimapSlider.background#2b00aa8a
minimapSlider.hoverBackground#2e00b88a
notebook.cellBorderColor#552baae6
notebook.cellEditorBackground#402080ff
notebook.cellHoverBackground#552baaff
notebook.cellInsertionIndicator#402080ff
notebook.cellStatusBarItemHoverBackground#552baaff
notebook.cellToolbarSeparator#402080ff
notebook.focusedCellBackground#552baaff
notebook.focusedCellBorder#5c2eb8e6
notebook.focusedEditorBorder#5c2eb8e6
notebook.inactiveFocusedCellBorder#552baae6
notebook.inactiveSelectedCellBorder#552baae6
notebook.outputContainerBackgroundColor#402080ff
notebook.selectedCellBackground#552baaff
notebook.selectedCellBorder#5c2eb8e6
notebook.symbolHighlightBackground#5c2eb8e6
notebookScrollbarSlider.activeBackground#5c2eb88a
notebookScrollbarSlider.background#552baa8a
notebookScrollbarSlider.hoverBackground#5c2eb88a
notebookStatusErrorIcon.foreground#ffffffff
notebookStatusRunningIcon.foreground#ffffffff
notebookStatusSuccessIcon.foreground#ffffffff
notificationCenter.border#552baae6
notificationCenterHeader.background#402080ff
notificationCenterHeader.foreground#ffffffff
notificationLink.foreground#ffffffff
notifications.background#402080ff
notifications.border#552baae6
notifications.foreground#ffffffff
notificationsErrorIcon.foreground#ffffffff
notificationsInfoIcon.foreground#ffffffff
notificationsWarningIcon.foreground#ffffffff
notificationToast.border#552baae6
panel.background#4a2b80ff
panel.border#6339aae6
panel.dropBorder#6339aae6
panelInput.border#6339aae6
panelSection.border#6339aae6
panelSection.dropBackground#4a2b80ff
panelSectionHeader.background#4a2b80ff
panelSectionHeader.border#6339aae6
panelSectionHeader.foreground#ffffffff
panelTitle.activeBorder#6b3db8e6
panelTitle.activeForeground#ffffffff
panelTitle.inactiveForeground#ffffffff
peekView.border#5c2eb8cc
peekViewEditor.background#552baae6
peekViewEditor.matchHighlightBackground#5c2eb8e6
peekViewEditor.matchHighlightBorder#5e2fbdcc
peekViewEditorGutter.background#552baae6
peekViewResult.background#552baae6
peekViewResult.fileForeground#ffffffff
peekViewResult.lineForeground#ffffffff
peekViewResult.matchHighlightBackground#5c2eb8e6
peekViewResult.selectionBackground#5c2eb8e6
peekViewResult.selectionForeground#ffffffff
peekViewTitle.background#552baae6
peekViewTitleDescription.foreground#ffffffff
peekViewTitleLabel.foreground#ffffffff
pickerGroup.border#5c2eb8cc
pickerGroup.foreground#ffffffff
ports.iconRunningProcessForeground#ffffffff
problemsErrorIcon.foreground#ffffffff
problemsInfoIcon.foreground#ffffffff
problemsWarningIcon.foreground#ffffffff
progressBar.background#402080ff
quickInput.background#402080ff
quickInput.foreground#ffffffff
quickInputList.focusBackground#7147aaff
quickInputList.focusForeground#ffffffff
quickInputList.focusIconForeground#ffffffff
quickInputTitle.background#402080ff
sash.hoverBorder#5c2eb8e6
scm.providerBorder#552baae6
scrollbar.shadow#552baae6
scrollbarSlider.activeBackground#5c2eb88a
scrollbarSlider.background#552baa8a
scrollbarSlider.hoverBackground#5c2eb88a
searchEditor.findMatchBackground#402080ff
searchEditor.findMatchBorder#552baae6
searchEditor.textInputBorder#552baae6
selection.background#552baaff
settings.checkboxBackground#552baae6
settings.checkboxBorder#5c2eb8cc
settings.checkboxForeground#ffffffff
settings.dropdownBackground#402080ff
settings.dropdownBorder#552baae6
settings.dropdownForeground#ffffffff
settings.dropdownListBorder#7147aae6
settings.focusedRowBackground#552baaff
settings.focusedRowBorder#5c2eb8e6
settings.headerForeground#ffffffff
settings.modifiedItemIndicator#552baaff
settings.numberInputBackground#402080ff
settings.numberInputBorder#552baae6
settings.numberInputForeground#ffffffff
settings.rowHoverBackground#552baaff
settings.textInputBackground#402080ff
settings.textInputBorder#552baae6
settings.textInputForeground#ffffffff
sideBar.background#553580ff
sideBar.border#7147aae6
sideBar.dropBackground#553580ff
sideBar.foreground#ffffffff
sideBarSectionHeader.background#553580ff
sideBarSectionHeader.border#7147aae6
sideBarSectionHeader.foreground#ffffffff
sideBarTitle.foreground#ffffffff
statusBar.background#402080ff
statusBar.border#552baae6
statusBar.debuggingBackground#402080ff
statusBar.debuggingBorder#552baae6
statusBar.debuggingForeground#ffffffff
statusBar.foreground#ffffffff
statusBar.noFolderBackground#402080ff
statusBar.noFolderBorder#552baae6
statusBar.noFolderForeground#ffffffff
statusBarItem.activeBackground#552baaff
statusBarItem.errorBackground#402080ff
statusBarItem.errorForeground#ffffffff
statusBarItem.hoverBackground#552baaff
statusBarItem.prominentBackground#402080ff
statusBarItem.prominentForeground#ffffffff
statusBarItem.prominentHoverBackground#552baaff
statusBarItem.remoteBackground#402080ff
statusBarItem.remoteForeground#ffffffff
statusBarItem.warningBackground#402080ff
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#471caaff
tab.activeBorder#4d1fb8e6
tab.activeBorderTop#4d1fb8e6
tab.activeForeground#ffffffff
tab.activeModifiedBorder#4f1fbde6
tab.border#471caae6
tab.hoverBackground#471caaff
tab.hoverBorder#4d1fb8e6
tab.hoverForeground#ffffffff
tab.inactiveBackground#351580ff
tab.inactiveForeground#ffffffff
tab.inactiveModifiedBorder#471caae6
tab.lastPinnedBorder#471caae6
tab.unfocusedActiveBackground#471caaff
tab.unfocusedActiveBorder#4d1fb8e6
tab.unfocusedActiveBorderTop#4d1fb8e6
tab.unfocusedActiveForeground#ffffffff
tab.unfocusedActiveModifiedBorder#4f1fbde6
tab.unfocusedHoverBackground#471caaff
tab.unfocusedHoverBorder#4d1fb8e6
tab.unfocusedHoverForeground#ffffffff
tab.unfocusedInactiveBackground#2b1166ff
tab.unfocusedInactiveForeground#f5f5f5ff
tab.unfocusedInactiveModifiedBorder#471caae6
testing.iconErrored#552baae6
testing.iconFailed#552baae6
testing.iconPassed#552baae6
testing.iconQueued#552baae6
testing.iconSkipped#552baae6
testing.iconUnset#552baae6
testing.message.error.decorationForeground#ffffffff
testing.message.error.lineBackground#402080ff
testing.message.info.decorationForeground#ffffffff
testing.message.info.lineBackground#402080ff
testing.peekBorder#552baae6
testing.peekHeaderBackground#402080ff
testing.runAction#402080ff
textBlockQuote.background#402080ff
textBlockQuote.border#552baae6
textCodeBlock.background#402080ff
textLink.activeForeground#ffffffff
textLink.foreground#ffffffff
textPreformat.foreground#ffffffff
textSeparator.foreground#ffffffff
titleBar.activeBackground#552baaff
titleBar.activeForeground#ffffffff
titleBar.border#552baae6
titleBar.inactiveBackground#331a66ff
titleBar.inactiveForeground#fefefeff
toolbar.activeBackground#552baaff
toolbar.hoverBackground#552baaff
toolbar.hoverOutline#5c2eb8e6
tree.indentGuidesStroke#7b4db8ff
tree.tableColumnsBorder#7147aae6
walkThrough.embeddedEditorBackground#402080ff
welcomePage.background#402080ff
welcomePage.buttonBackground#552baae6
welcomePage.buttonHoverBackground#5c2eb8e6
welcomePage.progress.background#402080ff
welcomePage.progress.foreground#ffffffff
welcomePage.tileBackground#402080ff
welcomePage.tileHoverBackground#552baaff
welcomePage.tileShadow.#552baae6
widget.shadow#5c2eb8cc
window.activeBorder#5c2eb8e6
window.inactiveBorder#5128a2e6
workspace.hiddenColor#40208099

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	#fdfdfdff	italic
variable.other.constant , variable.other.dollar , variable.other.readwrite	#ffffffff	bold
entity	#ffffffff	bold
support	#ffffffff	bold
variable	#ffffffff	bold
keyword.operator	#fcfcfcff
constant	#f7f7f7ff
string	#f7f7f7ff
keyword	#4000ffff
meta	#4000ffff
punctuation	#4000ffff
storage	#4000ffff
comment	#2b00aaff
source	#250095ff

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