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 A 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#ea75afff
activityBar.activeBorder#f87cbacc
activityBar.activeFocusBorder#fd7ebdcc
activityBar.background#bf608fff
activityBar.border#ea75afcc
activityBar.dropBorder#ea75afcc
activityBar.foreground#000000ff
activityBar.inactiveForeground#ffffffff
activityBarBadge.background#ea75afcc
activityBarBadge.foreground#000000ff
badge.background#ea3a75cc
badge.foreground#000000ff
banner.background#bf3060ff
banner.foreground#ffffffff
banner.iconForeground#000000ff
bookmarks.lineBackground#bf3060ff
bookmarks.lineBorder#ea3a75cc
bookmarks.overviewRuler#bf3060ff
breadcrumb.activeSelectionForeground#000000ff
breadcrumb.background#bf1040ff
breadcrumb.focusForeground#000000ff
breadcrumb.foreground#ffffffff
breadcrumbPicker.background#ea134ecc
button.background#ea3a75cc
button.border#f83e7c99
button.foreground#000000ff
button.hoverBackground#f83e7ccc
button.secondaryBackground#ea3a75cc
button.secondaryForeground#000000ff
button.secondaryHoverBackground#f83e7ccc
charts.blue#bf3060ff
charts.foreground#ffffffff
charts.green#bf3060ff
charts.lines#bf3060ff
charts.orange#bf3060ff
charts.purple#bf3060ff
charts.red#bf3060ff
charts.yellow#bf3060ff
checkbox.background#ea3a75cc
checkbox.border#f83e7c99
checkbox.foreground#000000ff
debugConsole.errorForeground#ffffffff
debugConsole.infoForeground#ffffffff
debugConsole.sourceForeground#ffffffff
debugConsole.warningForeground#ffffffff
debugConsoleInputIcon.foreground#000000ff
debugExceptionWidget.background#ea3a75cc
debugExceptionWidget.border#f83e7c99
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#bf3060ff
debugTokenExpression.error#bf3060ff
debugTokenExpression.name#bf3060ff
debugTokenExpression.number#bf3060ff
debugTokenExpression.string#bf3060ff
debugTokenExpression.value#bf3060ff
debugToolBar.background#bf3060ff
debugToolBar.border#ea3a75cc
debugView.exceptionLabelBackground#ea3a75cc
debugView.exceptionLabelForeground#000000ff
debugView.stateLabelBackground#ea3a75cc
debugView.stateLabelForeground#000000ff
debugView.valueChangedHighlight#f83e7ccc
descriptionForeground#ffffffff
diffEditor.border#ea3a75cc
diffEditor.diagonalFill#bf3060ff
diffEditor.insertedTextBackground#bf3060ff
diffEditor.insertedTextBorder#ea3a75cc
diffEditor.removedTextBackground#bf3060ff
diffEditor.removedTextBorder#ea3a75cc
dropdown.background#bf3060ff
dropdown.border#ea3a75cc
dropdown.foreground#ffffffff
dropdown.listBackground#bf5080ff
editor.background#bf0030ff
editor.findMatchBackground#bf0030ff
editor.findMatchBorder#ea003acc
editor.findMatchHighlightBackground#ea003aff
editor.findMatchHighlightBorder#f8003ecc
editor.findRangeHighlightBackground#ea003aff
editor.findRangeHighlightBorder#f8003ecc
editor.focusedStackFrameHighlightBackground#f8003eff
editor.foldBackground#bf0030ff
editor.foreground#ffffffff
editor.hoverHighlightBackground#f8003eff
editor.inactiveSelectionBackground#bf0030ff
editor.inlineValuesBackground#bf0030ff
editor.inlineValuesForeground#ffffffff
editor.lineHighlightBackground#ea003aff
editor.linkedEditingBackground#bf0030ff
editor.rangeHighlightBackground#ea003aff
editor.rangeHighlightBorder#f8003ecc
editor.selectionBackground#ea003aff
editor.selectionForeground#ffffffff
editor.selectionHighlightBackground#f8003eff
editor.selectionHighlightBorder#fd003fcc
editor.snippetFinalTabstopHighlightBackground#ea003aff
editor.snippetFinalTabstopHighlightBorder#f8003ecc
editor.snippetTabstopHighlightBackground#ea003aff
editor.snippetTabstopHighlightBorder#f8003ecc
editor.stackFrameHighlightBackground#ea003aff
editor.symbolHighlightBackground#f8003ecc
editor.symbolHighlightBorder#fd003f99
editor.wordHighlightBackground#ea003aff
editor.wordHighlightBorder#f8003ecc
editor.wordHighlightStrongBackground#ea003aff
editor.wordHighlightStrongBorder#f8003ecc
editorBracketHighlight.foreground1#ff0040ff
editorBracketHighlight.foreground2#ff0040ff
editorBracketHighlight.foreground3#ff0040ff
editorBracketHighlight.foreground4#ff0040ff
editorBracketHighlight.foreground5#ff0040ff
editorBracketHighlight.foreground6#ff0040ff
editorBracketHighlight.unexpectedBracket.foreground#7f7f7fff
editorBracketMatch.background#bf0030ff
editorBracketMatch.border#ea003acc
editorCodeLens.foreground#ffffffff
editorCursor.background#bf0030ff
editorCursor.foreground#ffffffff
editorError.background#bf0030ff
editorError.border#ea003acc
editorError.foreground#ffffffff
editorGhostText.border#ea003acc
editorGhostText.foreground#ffffffff
editorGroup.border#ea134ecc
editorGroup.dropBackground#bf1040ff
editorGroup.emptyBackground#bf1040ff
editorGroup.focusedEmptyBorder#f81553cc
editorGroupHeader.border#ea134ecc
editorGroupHeader.noTabsBackground#bf1040ff
editorGroupHeader.tabsBackground#bf1040ff
editorGroupHeader.tabsBorder#ea134ecc
editorGutter.addedBackground#ea134eff
editorGutter.background#bf1040ff
editorGutter.commentRangeForeground#ffffffff
editorGutter.deletedBackground#ea134eff
editorGutter.foldingControlForeground#ffffffff
editorGutter.modifiedBackground#ea134eff
editorHint.border#ea003acc
editorHint.foreground#ffffffff
editorHoverWidget.background#f8003ecc
editorHoverWidget.border#fd003f99
editorHoverWidget.foreground#000000ff
editorHoverWidget.statusBarBackground#f83e7ccc
editorIndentGuide.activeBackground#ff0040ff
editorIndentGuide.background#df0038ff
editorInfo.background#bf0030ff
editorInfo.border#ea003acc
editorInfo.foreground#ffffffff
editorInlayHint.background#bf0030ff
editorInlayHint.foreground#ffffffff
editorLightBulb.foreground#ffffffff
editorLightBulbAutoFix.foreground#7f7f7fff
editorLineNumber.activeForeground#ffffffff
editorLineNumber.foreground#ffffffff
editorLink.activeForeground#ffffffff
editorMarkerNavigation.background#bf0030ff
editorMarkerNavigationError.background#bf0030ff
editorMarkerNavigationError.headerBackground#bf0030ff
editorMarkerNavigationInfo.background#bf0030ff
editorMarkerNavigationInfo.headerBackground#bf0030ff
editorMarkerNavigationWarning.background#bf0030ff
editorMarkerNavigationWarning.headerBackground#bf0030ff
editorOverviewRuler.addedForeground#ffffffff
editorOverviewRuler.background#bf0030ff
editorOverviewRuler.border#ea003acc
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#000000ff
editorOverviewRuler.warningForeground#ffffffff
editorOverviewRuler.wordHighlightForeground#ffffffff
editorOverviewRuler.wordHighlightStrongForeground#ffffffff
editorPane.background#bf0030ff
editorRuler.foreground#ffffffff
editorSuggestWidget.background#ea003acc
editorSuggestWidget.border#f8003e99
editorSuggestWidget.focusHighlightForeground#000000ff
editorSuggestWidget.foreground#ffffffff
editorSuggestWidget.highlightForeground#000000ff
editorSuggestWidget.selectedBackground#f8003ecc
editorSuggestWidget.selectedForeground#000000ff
editorSuggestWidget.selectedIconForeground#000000ff
editorUnnecessaryCode.border#ea003a66
editorUnnecessaryCode.opacity#bf003099
editorWarning.background#bf0030ff
editorWarning.border#ea003acc
editorWarning.foreground#ffffffff
editorWhitespace.foreground#ca0032ff
editorWidget.background#ea003acc
editorWidget.border#f8003e99
editorWidget.foreground#ffffffff
editorWidget.resizeBorder#f8003e99
errorForeground#ffffffff
errorLens.errorBackground#bf3060ff
errorLens.errorBackgroundLight#bf3060ff
errorLens.errorForeground#ffffffff
errorLens.errorForegroundLight#ffffffff
errorLens.errorMessageBackground#bf3060ff
errorLens.hintBackground#bf3060ff
errorLens.hintBackgroundLight#bf3060ff
errorLens.hintForeground#ffffffff
errorLens.hintForegroundLight#ffffffff
errorLens.hintMessageBackground#bf3060ff
errorLens.infoBackground#bf3060ff
errorLens.infoBackgroundLight#bf3060ff
errorLens.infoForeground#ffffffff
errorLens.infoForegroundLight#ffffffff
errorLens.infoMessageBackground#bf3060ff
errorLens.statusBarErrorForeground#ffffffff
errorLens.statusBarHintForeground#ffffffff
errorLens.statusBarInfoForeground#ffffffff
errorLens.statusBarWarningForeground#ffffffff
errorLens.warningBackground#bf3060ff
errorLens.warningBackgroundLight#bf3060ff
errorLens.warningForeground#ffffffff
errorLens.warningForegroundLight#ffffffff
errorLens.warningMessageBackground#bf3060ff
extensionBadge.remoteBackground#ea3a75cc
extensionBadge.remoteForeground#000000ff
extensionButton.prominentBackground#ea3a75cc
extensionButton.prominentForeground#000000ff
extensionButton.prominentHoverBackground#f83e7ccc
extensionIcon.starForeground#000000ff
focusBorder#f83e7ccc
foreground#ffffffff
gitlens.closedPullRequestIconColor#ea3a75cc
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#bf3060ff
gitlens.gutterForegroundColor#ffffffff
gitlens.gutterUncommittedForegroundColor#ffffffff
gitlens.lineHighlightBackgroundColor#ea3a75ff
gitlens.lineHighlightOverviewRulerColor#ea3a75ff
gitlens.mergedPullRequestIconColor#ea3a75cc
gitlens.openPullRequestIconColor#ea3a75cc
gitlens.trailingLineBackgroundColor#bf3060ff
gitlens.trailingLineForegroundColor#ffffffff
gitlens.unpublishedCommitIconColor#ea3a75cc
gitlens.unpulledChangesIconColor#ea3a75cc
gitlens.unpushlishedChangesIconColor#ea3a75cc
icon.foreground#000000ff
inlineTitleBar.background#bf3060ff
input.background#bf3060ff
input.border#ea3a75cc
input.foreground#ffffffff
input.placeholderForeground#ffffffff
inputOption.activeBackground#ea3a75ff
inputOption.activeBorder#f83e7ccc
inputOption.activeForeground#000000ff
inputValidation.errorBackground#bf3060ff
inputValidation.errorBorder#ea3a75cc
inputValidation.errorForeground#ffffffff
inputValidation.infoBackground#bf3060ff
inputValidation.infoBorder#ea3a75cc
inputValidation.infoForeground#ffffffff
inputValidation.warningBackground#bf3060ff
inputValidation.warningBorder#ea3a75cc
inputValidation.warningForeground#ffffffff
interactive.activeCodeBorder#f83e7ccc
interactive.inactiveCodeBorder#e13871cc
issues.closed#bf3060ff
issues.newIssueDecoration#bf3060ff
issues.open#bf3060ff
keybindingLabel.background#bf3060ff
keybindingLabel.border#ea3a75cc
keybindingLabel.bottomBorder#ea3a75cc
keybindingLabel.foreground#ffffffff
lintlens.annotationColor#bf3060ff
list.activeSelectionBackground#f867a5ff
list.activeSelectionForeground#000000ff
list.activeSelectionIconForeground#000000ff
list.deemphasizedForeground#000000ff
list.dropBackground#bf5080ff
list.errorForeground#000000ff
list.filterMatchBackground#bf5080ff
list.filterMatchBorder#ea619ccc
list.focusBackground#ea619cff
list.focusForeground#000000ff
list.focusHighlightForeground#000000ff
list.focusOutline#f867a5cc
list.highlightForeground#000000ff
list.hoverBackground#ea619cff
list.hoverForeground#000000ff
list.inactiveFocusBackground#ea619cff
list.inactiveFocusOutline#f867a5cc
list.inactiveSelectionBackground#ea619cff
list.inactiveSelectionForeground#000000ff
list.inactiveSelectionIconForeground#000000ff
list.invalidItemForeground#000000ff
list.warningForeground#000000ff
listFilterWidget.background#ea619ccc
listFilterWidget.noMatchesOutline#f867a599
listFilterWidget.outline#f867a599
menu.background#bf3060ff
menu.border#ea3a75cc
menu.foreground#ffffffff
menu.selectionBackground#ea3a75ff
menu.selectionBorder#f83e7ccc
menu.selectionForeground#000000ff
menu.separatorBackground#bf3060ff
menubar.selectionBackground#ea3a75ff
menubar.selectionBorder#f83e7ccc
menubar.selectionForeground#000000ff
merge.border#ea3a75cc
merge.commonContentBackground#bf3060ff
merge.commonHeaderBackground#bf3060ff
merge.currentContentBackground#bf3060ff
merge.currentHeaderBackground#bf3060ff
merge.incomingContentBackground#bf3060ff
merge.incomingHeaderBackground#bf3060ff
minimap.background#bf0030ff
minimap.errorHighlight#ea003aff
minimap.findMatchHighlight#ea003aff
minimap.selectionHighlight#f8003eff
minimap.warningHighlight#ea003aff
minimapGutter.addedBackground#ea003aff
minimapGutter.deletedBackground#ea003aff
minimapGutter.modifiedBackground#ea003aff
minimapSlider.activeBackground#f8003e7a
minimapSlider.background#ea003a7a
minimapSlider.hoverBackground#f8003e7a
notebook.cellBorderColor#ea3a75cc
notebook.cellEditorBackground#bf3060ff
notebook.cellHoverBackground#ea3a75ff
notebook.cellInsertionIndicator#bf3060ff
notebook.cellStatusBarItemHoverBackground#ea3a75ff
notebook.cellToolbarSeparator#bf3060ff
notebook.focusedCellBackground#ea3a75ff
notebook.focusedCellBorder#f83e7ccc
notebook.focusedEditorBorder#f83e7ccc
notebook.inactiveFocusedCellBorder#ea3a75cc
notebook.inactiveSelectedCellBorder#ea3a75cc
notebook.outputContainerBackgroundColor#bf3060ff
notebook.selectedCellBackground#ea3a75ff
notebook.selectedCellBorder#f83e7ccc
notebook.symbolHighlightBackground#f83e7ccc
notebookScrollbarSlider.activeBackground#f83e7c7a
notebookScrollbarSlider.background#ea3a757a
notebookScrollbarSlider.hoverBackground#f83e7c7a
notebookStatusErrorIcon.foreground#000000ff
notebookStatusRunningIcon.foreground#000000ff
notebookStatusSuccessIcon.foreground#000000ff
notificationCenter.border#ea3a75cc
notificationCenterHeader.background#bf3060ff
notificationCenterHeader.foreground#ffffffff
notificationLink.foreground#ffffffff
notifications.background#bf3060ff
notifications.border#ea3a75cc
notifications.foreground#ffffffff
notificationsErrorIcon.foreground#000000ff
notificationsInfoIcon.foreground#000000ff
notificationsWarningIcon.foreground#000000ff
notificationToast.border#ea3a75cc
panel.background#bf4070ff
panel.border#ea4e88cc
panel.dropBorder#ea4e88cc
panelInput.border#ea4e88cc
panelSection.border#ea4e88cc
panelSection.dropBackground#bf4070ff
panelSectionHeader.background#bf4070ff
panelSectionHeader.border#ea4e88cc
panelSectionHeader.foreground#ffffffff
panelTitle.activeBorder#f85391cc
panelTitle.activeForeground#000000ff
panelTitle.inactiveForeground#ffffffff
peekView.border#f83e7c99
peekViewEditor.background#ea3a75cc
peekViewEditor.matchHighlightBackground#f83e7ccc
peekViewEditor.matchHighlightBorder#fd3f7e99
peekViewEditorGutter.background#ea3a75cc
peekViewResult.background#ea3a75cc
peekViewResult.fileForeground#000000ff
peekViewResult.lineForeground#000000ff
peekViewResult.matchHighlightBackground#f83e7ccc
peekViewResult.selectionBackground#f83e7ccc
peekViewResult.selectionForeground#000000ff
peekViewTitle.background#ea3a75cc
peekViewTitleDescription.foreground#000000ff
peekViewTitleLabel.foreground#000000ff
pickerGroup.border#f83e7c99
pickerGroup.foreground#000000ff
ports.iconRunningProcessForeground#000000ff
problemsErrorIcon.foreground#000000ff
problemsInfoIcon.foreground#000000ff
problemsWarningIcon.foreground#000000ff
progressBar.background#bf3060ff
quickInput.background#bf3060ff
quickInput.foreground#ffffffff
quickInputList.focusBackground#ea619cff
quickInputList.focusForeground#000000ff
quickInputList.focusIconForeground#000000ff
quickInputTitle.background#bf3060ff
sash.hoverBorder#f83e7ccc
scm.providerBorder#ea3a75cc
scrollbar.shadow#ea3a75cc
scrollbarSlider.activeBackground#f83e7c7a
scrollbarSlider.background#ea3a757a
scrollbarSlider.hoverBackground#f83e7c7a
searchEditor.findMatchBackground#bf3060ff
searchEditor.findMatchBorder#ea3a75cc
searchEditor.textInputBorder#ea3a75cc
selection.background#ea3a75ff
settings.checkboxBackground#ea3a75cc
settings.checkboxBorder#f83e7c99
settings.checkboxForeground#000000ff
settings.dropdownBackground#bf3060ff
settings.dropdownBorder#ea3a75cc
settings.dropdownForeground#ffffffff
settings.dropdownListBorder#ea619ccc
settings.focusedRowBackground#ea3a75ff
settings.focusedRowBorder#f83e7ccc
settings.headerForeground#ffffffff
settings.modifiedItemIndicator#ea3a75ff
settings.numberInputBackground#bf3060ff
settings.numberInputBorder#ea3a75cc
settings.numberInputForeground#ffffffff
settings.rowHoverBackground#ea3a75ff
settings.textInputBackground#bf3060ff
settings.textInputBorder#ea3a75cc
settings.textInputForeground#ffffffff
sideBar.background#bf5080ff
sideBar.border#ea619ccc
sideBar.dropBackground#bf5080ff
sideBar.foreground#000000ff
sideBarSectionHeader.background#bf5080ff
sideBarSectionHeader.border#ea619ccc
sideBarSectionHeader.foreground#000000ff
sideBarTitle.foreground#000000ff
statusBar.background#bf3060ff
statusBar.border#ea3a75cc
statusBar.debuggingBackground#bf3060ff
statusBar.debuggingBorder#ea3a75cc
statusBar.debuggingForeground#ffffffff
statusBar.foreground#ffffffff
statusBar.noFolderBackground#bf3060ff
statusBar.noFolderBorder#ea3a75cc
statusBar.noFolderForeground#ffffffff
statusBarItem.activeBackground#ea3a75ff
statusBarItem.errorBackground#bf3060ff
statusBarItem.errorForeground#ffffffff
statusBarItem.hoverBackground#ea3a75ff
statusBarItem.prominentBackground#bf3060ff
statusBarItem.prominentForeground#ffffffff
statusBarItem.prominentHoverBackground#ea3a75ff
statusBarItem.remoteBackground#bf3060ff
statusBarItem.remoteForeground#ffffffff
statusBarItem.warningBackground#bf3060ff
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#ea2761ff
tab.activeBorder#f82967cc
tab.activeBorderTop#f82967cc
tab.activeForeground#000000ff
tab.activeModifiedBorder#fd2a69cc
tab.border#ea2761cc
tab.hoverBackground#ea2761ff
tab.hoverBorder#f82967cc
tab.hoverForeground#000000ff
tab.inactiveBackground#bf2050ff
tab.inactiveForeground#ffffffff
tab.inactiveModifiedBorder#ea2761cc
tab.lastPinnedBorder#ea2761cc
tab.unfocusedActiveBackground#ea2761ff
tab.unfocusedActiveBorder#f82967cc
tab.unfocusedActiveBorderTop#f82967cc
tab.unfocusedActiveForeground#000000ff
tab.unfocusedActiveModifiedBorder#fd2a69cc
tab.unfocusedHoverBackground#ea2761ff
tab.unfocusedHoverBorder#f82967cc
tab.unfocusedHoverForeground#000000ff
tab.unfocusedInactiveBackground#a61c45ff
tab.unfocusedInactiveForeground#ffffffff
tab.unfocusedInactiveModifiedBorder#ea2761cc
testing.iconErrored#ea3a75cc
testing.iconFailed#ea3a75cc
testing.iconPassed#ea3a75cc
testing.iconQueued#ea3a75cc
testing.iconSkipped#ea3a75cc
testing.iconUnset#ea3a75cc
testing.message.error.decorationForeground#ffffffff
testing.message.error.lineBackground#bf3060ff
testing.message.info.decorationForeground#ffffffff
testing.message.info.lineBackground#bf3060ff
testing.peekBorder#ea3a75cc
testing.peekHeaderBackground#bf3060ff
testing.runAction#bf3060ff
textBlockQuote.background#bf3060ff
textBlockQuote.border#ea3a75cc
textCodeBlock.background#bf3060ff
textLink.activeForeground#000000ff
textLink.foreground#ffffffff
textPreformat.foreground#ffffffff
textSeparator.foreground#ffffffff
titleBar.activeBackground#ea3a75ff
titleBar.activeForeground#000000ff
titleBar.border#ea3a75cc
titleBar.inactiveBackground#a62953ff
titleBar.inactiveForeground#ffffffff
toolbar.activeBackground#ea3a75ff
toolbar.hoverBackground#ea3a75ff
toolbar.hoverOutline#f83e7ccc
tree.indentGuidesStroke#f867a5ff
tree.tableColumnsBorder#ea619ccc
walkThrough.embeddedEditorBackground#bf3060ff
welcomePage.background#bf3060ff
welcomePage.buttonBackground#ea3a75cc
welcomePage.buttonHoverBackground#f83e7ccc
welcomePage.progress.background#bf3060ff
welcomePage.progress.foreground#ffffffff
welcomePage.tileBackground#bf3060ff
welcomePage.tileHoverBackground#ea3a75ff
welcomePage.tileShadow.#ea3a75cc
widget.shadow#f83e7c99
window.activeBorder#f83e7ccc
window.inactiveBorder#e13871cc
workspace.hiddenColor#bf306099

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	#ff0040ff
meta	#ff0040ff
punctuation	#ff0040ff
storage	#ff0040ff
comment	#d50035ff
source	#ca0032ff

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