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 E 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#75afeaff
activityBar.activeBorder#7cbaf8cc
activityBar.activeFocusBorder#7ebdfdcc
activityBar.background#608fbfff
activityBar.border#75afeacc
activityBar.dropBorder#75afeacc
activityBar.foreground#000000ff
activityBar.inactiveForeground#000000ff
activityBarBadge.background#75afeacc
activityBarBadge.foreground#000000ff
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#ffffffff
breadcrumb.background#1040bfff
breadcrumb.focusForeground#ffffffff
breadcrumb.foreground#ffffffff
breadcrumbPicker.background#134eeacc
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#5080bfff
editor.background#0030bfff
editor.findMatchBackground#0030bfff
editor.findMatchBorder#003aeacc
editor.findMatchHighlightBackground#003aeaff
editor.findMatchHighlightBorder#003ef8cc
editor.findRangeHighlightBackground#003aeaff
editor.findRangeHighlightBorder#003ef8cc
editor.focusedStackFrameHighlightBackground#003ef8ff
editor.foldBackground#0030bfff
editor.foreground#ffffffff
editor.hoverHighlightBackground#003ef8ff
editor.inactiveSelectionBackground#0030bfff
editor.inlineValuesBackground#0030bfff
editor.inlineValuesForeground#ffffffff
editor.lineHighlightBackground#003aeaff
editor.linkedEditingBackground#0030bfff
editor.rangeHighlightBackground#003aeaff
editor.rangeHighlightBorder#003ef8cc
editor.selectionBackground#003aeaff
editor.selectionForeground#ffffffff
editor.selectionHighlightBackground#003ef8ff
editor.selectionHighlightBorder#003ffdcc
editor.snippetFinalTabstopHighlightBackground#003aeaff
editor.snippetFinalTabstopHighlightBorder#003ef8cc
editor.snippetTabstopHighlightBackground#003aeaff
editor.snippetTabstopHighlightBorder#003ef8cc
editor.stackFrameHighlightBackground#003aeaff
editor.symbolHighlightBackground#003ef8cc
editor.symbolHighlightBorder#003ffd99
editor.wordHighlightBackground#003aeaff
editor.wordHighlightBorder#003ef8cc
editor.wordHighlightStrongBackground#003aeaff
editor.wordHighlightStrongBorder#003ef8cc
editorBracketHighlight.foreground1#0040ffff
editorBracketHighlight.foreground2#0040ffff
editorBracketHighlight.foreground3#0040ffff
editorBracketHighlight.foreground4#0040ffff
editorBracketHighlight.foreground5#0040ffff
editorBracketHighlight.foreground6#0040ffff
editorBracketHighlight.unexpectedBracket.foreground#7f7f7fff
editorBracketMatch.background#0030bfff
editorBracketMatch.border#003aeacc
editorCodeLens.foreground#ffffffff
editorCursor.background#0030bfff
editorCursor.foreground#ffffffff
editorError.background#0030bfff
editorError.border#003aeacc
editorError.foreground#ffffffff
editorGhostText.border#003aeacc
editorGhostText.foreground#ffffffff
editorGroup.border#134eeacc
editorGroup.dropBackground#1040bfff
editorGroup.emptyBackground#1040bfff
editorGroup.focusedEmptyBorder#1553f8cc
editorGroupHeader.border#134eeacc
editorGroupHeader.noTabsBackground#1040bfff
editorGroupHeader.tabsBackground#1040bfff
editorGroupHeader.tabsBorder#134eeacc
editorGutter.addedBackground#134eeaff
editorGutter.background#1040bfff
editorGutter.commentRangeForeground#ffffffff
editorGutter.deletedBackground#134eeaff
editorGutter.foldingControlForeground#ffffffff
editorGutter.modifiedBackground#134eeaff
editorHint.border#003aeacc
editorHint.foreground#ffffffff
editorHoverWidget.background#003ef8cc
editorHoverWidget.border#003ffd99
editorHoverWidget.foreground#ffffffff
editorHoverWidget.statusBarBackground#3e7cf8cc
editorIndentGuide.activeBackground#0040ffff
editorIndentGuide.background#0038dfff
editorInfo.background#0030bfff
editorInfo.border#003aeacc
editorInfo.foreground#ffffffff
editorInlayHint.background#0030bfff
editorInlayHint.foreground#ffffffff
editorLightBulb.foreground#ffffffff
editorLightBulbAutoFix.foreground#7f7f7fff
editorLineNumber.activeForeground#ffffffff
editorLineNumber.foreground#ffffffff
editorLink.activeForeground#ffffffff
editorMarkerNavigation.background#0030bfff
editorMarkerNavigationError.background#0030bfff
editorMarkerNavigationError.headerBackground#0030bfff
editorMarkerNavigationInfo.background#0030bfff
editorMarkerNavigationInfo.headerBackground#0030bfff
editorMarkerNavigationWarning.background#0030bfff
editorMarkerNavigationWarning.headerBackground#0030bfff
editorOverviewRuler.addedForeground#ffffffff
editorOverviewRuler.background#0030bfff
editorOverviewRuler.border#003aeacc
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#0030bfff
editorRuler.foreground#ffffffff
editorSuggestWidget.background#003aeacc
editorSuggestWidget.border#003ef899
editorSuggestWidget.focusHighlightForeground#ffffffff
editorSuggestWidget.foreground#ffffffff
editorSuggestWidget.highlightForeground#ffffffff
editorSuggestWidget.selectedBackground#003ef8cc
editorSuggestWidget.selectedForeground#ffffffff
editorSuggestWidget.selectedIconForeground#ffffffff
editorUnnecessaryCode.border#003aea66
editorUnnecessaryCode.opacity#0030bf99
editorWarning.background#0030bfff
editorWarning.border#003aeacc
editorWarning.foreground#ffffffff
editorWhitespace.foreground#0032caff
editorWidget.background#003aeacc
editorWidget.border#003ef899
editorWidget.foreground#ffffffff
editorWidget.resizeBorder#003ef899
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#67a5f8ff
list.activeSelectionForeground#000000ff
list.activeSelectionIconForeground#000000ff
list.deemphasizedForeground#000000ff
list.dropBackground#5080bfff
list.errorForeground#000000ff
list.filterMatchBackground#5080bfff
list.filterMatchBorder#619ceacc
list.focusBackground#619ceaff
list.focusForeground#000000ff
list.focusHighlightForeground#000000ff
list.focusOutline#67a5f8cc
list.highlightForeground#000000ff
list.hoverBackground#619ceaff
list.hoverForeground#000000ff
list.inactiveFocusBackground#619ceaff
list.inactiveFocusOutline#67a5f8cc
list.inactiveSelectionBackground#619ceaff
list.inactiveSelectionForeground#000000ff
list.inactiveSelectionIconForeground#000000ff
list.invalidItemForeground#000000ff
list.warningForeground#000000ff
listFilterWidget.background#619ceacc
listFilterWidget.noMatchesOutline#67a5f899
listFilterWidget.outline#67a5f899
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#0030bfff
minimap.errorHighlight#003aeaff
minimap.findMatchHighlight#003aeaff
minimap.selectionHighlight#003ef8ff
minimap.warningHighlight#003aeaff
minimapGutter.addedBackground#003aeaff
minimapGutter.deletedBackground#003aeaff
minimapGutter.modifiedBackground#003aeaff
minimapSlider.activeBackground#003ef87a
minimapSlider.background#003aea7a
minimapSlider.hoverBackground#003ef87a
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#4070bfff
panel.border#4e88eacc
panel.dropBorder#4e88eacc
panelInput.border#4e88eacc
panelSection.border#4e88eacc
panelSection.dropBackground#4070bfff
panelSectionHeader.background#4070bfff
panelSectionHeader.border#4e88eacc
panelSectionHeader.foreground#ffffffff
panelTitle.activeBorder#5391f8cc
panelTitle.activeForeground#000000ff
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#619ceaff
quickInputList.focusForeground#000000ff
quickInputList.focusIconForeground#000000ff
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#619ceacc
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#5080bfff
sideBar.border#619ceacc
sideBar.dropBackground#5080bfff
sideBar.foreground#000000ff
sideBarSectionHeader.background#5080bfff
sideBarSectionHeader.border#619ceacc
sideBarSectionHeader.foreground#000000ff
sideBarTitle.foreground#000000ff
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#2761eaff
tab.activeBorder#2967f8cc
tab.activeBorderTop#2967f8cc
tab.activeForeground#ffffffff
tab.activeModifiedBorder#2a69fdcc
tab.border#2761eacc
tab.hoverBackground#2761eaff
tab.hoverBorder#2967f8cc
tab.hoverForeground#ffffffff
tab.inactiveBackground#2050bfff
tab.inactiveForeground#ffffffff
tab.inactiveModifiedBorder#2761eacc
tab.lastPinnedBorder#2761eacc
tab.unfocusedActiveBackground#2761eaff
tab.unfocusedActiveBorder#2967f8cc
tab.unfocusedActiveBorderTop#2967f8cc
tab.unfocusedActiveForeground#ffffffff
tab.unfocusedActiveModifiedBorder#2a69fdcc
tab.unfocusedHoverBackground#2761eaff
tab.unfocusedHoverBorder#2967f8cc
tab.unfocusedHoverForeground#ffffffff
tab.unfocusedInactiveBackground#1c45a6ff
tab.unfocusedInactiveForeground#ffffffff
tab.unfocusedInactiveModifiedBorder#2761eacc
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#67a5f8ff
tree.tableColumnsBorder#619ceacc
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	#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	#0040ffff
meta	#0040ffff
punctuation	#0040ffff
storage	#0040ffff
comment	#0035d5ff
source	#0032caff

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