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 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#3aea00ff
activityBar.activeBorder#3ef800cc
activityBar.activeFocusBorder#3ffd00cc
activityBar.background#30bf00ff
activityBar.border#3aea00cc
activityBar.dropBorder#3aea00cc
activityBar.foreground#000000ff
activityBar.inactiveForeground#000000ff
activityBarBadge.background#3aea00cc
activityBarBadge.foreground#000000ff
badge.background#75ea3acc
badge.foreground#000000ff
banner.background#60bf30ff
banner.foreground#000000ff
banner.iconForeground#000000ff
bookmarks.lineBackground#60bf30ff
bookmarks.lineBorder#75ea3acc
bookmarks.overviewRuler#60bf30ff
breadcrumb.activeSelectionForeground#151515ff
breadcrumb.background#80bf50ff
breadcrumb.focusForeground#030303ff
breadcrumb.foreground#000000ff
breadcrumbPicker.background#9cea61cc
button.background#75ea3acc
button.border#7cf83e99
button.foreground#000000ff
button.hoverBackground#7cf83ecc
button.secondaryBackground#75ea3acc
button.secondaryForeground#000000ff
button.secondaryHoverBackground#7cf83ecc
charts.blue#60bf30ff
charts.foreground#000000ff
charts.green#60bf30ff
charts.lines#60bf30ff
charts.orange#60bf30ff
charts.purple#60bf30ff
charts.red#60bf30ff
charts.yellow#60bf30ff
checkbox.background#75ea3acc
checkbox.border#7cf83e99
checkbox.foreground#000000ff
debugConsole.errorForeground#000000ff
debugConsole.infoForeground#000000ff
debugConsole.sourceForeground#000000ff
debugConsole.warningForeground#000000ff
debugConsoleInputIcon.foreground#000000ff
debugExceptionWidget.background#75ea3acc
debugExceptionWidget.border#7cf83e99
debugIcon.breakpointCurrentStackframeForeground#000000ff
debugIcon.breakpointDisabledForeground#000000ff
debugIcon.breakpointForeground#000000ff
debugIcon.breakpointStackframeForeground#000000ff
debugIcon.breakpointUnverifiedForeground#000000ff
debugIcon.continueForeground#000000ff
debugIcon.disconnectForeground#000000ff
debugIcon.pauseForeground#000000ff
debugIcon.restartForeground#000000ff
debugIcon.startForeground#000000ff
debugIcon.stepBackForeground#000000ff
debugIcon.stepIntoForeground#000000ff
debugIcon.stepOutForeground#000000ff
debugIcon.stepOverForeground#000000ff
debugIcon.stopForeground#000000ff
debugTokenExpression.boolean#60bf30ff
debugTokenExpression.error#60bf30ff
debugTokenExpression.name#60bf30ff
debugTokenExpression.number#60bf30ff
debugTokenExpression.string#60bf30ff
debugTokenExpression.value#60bf30ff
debugToolBar.background#60bf30ff
debugToolBar.border#75ea3acc
debugView.exceptionLabelBackground#75ea3acc
debugView.exceptionLabelForeground#000000ff
debugView.stateLabelBackground#75ea3acc
debugView.stateLabelForeground#000000ff
debugView.valueChangedHighlight#7cf83ecc
descriptionForeground#000000ff
diffEditor.border#75ea3acc
diffEditor.diagonalFill#60bf30ff
diffEditor.insertedTextBackground#60bf30ff
diffEditor.insertedTextBorder#75ea3acc
diffEditor.removedTextBackground#60bf30ff
diffEditor.removedTextBorder#75ea3acc
dropdown.background#60bf30ff
dropdown.border#75ea3acc
dropdown.foreground#000000ff
dropdown.listBackground#40bf10ff
editor.background#8fbf60ff
editor.findMatchBackground#8fbf60ff
editor.findMatchBorder#afea75cc
editor.findMatchHighlightBackground#afea75ff
editor.findMatchHighlightBorder#baf87ccc
editor.findRangeHighlightBackground#afea75ff
editor.findRangeHighlightBorder#baf87ccc
editor.focusedStackFrameHighlightBackground#baf87cff
editor.foldBackground#8fbf60ff
editor.foreground#000000ff
editor.hoverHighlightBackground#baf87cff
editor.inactiveSelectionBackground#8fbf60ff
editor.inlineValuesBackground#8fbf60ff
editor.inlineValuesForeground#000000ff
editor.lineHighlightBackground#afea75ff
editor.linkedEditingBackground#8fbf60ff
editor.rangeHighlightBackground#afea75ff
editor.rangeHighlightBorder#baf87ccc
editor.selectionBackground#afea75ff
editor.selectionForeground#090909ff
editor.selectionHighlightBackground#baf87cff
editor.selectionHighlightBorder#bdfd7ecc
editor.snippetFinalTabstopHighlightBackground#afea75ff
editor.snippetFinalTabstopHighlightBorder#baf87ccc
editor.snippetTabstopHighlightBackground#afea75ff
editor.snippetTabstopHighlightBorder#baf87ccc
editor.stackFrameHighlightBackground#afea75ff
editor.symbolHighlightBackground#baf87ccc
editor.symbolHighlightBorder#bdfd7e99
editor.wordHighlightBackground#afea75ff
editor.wordHighlightBorder#baf87ccc
editor.wordHighlightStrongBackground#afea75ff
editor.wordHighlightStrongBorder#baf87ccc
editorBracketHighlight.foreground1#000000ff
editorBracketHighlight.foreground2#000000ff
editorBracketHighlight.foreground3#000000ff
editorBracketHighlight.foreground4#000000ff
editorBracketHighlight.foreground5#000000ff
editorBracketHighlight.foreground6#000000ff
editorBracketHighlight.unexpectedBracket.foreground#7f7f7fff
editorBracketMatch.background#8fbf60ff
editorBracketMatch.border#afea75cc
editorCodeLens.foreground#000000ff
editorCursor.background#8fbf60ff
editorCursor.foreground#000000ff
editorError.background#8fbf60ff
editorError.border#afea75cc
editorError.foreground#000000ff
editorGhostText.border#afea75cc
editorGhostText.foreground#000000ff
editorGroup.border#9cea61cc
editorGroup.dropBackground#80bf50ff
editorGroup.emptyBackground#80bf50ff
editorGroup.focusedEmptyBorder#a5f867cc
editorGroupHeader.border#9cea61cc
editorGroupHeader.noTabsBackground#80bf50ff
editorGroupHeader.tabsBackground#80bf50ff
editorGroupHeader.tabsBorder#9cea61cc
editorGutter.addedBackground#9cea61ff
editorGutter.background#80bf50ff
editorGutter.commentRangeForeground#000000ff
editorGutter.deletedBackground#9cea61ff
editorGutter.foldingControlForeground#000000ff
editorGutter.modifiedBackground#9cea61ff
editorHint.border#afea75cc
editorHint.foreground#000000ff
editorHoverWidget.background#baf87ccc
editorHoverWidget.border#bdfd7e99
editorHoverWidget.foreground#191919ff
editorHoverWidget.statusBarBackground#7cf83ecc
editorIndentGuide.activeBackground#000000ff
editorIndentGuide.background#486030ff
editorInfo.background#8fbf60ff
editorInfo.border#afea75cc
editorInfo.foreground#000000ff
editorInlayHint.background#8fbf60ff
editorInlayHint.foreground#000000ff
editorLightBulb.foreground#ffffffff
editorLightBulbAutoFix.foreground#7f7f7fff
editorLineNumber.activeForeground#090909ff
editorLineNumber.foreground#000000ff
editorLink.activeForeground#090909ff
editorMarkerNavigation.background#8fbf60ff
editorMarkerNavigationError.background#8fbf60ff
editorMarkerNavigationError.headerBackground#8fbf60ff
editorMarkerNavigationInfo.background#8fbf60ff
editorMarkerNavigationInfo.headerBackground#8fbf60ff
editorMarkerNavigationWarning.background#8fbf60ff
editorMarkerNavigationWarning.headerBackground#8fbf60ff
editorOverviewRuler.addedForeground#090909ff
editorOverviewRuler.background#8fbf60ff
editorOverviewRuler.border#afea75cc
editorOverviewRuler.bracketMatchForeground#000000ff
editorOverviewRuler.commonContentForeground#000000ff
editorOverviewRuler.currentContentForeground#000000ff
editorOverviewRuler.deletedForeground#090909ff
editorOverviewRuler.errorForeground#000000ff
editorOverviewRuler.findMatchForeground#000000ff
editorOverviewRuler.incomingContentForeground#000000ff
editorOverviewRuler.infoForeground#000000ff
editorOverviewRuler.modifiedForeground#090909ff
editorOverviewRuler.rangeHighlightForeground#090909ff
editorOverviewRuler.selectionHighlightForeground#191919ff
editorOverviewRuler.warningForeground#000000ff
editorOverviewRuler.wordHighlightForeground#090909ff
editorOverviewRuler.wordHighlightStrongForeground#090909ff
editorPane.background#8fbf60ff
editorRuler.foreground#000000ff
editorSuggestWidget.background#afea75cc
editorSuggestWidget.border#baf87c99
editorSuggestWidget.focusHighlightForeground#1d1d1dff
editorSuggestWidget.foreground#090909ff
editorSuggestWidget.highlightForeground#191919ff
editorSuggestWidget.selectedBackground#baf87ccc
editorSuggestWidget.selectedForeground#191919ff
editorSuggestWidget.selectedIconForeground#191919ff
editorUnnecessaryCode.border#afea7566
editorUnnecessaryCode.opacity#8fbf6099
editorWarning.background#8fbf60ff
editorWarning.border#afea75cc
editorWarning.foreground#000000ff
editorWhitespace.foreground#789f50ff
editorWidget.background#afea75cc
editorWidget.border#baf87c99
editorWidget.foreground#090909ff
editorWidget.resizeBorder#baf87c99
errorForeground#000000ff
errorLens.errorBackground#60bf30ff
errorLens.errorBackgroundLight#60bf30ff
errorLens.errorForeground#000000ff
errorLens.errorForegroundLight#000000ff
errorLens.errorMessageBackground#60bf30ff
errorLens.hintBackground#60bf30ff
errorLens.hintBackgroundLight#60bf30ff
errorLens.hintForeground#000000ff
errorLens.hintForegroundLight#000000ff
errorLens.hintMessageBackground#60bf30ff
errorLens.infoBackground#60bf30ff
errorLens.infoBackgroundLight#60bf30ff
errorLens.infoForeground#000000ff
errorLens.infoForegroundLight#000000ff
errorLens.infoMessageBackground#60bf30ff
errorLens.statusBarErrorForeground#000000ff
errorLens.statusBarHintForeground#000000ff
errorLens.statusBarInfoForeground#000000ff
errorLens.statusBarWarningForeground#000000ff
errorLens.warningBackground#60bf30ff
errorLens.warningBackgroundLight#60bf30ff
errorLens.warningForeground#000000ff
errorLens.warningForegroundLight#000000ff
errorLens.warningMessageBackground#60bf30ff
extensionBadge.remoteBackground#75ea3acc
extensionBadge.remoteForeground#000000ff
extensionButton.prominentBackground#75ea3acc
extensionButton.prominentForeground#000000ff
extensionButton.prominentHoverBackground#7cf83ecc
extensionIcon.starForeground#000000ff
focusBorder#7cf83ecc
foreground#000000ff
gitlens.closedPullRequestIconColor#75ea3acc
gitlens.decorations.addedForegroundColor#000000ff
gitlens.decorations.branchAheadForegroundColor#000000ff
gitlens.decorations.branchBehindForegroundColor#000000ff
gitlens.decorations.branchDivergedForegroundColor#000000ff
gitlens.decorations.branchMissingUpstreamForegroundColor#000000ff
gitlens.decorations.branchUnpublishedForegroundColor#000000ff
gitlens.decorations.branchUpToDateForegroundColor#000000ff
gitlens.decorations.copiedForegroundColor#000000ff
gitlens.decorations.deletedForegroundColor#000000ff
gitlens.decorations.ignoredForegroundColor#000000ff
gitlens.decorations.modifiedForegroundColor#000000ff
gitlens.decorations.renamedForegroundColor#000000ff
gitlens.decorations.untrackedForegroundColor#000000ff
gitlens.gutterBackgroundColor#60bf30ff
gitlens.gutterForegroundColor#000000ff
gitlens.gutterUncommittedForegroundColor#000000ff
gitlens.lineHighlightBackgroundColor#75ea3aff
gitlens.lineHighlightOverviewRulerColor#75ea3aff
gitlens.mergedPullRequestIconColor#75ea3acc
gitlens.openPullRequestIconColor#75ea3acc
gitlens.trailingLineBackgroundColor#60bf30ff
gitlens.trailingLineForegroundColor#000000ff
gitlens.unpublishedCommitIconColor#75ea3acc
gitlens.unpulledChangesIconColor#75ea3acc
gitlens.unpushlishedChangesIconColor#75ea3acc
icon.foreground#000000ff
inlineTitleBar.background#60bf30ff
input.background#60bf30ff
input.border#75ea3acc
input.foreground#000000ff
input.placeholderForeground#000000ff
inputOption.activeBackground#75ea3aff
inputOption.activeBorder#7cf83ecc
inputOption.activeForeground#000000ff
inputValidation.errorBackground#60bf30ff
inputValidation.errorBorder#75ea3acc
inputValidation.errorForeground#000000ff
inputValidation.infoBackground#60bf30ff
inputValidation.infoBorder#75ea3acc
inputValidation.infoForeground#000000ff
inputValidation.warningBackground#60bf30ff
inputValidation.warningBorder#75ea3acc
inputValidation.warningForeground#000000ff
interactive.activeCodeBorder#7cf83ecc
interactive.inactiveCodeBorder#71e138cc
issues.closed#60bf30ff
issues.newIssueDecoration#60bf30ff
issues.open#60bf30ff
keybindingLabel.background#60bf30ff
keybindingLabel.border#75ea3acc
keybindingLabel.bottomBorder#75ea3acc
keybindingLabel.foreground#000000ff
lintlens.annotationColor#60bf30ff
list.activeSelectionBackground#53f815ff
list.activeSelectionForeground#090909ff
list.activeSelectionIconForeground#0f0f0fff
list.deemphasizedForeground#000000ff
list.dropBackground#40bf10ff
list.errorForeground#000000ff
list.filterMatchBackground#40bf10ff
list.filterMatchBorder#4eea13cc
list.focusBackground#4eea13ff
list.focusForeground#000000ff
list.focusHighlightForeground#090909ff
list.focusOutline#53f815cc
list.highlightForeground#000000ff
list.hoverBackground#4eea13ff
list.hoverForeground#000000ff
list.inactiveFocusBackground#4eea13ff
list.inactiveFocusOutline#53f815cc
list.inactiveSelectionBackground#4eea13ff
list.inactiveSelectionForeground#000000ff
list.inactiveSelectionIconForeground#000000ff
list.invalidItemForeground#000000ff
list.warningForeground#000000ff
listFilterWidget.background#4eea13cc
listFilterWidget.noMatchesOutline#53f81599
listFilterWidget.outline#53f81599
menu.background#60bf30ff
menu.border#75ea3acc
menu.foreground#000000ff
menu.selectionBackground#75ea3aff
menu.selectionBorder#7cf83ecc
menu.selectionForeground#000000ff
menu.separatorBackground#60bf30ff
menubar.selectionBackground#75ea3aff
menubar.selectionBorder#7cf83ecc
menubar.selectionForeground#000000ff
merge.border#75ea3acc
merge.commonContentBackground#60bf30ff
merge.commonHeaderBackground#60bf30ff
merge.currentContentBackground#60bf30ff
merge.currentHeaderBackground#60bf30ff
merge.incomingContentBackground#60bf30ff
merge.incomingHeaderBackground#60bf30ff
minimap.background#8fbf60ff
minimap.errorHighlight#afea75ff
minimap.findMatchHighlight#afea75ff
minimap.selectionHighlight#baf87cff
minimap.warningHighlight#afea75ff
minimapGutter.addedBackground#afea75ff
minimapGutter.deletedBackground#afea75ff
minimapGutter.modifiedBackground#afea75ff
minimapSlider.activeBackground#baf87c7a
minimapSlider.background#afea757a
minimapSlider.hoverBackground#baf87c7a
notebook.cellBorderColor#75ea3acc
notebook.cellEditorBackground#60bf30ff
notebook.cellHoverBackground#75ea3aff
notebook.cellInsertionIndicator#60bf30ff
notebook.cellStatusBarItemHoverBackground#75ea3aff
notebook.cellToolbarSeparator#60bf30ff
notebook.focusedCellBackground#75ea3aff
notebook.focusedCellBorder#7cf83ecc
notebook.focusedEditorBorder#7cf83ecc
notebook.inactiveFocusedCellBorder#75ea3acc
notebook.inactiveSelectedCellBorder#75ea3acc
notebook.outputContainerBackgroundColor#60bf30ff
notebook.selectedCellBackground#75ea3aff
notebook.selectedCellBorder#7cf83ecc
notebook.symbolHighlightBackground#7cf83ecc
notebookScrollbarSlider.activeBackground#7cf83e7a
notebookScrollbarSlider.background#75ea3a7a
notebookScrollbarSlider.hoverBackground#7cf83e7a
notebookStatusErrorIcon.foreground#000000ff
notebookStatusRunningIcon.foreground#000000ff
notebookStatusSuccessIcon.foreground#000000ff
notificationCenter.border#75ea3acc
notificationCenterHeader.background#60bf30ff
notificationCenterHeader.foreground#000000ff
notificationLink.foreground#000000ff
notifications.background#60bf30ff
notifications.border#75ea3acc
notifications.foreground#000000ff
notificationsErrorIcon.foreground#000000ff
notificationsInfoIcon.foreground#000000ff
notificationsWarningIcon.foreground#000000ff
notificationToast.border#75ea3acc
panel.background#50bf20ff
panel.border#61ea27cc
panel.dropBorder#61ea27cc
panelInput.border#61ea27cc
panelSection.border#61ea27cc
panelSection.dropBackground#50bf20ff
panelSectionHeader.background#50bf20ff
panelSectionHeader.border#61ea27cc
panelSectionHeader.foreground#000000ff
panelTitle.activeBorder#67f829cc
panelTitle.activeForeground#000000ff
panelTitle.inactiveForeground#000000ff
peekView.border#7cf83e99
peekViewEditor.background#75ea3acc
peekViewEditor.matchHighlightBackground#7cf83ecc
peekViewEditor.matchHighlightBorder#7efd3f99
peekViewEditorGutter.background#75ea3acc
peekViewResult.background#75ea3acc
peekViewResult.fileForeground#000000ff
peekViewResult.lineForeground#000000ff
peekViewResult.matchHighlightBackground#7cf83ecc
peekViewResult.selectionBackground#7cf83ecc
peekViewResult.selectionForeground#0f0f0fff
peekViewTitle.background#75ea3acc
peekViewTitleDescription.foreground#000000ff
peekViewTitleLabel.foreground#000000ff
pickerGroup.border#7cf83e99
pickerGroup.foreground#000000ff
ports.iconRunningProcessForeground#000000ff
problemsErrorIcon.foreground#000000ff
problemsInfoIcon.foreground#000000ff
problemsWarningIcon.foreground#000000ff
progressBar.background#60bf30ff
quickInput.background#60bf30ff
quickInput.foreground#000000ff
quickInputList.focusBackground#4eea13ff
quickInputList.focusForeground#000000ff
quickInputList.focusIconForeground#090909ff
quickInputTitle.background#60bf30ff
sash.hoverBorder#7cf83ecc
scm.providerBorder#75ea3acc
scrollbar.shadow#75ea3acc
scrollbarSlider.activeBackground#7cf83e7a
scrollbarSlider.background#75ea3a7a
scrollbarSlider.hoverBackground#7cf83e7a
searchEditor.findMatchBackground#60bf30ff
searchEditor.findMatchBorder#75ea3acc
searchEditor.textInputBorder#75ea3acc
selection.background#75ea3aff
settings.checkboxBackground#75ea3acc
settings.checkboxBorder#7cf83e99
settings.checkboxForeground#000000ff
settings.dropdownBackground#60bf30ff
settings.dropdownBorder#75ea3acc
settings.dropdownForeground#000000ff
settings.dropdownListBorder#4eea13cc
settings.focusedRowBackground#75ea3aff
settings.focusedRowBorder#7cf83ecc
settings.headerForeground#000000ff
settings.modifiedItemIndicator#75ea3aff
settings.numberInputBackground#60bf30ff
settings.numberInputBorder#75ea3acc
settings.numberInputForeground#000000ff
settings.rowHoverBackground#75ea3aff
settings.textInputBackground#60bf30ff
settings.textInputBorder#75ea3acc
settings.textInputForeground#000000ff
sideBar.background#40bf10ff
sideBar.border#4eea13cc
sideBar.dropBackground#40bf10ff
sideBar.foreground#000000ff
sideBarSectionHeader.background#40bf10ff
sideBarSectionHeader.border#4eea13cc
sideBarSectionHeader.foreground#000000ff
sideBarTitle.foreground#000000ff
statusBar.background#60bf30ff
statusBar.border#75ea3acc
statusBar.debuggingBackground#60bf30ff
statusBar.debuggingBorder#75ea3acc
statusBar.debuggingForeground#000000ff
statusBar.foreground#000000ff
statusBar.noFolderBackground#60bf30ff
statusBar.noFolderBorder#75ea3acc
statusBar.noFolderForeground#000000ff
statusBarItem.activeBackground#75ea3aff
statusBarItem.errorBackground#60bf30ff
statusBarItem.errorForeground#000000ff
statusBarItem.hoverBackground#75ea3aff
statusBarItem.prominentBackground#60bf30ff
statusBarItem.prominentForeground#000000ff
statusBarItem.prominentHoverBackground#75ea3aff
statusBarItem.remoteBackground#60bf30ff
statusBarItem.remoteForeground#000000ff
statusBarItem.warningBackground#60bf30ff
statusBarItem.warningForeground#000000ff
symbolIcon.arrayForeground#000000ff
symbolIcon.booleanForeground#000000ff
symbolIcon.classForeground#000000ff
symbolIcon.colorForeground#000000ff
symbolIcon.constantForeground#000000ff
symbolIcon.constructorForeground#000000ff
symbolIcon.enumeratorForeground#000000ff
symbolIcon.enumeratorMemberForeground#000000ff
symbolIcon.eventForeground#000000ff
symbolIcon.fieldForeground#000000ff
symbolIcon.fileForeground#000000ff
symbolIcon.folderForeground#000000ff
symbolIcon.functionForeground#000000ff
symbolIcon.interfaceForeground#000000ff
symbolIcon.keyForeground#000000ff
symbolIcon.keywordForeground#000000ff
symbolIcon.methodForeground#000000ff
symbolIcon.moduleForeground#000000ff
symbolIcon.namespaceForeground#000000ff
symbolIcon.nullForeground#000000ff
symbolIcon.numberForeground#000000ff
symbolIcon.objectForeground#000000ff
symbolIcon.operatorForeground#000000ff
symbolIcon.packageForeground#000000ff
symbolIcon.propertyForeground#000000ff
symbolIcon.referenceForeground#000000ff
symbolIcon.snippetForeground#000000ff
symbolIcon.stringForeground#000000ff
symbolIcon.structForeground#000000ff
symbolIcon.textForeground#000000ff
symbolIcon.typeParameterForeground#000000ff
symbolIcon.unitForeground#000000ff
symbolIcon.variableForeground#000000ff
tab.activeBackground#88ea4eff
tab.activeBorder#91f853cc
tab.activeBorderTop#91f853cc
tab.activeForeground#000000ff
tab.activeModifiedBorder#93fd54cc
tab.border#88ea4ecc
tab.hoverBackground#88ea4eff
tab.hoverBorder#91f853cc
tab.hoverForeground#000000ff
tab.inactiveBackground#70bf40ff
tab.inactiveForeground#000000ff
tab.inactiveModifiedBorder#88ea4ecc
tab.lastPinnedBorder#88ea4ecc
tab.unfocusedActiveBackground#88ea4eff
tab.unfocusedActiveBorder#91f853cc
tab.unfocusedActiveBorderTop#91f853cc
tab.unfocusedActiveForeground#000000ff
tab.unfocusedActiveModifiedBorder#93fd54cc
tab.unfocusedHoverBackground#88ea4eff
tab.unfocusedHoverBorder#91f853cc
tab.unfocusedHoverForeground#000000ff
tab.unfocusedInactiveBackground#61a637ff
tab.unfocusedInactiveForeground#000000ff
tab.unfocusedInactiveModifiedBorder#88ea4ecc
testing.iconErrored#75ea3acc
testing.iconFailed#75ea3acc
testing.iconPassed#75ea3acc
testing.iconQueued#75ea3acc
testing.iconSkipped#75ea3acc
testing.iconUnset#75ea3acc
testing.message.error.decorationForeground#000000ff
testing.message.error.lineBackground#60bf30ff
testing.message.info.decorationForeground#000000ff
testing.message.info.lineBackground#60bf30ff
testing.peekBorder#75ea3acc
testing.peekHeaderBackground#60bf30ff
testing.runAction#60bf30ff
textBlockQuote.background#60bf30ff
textBlockQuote.border#75ea3acc
textCodeBlock.background#60bf30ff
textLink.activeForeground#000000ff
textLink.foreground#000000ff
textPreformat.foreground#000000ff
textSeparator.foreground#000000ff
titleBar.activeBackground#75ea3aff
titleBar.activeForeground#000000ff
titleBar.border#75ea3acc
titleBar.inactiveBackground#53a629ff
titleBar.inactiveForeground#000000ff
toolbar.activeBackground#75ea3aff
toolbar.hoverBackground#75ea3aff
toolbar.hoverOutline#7cf83ecc
tree.indentGuidesStroke#53f815ff
tree.tableColumnsBorder#4eea13cc
walkThrough.embeddedEditorBackground#60bf30ff
welcomePage.background#60bf30ff
welcomePage.buttonBackground#75ea3acc
welcomePage.buttonHoverBackground#7cf83ecc
welcomePage.progress.background#60bf30ff
welcomePage.progress.foreground#000000ff
welcomePage.tileBackground#60bf30ff
welcomePage.tileHoverBackground#75ea3aff
welcomePage.tileShadow.#75ea3acc
widget.shadow#7cf83e99
window.activeBorder#7cf83ecc
window.inactiveBorder#71e138cc
workspace.hiddenColor#60bf3099

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.tag.jsx support.class.component.open.jsx	#000000ff	bold
meta.tag.jsx support.class.component.close.jsx	#000000ff	bold
meta.tag.jsx entity.other.attribute-name.jsx	#000000ff	italic
variable.other.constant , variable.other.dollar , variable.other.readwrite	#000000ff	bold
entity	#000000ff	bold
support	#000000ff	bold
variable	#000000ff	bold
keyword.operator	#000000ff
constant	#000000ff
string	#000000ff
keyword	#000000ff
meta	#000000ff
punctuation	#000000ff
storage	#000000ff
comment	#608040ff
source	#789f50ff

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