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 Q 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#1b6a00ff
activityBar.activeBorder#1e7800ff
activityBar.activeFocusBorder#1f7d00ff
activityBar.background#104000ff
activityBar.border#1b6a00ff
activityBar.dropBorder#1b6a00ff
activityBar.foreground#ffffffff
activityBar.inactiveForeground#eeeeeeff
activityBarBadge.background#1b6a00ff
activityBarBadge.foreground#ffffffff
badge.background#356a1bff
badge.foreground#ffffffff
banner.background#204010ff
banner.foreground#ffffffff
banner.iconForeground#ffffffff
bookmarks.lineBackground#204010ff
bookmarks.lineBorder#356a1bff
bookmarks.overviewRuler#204010ff
breadcrumb.activeSelectionForeground#ffffffff
breadcrumb.background#2b401bff
breadcrumb.focusForeground#ffffffff
breadcrumb.foreground#ffffffff
breadcrumbPicker.background#476a2cff
button.background#356a1bff
button.border#3c781eff
button.foreground#ffffffff
button.hoverBackground#3c781eff
button.secondaryBackground#356a1bff
button.secondaryForeground#ffffffff
button.secondaryHoverBackground#3c781eff
charts.blue#204010ff
charts.foreground#ffffffff
charts.green#204010ff
charts.lines#204010ff
charts.orange#204010ff
charts.purple#204010ff
charts.red#204010ff
charts.yellow#204010ff
checkbox.background#356a1bff
checkbox.border#3c781eff
checkbox.foreground#ffffffff
debugConsole.errorForeground#ffffffff
debugConsole.infoForeground#ffffffff
debugConsole.sourceForeground#ffffffff
debugConsole.warningForeground#ffffffff
debugConsoleInputIcon.foreground#ffffffff
debugExceptionWidget.background#356a1bff
debugExceptionWidget.border#3c781eff
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#204010ff
debugTokenExpression.error#204010ff
debugTokenExpression.name#204010ff
debugTokenExpression.number#204010ff
debugTokenExpression.string#204010ff
debugTokenExpression.value#204010ff
debugToolBar.background#204010ff
debugToolBar.border#356a1bff
debugView.exceptionLabelBackground#356a1bff
debugView.exceptionLabelForeground#ffffffff
debugView.stateLabelBackground#356a1bff
debugView.stateLabelForeground#ffffffff
debugView.valueChangedHighlight#3c781eff
descriptionForeground#ffffffff
diffEditor.border#356a1bff
diffEditor.diagonalFill#204010ff
diffEditor.insertedTextBackground#204010ff
diffEditor.insertedTextBorder#356a1bff
diffEditor.removedTextBackground#204010ff
diffEditor.removedTextBorder#356a1bff
dropdown.background#204010ff
dropdown.border#356a1bff
dropdown.foreground#ffffffff
dropdown.listBackground#154005ff
editor.background#304020ff
editor.findMatchBackground#304020ff
editor.findMatchBorder#506a35ff
editor.findMatchHighlightBackground#506a35ff
editor.findMatchHighlightBorder#5a783cff
editor.findRangeHighlightBackground#506a35ff
editor.findRangeHighlightBorder#5a783cff
editor.focusedStackFrameHighlightBackground#5a783cff
editor.foldBackground#304020ff
editor.foreground#ffffffff
editor.hoverHighlightBackground#5a783cff
editor.inactiveSelectionBackground#304020ff
editor.inlineValuesBackground#304020ff
editor.inlineValuesForeground#ffffffff
editor.lineHighlightBackground#506a35ff
editor.linkedEditingBackground#304020ff
editor.rangeHighlightBackground#506a35ff
editor.rangeHighlightBorder#5a783cff
editor.selectionBackground#506a35ff
editor.selectionForeground#ffffffff
editor.selectionHighlightBackground#5a783cff
editor.selectionHighlightBorder#5e7d3fff
editor.snippetFinalTabstopHighlightBackground#506a35ff
editor.snippetFinalTabstopHighlightBorder#5a783cff
editor.snippetTabstopHighlightBackground#506a35ff
editor.snippetTabstopHighlightBorder#5a783cff
editor.stackFrameHighlightBackground#506a35ff
editor.symbolHighlightBackground#5a783cff
editor.symbolHighlightBorder#5e7d3fff
editor.wordHighlightBackground#506a35ff
editor.wordHighlightBorder#5a783cff
editor.wordHighlightStrongBackground#506a35ff
editor.wordHighlightStrongBorder#5a783cff
editorBracketHighlight.foreground1#bfff80ff
editorBracketHighlight.foreground2#bfff80ff
editorBracketHighlight.foreground3#bfff80ff
editorBracketHighlight.foreground4#bfff80ff
editorBracketHighlight.foreground5#bfff80ff
editorBracketHighlight.foreground6#bfff80ff
editorBracketHighlight.unexpectedBracket.foreground#7f7f7fff
editorBracketMatch.background#304020ff
editorBracketMatch.border#506a35ff
editorCodeLens.foreground#ffffffff
editorCursor.background#304020ff
editorCursor.foreground#ffffffff
editorError.background#304020ff
editorError.border#506a35ff
editorError.foreground#ffffffff
editorGhostText.border#506a35ff
editorGhostText.foreground#ffffffff
editorGroup.border#476a2cff
editorGroup.dropBackground#2b401bff
editorGroup.emptyBackground#2b401bff
editorGroup.focusedEmptyBorder#507832ff
editorGroupHeader.border#476a2cff
editorGroupHeader.noTabsBackground#2b401bff
editorGroupHeader.tabsBackground#2b401bff
editorGroupHeader.tabsBorder#476a2cff
editorGutter.addedBackground#476a2cff
editorGutter.background#2b401bff
editorGutter.commentRangeForeground#ffffffff
editorGutter.deletedBackground#476a2cff
editorGutter.foldingControlForeground#ffffffff
editorGutter.modifiedBackground#476a2cff
editorHint.border#506a35ff
editorHint.foreground#ffffffff
editorHoverWidget.background#5a783cff
editorHoverWidget.border#5e7d3fff
editorHoverWidget.foreground#ffffffff
editorHoverWidget.statusBarBackground#3c781eff
editorIndentGuide.activeBackground#bfff80ff
editorIndentGuide.background#789f50ff
editorInfo.background#304020ff
editorInfo.border#506a35ff
editorInfo.foreground#ffffffff
editorInlayHint.background#304020ff
editorInlayHint.foreground#ffffffff
editorLightBulb.foreground#ffffffff
editorLightBulbAutoFix.foreground#7f7f7fff
editorLineNumber.activeForeground#ffffffff
editorLineNumber.foreground#ffffffff
editorLink.activeForeground#ffffffff
editorMarkerNavigation.background#304020ff
editorMarkerNavigationError.background#304020ff
editorMarkerNavigationError.headerBackground#304020ff
editorMarkerNavigationInfo.background#304020ff
editorMarkerNavigationInfo.headerBackground#304020ff
editorMarkerNavigationWarning.background#304020ff
editorMarkerNavigationWarning.headerBackground#304020ff
editorOverviewRuler.addedForeground#ffffffff
editorOverviewRuler.background#304020ff
editorOverviewRuler.border#506a35ff
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#304020ff
editorRuler.foreground#ffffffff
editorSuggestWidget.background#506a35ff
editorSuggestWidget.border#5a783cff
editorSuggestWidget.focusHighlightForeground#ffffffff
editorSuggestWidget.foreground#ffffffff
editorSuggestWidget.highlightForeground#ffffffff
editorSuggestWidget.selectedBackground#5a783cff
editorSuggestWidget.selectedForeground#ffffffff
editorSuggestWidget.selectedIconForeground#ffffffff
editorUnnecessaryCode.border#506a3599
editorUnnecessaryCode.opacity#30402099
editorWarning.background#304020ff
editorWarning.border#506a35ff
editorWarning.foreground#ffffffff
editorWhitespace.foreground#486030ff
editorWidget.background#506a35ff
editorWidget.border#5a783cff
editorWidget.foreground#ffffffff
editorWidget.resizeBorder#5a783cff
errorForeground#ffffffff
errorLens.errorBackground#204010ff
errorLens.errorBackgroundLight#204010ff
errorLens.errorForeground#ffffffff
errorLens.errorForegroundLight#ffffffff
errorLens.errorMessageBackground#204010ff
errorLens.hintBackground#204010ff
errorLens.hintBackgroundLight#204010ff
errorLens.hintForeground#ffffffff
errorLens.hintForegroundLight#ffffffff
errorLens.hintMessageBackground#204010ff
errorLens.infoBackground#204010ff
errorLens.infoBackgroundLight#204010ff
errorLens.infoForeground#ffffffff
errorLens.infoForegroundLight#ffffffff
errorLens.infoMessageBackground#204010ff
errorLens.statusBarErrorForeground#ffffffff
errorLens.statusBarHintForeground#ffffffff
errorLens.statusBarInfoForeground#ffffffff
errorLens.statusBarWarningForeground#ffffffff
errorLens.warningBackground#204010ff
errorLens.warningBackgroundLight#204010ff
errorLens.warningForeground#ffffffff
errorLens.warningForegroundLight#ffffffff
errorLens.warningMessageBackground#204010ff
extensionBadge.remoteBackground#356a1bff
extensionBadge.remoteForeground#ffffffff
extensionButton.prominentBackground#356a1bff
extensionButton.prominentForeground#ffffffff
extensionButton.prominentHoverBackground#3c781eff
extensionIcon.starForeground#ffffffff
focusBorder#3c781eff
foreground#ffffffff
gitlens.closedPullRequestIconColor#356a1bff
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#204010ff
gitlens.gutterForegroundColor#ffffffff
gitlens.gutterUncommittedForegroundColor#ffffffff
gitlens.lineHighlightBackgroundColor#356a1bff
gitlens.lineHighlightOverviewRulerColor#356a1bff
gitlens.mergedPullRequestIconColor#356a1bff
gitlens.openPullRequestIconColor#356a1bff
gitlens.trailingLineBackgroundColor#204010ff
gitlens.trailingLineForegroundColor#ffffffff
gitlens.unpublishedCommitIconColor#356a1bff
gitlens.unpulledChangesIconColor#356a1bff
gitlens.unpushlishedChangesIconColor#356a1bff
icon.foreground#ffffffff
inlineTitleBar.background#204010ff
input.background#204010ff
input.border#356a1bff
input.foreground#ffffffff
input.placeholderForeground#ffffffff
inputOption.activeBackground#356a1bff
inputOption.activeBorder#3c781eff
inputOption.activeForeground#ffffffff
inputValidation.errorBackground#204010ff
inputValidation.errorBorder#356a1bff
inputValidation.errorForeground#ffffffff
inputValidation.infoBackground#204010ff
inputValidation.infoBorder#356a1bff
inputValidation.infoForeground#ffffffff
inputValidation.warningBackground#204010ff
inputValidation.warningBorder#356a1bff
inputValidation.warningForeground#ffffffff
interactive.activeCodeBorder#3c781eff
interactive.inactiveCodeBorder#316218ff
issues.closed#204010ff
issues.newIssueDecoration#204010ff
issues.open#204010ff
keybindingLabel.background#204010ff
keybindingLabel.border#356a1bff
keybindingLabel.bottomBorder#356a1bff
keybindingLabel.foreground#ffffffff
lintlens.annotationColor#204010ff
list.activeSelectionBackground#28780aff
list.activeSelectionForeground#ffffffff
list.activeSelectionIconForeground#ffffffff
list.deemphasizedForeground#ffffffff
list.dropBackground#154005ff
list.errorForeground#ffffffff
list.filterMatchBackground#154005ff
list.filterMatchBorder#236a09ff
list.focusBackground#236a09ff
list.focusForeground#ffffffff
list.focusHighlightForeground#ffffffff
list.focusOutline#28780aff
list.highlightForeground#ffffffff
list.hoverBackground#236a09ff
list.hoverForeground#ffffffff
list.inactiveFocusBackground#236a09ff
list.inactiveFocusOutline#28780aff
list.inactiveSelectionBackground#236a09ff
list.inactiveSelectionForeground#ffffffff
list.inactiveSelectionIconForeground#ffffffff
list.invalidItemForeground#ffffffff
list.warningForeground#ffffffff
listFilterWidget.background#236a09ff
listFilterWidget.noMatchesOutline#28780aff
listFilterWidget.outline#28780aff
menu.background#204010ff
menu.border#356a1bff
menu.foreground#ffffffff
menu.selectionBackground#356a1bff
menu.selectionBorder#3c781eff
menu.selectionForeground#ffffffff
menu.separatorBackground#204010ff
menubar.selectionBackground#356a1bff
menubar.selectionBorder#3c781eff
menubar.selectionForeground#ffffffff
merge.border#356a1bff
merge.commonContentBackground#204010ff
merge.commonHeaderBackground#204010ff
merge.currentContentBackground#204010ff
merge.currentHeaderBackground#204010ff
merge.incomingContentBackground#204010ff
merge.incomingHeaderBackground#204010ff
minimap.background#304020ff
minimap.errorHighlight#506a35ff
minimap.findMatchHighlight#506a35ff
minimap.selectionHighlight#5a783cff
minimap.warningHighlight#506a35ff
minimapGutter.addedBackground#506a35ff
minimapGutter.deletedBackground#506a35ff
minimapGutter.modifiedBackground#506a35ff
minimapSlider.activeBackground#5a783c99
minimapSlider.background#506a3599
minimapSlider.hoverBackground#5a783c99
notebook.cellBorderColor#356a1bff
notebook.cellEditorBackground#204010ff
notebook.cellHoverBackground#356a1bff
notebook.cellInsertionIndicator#204010ff
notebook.cellStatusBarItemHoverBackground#356a1bff
notebook.cellToolbarSeparator#204010ff
notebook.focusedCellBackground#356a1bff
notebook.focusedCellBorder#3c781eff
notebook.focusedEditorBorder#3c781eff
notebook.inactiveFocusedCellBorder#356a1bff
notebook.inactiveSelectedCellBorder#356a1bff
notebook.outputContainerBackgroundColor#204010ff
notebook.selectedCellBackground#356a1bff
notebook.selectedCellBorder#3c781eff
notebook.symbolHighlightBackground#3c781eff
notebookScrollbarSlider.activeBackground#3c781e99
notebookScrollbarSlider.background#356a1b99
notebookScrollbarSlider.hoverBackground#3c781e99
notebookStatusErrorIcon.foreground#ffffffff
notebookStatusRunningIcon.foreground#ffffffff
notebookStatusSuccessIcon.foreground#ffffffff
notificationCenter.border#356a1bff
notificationCenterHeader.background#204010ff
notificationCenterHeader.foreground#ffffffff
notificationLink.foreground#ffffffff
notifications.background#204010ff
notifications.border#356a1bff
notifications.foreground#ffffffff
notificationsErrorIcon.foreground#ffffffff
notificationsInfoIcon.foreground#ffffffff
notificationsWarningIcon.foreground#ffffffff
notificationToast.border#356a1bff
panel.background#1b400bff
panel.border#2c6a12ff
panel.dropBorder#2c6a12ff
panelInput.border#2c6a12ff
panelSection.border#2c6a12ff
panelSection.dropBackground#1b400bff
panelSectionHeader.background#1b400bff
panelSectionHeader.border#2c6a12ff
panelSectionHeader.foreground#ffffffff
panelTitle.activeBorder#327814ff
panelTitle.activeForeground#ffffffff
panelTitle.inactiveForeground#f0f0f0ff
peekView.border#3c781eff
peekViewEditor.background#356a1bff
peekViewEditor.matchHighlightBackground#3c781eff
peekViewEditor.matchHighlightBorder#3f7d1fff
peekViewEditorGutter.background#356a1bff
peekViewResult.background#356a1bff
peekViewResult.fileForeground#ffffffff
peekViewResult.lineForeground#ffffffff
peekViewResult.matchHighlightBackground#3c781eff
peekViewResult.selectionBackground#3c781eff
peekViewResult.selectionForeground#ffffffff
peekViewTitle.background#356a1bff
peekViewTitleDescription.foreground#ffffffff
peekViewTitleLabel.foreground#ffffffff
pickerGroup.border#3c781eff
pickerGroup.foreground#ffffffff
ports.iconRunningProcessForeground#ffffffff
problemsErrorIcon.foreground#ffffffff
problemsInfoIcon.foreground#ffffffff
problemsWarningIcon.foreground#ffffffff
progressBar.background#204010ff
quickInput.background#204010ff
quickInput.foreground#ffffffff
quickInputList.focusBackground#236a09ff
quickInputList.focusForeground#ffffffff
quickInputList.focusIconForeground#ffffffff
quickInputTitle.background#204010ff
sash.hoverBorder#3c781eff
scm.providerBorder#356a1bff
scrollbar.shadow#356a1bff
scrollbarSlider.activeBackground#3c781e99
scrollbarSlider.background#356a1b99
scrollbarSlider.hoverBackground#3c781e99
searchEditor.findMatchBackground#204010ff
searchEditor.findMatchBorder#356a1bff
searchEditor.textInputBorder#356a1bff
selection.background#356a1bff
settings.checkboxBackground#356a1bff
settings.checkboxBorder#3c781eff
settings.checkboxForeground#ffffffff
settings.dropdownBackground#204010ff
settings.dropdownBorder#356a1bff
settings.dropdownForeground#ffffffff
settings.dropdownListBorder#236a09ff
settings.focusedRowBackground#356a1bff
settings.focusedRowBorder#3c781eff
settings.headerForeground#ffffffff
settings.modifiedItemIndicator#356a1bff
settings.numberInputBackground#204010ff
settings.numberInputBorder#356a1bff
settings.numberInputForeground#ffffffff
settings.rowHoverBackground#356a1bff
settings.textInputBackground#204010ff
settings.textInputBorder#356a1bff
settings.textInputForeground#ffffffff
sideBar.background#154005ff
sideBar.border#236a09ff
sideBar.dropBackground#154005ff
sideBar.foreground#ffffffff
sideBarSectionHeader.background#154005ff
sideBarSectionHeader.border#236a09ff
sideBarSectionHeader.foreground#ffffffff
sideBarTitle.foreground#ffffffff
statusBar.background#204010ff
statusBar.border#356a1bff
statusBar.debuggingBackground#204010ff
statusBar.debuggingBorder#356a1bff
statusBar.debuggingForeground#ffffffff
statusBar.foreground#ffffffff
statusBar.noFolderBackground#204010ff
statusBar.noFolderBorder#356a1bff
statusBar.noFolderForeground#ffffffff
statusBarItem.activeBackground#356a1bff
statusBarItem.errorBackground#204010ff
statusBarItem.errorForeground#ffffffff
statusBarItem.hoverBackground#356a1bff
statusBarItem.prominentBackground#204010ff
statusBarItem.prominentForeground#ffffffff
statusBarItem.prominentHoverBackground#356a1bff
statusBarItem.remoteBackground#204010ff
statusBarItem.remoteForeground#ffffffff
statusBarItem.warningBackground#204010ff
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#3e6a23ff
tab.activeBorder#467828ff
tab.activeBorderTop#467828ff
tab.activeForeground#ffffffff
tab.activeModifiedBorder#497d2aff
tab.border#3e6a23ff
tab.hoverBackground#3e6a23ff
tab.hoverBorder#467828ff
tab.hoverForeground#ffffffff
tab.inactiveBackground#254015ff
tab.inactiveForeground#ffffffff
tab.inactiveModifiedBorder#3e6a23ff
tab.lastPinnedBorder#3e6a23ff
tab.unfocusedActiveBackground#3e6a23ff
tab.unfocusedActiveBorder#467828ff
tab.unfocusedActiveBorderTop#467828ff
tab.unfocusedActiveForeground#ffffffff
tab.unfocusedActiveModifiedBorder#497d2aff
tab.unfocusedHoverBackground#3e6a23ff
tab.unfocusedHoverBorder#467828ff
tab.unfocusedHoverForeground#ffffffff
tab.unfocusedInactiveBackground#16260dff
tab.unfocusedInactiveForeground#f1f1f1ff
tab.unfocusedInactiveModifiedBorder#3e6a23ff
testing.iconErrored#356a1bff
testing.iconFailed#356a1bff
testing.iconPassed#356a1bff
testing.iconQueued#356a1bff
testing.iconSkipped#356a1bff
testing.iconUnset#356a1bff
testing.message.error.decorationForeground#ffffffff
testing.message.error.lineBackground#204010ff
testing.message.info.decorationForeground#ffffffff
testing.message.info.lineBackground#204010ff
testing.peekBorder#356a1bff
testing.peekHeaderBackground#204010ff
testing.runAction#204010ff
textBlockQuote.background#204010ff
textBlockQuote.border#356a1bff
textCodeBlock.background#204010ff
textLink.activeForeground#ffffffff
textLink.foreground#ffffffff
textPreformat.foreground#ffffffff
textSeparator.foreground#ffffffff
titleBar.activeBackground#356a1bff
titleBar.activeForeground#ffffffff
titleBar.border#356a1bff
titleBar.inactiveBackground#13260aff
titleBar.inactiveForeground#f0f0f0ff
toolbar.activeBackground#356a1bff
toolbar.hoverBackground#356a1bff
toolbar.hoverOutline#3c781eff
tree.indentGuidesStroke#28780aff
tree.tableColumnsBorder#236a09ff
walkThrough.embeddedEditorBackground#204010ff
welcomePage.background#204010ff
welcomePage.buttonBackground#356a1bff
welcomePage.buttonHoverBackground#3c781eff
welcomePage.progress.background#204010ff
welcomePage.progress.foreground#ffffffff
welcomePage.tileBackground#204010ff
welcomePage.tileHoverBackground#356a1bff
welcomePage.tileShadow.#356a1bff
widget.shadow#3c781eff
window.activeBorder#3c781eff
window.inactiveBorder#316218ff
workspace.hiddenColor#20401099

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	#bfff80ff
meta	#bfff80ff
punctuation	#bfff80ff
storage	#bfff80ff
comment	#608040ff
source	#486030ff

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