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 R 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#003aeaff
activityBar.activeBorder#003ef8cc
activityBar.activeFocusBorder#003ffdcc
activityBar.background#0030bfff
activityBar.border#003aeacc
activityBar.dropBorder#003aeacc
activityBar.foreground#ffffffff
activityBar.inactiveForeground#ffffffff
activityBarBadge.background#003aeacc
activityBarBadge.foreground#ffffffff
badge.background#3a75eacc
badge.foreground#000000ff
banner.background#3060bfff
banner.foreground#ffffffff
banner.iconForeground#000000ff
bookmarks.lineBackground#3060bfff
bookmarks.lineBorder#3a75eacc
bookmarks.overviewRuler#3060bfff
breadcrumb.activeSelectionForeground#000000ff
breadcrumb.background#5080bfff
breadcrumb.focusForeground#000000ff
breadcrumb.foreground#000000ff
breadcrumbPicker.background#619ceacc
button.background#3a75eacc
button.border#3e7cf899
button.foreground#000000ff
button.hoverBackground#3e7cf8cc
button.secondaryBackground#3a75eacc
button.secondaryForeground#000000ff
button.secondaryHoverBackground#3e7cf8cc
charts.blue#3060bfff
charts.foreground#ffffffff
charts.green#3060bfff
charts.lines#3060bfff
charts.orange#3060bfff
charts.purple#3060bfff
charts.red#3060bfff
charts.yellow#3060bfff
checkbox.background#3a75eacc
checkbox.border#3e7cf899
checkbox.foreground#000000ff
debugConsole.errorForeground#ffffffff
debugConsole.infoForeground#ffffffff
debugConsole.sourceForeground#ffffffff
debugConsole.warningForeground#ffffffff
debugConsoleInputIcon.foreground#000000ff
debugExceptionWidget.background#3a75eacc
debugExceptionWidget.border#3e7cf899
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#3060bfff
debugTokenExpression.error#3060bfff
debugTokenExpression.name#3060bfff
debugTokenExpression.number#3060bfff
debugTokenExpression.string#3060bfff
debugTokenExpression.value#3060bfff
debugToolBar.background#3060bfff
debugToolBar.border#3a75eacc
debugView.exceptionLabelBackground#3a75eacc
debugView.exceptionLabelForeground#000000ff
debugView.stateLabelBackground#3a75eacc
debugView.stateLabelForeground#000000ff
debugView.valueChangedHighlight#3e7cf8cc
descriptionForeground#ffffffff
diffEditor.border#3a75eacc
diffEditor.diagonalFill#3060bfff
diffEditor.insertedTextBackground#3060bfff
diffEditor.insertedTextBorder#3a75eacc
diffEditor.removedTextBackground#3060bfff
diffEditor.removedTextBorder#3a75eacc
dropdown.background#3060bfff
dropdown.border#3a75eacc
dropdown.foreground#ffffffff
dropdown.listBackground#1040bfff
editor.background#608fbfff
editor.findMatchBackground#608fbfff
editor.findMatchBorder#75afeacc
editor.findMatchHighlightBackground#75afeaff
editor.findMatchHighlightBorder#7cbaf8cc
editor.findRangeHighlightBackground#75afeaff
editor.findRangeHighlightBorder#7cbaf8cc
editor.focusedStackFrameHighlightBackground#7cbaf8ff
editor.foldBackground#608fbfff
editor.foreground#000000ff
editor.hoverHighlightBackground#7cbaf8ff
editor.inactiveSelectionBackground#608fbfff
editor.inlineValuesBackground#608fbfff
editor.inlineValuesForeground#000000ff
editor.lineHighlightBackground#75afeaff
editor.linkedEditingBackground#608fbfff
editor.rangeHighlightBackground#75afeaff
editor.rangeHighlightBorder#7cbaf8cc
editor.selectionBackground#75afeaff
editor.selectionForeground#000000ff
editor.selectionHighlightBackground#7cbaf8ff
editor.selectionHighlightBorder#7ebdfdcc
editor.snippetFinalTabstopHighlightBackground#75afeaff
editor.snippetFinalTabstopHighlightBorder#7cbaf8cc
editor.snippetTabstopHighlightBackground#75afeaff
editor.snippetTabstopHighlightBorder#7cbaf8cc
editor.stackFrameHighlightBackground#75afeaff
editor.symbolHighlightBackground#7cbaf8cc
editor.symbolHighlightBorder#7ebdfd99
editor.wordHighlightBackground#75afeaff
editor.wordHighlightBorder#7cbaf8cc
editor.wordHighlightStrongBackground#75afeaff
editor.wordHighlightStrongBorder#7cbaf8cc
editorBracketHighlight.foreground1#000000ff
editorBracketHighlight.foreground2#000000ff
editorBracketHighlight.foreground3#000000ff
editorBracketHighlight.foreground4#000000ff
editorBracketHighlight.foreground5#000000ff
editorBracketHighlight.foreground6#000000ff
editorBracketHighlight.unexpectedBracket.foreground#7f7f7fff
editorBracketMatch.background#608fbfff
editorBracketMatch.border#75afeacc
editorCodeLens.foreground#000000ff
editorCursor.background#608fbfff
editorCursor.foreground#000000ff
editorError.background#608fbfff
editorError.border#75afeacc
editorError.foreground#000000ff
editorGhostText.border#75afeacc
editorGhostText.foreground#000000ff
editorGroup.border#619ceacc
editorGroup.dropBackground#5080bfff
editorGroup.emptyBackground#5080bfff
editorGroup.focusedEmptyBorder#67a5f8cc
editorGroupHeader.border#619ceacc
editorGroupHeader.noTabsBackground#5080bfff
editorGroupHeader.tabsBackground#5080bfff
editorGroupHeader.tabsBorder#619ceacc
editorGutter.addedBackground#619ceaff
editorGutter.background#5080bfff
editorGutter.commentRangeForeground#000000ff
editorGutter.deletedBackground#619ceaff
editorGutter.foldingControlForeground#000000ff
editorGutter.modifiedBackground#619ceaff
editorHint.border#75afeacc
editorHint.foreground#000000ff
editorHoverWidget.background#7cbaf8cc
editorHoverWidget.border#7ebdfd99
editorHoverWidget.foreground#000000ff
editorHoverWidget.statusBarBackground#3e7cf8cc
editorIndentGuide.activeBackground#000000ff
editorIndentGuide.background#304860ff
editorInfo.background#608fbfff
editorInfo.border#75afeacc
editorInfo.foreground#000000ff
editorInlayHint.background#608fbfff
editorInlayHint.foreground#000000ff
editorLightBulb.foreground#ffffffff
editorLightBulbAutoFix.foreground#7f7f7fff
editorLineNumber.activeForeground#000000ff
editorLineNumber.foreground#000000ff
editorLink.activeForeground#000000ff
editorMarkerNavigation.background#608fbfff
editorMarkerNavigationError.background#608fbfff
editorMarkerNavigationError.headerBackground#608fbfff
editorMarkerNavigationInfo.background#608fbfff
editorMarkerNavigationInfo.headerBackground#608fbfff
editorMarkerNavigationWarning.background#608fbfff
editorMarkerNavigationWarning.headerBackground#608fbfff
editorOverviewRuler.addedForeground#000000ff
editorOverviewRuler.background#608fbfff
editorOverviewRuler.border#75afeacc
editorOverviewRuler.bracketMatchForeground#000000ff
editorOverviewRuler.commonContentForeground#000000ff
editorOverviewRuler.currentContentForeground#000000ff
editorOverviewRuler.deletedForeground#000000ff
editorOverviewRuler.errorForeground#000000ff
editorOverviewRuler.findMatchForeground#000000ff
editorOverviewRuler.incomingContentForeground#000000ff
editorOverviewRuler.infoForeground#000000ff
editorOverviewRuler.modifiedForeground#000000ff
editorOverviewRuler.rangeHighlightForeground#000000ff
editorOverviewRuler.selectionHighlightForeground#000000ff
editorOverviewRuler.warningForeground#000000ff
editorOverviewRuler.wordHighlightForeground#000000ff
editorOverviewRuler.wordHighlightStrongForeground#000000ff
editorPane.background#608fbfff
editorRuler.foreground#000000ff
editorSuggestWidget.background#75afeacc
editorSuggestWidget.border#7cbaf899
editorSuggestWidget.focusHighlightForeground#000000ff
editorSuggestWidget.foreground#000000ff
editorSuggestWidget.highlightForeground#000000ff
editorSuggestWidget.selectedBackground#7cbaf8cc
editorSuggestWidget.selectedForeground#000000ff
editorSuggestWidget.selectedIconForeground#000000ff
editorUnnecessaryCode.border#75afea66
editorUnnecessaryCode.opacity#608fbf99
editorWarning.background#608fbfff
editorWarning.border#75afeacc
editorWarning.foreground#000000ff
editorWhitespace.foreground#50789fff
editorWidget.background#75afeacc
editorWidget.border#7cbaf899
editorWidget.foreground#000000ff
editorWidget.resizeBorder#7cbaf899
errorForeground#ffffffff
errorLens.errorBackground#3060bfff
errorLens.errorBackgroundLight#3060bfff
errorLens.errorForeground#ffffffff
errorLens.errorForegroundLight#ffffffff
errorLens.errorMessageBackground#3060bfff
errorLens.hintBackground#3060bfff
errorLens.hintBackgroundLight#3060bfff
errorLens.hintForeground#ffffffff
errorLens.hintForegroundLight#ffffffff
errorLens.hintMessageBackground#3060bfff
errorLens.infoBackground#3060bfff
errorLens.infoBackgroundLight#3060bfff
errorLens.infoForeground#ffffffff
errorLens.infoForegroundLight#ffffffff
errorLens.infoMessageBackground#3060bfff
errorLens.statusBarErrorForeground#ffffffff
errorLens.statusBarHintForeground#ffffffff
errorLens.statusBarInfoForeground#ffffffff
errorLens.statusBarWarningForeground#ffffffff
errorLens.warningBackground#3060bfff
errorLens.warningBackgroundLight#3060bfff
errorLens.warningForeground#ffffffff
errorLens.warningForegroundLight#ffffffff
errorLens.warningMessageBackground#3060bfff
extensionBadge.remoteBackground#3a75eacc
extensionBadge.remoteForeground#000000ff
extensionButton.prominentBackground#3a75eacc
extensionButton.prominentForeground#000000ff
extensionButton.prominentHoverBackground#3e7cf8cc
extensionIcon.starForeground#000000ff
focusBorder#3e7cf8cc
foreground#ffffffff
gitlens.closedPullRequestIconColor#3a75eacc
gitlens.decorations.addedForegroundColor#000000ff
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#000000ff
gitlens.decorations.ignoredForegroundColor#ffffffff
gitlens.decorations.modifiedForegroundColor#000000ff
gitlens.decorations.renamedForegroundColor#ffffffff
gitlens.decorations.untrackedForegroundColor#ffffffff
gitlens.gutterBackgroundColor#3060bfff
gitlens.gutterForegroundColor#ffffffff
gitlens.gutterUncommittedForegroundColor#ffffffff
gitlens.lineHighlightBackgroundColor#3a75eaff
gitlens.lineHighlightOverviewRulerColor#3a75eaff
gitlens.mergedPullRequestIconColor#3a75eacc
gitlens.openPullRequestIconColor#3a75eacc
gitlens.trailingLineBackgroundColor#3060bfff
gitlens.trailingLineForegroundColor#ffffffff
gitlens.unpublishedCommitIconColor#3a75eacc
gitlens.unpulledChangesIconColor#3a75eacc
gitlens.unpushlishedChangesIconColor#3a75eacc
icon.foreground#000000ff
inlineTitleBar.background#3060bfff
input.background#3060bfff
input.border#3a75eacc
input.foreground#ffffffff
input.placeholderForeground#ffffffff
inputOption.activeBackground#3a75eaff
inputOption.activeBorder#3e7cf8cc
inputOption.activeForeground#000000ff
inputValidation.errorBackground#3060bfff
inputValidation.errorBorder#3a75eacc
inputValidation.errorForeground#ffffffff
inputValidation.infoBackground#3060bfff
inputValidation.infoBorder#3a75eacc
inputValidation.infoForeground#ffffffff
inputValidation.warningBackground#3060bfff
inputValidation.warningBorder#3a75eacc
inputValidation.warningForeground#ffffffff
interactive.activeCodeBorder#3e7cf8cc
interactive.inactiveCodeBorder#3871e1cc
issues.closed#3060bfff
issues.newIssueDecoration#3060bfff
issues.open#3060bfff
keybindingLabel.background#3060bfff
keybindingLabel.border#3a75eacc
keybindingLabel.bottomBorder#3a75eacc
keybindingLabel.foreground#ffffffff
lintlens.annotationColor#3060bfff
list.activeSelectionBackground#1553f8ff
list.activeSelectionForeground#ffffffff
list.activeSelectionIconForeground#ffffffff
list.deemphasizedForeground#ffffffff
list.dropBackground#1040bfff
list.errorForeground#ffffffff
list.filterMatchBackground#1040bfff
list.filterMatchBorder#134eeacc
list.focusBackground#134eeaff
list.focusForeground#ffffffff
list.focusHighlightForeground#ffffffff
list.focusOutline#1553f8cc
list.highlightForeground#ffffffff
list.hoverBackground#134eeaff
list.hoverForeground#ffffffff
list.inactiveFocusBackground#134eeaff
list.inactiveFocusOutline#1553f8cc
list.inactiveSelectionBackground#134eeaff
list.inactiveSelectionForeground#ffffffff
list.inactiveSelectionIconForeground#ffffffff
list.invalidItemForeground#ffffffff
list.warningForeground#ffffffff
listFilterWidget.background#134eeacc
listFilterWidget.noMatchesOutline#1553f899
listFilterWidget.outline#1553f899
menu.background#3060bfff
menu.border#3a75eacc
menu.foreground#ffffffff
menu.selectionBackground#3a75eaff
menu.selectionBorder#3e7cf8cc
menu.selectionForeground#000000ff
menu.separatorBackground#3060bfff
menubar.selectionBackground#3a75eaff
menubar.selectionBorder#3e7cf8cc
menubar.selectionForeground#000000ff
merge.border#3a75eacc
merge.commonContentBackground#3060bfff
merge.commonHeaderBackground#3060bfff
merge.currentContentBackground#3060bfff
merge.currentHeaderBackground#3060bfff
merge.incomingContentBackground#3060bfff
merge.incomingHeaderBackground#3060bfff
minimap.background#608fbfff
minimap.errorHighlight#75afeaff
minimap.findMatchHighlight#75afeaff
minimap.selectionHighlight#7cbaf8ff
minimap.warningHighlight#75afeaff
minimapGutter.addedBackground#75afeaff
minimapGutter.deletedBackground#75afeaff
minimapGutter.modifiedBackground#75afeaff
minimapSlider.activeBackground#7cbaf87a
minimapSlider.background#75afea7a
minimapSlider.hoverBackground#7cbaf87a
notebook.cellBorderColor#3a75eacc
notebook.cellEditorBackground#3060bfff
notebook.cellHoverBackground#3a75eaff
notebook.cellInsertionIndicator#3060bfff
notebook.cellStatusBarItemHoverBackground#3a75eaff
notebook.cellToolbarSeparator#3060bfff
notebook.focusedCellBackground#3a75eaff
notebook.focusedCellBorder#3e7cf8cc
notebook.focusedEditorBorder#3e7cf8cc
notebook.inactiveFocusedCellBorder#3a75eacc
notebook.inactiveSelectedCellBorder#3a75eacc
notebook.outputContainerBackgroundColor#3060bfff
notebook.selectedCellBackground#3a75eaff
notebook.selectedCellBorder#3e7cf8cc
notebook.symbolHighlightBackground#3e7cf8cc
notebookScrollbarSlider.activeBackground#3e7cf87a
notebookScrollbarSlider.background#3a75ea7a
notebookScrollbarSlider.hoverBackground#3e7cf87a
notebookStatusErrorIcon.foreground#000000ff
notebookStatusRunningIcon.foreground#000000ff
notebookStatusSuccessIcon.foreground#000000ff
notificationCenter.border#3a75eacc
notificationCenterHeader.background#3060bfff
notificationCenterHeader.foreground#ffffffff
notificationLink.foreground#ffffffff
notifications.background#3060bfff
notifications.border#3a75eacc
notifications.foreground#ffffffff
notificationsErrorIcon.foreground#000000ff
notificationsInfoIcon.foreground#000000ff
notificationsWarningIcon.foreground#000000ff
notificationToast.border#3a75eacc
panel.background#2050bfff
panel.border#2761eacc
panel.dropBorder#2761eacc
panelInput.border#2761eacc
panelSection.border#2761eacc
panelSection.dropBackground#2050bfff
panelSectionHeader.background#2050bfff
panelSectionHeader.border#2761eacc
panelSectionHeader.foreground#ffffffff
panelTitle.activeBorder#2967f8cc
panelTitle.activeForeground#ffffffff
panelTitle.inactiveForeground#ffffffff
peekView.border#3e7cf899
peekViewEditor.background#3a75eacc
peekViewEditor.matchHighlightBackground#3e7cf8cc
peekViewEditor.matchHighlightBorder#3f7efd99
peekViewEditorGutter.background#3a75eacc
peekViewResult.background#3a75eacc
peekViewResult.fileForeground#000000ff
peekViewResult.lineForeground#000000ff
peekViewResult.matchHighlightBackground#3e7cf8cc
peekViewResult.selectionBackground#3e7cf8cc
peekViewResult.selectionForeground#000000ff
peekViewTitle.background#3a75eacc
peekViewTitleDescription.foreground#000000ff
peekViewTitleLabel.foreground#000000ff
pickerGroup.border#3e7cf899
pickerGroup.foreground#000000ff
ports.iconRunningProcessForeground#000000ff
problemsErrorIcon.foreground#000000ff
problemsInfoIcon.foreground#000000ff
problemsWarningIcon.foreground#000000ff
progressBar.background#3060bfff
quickInput.background#3060bfff
quickInput.foreground#ffffffff
quickInputList.focusBackground#134eeaff
quickInputList.focusForeground#ffffffff
quickInputList.focusIconForeground#ffffffff
quickInputTitle.background#3060bfff
sash.hoverBorder#3e7cf8cc
scm.providerBorder#3a75eacc
scrollbar.shadow#3a75eacc
scrollbarSlider.activeBackground#3e7cf87a
scrollbarSlider.background#3a75ea7a
scrollbarSlider.hoverBackground#3e7cf87a
searchEditor.findMatchBackground#3060bfff
searchEditor.findMatchBorder#3a75eacc
searchEditor.textInputBorder#3a75eacc
selection.background#3a75eaff
settings.checkboxBackground#3a75eacc
settings.checkboxBorder#3e7cf899
settings.checkboxForeground#000000ff
settings.dropdownBackground#3060bfff
settings.dropdownBorder#3a75eacc
settings.dropdownForeground#ffffffff
settings.dropdownListBorder#134eeacc
settings.focusedRowBackground#3a75eaff
settings.focusedRowBorder#3e7cf8cc
settings.headerForeground#ffffffff
settings.modifiedItemIndicator#3a75eaff
settings.numberInputBackground#3060bfff
settings.numberInputBorder#3a75eacc
settings.numberInputForeground#ffffffff
settings.rowHoverBackground#3a75eaff
settings.textInputBackground#3060bfff
settings.textInputBorder#3a75eacc
settings.textInputForeground#ffffffff
sideBar.background#1040bfff
sideBar.border#134eeacc
sideBar.dropBackground#1040bfff
sideBar.foreground#ffffffff
sideBarSectionHeader.background#1040bfff
sideBarSectionHeader.border#134eeacc
sideBarSectionHeader.foreground#ffffffff
sideBarTitle.foreground#ffffffff
statusBar.background#3060bfff
statusBar.border#3a75eacc
statusBar.debuggingBackground#3060bfff
statusBar.debuggingBorder#3a75eacc
statusBar.debuggingForeground#ffffffff
statusBar.foreground#ffffffff
statusBar.noFolderBackground#3060bfff
statusBar.noFolderBorder#3a75eacc
statusBar.noFolderForeground#ffffffff
statusBarItem.activeBackground#3a75eaff
statusBarItem.errorBackground#3060bfff
statusBarItem.errorForeground#ffffffff
statusBarItem.hoverBackground#3a75eaff
statusBarItem.prominentBackground#3060bfff
statusBarItem.prominentForeground#ffffffff
statusBarItem.prominentHoverBackground#3a75eaff
statusBarItem.remoteBackground#3060bfff
statusBarItem.remoteForeground#ffffffff
statusBarItem.warningBackground#3060bfff
statusBarItem.warningForeground#ffffffff
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#4e88eaff
tab.activeBorder#5391f8cc
tab.activeBorderTop#5391f8cc
tab.activeForeground#000000ff
tab.activeModifiedBorder#5493fdcc
tab.border#4e88eacc
tab.hoverBackground#4e88eaff
tab.hoverBorder#5391f8cc
tab.hoverForeground#000000ff
tab.inactiveBackground#4070bfff
tab.inactiveForeground#ffffffff
tab.inactiveModifiedBorder#4e88eacc
tab.lastPinnedBorder#4e88eacc
tab.unfocusedActiveBackground#4e88eaff
tab.unfocusedActiveBorder#5391f8cc
tab.unfocusedActiveBorderTop#5391f8cc
tab.unfocusedActiveForeground#000000ff
tab.unfocusedActiveModifiedBorder#5493fdcc
tab.unfocusedHoverBackground#4e88eaff
tab.unfocusedHoverBorder#5391f8cc
tab.unfocusedHoverForeground#000000ff
tab.unfocusedInactiveBackground#3761a6ff
tab.unfocusedInactiveForeground#ffffffff
tab.unfocusedInactiveModifiedBorder#4e88eacc
testing.iconErrored#3a75eacc
testing.iconFailed#3a75eacc
testing.iconPassed#3a75eacc
testing.iconQueued#3a75eacc
testing.iconSkipped#3a75eacc
testing.iconUnset#3a75eacc
testing.message.error.decorationForeground#ffffffff
testing.message.error.lineBackground#3060bfff
testing.message.info.decorationForeground#ffffffff
testing.message.info.lineBackground#3060bfff
testing.peekBorder#3a75eacc
testing.peekHeaderBackground#3060bfff
testing.runAction#3060bfff
textBlockQuote.background#3060bfff
textBlockQuote.border#3a75eacc
textCodeBlock.background#3060bfff
textLink.activeForeground#000000ff
textLink.foreground#ffffffff
textPreformat.foreground#ffffffff
textSeparator.foreground#ffffffff
titleBar.activeBackground#3a75eaff
titleBar.activeForeground#000000ff
titleBar.border#3a75eacc
titleBar.inactiveBackground#2953a6ff
titleBar.inactiveForeground#ffffffff
toolbar.activeBackground#3a75eaff
toolbar.hoverBackground#3a75eaff
toolbar.hoverOutline#3e7cf8cc
tree.indentGuidesStroke#1553f8ff
tree.tableColumnsBorder#134eeacc
walkThrough.embeddedEditorBackground#3060bfff
welcomePage.background#3060bfff
welcomePage.buttonBackground#3a75eacc
welcomePage.buttonHoverBackground#3e7cf8cc
welcomePage.progress.background#3060bfff
welcomePage.progress.foreground#ffffffff
welcomePage.tileBackground#3060bfff
welcomePage.tileHoverBackground#3a75eaff
welcomePage.tileShadow.#3a75eacc
widget.shadow#3e7cf899
window.activeBorder#3e7cf8cc
window.inactiveBorder#3871e1cc
workspace.hiddenColor#3060bf99

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	#406080ff
source	#50789fff

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