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 F 1

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#6a5035ff
activityBar.activeBorder#785a3cff
activityBar.activeFocusBorder#7d5e3fff
activityBar.background#403020ff
activityBar.border#6a5035ff
activityBar.dropBorder#6a5035ff
activityBar.foreground#ffffffff
activityBar.inactiveForeground#ecececff
activityBarBadge.background#6a5035ff
activityBarBadge.foreground#ffffffff
badge.background#6a351bff
badge.foreground#ffffffff
banner.background#402010ff
banner.foreground#fafafaff
banner.iconForeground#ffffffff
bookmarks.lineBackground#402010ff
bookmarks.lineBorder#6a351bff
bookmarks.overviewRuler#402010ff
breadcrumb.activeSelectionForeground#ffffffff
breadcrumb.background#401505ff
breadcrumb.focusForeground#ffffffff
breadcrumb.foreground#f1f1f1ff
breadcrumbPicker.background#6a2309ff
button.background#6a351bff
button.border#783c1eff
button.foreground#ffffffff
button.hoverBackground#783c1eff
button.secondaryBackground#6a351bff
button.secondaryForeground#ffffffff
button.secondaryHoverBackground#783c1eff
charts.blue#402010ff
charts.foreground#fafafaff
charts.green#402010ff
charts.lines#402010ff
charts.orange#402010ff
charts.purple#402010ff
charts.red#402010ff
charts.yellow#402010ff
checkbox.background#6a351bff
checkbox.border#783c1eff
checkbox.foreground#ffffffff
debugConsole.errorForeground#fafafaff
debugConsole.infoForeground#fafafaff
debugConsole.sourceForeground#fafafaff
debugConsole.warningForeground#fafafaff
debugConsoleInputIcon.foreground#ffffffff
debugExceptionWidget.background#6a351bff
debugExceptionWidget.border#783c1eff
debugIcon.breakpointCurrentStackframeForeground#ffffffff
debugIcon.breakpointDisabledForeground#ffffffff
debugIcon.breakpointForeground#ffffffff
debugIcon.breakpointStackframeForeground#ffffffff
debugIcon.breakpointUnverifiedForeground#ffffffff
debugIcon.continueForeground#ffffffff
debugIcon.disconnectForeground#ffffffff
debugIcon.pauseForeground#ffffffff
debugIcon.restartForeground#ffffffff
debugIcon.startForeground#ffffffff
debugIcon.stepBackForeground#ffffffff
debugIcon.stepIntoForeground#ffffffff
debugIcon.stepOutForeground#ffffffff
debugIcon.stepOverForeground#ffffffff
debugIcon.stopForeground#ffffffff
debugTokenExpression.boolean#402010ff
debugTokenExpression.error#402010ff
debugTokenExpression.name#402010ff
debugTokenExpression.number#402010ff
debugTokenExpression.string#402010ff
debugTokenExpression.value#402010ff
debugToolBar.background#402010ff
debugToolBar.border#6a351bff
debugView.exceptionLabelBackground#6a351bff
debugView.exceptionLabelForeground#ffffffff
debugView.stateLabelBackground#6a351bff
debugView.stateLabelForeground#ffffffff
debugView.valueChangedHighlight#783c1eff
descriptionForeground#fafafaff
diffEditor.border#6a351bff
diffEditor.diagonalFill#402010ff
diffEditor.insertedTextBackground#402010ff
diffEditor.insertedTextBorder#6a351bff
diffEditor.removedTextBackground#402010ff
diffEditor.removedTextBorder#6a351bff
dropdown.background#402010ff
dropdown.border#6a351bff
dropdown.foreground#fafafaff
dropdown.listBackground#402b1bff
editor.background#401000ff
editor.findMatchBackground#401000ff
editor.findMatchBorder#6a1b00ff
editor.findMatchHighlightBackground#6a1b00ff
editor.findMatchHighlightBorder#781e00ff
editor.findRangeHighlightBackground#6a1b00ff
editor.findRangeHighlightBorder#781e00ff
editor.focusedStackFrameHighlightBackground#781e00ff
editor.foldBackground#401000ff
editor.foreground#eeeeeeff
editor.hoverHighlightBackground#781e00ff
editor.inactiveSelectionBackground#401000ff
editor.inlineValuesBackground#401000ff
editor.inlineValuesForeground#eeeeeeff
editor.lineHighlightBackground#6a1b00ff
editor.linkedEditingBackground#401000ff
editor.rangeHighlightBackground#6a1b00ff
editor.rangeHighlightBorder#781e00ff
editor.selectionBackground#6a1b00ff
editor.selectionForeground#ffffffff
editor.selectionHighlightBackground#781e00ff
editor.selectionHighlightBorder#7d1f00ff
editor.snippetFinalTabstopHighlightBackground#6a1b00ff
editor.snippetFinalTabstopHighlightBorder#781e00ff
editor.snippetTabstopHighlightBackground#6a1b00ff
editor.snippetTabstopHighlightBorder#781e00ff
editor.stackFrameHighlightBackground#6a1b00ff
editor.symbolHighlightBackground#781e00ff
editor.symbolHighlightBorder#7d1f00ff
editor.wordHighlightBackground#6a1b00ff
editor.wordHighlightBorder#781e00ff
editor.wordHighlightStrongBackground#6a1b00ff
editor.wordHighlightStrongBorder#781e00ff
editorBracketHighlight.foreground1#ff4000ff
editorBracketHighlight.foreground2#ff4000ff
editorBracketHighlight.foreground3#ff4000ff
editorBracketHighlight.foreground4#ff4000ff
editorBracketHighlight.foreground5#ff4000ff
editorBracketHighlight.foreground6#ff4000ff
editorBracketHighlight.unexpectedBracket.foreground#7f7f7fff
editorBracketMatch.background#401000ff
editorBracketMatch.border#6a1b00ff
editorCodeLens.foreground#eeeeeeff
editorCursor.background#401000ff
editorCursor.foreground#eeeeeeff
editorError.background#401000ff
editorError.border#6a1b00ff
editorError.foreground#eeeeeeff
editorGhostText.border#6a1b00ff
editorGhostText.foreground#eeeeeeff
editorGroup.border#6a2309ff
editorGroup.dropBackground#401505ff
editorGroup.emptyBackground#401505ff
editorGroup.focusedEmptyBorder#78280aff
editorGroupHeader.border#6a2309ff
editorGroupHeader.noTabsBackground#401505ff
editorGroupHeader.tabsBackground#401505ff
editorGroupHeader.tabsBorder#6a2309ff
editorGutter.addedBackground#6a2309ff
editorGutter.background#401505ff
editorGutter.commentRangeForeground#f1f1f1ff
editorGutter.deletedBackground#6a2309ff
editorGutter.foldingControlForeground#f1f1f1ff
editorGutter.modifiedBackground#6a2309ff
editorHint.border#6a1b00ff
editorHint.foreground#eeeeeeff
editorHoverWidget.background#781e00ff
editorHoverWidget.border#7d1f00ff
editorHoverWidget.foreground#ffffffff
editorHoverWidget.statusBarBackground#783c1eff
editorIndentGuide.activeBackground#ff4000ff
editorIndentGuide.background#9f2800ff
editorInfo.background#401000ff
editorInfo.border#6a1b00ff
editorInfo.foreground#eeeeeeff
editorInlayHint.background#401000ff
editorInlayHint.foreground#eeeeeeff
editorLightBulb.foreground#ffffffff
editorLightBulbAutoFix.foreground#7f7f7fff
editorLineNumber.activeForeground#ffffffff
editorLineNumber.foreground#eeeeeeff
editorLink.activeForeground#ffffffff
editorMarkerNavigation.background#401000ff
editorMarkerNavigationError.background#401000ff
editorMarkerNavigationError.headerBackground#401000ff
editorMarkerNavigationInfo.background#401000ff
editorMarkerNavigationInfo.headerBackground#401000ff
editorMarkerNavigationWarning.background#401000ff
editorMarkerNavigationWarning.headerBackground#401000ff
editorOverviewRuler.addedForeground#ffffffff
editorOverviewRuler.background#401000ff
editorOverviewRuler.border#6a1b00ff
editorOverviewRuler.bracketMatchForeground#eeeeeeff
editorOverviewRuler.commonContentForeground#eeeeeeff
editorOverviewRuler.currentContentForeground#eeeeeeff
editorOverviewRuler.deletedForeground#ffffffff
editorOverviewRuler.errorForeground#eeeeeeff
editorOverviewRuler.findMatchForeground#eeeeeeff
editorOverviewRuler.incomingContentForeground#eeeeeeff
editorOverviewRuler.infoForeground#eeeeeeff
editorOverviewRuler.modifiedForeground#ffffffff
editorOverviewRuler.rangeHighlightForeground#ffffffff
editorOverviewRuler.selectionHighlightForeground#ffffffff
editorOverviewRuler.warningForeground#eeeeeeff
editorOverviewRuler.wordHighlightForeground#ffffffff
editorOverviewRuler.wordHighlightStrongForeground#ffffffff
editorPane.background#401000ff
editorRuler.foreground#eeeeeeff
editorSuggestWidget.background#6a1b00ff
editorSuggestWidget.border#781e00ff
editorSuggestWidget.focusHighlightForeground#ffffffff
editorSuggestWidget.foreground#ffffffff
editorSuggestWidget.highlightForeground#ffffffff
editorSuggestWidget.selectedBackground#781e00ff
editorSuggestWidget.selectedForeground#ffffffff
editorSuggestWidget.selectedIconForeground#ffffffff
editorUnnecessaryCode.border#6a1b0099
editorUnnecessaryCode.opacity#40100099
editorWarning.background#401000ff
editorWarning.border#6a1b00ff
editorWarning.foreground#eeeeeeff
editorWhitespace.foreground#601800ff
editorWidget.background#6a1b00ff
editorWidget.border#781e00ff
editorWidget.foreground#ffffffff
editorWidget.resizeBorder#781e00ff
errorForeground#fafafaff
errorLens.errorBackground#402010ff
errorLens.errorBackgroundLight#402010ff
errorLens.errorForeground#fafafaff
errorLens.errorForegroundLight#fafafaff
errorLens.errorMessageBackground#402010ff
errorLens.hintBackground#402010ff
errorLens.hintBackgroundLight#402010ff
errorLens.hintForeground#fafafaff
errorLens.hintForegroundLight#fafafaff
errorLens.hintMessageBackground#402010ff
errorLens.infoBackground#402010ff
errorLens.infoBackgroundLight#402010ff
errorLens.infoForeground#fafafaff
errorLens.infoForegroundLight#fafafaff
errorLens.infoMessageBackground#402010ff
errorLens.statusBarErrorForeground#fafafaff
errorLens.statusBarHintForeground#fafafaff
errorLens.statusBarInfoForeground#fafafaff
errorLens.statusBarWarningForeground#fafafaff
errorLens.warningBackground#402010ff
errorLens.warningBackgroundLight#402010ff
errorLens.warningForeground#fafafaff
errorLens.warningForegroundLight#fafafaff
errorLens.warningMessageBackground#402010ff
extensionBadge.remoteBackground#6a351bff
extensionBadge.remoteForeground#ffffffff
extensionButton.prominentBackground#6a351bff
extensionButton.prominentForeground#ffffffff
extensionButton.prominentHoverBackground#783c1eff
extensionIcon.starForeground#ffffffff
focusBorder#783c1eff
foreground#fafafaff
gitlens.closedPullRequestIconColor#6a351bff
gitlens.decorations.addedForegroundColor#ffffffff
gitlens.decorations.branchAheadForegroundColor#fafafaff
gitlens.decorations.branchBehindForegroundColor#fafafaff
gitlens.decorations.branchDivergedForegroundColor#fafafaff
gitlens.decorations.branchMissingUpstreamForegroundColor#fafafaff
gitlens.decorations.branchUnpublishedForegroundColor#fafafaff
gitlens.decorations.branchUpToDateForegroundColor#fafafaff
gitlens.decorations.copiedForegroundColor#fafafaff
gitlens.decorations.deletedForegroundColor#ffffffff
gitlens.decorations.ignoredForegroundColor#fafafaff
gitlens.decorations.modifiedForegroundColor#ffffffff
gitlens.decorations.renamedForegroundColor#fafafaff
gitlens.decorations.untrackedForegroundColor#fafafaff
gitlens.gutterBackgroundColor#402010ff
gitlens.gutterForegroundColor#fafafaff
gitlens.gutterUncommittedForegroundColor#fafafaff
gitlens.lineHighlightBackgroundColor#6a351bff
gitlens.lineHighlightOverviewRulerColor#6a351bff
gitlens.mergedPullRequestIconColor#6a351bff
gitlens.openPullRequestIconColor#6a351bff
gitlens.trailingLineBackgroundColor#402010ff
gitlens.trailingLineForegroundColor#fafafaff
gitlens.unpublishedCommitIconColor#6a351bff
gitlens.unpulledChangesIconColor#6a351bff
gitlens.unpushlishedChangesIconColor#6a351bff
icon.foreground#ffffffff
inlineTitleBar.background#402010ff
input.background#402010ff
input.border#6a351bff
input.foreground#fafafaff
input.placeholderForeground#fafafaff
inputOption.activeBackground#6a351bff
inputOption.activeBorder#783c1eff
inputOption.activeForeground#ffffffff
inputValidation.errorBackground#402010ff
inputValidation.errorBorder#6a351bff
inputValidation.errorForeground#fafafaff
inputValidation.infoBackground#402010ff
inputValidation.infoBorder#6a351bff
inputValidation.infoForeground#fafafaff
inputValidation.warningBackground#402010ff
inputValidation.warningBorder#6a351bff
inputValidation.warningForeground#fafafaff
interactive.activeCodeBorder#783c1eff
interactive.inactiveCodeBorder#623118ff
issues.closed#402010ff
issues.newIssueDecoration#402010ff
issues.open#402010ff
keybindingLabel.background#402010ff
keybindingLabel.border#6a351bff
keybindingLabel.bottomBorder#6a351bff
keybindingLabel.foreground#fafafaff
lintlens.annotationColor#402010ff
list.activeSelectionBackground#785032ff
list.activeSelectionForeground#ffffffff
list.activeSelectionIconForeground#ffffffff
list.deemphasizedForeground#ffffffff
list.dropBackground#402b1bff
list.errorForeground#ffffffff
list.filterMatchBackground#402b1bff
list.filterMatchBorder#6a472cff
list.focusBackground#6a472cff
list.focusForeground#ffffffff
list.focusHighlightForeground#ffffffff
list.focusOutline#785032ff
list.highlightForeground#ffffffff
list.hoverBackground#6a472cff
list.hoverForeground#ffffffff
list.inactiveFocusBackground#6a472cff
list.inactiveFocusOutline#785032ff
list.inactiveSelectionBackground#6a472cff
list.inactiveSelectionForeground#ffffffff
list.inactiveSelectionIconForeground#ffffffff
list.invalidItemForeground#ffffffff
list.warningForeground#ffffffff
listFilterWidget.background#6a472cff
listFilterWidget.noMatchesOutline#785032ff
listFilterWidget.outline#785032ff
menu.background#402010ff
menu.border#6a351bff
menu.foreground#fafafaff
menu.selectionBackground#6a351bff
menu.selectionBorder#783c1eff
menu.selectionForeground#ffffffff
menu.separatorBackground#402010ff
menubar.selectionBackground#6a351bff
menubar.selectionBorder#783c1eff
menubar.selectionForeground#ffffffff
merge.border#6a351bff
merge.commonContentBackground#402010ff
merge.commonHeaderBackground#402010ff
merge.currentContentBackground#402010ff
merge.currentHeaderBackground#402010ff
merge.incomingContentBackground#402010ff
merge.incomingHeaderBackground#402010ff
minimap.background#401000ff
minimap.errorHighlight#6a1b00ff
minimap.findMatchHighlight#6a1b00ff
minimap.selectionHighlight#781e00ff
minimap.warningHighlight#6a1b00ff
minimapGutter.addedBackground#6a1b00ff
minimapGutter.deletedBackground#6a1b00ff
minimapGutter.modifiedBackground#6a1b00ff
minimapSlider.activeBackground#781e0099
minimapSlider.background#6a1b0099
minimapSlider.hoverBackground#781e0099
notebook.cellBorderColor#6a351bff
notebook.cellEditorBackground#402010ff
notebook.cellHoverBackground#6a351bff
notebook.cellInsertionIndicator#402010ff
notebook.cellStatusBarItemHoverBackground#6a351bff
notebook.cellToolbarSeparator#402010ff
notebook.focusedCellBackground#6a351bff
notebook.focusedCellBorder#783c1eff
notebook.focusedEditorBorder#783c1eff
notebook.inactiveFocusedCellBorder#6a351bff
notebook.inactiveSelectedCellBorder#6a351bff
notebook.outputContainerBackgroundColor#402010ff
notebook.selectedCellBackground#6a351bff
notebook.selectedCellBorder#783c1eff
notebook.symbolHighlightBackground#783c1eff
notebookScrollbarSlider.activeBackground#783c1e99
notebookScrollbarSlider.background#6a351b99
notebookScrollbarSlider.hoverBackground#783c1e99
notebookStatusErrorIcon.foreground#ffffffff
notebookStatusRunningIcon.foreground#ffffffff
notebookStatusSuccessIcon.foreground#ffffffff
notificationCenter.border#6a351bff
notificationCenterHeader.background#402010ff
notificationCenterHeader.foreground#fafafaff
notificationLink.foreground#fafafaff
notifications.background#402010ff
notifications.border#6a351bff
notifications.foreground#fafafaff
notificationsErrorIcon.foreground#ffffffff
notificationsInfoIcon.foreground#ffffffff
notificationsWarningIcon.foreground#ffffffff
notificationToast.border#6a351bff
panel.background#402515ff
panel.border#6a3e23ff
panel.dropBorder#6a3e23ff
panelInput.border#6a3e23ff
panelSection.border#6a3e23ff
panelSection.dropBackground#402515ff
panelSectionHeader.background#402515ff
panelSectionHeader.border#6a3e23ff
panelSectionHeader.foreground#ffffffff
panelTitle.activeBorder#784628ff
panelTitle.activeForeground#ffffffff
panelTitle.inactiveForeground#e7e7e7ff
peekView.border#783c1eff
peekViewEditor.background#6a351bff
peekViewEditor.matchHighlightBackground#783c1eff
peekViewEditor.matchHighlightBorder#7d3f1fff
peekViewEditorGutter.background#6a351bff
peekViewResult.background#6a351bff
peekViewResult.fileForeground#ffffffff
peekViewResult.lineForeground#ffffffff
peekViewResult.matchHighlightBackground#783c1eff
peekViewResult.selectionBackground#783c1eff
peekViewResult.selectionForeground#ffffffff
peekViewTitle.background#6a351bff
peekViewTitleDescription.foreground#ffffffff
peekViewTitleLabel.foreground#ffffffff
pickerGroup.border#783c1eff
pickerGroup.foreground#ffffffff
ports.iconRunningProcessForeground#ffffffff
problemsErrorIcon.foreground#ffffffff
problemsInfoIcon.foreground#ffffffff
problemsWarningIcon.foreground#ffffffff
progressBar.background#402010ff
quickInput.background#402010ff
quickInput.foreground#fafafaff
quickInputList.focusBackground#6a472cff
quickInputList.focusForeground#ffffffff
quickInputList.focusIconForeground#ffffffff
quickInputTitle.background#402010ff
sash.hoverBorder#783c1eff
scm.providerBorder#6a351bff
scrollbar.shadow#6a351bff
scrollbarSlider.activeBackground#783c1e99
scrollbarSlider.background#6a351b99
scrollbarSlider.hoverBackground#783c1e99
searchEditor.findMatchBackground#402010ff
searchEditor.findMatchBorder#6a351bff
searchEditor.textInputBorder#6a351bff
selection.background#6a351bff
settings.checkboxBackground#6a351bff
settings.checkboxBorder#783c1eff
settings.checkboxForeground#ffffffff
settings.dropdownBackground#402010ff
settings.dropdownBorder#6a351bff
settings.dropdownForeground#fafafaff
settings.dropdownListBorder#6a472cff
settings.focusedRowBackground#6a351bff
settings.focusedRowBorder#783c1eff
settings.headerForeground#fafafaff
settings.modifiedItemIndicator#6a351bff
settings.numberInputBackground#402010ff
settings.numberInputBorder#6a351bff
settings.numberInputForeground#fafafaff
settings.rowHoverBackground#6a351bff
settings.textInputBackground#402010ff
settings.textInputBorder#6a351bff
settings.textInputForeground#fafafaff
sideBar.background#402b1bff
sideBar.border#6a472cff
sideBar.dropBackground#402b1bff
sideBar.foreground#ffffffff
sideBarSectionHeader.background#402b1bff
sideBarSectionHeader.border#6a472cff
sideBarSectionHeader.foreground#ffffffff
sideBarTitle.foreground#ffffffff
statusBar.background#402010ff
statusBar.border#6a351bff
statusBar.debuggingBackground#402010ff
statusBar.debuggingBorder#6a351bff
statusBar.debuggingForeground#fafafaff
statusBar.foreground#fafafaff
statusBar.noFolderBackground#402010ff
statusBar.noFolderBorder#6a351bff
statusBar.noFolderForeground#fafafaff
statusBarItem.activeBackground#6a351bff
statusBarItem.errorBackground#402010ff
statusBarItem.errorForeground#fafafaff
statusBarItem.hoverBackground#6a351bff
statusBarItem.prominentBackground#402010ff
statusBarItem.prominentForeground#fafafaff
statusBarItem.prominentHoverBackground#6a351bff
statusBarItem.remoteBackground#402010ff
statusBarItem.remoteForeground#fafafaff
statusBarItem.warningBackground#402010ff
statusBarItem.warningForeground#fafafaff
symbolIcon.arrayForeground#ffffffff
symbolIcon.booleanForeground#ffffffff
symbolIcon.classForeground#ffffffff
symbolIcon.colorForeground#ffffffff
symbolIcon.constantForeground#ffffffff
symbolIcon.constructorForeground#ffffffff
symbolIcon.enumeratorForeground#ffffffff
symbolIcon.enumeratorMemberForeground#ffffffff
symbolIcon.eventForeground#ffffffff
symbolIcon.fieldForeground#ffffffff
symbolIcon.fileForeground#ffffffff
symbolIcon.folderForeground#ffffffff
symbolIcon.functionForeground#ffffffff
symbolIcon.interfaceForeground#ffffffff
symbolIcon.keyForeground#ffffffff
symbolIcon.keywordForeground#ffffffff
symbolIcon.methodForeground#ffffffff
symbolIcon.moduleForeground#ffffffff
symbolIcon.namespaceForeground#ffffffff
symbolIcon.nullForeground#ffffffff
symbolIcon.numberForeground#ffffffff
symbolIcon.objectForeground#ffffffff
symbolIcon.operatorForeground#ffffffff
symbolIcon.packageForeground#ffffffff
symbolIcon.propertyForeground#ffffffff
symbolIcon.referenceForeground#ffffffff
symbolIcon.snippetForeground#ffffffff
symbolIcon.stringForeground#ffffffff
symbolIcon.structForeground#ffffffff
symbolIcon.textForeground#ffffffff
symbolIcon.typeParameterForeground#ffffffff
symbolIcon.unitForeground#ffffffff
symbolIcon.variableForeground#ffffffff
tab.activeBackground#6a2c12ff
tab.activeBorder#783214ff
tab.activeBorderTop#783214ff
tab.activeForeground#ffffffff
tab.activeModifiedBorder#7d3415ff
tab.border#6a2c12ff
tab.hoverBackground#6a2c12ff
tab.hoverBorder#783214ff
tab.hoverForeground#ffffffff
tab.inactiveBackground#401b0bff
tab.inactiveForeground#f5f5f5ff
tab.inactiveModifiedBorder#6a2c12ff
tab.lastPinnedBorder#6a2c12ff
tab.unfocusedActiveBackground#6a2c12ff
tab.unfocusedActiveBorder#783214ff
tab.unfocusedActiveBorderTop#783214ff
tab.unfocusedActiveForeground#ffffffff
tab.unfocusedActiveModifiedBorder#7d3415ff
tab.unfocusedHoverBackground#6a2c12ff
tab.unfocusedHoverBorder#783214ff
tab.unfocusedHoverForeground#ffffffff
tab.unfocusedInactiveBackground#261006ff
tab.unfocusedInactiveForeground#e3e3e3ff
tab.unfocusedInactiveModifiedBorder#6a2c12ff
testing.iconErrored#6a351bff
testing.iconFailed#6a351bff
testing.iconPassed#6a351bff
testing.iconQueued#6a351bff
testing.iconSkipped#6a351bff
testing.iconUnset#6a351bff
testing.message.error.decorationForeground#fafafaff
testing.message.error.lineBackground#402010ff
testing.message.info.decorationForeground#fafafaff
testing.message.info.lineBackground#402010ff
testing.peekBorder#6a351bff
testing.peekHeaderBackground#402010ff
testing.runAction#402010ff
textBlockQuote.background#402010ff
textBlockQuote.border#6a351bff
textCodeBlock.background#402010ff
textLink.activeForeground#ffffffff
textLink.foreground#fafafaff
textPreformat.foreground#fafafaff
textSeparator.foreground#fafafaff
titleBar.activeBackground#6a351bff
titleBar.activeForeground#ffffffff
titleBar.border#6a351bff
titleBar.inactiveBackground#26130aff
titleBar.inactiveForeground#e5e5e5ff
toolbar.activeBackground#6a351bff
toolbar.hoverBackground#6a351bff
toolbar.hoverOutline#783c1eff
tree.indentGuidesStroke#785032ff
tree.tableColumnsBorder#6a472cff
walkThrough.embeddedEditorBackground#402010ff
welcomePage.background#402010ff
welcomePage.buttonBackground#6a351bff
welcomePage.buttonHoverBackground#783c1eff
welcomePage.progress.background#402010ff
welcomePage.progress.foreground#fafafaff
welcomePage.tileBackground#402010ff
welcomePage.tileHoverBackground#6a351bff
welcomePage.tileShadow.#6a351bff
widget.shadow#783c1eff
window.activeBorder#783c1eff
window.inactiveBorder#623118ff
workspace.hiddenColor#40201099

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	#fcfcfcff	italic
variable.other.constant , variable.other.dollar , variable.other.readwrite	#ffffffff	bold
entity	#ffffffff	bold
support	#ffffffff	bold
variable	#ffffffff	bold
keyword.operator	#f9f9f9ff
constant	#f1f1f1ff
string	#f1f1f1ff
keyword	#ff4000ff
meta	#ff4000ff
punctuation	#ff4000ff
storage	#ff4000ff
comment	#802000ff
source	#601800ff

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