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 C 2

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#55aa80ff
activityBar.activeBorder#5cb88ae6
activityBar.activeFocusBorder#5ebd8ee6
activityBar.background#408060ff
activityBar.border#55aa80e6
activityBar.dropBorder#55aa80e6
activityBar.foreground#ffffffff
activityBar.inactiveForeground#ffffffff
activityBarBadge.background#55aa80e6
activityBarBadge.foreground#000000ff
badge.background#2baa55e6
badge.foreground#000000ff
banner.background#208040ff
banner.foreground#ffffffff
banner.iconForeground#000000ff
bookmarks.lineBackground#208040ff
bookmarks.lineBorder#2baa55e6
bookmarks.overviewRuler#208040ff
breadcrumb.activeSelectionForeground#000000ff
breadcrumb.background#0b802bff
breadcrumb.focusForeground#000000ff
breadcrumb.foreground#ffffffff
breadcrumbPicker.background#0eaa39e6
button.background#2baa55e6
button.border#2eb85ccc
button.foreground#000000ff
button.hoverBackground#2eb85ce6
button.secondaryBackground#2baa55e6
button.secondaryForeground#000000ff
button.secondaryHoverBackground#2eb85ce6
charts.blue#208040ff
charts.foreground#ffffffff
charts.green#208040ff
charts.lines#208040ff
charts.orange#208040ff
charts.purple#208040ff
charts.red#208040ff
charts.yellow#208040ff
checkbox.background#2baa55e6
checkbox.border#2eb85ccc
checkbox.foreground#000000ff
debugConsole.errorForeground#ffffffff
debugConsole.infoForeground#ffffffff
debugConsole.sourceForeground#ffffffff
debugConsole.warningForeground#ffffffff
debugConsoleInputIcon.foreground#000000ff
debugExceptionWidget.background#2baa55e6
debugExceptionWidget.border#2eb85ccc
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#208040ff
debugTokenExpression.error#208040ff
debugTokenExpression.name#208040ff
debugTokenExpression.number#208040ff
debugTokenExpression.string#208040ff
debugTokenExpression.value#208040ff
debugToolBar.background#208040ff
debugToolBar.border#2baa55e6
debugView.exceptionLabelBackground#2baa55e6
debugView.exceptionLabelForeground#000000ff
debugView.stateLabelBackground#2baa55e6
debugView.stateLabelForeground#000000ff
debugView.valueChangedHighlight#2eb85ce6
descriptionForeground#ffffffff
diffEditor.border#2baa55e6
diffEditor.diagonalFill#208040ff
diffEditor.insertedTextBackground#208040ff
diffEditor.insertedTextBorder#2baa55e6
diffEditor.removedTextBackground#208040ff
diffEditor.removedTextBorder#2baa55e6
dropdown.background#208040ff
dropdown.border#2baa55e6
dropdown.foreground#ffffffff
dropdown.listBackground#358055ff
editor.background#008020ff
editor.findMatchBackground#008020ff
editor.findMatchBorder#00aa2be6
editor.findMatchHighlightBackground#00aa2bff
editor.findMatchHighlightBorder#00b82ee6
editor.findRangeHighlightBackground#00aa2bff
editor.findRangeHighlightBorder#00b82ee6
editor.focusedStackFrameHighlightBackground#00b82eff
editor.foldBackground#008020ff
editor.foreground#ffffffff
editor.hoverHighlightBackground#00b82eff
editor.inactiveSelectionBackground#008020ff
editor.inlineValuesBackground#008020ff
editor.inlineValuesForeground#ffffffff
editor.lineHighlightBackground#00aa2bff
editor.linkedEditingBackground#008020ff
editor.rangeHighlightBackground#00aa2bff
editor.rangeHighlightBorder#00b82ee6
editor.selectionBackground#00aa2bff
editor.selectionForeground#000000ff
editor.selectionHighlightBackground#00b82eff
editor.selectionHighlightBorder#00bd2fe6
editor.snippetFinalTabstopHighlightBackground#00aa2bff
editor.snippetFinalTabstopHighlightBorder#00b82ee6
editor.snippetTabstopHighlightBackground#00aa2bff
editor.snippetTabstopHighlightBorder#00b82ee6
editor.stackFrameHighlightBackground#00aa2bff
editor.symbolHighlightBackground#00b82ee6
editor.symbolHighlightBorder#00bd2fcc
editor.wordHighlightBackground#00aa2bff
editor.wordHighlightBorder#00b82ee6
editor.wordHighlightStrongBackground#00aa2bff
editor.wordHighlightStrongBorder#00b82ee6
editorBracketHighlight.foreground1#00ff40ff
editorBracketHighlight.foreground2#00ff40ff
editorBracketHighlight.foreground3#00ff40ff
editorBracketHighlight.foreground4#00ff40ff
editorBracketHighlight.foreground5#00ff40ff
editorBracketHighlight.foreground6#00ff40ff
editorBracketHighlight.unexpectedBracket.foreground#7f7f7fff
editorBracketMatch.background#008020ff
editorBracketMatch.border#00aa2be6
editorCodeLens.foreground#ffffffff
editorCursor.background#008020ff
editorCursor.foreground#ffffffff
editorError.background#008020ff
editorError.border#00aa2be6
editorError.foreground#ffffffff
editorGhostText.border#00aa2be6
editorGhostText.foreground#ffffffff
editorGroup.border#0eaa39e6
editorGroup.dropBackground#0b802bff
editorGroup.emptyBackground#0b802bff
editorGroup.focusedEmptyBorder#0fb83de6
editorGroupHeader.border#0eaa39e6
editorGroupHeader.noTabsBackground#0b802bff
editorGroupHeader.tabsBackground#0b802bff
editorGroupHeader.tabsBorder#0eaa39e6
editorGutter.addedBackground#0eaa39ff
editorGutter.background#0b802bff
editorGutter.commentRangeForeground#ffffffff
editorGutter.deletedBackground#0eaa39ff
editorGutter.foldingControlForeground#ffffffff
editorGutter.modifiedBackground#0eaa39ff
editorHint.border#00aa2be6
editorHint.foreground#ffffffff
editorHoverWidget.background#00b82ee6
editorHoverWidget.border#00bd2fcc
editorHoverWidget.foreground#000000ff
editorHoverWidget.statusBarBackground#2eb85ce6
editorIndentGuide.activeBackground#00ff40ff
editorIndentGuide.background#00bf30ff
editorInfo.background#008020ff
editorInfo.border#00aa2be6
editorInfo.foreground#ffffffff
editorInlayHint.background#008020ff
editorInlayHint.foreground#ffffffff
editorLightBulb.foreground#ffffffff
editorLightBulbAutoFix.foreground#7f7f7fff
editorLineNumber.activeForeground#000000ff
editorLineNumber.foreground#ffffffff
editorLink.activeForeground#000000ff
editorMarkerNavigation.background#008020ff
editorMarkerNavigationError.background#008020ff
editorMarkerNavigationError.headerBackground#008020ff
editorMarkerNavigationInfo.background#008020ff
editorMarkerNavigationInfo.headerBackground#008020ff
editorMarkerNavigationWarning.background#008020ff
editorMarkerNavigationWarning.headerBackground#008020ff
editorOverviewRuler.addedForeground#000000ff
editorOverviewRuler.background#008020ff
editorOverviewRuler.border#00aa2be6
editorOverviewRuler.bracketMatchForeground#ffffffff
editorOverviewRuler.commonContentForeground#ffffffff
editorOverviewRuler.currentContentForeground#ffffffff
editorOverviewRuler.deletedForeground#000000ff
editorOverviewRuler.errorForeground#ffffffff
editorOverviewRuler.findMatchForeground#ffffffff
editorOverviewRuler.incomingContentForeground#ffffffff
editorOverviewRuler.infoForeground#ffffffff
editorOverviewRuler.modifiedForeground#000000ff
editorOverviewRuler.rangeHighlightForeground#000000ff
editorOverviewRuler.selectionHighlightForeground#000000ff
editorOverviewRuler.warningForeground#ffffffff
editorOverviewRuler.wordHighlightForeground#000000ff
editorOverviewRuler.wordHighlightStrongForeground#000000ff
editorPane.background#008020ff
editorRuler.foreground#ffffffff
editorSuggestWidget.background#00aa2be6
editorSuggestWidget.border#00b82ecc
editorSuggestWidget.focusHighlightForeground#000000ff
editorSuggestWidget.foreground#000000ff
editorSuggestWidget.highlightForeground#000000ff
editorSuggestWidget.selectedBackground#00b82ee6
editorSuggestWidget.selectedForeground#000000ff
editorSuggestWidget.selectedIconForeground#000000ff
editorUnnecessaryCode.border#00aa2b80
editorUnnecessaryCode.opacity#00802099
editorWarning.background#008020ff
editorWarning.border#00aa2be6
editorWarning.foreground#ffffffff
editorWhitespace.foreground#009525ff
editorWidget.background#00aa2be6
editorWidget.border#00b82ecc
editorWidget.foreground#000000ff
editorWidget.resizeBorder#00b82ecc
errorForeground#ffffffff
errorLens.errorBackground#208040ff
errorLens.errorBackgroundLight#208040ff
errorLens.errorForeground#ffffffff
errorLens.errorForegroundLight#ffffffff
errorLens.errorMessageBackground#208040ff
errorLens.hintBackground#208040ff
errorLens.hintBackgroundLight#208040ff
errorLens.hintForeground#ffffffff
errorLens.hintForegroundLight#ffffffff
errorLens.hintMessageBackground#208040ff
errorLens.infoBackground#208040ff
errorLens.infoBackgroundLight#208040ff
errorLens.infoForeground#ffffffff
errorLens.infoForegroundLight#ffffffff
errorLens.infoMessageBackground#208040ff
errorLens.statusBarErrorForeground#ffffffff
errorLens.statusBarHintForeground#ffffffff
errorLens.statusBarInfoForeground#ffffffff
errorLens.statusBarWarningForeground#ffffffff
errorLens.warningBackground#208040ff
errorLens.warningBackgroundLight#208040ff
errorLens.warningForeground#ffffffff
errorLens.warningForegroundLight#ffffffff
errorLens.warningMessageBackground#208040ff
extensionBadge.remoteBackground#2baa55e6
extensionBadge.remoteForeground#000000ff
extensionButton.prominentBackground#2baa55e6
extensionButton.prominentForeground#000000ff
extensionButton.prominentHoverBackground#2eb85ce6
extensionIcon.starForeground#000000ff
focusBorder#2eb85ce6
foreground#ffffffff
gitlens.closedPullRequestIconColor#2baa55e6
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#208040ff
gitlens.gutterForegroundColor#ffffffff
gitlens.gutterUncommittedForegroundColor#ffffffff
gitlens.lineHighlightBackgroundColor#2baa55ff
gitlens.lineHighlightOverviewRulerColor#2baa55ff
gitlens.mergedPullRequestIconColor#2baa55e6
gitlens.openPullRequestIconColor#2baa55e6
gitlens.trailingLineBackgroundColor#208040ff
gitlens.trailingLineForegroundColor#ffffffff
gitlens.unpublishedCommitIconColor#2baa55e6
gitlens.unpulledChangesIconColor#2baa55e6
gitlens.unpushlishedChangesIconColor#2baa55e6
icon.foreground#000000ff
inlineTitleBar.background#208040ff
input.background#208040ff
input.border#2baa55e6
input.foreground#ffffffff
input.placeholderForeground#ffffffff
inputOption.activeBackground#2baa55ff
inputOption.activeBorder#2eb85ce6
inputOption.activeForeground#000000ff
inputValidation.errorBackground#208040ff
inputValidation.errorBorder#2baa55e6
inputValidation.errorForeground#ffffffff
inputValidation.infoBackground#208040ff
inputValidation.infoBorder#2baa55e6
inputValidation.infoForeground#ffffffff
inputValidation.warningBackground#208040ff
inputValidation.warningBorder#2baa55e6
inputValidation.warningForeground#ffffffff
interactive.activeCodeBorder#2eb85ce6
interactive.inactiveCodeBorder#28a251e6
issues.closed#208040ff
issues.newIssueDecoration#208040ff
issues.open#208040ff
keybindingLabel.background#208040ff
keybindingLabel.border#2baa55e6
keybindingLabel.bottomBorder#2baa55e6
keybindingLabel.foreground#ffffffff
lintlens.annotationColor#208040ff
list.activeSelectionBackground#4db87bff
list.activeSelectionForeground#000000ff
list.activeSelectionIconForeground#000000ff
list.deemphasizedForeground#ffffffff
list.dropBackground#358055ff
list.errorForeground#ffffffff
list.filterMatchBackground#358055ff
list.filterMatchBorder#47aa71e6
list.focusBackground#47aa71ff
list.focusForeground#000000ff
list.focusHighlightForeground#000000ff
list.focusOutline#4db87be6
list.highlightForeground#000000ff
list.hoverBackground#47aa71ff
list.hoverForeground#000000ff
list.inactiveFocusBackground#47aa71ff
list.inactiveFocusOutline#4db87be6
list.inactiveSelectionBackground#47aa71ff
list.inactiveSelectionForeground#000000ff
list.inactiveSelectionIconForeground#000000ff
list.invalidItemForeground#ffffffff
list.warningForeground#ffffffff
listFilterWidget.background#47aa71e6
listFilterWidget.noMatchesOutline#4db87bcc
listFilterWidget.outline#4db87bcc
menu.background#208040ff
menu.border#2baa55e6
menu.foreground#ffffffff
menu.selectionBackground#2baa55ff
menu.selectionBorder#2eb85ce6
menu.selectionForeground#000000ff
menu.separatorBackground#208040ff
menubar.selectionBackground#2baa55ff
menubar.selectionBorder#2eb85ce6
menubar.selectionForeground#000000ff
merge.border#2baa55e6
merge.commonContentBackground#208040ff
merge.commonHeaderBackground#208040ff
merge.currentContentBackground#208040ff
merge.currentHeaderBackground#208040ff
merge.incomingContentBackground#208040ff
merge.incomingHeaderBackground#208040ff
minimap.background#008020ff
minimap.errorHighlight#00aa2bff
minimap.findMatchHighlight#00aa2bff
minimap.selectionHighlight#00b82eff
minimap.warningHighlight#00aa2bff
minimapGutter.addedBackground#00aa2bff
minimapGutter.deletedBackground#00aa2bff
minimapGutter.modifiedBackground#00aa2bff
minimapSlider.activeBackground#00b82e8a
minimapSlider.background#00aa2b8a
minimapSlider.hoverBackground#00b82e8a
notebook.cellBorderColor#2baa55e6
notebook.cellEditorBackground#208040ff
notebook.cellHoverBackground#2baa55ff
notebook.cellInsertionIndicator#208040ff
notebook.cellStatusBarItemHoverBackground#2baa55ff
notebook.cellToolbarSeparator#208040ff
notebook.focusedCellBackground#2baa55ff
notebook.focusedCellBorder#2eb85ce6
notebook.focusedEditorBorder#2eb85ce6
notebook.inactiveFocusedCellBorder#2baa55e6
notebook.inactiveSelectedCellBorder#2baa55e6
notebook.outputContainerBackgroundColor#208040ff
notebook.selectedCellBackground#2baa55ff
notebook.selectedCellBorder#2eb85ce6
notebook.symbolHighlightBackground#2eb85ce6
notebookScrollbarSlider.activeBackground#2eb85c8a
notebookScrollbarSlider.background#2baa558a
notebookScrollbarSlider.hoverBackground#2eb85c8a
notebookStatusErrorIcon.foreground#000000ff
notebookStatusRunningIcon.foreground#000000ff
notebookStatusSuccessIcon.foreground#000000ff
notificationCenter.border#2baa55e6
notificationCenterHeader.background#208040ff
notificationCenterHeader.foreground#ffffffff
notificationLink.foreground#ffffffff
notifications.background#208040ff
notifications.border#2baa55e6
notifications.foreground#ffffffff
notificationsErrorIcon.foreground#000000ff
notificationsInfoIcon.foreground#000000ff
notificationsWarningIcon.foreground#000000ff
notificationToast.border#2baa55e6
panel.background#2b804aff
panel.border#39aa63e6
panel.dropBorder#39aa63e6
panelInput.border#39aa63e6
panelSection.border#39aa63e6
panelSection.dropBackground#2b804aff
panelSectionHeader.background#2b804aff
panelSectionHeader.border#39aa63e6
panelSectionHeader.foreground#ffffffff
panelTitle.activeBorder#3db86be6
panelTitle.activeForeground#000000ff
panelTitle.inactiveForeground#ffffffff
peekView.border#2eb85ccc
peekViewEditor.background#2baa55e6
peekViewEditor.matchHighlightBackground#2eb85ce6
peekViewEditor.matchHighlightBorder#2fbd5ecc
peekViewEditorGutter.background#2baa55e6
peekViewResult.background#2baa55e6
peekViewResult.fileForeground#000000ff
peekViewResult.lineForeground#000000ff
peekViewResult.matchHighlightBackground#2eb85ce6
peekViewResult.selectionBackground#2eb85ce6
peekViewResult.selectionForeground#000000ff
peekViewTitle.background#2baa55e6
peekViewTitleDescription.foreground#000000ff
peekViewTitleLabel.foreground#000000ff
pickerGroup.border#2eb85ccc
pickerGroup.foreground#000000ff
ports.iconRunningProcessForeground#000000ff
problemsErrorIcon.foreground#000000ff
problemsInfoIcon.foreground#000000ff
problemsWarningIcon.foreground#000000ff
progressBar.background#208040ff
quickInput.background#208040ff
quickInput.foreground#ffffffff
quickInputList.focusBackground#47aa71ff
quickInputList.focusForeground#000000ff
quickInputList.focusIconForeground#000000ff
quickInputTitle.background#208040ff
sash.hoverBorder#2eb85ce6
scm.providerBorder#2baa55e6
scrollbar.shadow#2baa55e6
scrollbarSlider.activeBackground#2eb85c8a
scrollbarSlider.background#2baa558a
scrollbarSlider.hoverBackground#2eb85c8a
searchEditor.findMatchBackground#208040ff
searchEditor.findMatchBorder#2baa55e6
searchEditor.textInputBorder#2baa55e6
selection.background#2baa55ff
settings.checkboxBackground#2baa55e6
settings.checkboxBorder#2eb85ccc
settings.checkboxForeground#000000ff
settings.dropdownBackground#208040ff
settings.dropdownBorder#2baa55e6
settings.dropdownForeground#ffffffff
settings.dropdownListBorder#47aa71e6
settings.focusedRowBackground#2baa55ff
settings.focusedRowBorder#2eb85ce6
settings.headerForeground#ffffffff
settings.modifiedItemIndicator#2baa55ff
settings.numberInputBackground#208040ff
settings.numberInputBorder#2baa55e6
settings.numberInputForeground#ffffffff
settings.rowHoverBackground#2baa55ff
settings.textInputBackground#208040ff
settings.textInputBorder#2baa55e6
settings.textInputForeground#ffffffff
sideBar.background#358055ff
sideBar.border#47aa71e6
sideBar.dropBackground#358055ff
sideBar.foreground#ffffffff
sideBarSectionHeader.background#358055ff
sideBarSectionHeader.border#47aa71e6
sideBarSectionHeader.foreground#ffffffff
sideBarTitle.foreground#ffffffff
statusBar.background#208040ff
statusBar.border#2baa55e6
statusBar.debuggingBackground#208040ff
statusBar.debuggingBorder#2baa55e6
statusBar.debuggingForeground#ffffffff
statusBar.foreground#ffffffff
statusBar.noFolderBackground#208040ff
statusBar.noFolderBorder#2baa55e6
statusBar.noFolderForeground#ffffffff
statusBarItem.activeBackground#2baa55ff
statusBarItem.errorBackground#208040ff
statusBarItem.errorForeground#ffffffff
statusBarItem.hoverBackground#2baa55ff
statusBarItem.prominentBackground#208040ff
statusBarItem.prominentForeground#ffffffff
statusBarItem.prominentHoverBackground#2baa55ff
statusBarItem.remoteBackground#208040ff
statusBarItem.remoteForeground#ffffffff
statusBarItem.warningBackground#208040ff
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#1caa47ff
tab.activeBorder#1fb84de6
tab.activeBorderTop#1fb84de6
tab.activeForeground#000000ff
tab.activeModifiedBorder#1fbd4fe6
tab.border#1caa47e6
tab.hoverBackground#1caa47ff
tab.hoverBorder#1fb84de6
tab.hoverForeground#000000ff
tab.inactiveBackground#158035ff
tab.inactiveForeground#ffffffff
tab.inactiveModifiedBorder#1caa47e6
tab.lastPinnedBorder#1caa47e6
tab.unfocusedActiveBackground#1caa47ff
tab.unfocusedActiveBorder#1fb84de6
tab.unfocusedActiveBorderTop#1fb84de6
tab.unfocusedActiveForeground#000000ff
tab.unfocusedActiveModifiedBorder#1fbd4fe6
tab.unfocusedHoverBackground#1caa47ff
tab.unfocusedHoverBorder#1fb84de6
tab.unfocusedHoverForeground#000000ff
tab.unfocusedInactiveBackground#11662bff
tab.unfocusedInactiveForeground#ffffffff
tab.unfocusedInactiveModifiedBorder#1caa47e6
testing.iconErrored#2baa55e6
testing.iconFailed#2baa55e6
testing.iconPassed#2baa55e6
testing.iconQueued#2baa55e6
testing.iconSkipped#2baa55e6
testing.iconUnset#2baa55e6
testing.message.error.decorationForeground#ffffffff
testing.message.error.lineBackground#208040ff
testing.message.info.decorationForeground#ffffffff
testing.message.info.lineBackground#208040ff
testing.peekBorder#2baa55e6
testing.peekHeaderBackground#208040ff
testing.runAction#208040ff
textBlockQuote.background#208040ff
textBlockQuote.border#2baa55e6
textCodeBlock.background#208040ff
textLink.activeForeground#000000ff
textLink.foreground#ffffffff
textPreformat.foreground#ffffffff
textSeparator.foreground#ffffffff
titleBar.activeBackground#2baa55ff
titleBar.activeForeground#000000ff
titleBar.border#2baa55e6
titleBar.inactiveBackground#1a6633ff
titleBar.inactiveForeground#ffffffff
toolbar.activeBackground#2baa55ff
toolbar.hoverBackground#2baa55ff
toolbar.hoverOutline#2eb85ce6
tree.indentGuidesStroke#4db87bff
tree.tableColumnsBorder#47aa71e6
walkThrough.embeddedEditorBackground#208040ff
welcomePage.background#208040ff
welcomePage.buttonBackground#2baa55e6
welcomePage.buttonHoverBackground#2eb85ce6
welcomePage.progress.background#208040ff
welcomePage.progress.foreground#ffffffff
welcomePage.tileBackground#208040ff
welcomePage.tileHoverBackground#2baa55ff
welcomePage.tileShadow.#2baa55e6
widget.shadow#2eb85ccc
window.activeBorder#2eb85ce6
window.inactiveBorder#28a251e6
workspace.hiddenColor#20804099

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	#00ff40ff
meta	#00ff40ff
punctuation	#00ff40ff
storage	#00ff40ff
comment	#00aa2bff
source	#009525ff

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