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 P 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#00ea3aff
activityBar.activeBorder#00f83ecc
activityBar.activeFocusBorder#00fd3fcc
activityBar.background#00bf30ff
activityBar.border#00ea3acc
activityBar.dropBorder#00ea3acc
activityBar.foreground#000000ff
activityBar.inactiveForeground#000000ff
activityBarBadge.background#00ea3acc
activityBarBadge.foreground#000000ff
badge.background#3aea75cc
badge.foreground#000000ff
banner.background#30bf60ff
banner.foreground#000000ff
banner.iconForeground#000000ff
bookmarks.lineBackground#30bf60ff
bookmarks.lineBorder#3aea75cc
bookmarks.overviewRuler#30bf60ff
breadcrumb.activeSelectionForeground#101010ff
breadcrumb.background#50bf80ff
breadcrumb.focusForeground#000000ff
breadcrumb.foreground#000000ff
breadcrumbPicker.background#61ea9ccc
button.background#3aea75cc
button.border#3ef87c99
button.foreground#000000ff
button.hoverBackground#3ef87ccc
button.secondaryBackground#3aea75cc
button.secondaryForeground#000000ff
button.secondaryHoverBackground#3ef87ccc
charts.blue#30bf60ff
charts.foreground#000000ff
charts.green#30bf60ff
charts.lines#30bf60ff
charts.orange#30bf60ff
charts.purple#30bf60ff
charts.red#30bf60ff
charts.yellow#30bf60ff
checkbox.background#3aea75cc
checkbox.border#3ef87c99
checkbox.foreground#000000ff
debugConsole.errorForeground#000000ff
debugConsole.infoForeground#000000ff
debugConsole.sourceForeground#000000ff
debugConsole.warningForeground#000000ff
debugConsoleInputIcon.foreground#000000ff
debugExceptionWidget.background#3aea75cc
debugExceptionWidget.border#3ef87c99
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#30bf60ff
debugTokenExpression.error#30bf60ff
debugTokenExpression.name#30bf60ff
debugTokenExpression.number#30bf60ff
debugTokenExpression.string#30bf60ff
debugTokenExpression.value#30bf60ff
debugToolBar.background#30bf60ff
debugToolBar.border#3aea75cc
debugView.exceptionLabelBackground#3aea75cc
debugView.exceptionLabelForeground#000000ff
debugView.stateLabelBackground#3aea75cc
debugView.stateLabelForeground#000000ff
debugView.valueChangedHighlight#3ef87ccc
descriptionForeground#000000ff
diffEditor.border#3aea75cc
diffEditor.diagonalFill#30bf60ff
diffEditor.insertedTextBackground#30bf60ff
diffEditor.insertedTextBorder#3aea75cc
diffEditor.removedTextBackground#30bf60ff
diffEditor.removedTextBorder#3aea75cc
dropdown.background#30bf60ff
dropdown.border#3aea75cc
dropdown.foreground#000000ff
dropdown.listBackground#10bf40ff
editor.background#60bf8fff
editor.findMatchBackground#60bf8fff
editor.findMatchBorder#75eaafcc
editor.findMatchHighlightBackground#75eaafff
editor.findMatchHighlightBorder#7cf8bacc
editor.findRangeHighlightBackground#75eaafff
editor.findRangeHighlightBorder#7cf8bacc
editor.focusedStackFrameHighlightBackground#7cf8baff
editor.foldBackground#60bf8fff
editor.foreground#000000ff
editor.hoverHighlightBackground#7cf8baff
editor.inactiveSelectionBackground#60bf8fff
editor.inlineValuesBackground#60bf8fff
editor.inlineValuesForeground#000000ff
editor.lineHighlightBackground#75eaafff
editor.linkedEditingBackground#60bf8fff
editor.rangeHighlightBackground#75eaafff
editor.rangeHighlightBorder#7cf8bacc
editor.selectionBackground#75eaafff
editor.selectionForeground#010101ff
editor.selectionHighlightBackground#7cf8baff
editor.selectionHighlightBorder#7efdbdcc
editor.snippetFinalTabstopHighlightBackground#75eaafff
editor.snippetFinalTabstopHighlightBorder#7cf8bacc
editor.snippetTabstopHighlightBackground#75eaafff
editor.snippetTabstopHighlightBorder#7cf8bacc
editor.stackFrameHighlightBackground#75eaafff
editor.symbolHighlightBackground#7cf8bacc
editor.symbolHighlightBorder#7efdbd99
editor.wordHighlightBackground#75eaafff
editor.wordHighlightBorder#7cf8bacc
editor.wordHighlightStrongBackground#75eaafff
editor.wordHighlightStrongBorder#7cf8bacc
editorBracketHighlight.foreground1#000000ff
editorBracketHighlight.foreground2#000000ff
editorBracketHighlight.foreground3#000000ff
editorBracketHighlight.foreground4#000000ff
editorBracketHighlight.foreground5#000000ff
editorBracketHighlight.foreground6#000000ff
editorBracketHighlight.unexpectedBracket.foreground#7f7f7fff
editorBracketMatch.background#60bf8fff
editorBracketMatch.border#75eaafcc
editorCodeLens.foreground#000000ff
editorCursor.background#60bf8fff
editorCursor.foreground#000000ff
editorError.background#60bf8fff
editorError.border#75eaafcc
editorError.foreground#000000ff
editorGhostText.border#75eaafcc
editorGhostText.foreground#000000ff
editorGroup.border#61ea9ccc
editorGroup.dropBackground#50bf80ff
editorGroup.emptyBackground#50bf80ff
editorGroup.focusedEmptyBorder#67f8a5cc
editorGroupHeader.border#61ea9ccc
editorGroupHeader.noTabsBackground#50bf80ff
editorGroupHeader.tabsBackground#50bf80ff
editorGroupHeader.tabsBorder#61ea9ccc
editorGutter.addedBackground#61ea9cff
editorGutter.background#50bf80ff
editorGutter.commentRangeForeground#000000ff
editorGutter.deletedBackground#61ea9cff
editorGutter.foldingControlForeground#000000ff
editorGutter.modifiedBackground#61ea9cff
editorHint.border#75eaafcc
editorHint.foreground#000000ff
editorHoverWidget.background#7cf8bacc
editorHoverWidget.border#7efdbd99
editorHoverWidget.foreground#141414ff
editorHoverWidget.statusBarBackground#3ef87ccc
editorIndentGuide.activeBackground#000000ff
editorIndentGuide.background#306048ff
editorInfo.background#60bf8fff
editorInfo.border#75eaafcc
editorInfo.foreground#000000ff
editorInlayHint.background#60bf8fff
editorInlayHint.foreground#000000ff
editorLightBulb.foreground#ffffffff
editorLightBulbAutoFix.foreground#7f7f7fff
editorLineNumber.activeForeground#010101ff
editorLineNumber.foreground#000000ff
editorLink.activeForeground#010101ff
editorMarkerNavigation.background#60bf8fff
editorMarkerNavigationError.background#60bf8fff
editorMarkerNavigationError.headerBackground#60bf8fff
editorMarkerNavigationInfo.background#60bf8fff
editorMarkerNavigationInfo.headerBackground#60bf8fff
editorMarkerNavigationWarning.background#60bf8fff
editorMarkerNavigationWarning.headerBackground#60bf8fff
editorOverviewRuler.addedForeground#010101ff
editorOverviewRuler.background#60bf8fff
editorOverviewRuler.border#75eaafcc
editorOverviewRuler.bracketMatchForeground#000000ff
editorOverviewRuler.commonContentForeground#000000ff
editorOverviewRuler.currentContentForeground#000000ff
editorOverviewRuler.deletedForeground#010101ff
editorOverviewRuler.errorForeground#000000ff
editorOverviewRuler.findMatchForeground#000000ff
editorOverviewRuler.incomingContentForeground#000000ff
editorOverviewRuler.infoForeground#000000ff
editorOverviewRuler.modifiedForeground#010101ff
editorOverviewRuler.rangeHighlightForeground#010101ff
editorOverviewRuler.selectionHighlightForeground#141414ff
editorOverviewRuler.warningForeground#000000ff
editorOverviewRuler.wordHighlightForeground#010101ff
editorOverviewRuler.wordHighlightStrongForeground#010101ff
editorPane.background#60bf8fff
editorRuler.foreground#000000ff
editorSuggestWidget.background#75eaafcc
editorSuggestWidget.border#7cf8ba99
editorSuggestWidget.focusHighlightForeground#181818ff
editorSuggestWidget.foreground#010101ff
editorSuggestWidget.highlightForeground#141414ff
editorSuggestWidget.selectedBackground#7cf8bacc
editorSuggestWidget.selectedForeground#141414ff
editorSuggestWidget.selectedIconForeground#141414ff
editorUnnecessaryCode.border#75eaaf66
editorUnnecessaryCode.opacity#60bf8f99
editorWarning.background#60bf8fff
editorWarning.border#75eaafcc
editorWarning.foreground#000000ff
editorWhitespace.foreground#509f78ff
editorWidget.background#75eaafcc
editorWidget.border#7cf8ba99
editorWidget.foreground#010101ff
editorWidget.resizeBorder#7cf8ba99
errorForeground#000000ff
errorLens.errorBackground#30bf60ff
errorLens.errorBackgroundLight#30bf60ff
errorLens.errorForeground#000000ff
errorLens.errorForegroundLight#000000ff
errorLens.errorMessageBackground#30bf60ff
errorLens.hintBackground#30bf60ff
errorLens.hintBackgroundLight#30bf60ff
errorLens.hintForeground#000000ff
errorLens.hintForegroundLight#000000ff
errorLens.hintMessageBackground#30bf60ff
errorLens.infoBackground#30bf60ff
errorLens.infoBackgroundLight#30bf60ff
errorLens.infoForeground#000000ff
errorLens.infoForegroundLight#000000ff
errorLens.infoMessageBackground#30bf60ff
errorLens.statusBarErrorForeground#000000ff
errorLens.statusBarHintForeground#000000ff
errorLens.statusBarInfoForeground#000000ff
errorLens.statusBarWarningForeground#000000ff
errorLens.warningBackground#30bf60ff
errorLens.warningBackgroundLight#30bf60ff
errorLens.warningForeground#000000ff
errorLens.warningForegroundLight#000000ff
errorLens.warningMessageBackground#30bf60ff
extensionBadge.remoteBackground#3aea75cc
extensionBadge.remoteForeground#000000ff
extensionButton.prominentBackground#3aea75cc
extensionButton.prominentForeground#000000ff
extensionButton.prominentHoverBackground#3ef87ccc
extensionIcon.starForeground#000000ff
focusBorder#3ef87ccc
foreground#000000ff
gitlens.closedPullRequestIconColor#3aea75cc
gitlens.decorations.addedForegroundColor#000000ff
gitlens.decorations.branchAheadForegroundColor#000000ff
gitlens.decorations.branchBehindForegroundColor#000000ff
gitlens.decorations.branchDivergedForegroundColor#000000ff
gitlens.decorations.branchMissingUpstreamForegroundColor#000000ff
gitlens.decorations.branchUnpublishedForegroundColor#000000ff
gitlens.decorations.branchUpToDateForegroundColor#000000ff
gitlens.decorations.copiedForegroundColor#000000ff
gitlens.decorations.deletedForegroundColor#000000ff
gitlens.decorations.ignoredForegroundColor#000000ff
gitlens.decorations.modifiedForegroundColor#000000ff
gitlens.decorations.renamedForegroundColor#000000ff
gitlens.decorations.untrackedForegroundColor#000000ff
gitlens.gutterBackgroundColor#30bf60ff
gitlens.gutterForegroundColor#000000ff
gitlens.gutterUncommittedForegroundColor#000000ff
gitlens.lineHighlightBackgroundColor#3aea75ff
gitlens.lineHighlightOverviewRulerColor#3aea75ff
gitlens.mergedPullRequestIconColor#3aea75cc
gitlens.openPullRequestIconColor#3aea75cc
gitlens.trailingLineBackgroundColor#30bf60ff
gitlens.trailingLineForegroundColor#000000ff
gitlens.unpublishedCommitIconColor#3aea75cc
gitlens.unpulledChangesIconColor#3aea75cc
gitlens.unpushlishedChangesIconColor#3aea75cc
icon.foreground#000000ff
inlineTitleBar.background#30bf60ff
input.background#30bf60ff
input.border#3aea75cc
input.foreground#000000ff
input.placeholderForeground#000000ff
inputOption.activeBackground#3aea75ff
inputOption.activeBorder#3ef87ccc
inputOption.activeForeground#000000ff
inputValidation.errorBackground#30bf60ff
inputValidation.errorBorder#3aea75cc
inputValidation.errorForeground#000000ff
inputValidation.infoBackground#30bf60ff
inputValidation.infoBorder#3aea75cc
inputValidation.infoForeground#000000ff
inputValidation.warningBackground#30bf60ff
inputValidation.warningBorder#3aea75cc
inputValidation.warningForeground#000000ff
interactive.activeCodeBorder#3ef87ccc
interactive.inactiveCodeBorder#38e171cc
issues.closed#30bf60ff
issues.newIssueDecoration#30bf60ff
issues.open#30bf60ff
keybindingLabel.background#30bf60ff
keybindingLabel.border#3aea75cc
keybindingLabel.bottomBorder#3aea75cc
keybindingLabel.foreground#000000ff
lintlens.annotationColor#30bf60ff
list.activeSelectionBackground#15f853ff
list.activeSelectionForeground#060606ff
list.activeSelectionIconForeground#0d0d0dff
list.deemphasizedForeground#000000ff
list.dropBackground#10bf40ff
list.errorForeground#000000ff
list.filterMatchBackground#10bf40ff
list.filterMatchBorder#13ea4ecc
list.focusBackground#13ea4eff
list.focusForeground#000000ff
list.focusHighlightForeground#060606ff
list.focusOutline#15f853cc
list.highlightForeground#000000ff
list.hoverBackground#13ea4eff
list.hoverForeground#000000ff
list.inactiveFocusBackground#13ea4eff
list.inactiveFocusOutline#15f853cc
list.inactiveSelectionBackground#13ea4eff
list.inactiveSelectionForeground#000000ff
list.inactiveSelectionIconForeground#000000ff
list.invalidItemForeground#000000ff
list.warningForeground#000000ff
listFilterWidget.background#13ea4ecc
listFilterWidget.noMatchesOutline#15f85399
listFilterWidget.outline#15f85399
menu.background#30bf60ff
menu.border#3aea75cc
menu.foreground#000000ff
menu.selectionBackground#3aea75ff
menu.selectionBorder#3ef87ccc
menu.selectionForeground#000000ff
menu.separatorBackground#30bf60ff
menubar.selectionBackground#3aea75ff
menubar.selectionBorder#3ef87ccc
menubar.selectionForeground#000000ff
merge.border#3aea75cc
merge.commonContentBackground#30bf60ff
merge.commonHeaderBackground#30bf60ff
merge.currentContentBackground#30bf60ff
merge.currentHeaderBackground#30bf60ff
merge.incomingContentBackground#30bf60ff
merge.incomingHeaderBackground#30bf60ff
minimap.background#60bf8fff
minimap.errorHighlight#75eaafff
minimap.findMatchHighlight#75eaafff
minimap.selectionHighlight#7cf8baff
minimap.warningHighlight#75eaafff
minimapGutter.addedBackground#75eaafff
minimapGutter.deletedBackground#75eaafff
minimapGutter.modifiedBackground#75eaafff
minimapSlider.activeBackground#7cf8ba7a
minimapSlider.background#75eaaf7a
minimapSlider.hoverBackground#7cf8ba7a
notebook.cellBorderColor#3aea75cc
notebook.cellEditorBackground#30bf60ff
notebook.cellHoverBackground#3aea75ff
notebook.cellInsertionIndicator#30bf60ff
notebook.cellStatusBarItemHoverBackground#3aea75ff
notebook.cellToolbarSeparator#30bf60ff
notebook.focusedCellBackground#3aea75ff
notebook.focusedCellBorder#3ef87ccc
notebook.focusedEditorBorder#3ef87ccc
notebook.inactiveFocusedCellBorder#3aea75cc
notebook.inactiveSelectedCellBorder#3aea75cc
notebook.outputContainerBackgroundColor#30bf60ff
notebook.selectedCellBackground#3aea75ff
notebook.selectedCellBorder#3ef87ccc
notebook.symbolHighlightBackground#3ef87ccc
notebookScrollbarSlider.activeBackground#3ef87c7a
notebookScrollbarSlider.background#3aea757a
notebookScrollbarSlider.hoverBackground#3ef87c7a
notebookStatusErrorIcon.foreground#000000ff
notebookStatusRunningIcon.foreground#000000ff
notebookStatusSuccessIcon.foreground#000000ff
notificationCenter.border#3aea75cc
notificationCenterHeader.background#30bf60ff
notificationCenterHeader.foreground#000000ff
notificationLink.foreground#000000ff
notifications.background#30bf60ff
notifications.border#3aea75cc
notifications.foreground#000000ff
notificationsErrorIcon.foreground#000000ff
notificationsInfoIcon.foreground#000000ff
notificationsWarningIcon.foreground#000000ff
notificationToast.border#3aea75cc
panel.background#20bf50ff
panel.border#27ea61cc
panel.dropBorder#27ea61cc
panelInput.border#27ea61cc
panelSection.border#27ea61cc
panelSection.dropBackground#20bf50ff
panelSectionHeader.background#20bf50ff
panelSectionHeader.border#27ea61cc
panelSectionHeader.foreground#000000ff
panelTitle.activeBorder#29f867cc
panelTitle.activeForeground#000000ff
panelTitle.inactiveForeground#000000ff
peekView.border#3ef87c99
peekViewEditor.background#3aea75cc
peekViewEditor.matchHighlightBackground#3ef87ccc
peekViewEditor.matchHighlightBorder#3ffd7e99
peekViewEditorGutter.background#3aea75cc
peekViewResult.background#3aea75cc
peekViewResult.fileForeground#000000ff
peekViewResult.lineForeground#000000ff
peekViewResult.matchHighlightBackground#3ef87ccc
peekViewResult.selectionBackground#3ef87ccc
peekViewResult.selectionForeground#0a0a0aff
peekViewTitle.background#3aea75cc
peekViewTitleDescription.foreground#000000ff
peekViewTitleLabel.foreground#000000ff
pickerGroup.border#3ef87c99
pickerGroup.foreground#000000ff
ports.iconRunningProcessForeground#000000ff
problemsErrorIcon.foreground#000000ff
problemsInfoIcon.foreground#000000ff
problemsWarningIcon.foreground#000000ff
progressBar.background#30bf60ff
quickInput.background#30bf60ff
quickInput.foreground#000000ff
quickInputList.focusBackground#13ea4eff
quickInputList.focusForeground#000000ff
quickInputList.focusIconForeground#060606ff
quickInputTitle.background#30bf60ff
sash.hoverBorder#3ef87ccc
scm.providerBorder#3aea75cc
scrollbar.shadow#3aea75cc
scrollbarSlider.activeBackground#3ef87c7a
scrollbarSlider.background#3aea757a
scrollbarSlider.hoverBackground#3ef87c7a
searchEditor.findMatchBackground#30bf60ff
searchEditor.findMatchBorder#3aea75cc
searchEditor.textInputBorder#3aea75cc
selection.background#3aea75ff
settings.checkboxBackground#3aea75cc
settings.checkboxBorder#3ef87c99
settings.checkboxForeground#000000ff
settings.dropdownBackground#30bf60ff
settings.dropdownBorder#3aea75cc
settings.dropdownForeground#000000ff
settings.dropdownListBorder#13ea4ecc
settings.focusedRowBackground#3aea75ff
settings.focusedRowBorder#3ef87ccc
settings.headerForeground#000000ff
settings.modifiedItemIndicator#3aea75ff
settings.numberInputBackground#30bf60ff
settings.numberInputBorder#3aea75cc
settings.numberInputForeground#000000ff
settings.rowHoverBackground#3aea75ff
settings.textInputBackground#30bf60ff
settings.textInputBorder#3aea75cc
settings.textInputForeground#000000ff
sideBar.background#10bf40ff
sideBar.border#13ea4ecc
sideBar.dropBackground#10bf40ff
sideBar.foreground#000000ff
sideBarSectionHeader.background#10bf40ff
sideBarSectionHeader.border#13ea4ecc
sideBarSectionHeader.foreground#000000ff
sideBarTitle.foreground#000000ff
statusBar.background#30bf60ff
statusBar.border#3aea75cc
statusBar.debuggingBackground#30bf60ff
statusBar.debuggingBorder#3aea75cc
statusBar.debuggingForeground#000000ff
statusBar.foreground#000000ff
statusBar.noFolderBackground#30bf60ff
statusBar.noFolderBorder#3aea75cc
statusBar.noFolderForeground#000000ff
statusBarItem.activeBackground#3aea75ff
statusBarItem.errorBackground#30bf60ff
statusBarItem.errorForeground#000000ff
statusBarItem.hoverBackground#3aea75ff
statusBarItem.prominentBackground#30bf60ff
statusBarItem.prominentForeground#000000ff
statusBarItem.prominentHoverBackground#3aea75ff
statusBarItem.remoteBackground#30bf60ff
statusBarItem.remoteForeground#000000ff
statusBarItem.warningBackground#30bf60ff
statusBarItem.warningForeground#000000ff
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#4eea88ff
tab.activeBorder#53f891cc
tab.activeBorderTop#53f891cc
tab.activeForeground#000000ff
tab.activeModifiedBorder#54fd93cc
tab.border#4eea88cc
tab.hoverBackground#4eea88ff
tab.hoverBorder#53f891cc
tab.hoverForeground#000000ff
tab.inactiveBackground#40bf70ff
tab.inactiveForeground#000000ff
tab.inactiveModifiedBorder#4eea88cc
tab.lastPinnedBorder#4eea88cc
tab.unfocusedActiveBackground#4eea88ff
tab.unfocusedActiveBorder#53f891cc
tab.unfocusedActiveBorderTop#53f891cc
tab.unfocusedActiveForeground#000000ff
tab.unfocusedActiveModifiedBorder#54fd93cc
tab.unfocusedHoverBackground#4eea88ff
tab.unfocusedHoverBorder#53f891cc
tab.unfocusedHoverForeground#000000ff
tab.unfocusedInactiveBackground#37a661ff
tab.unfocusedInactiveForeground#000000ff
tab.unfocusedInactiveModifiedBorder#4eea88cc
testing.iconErrored#3aea75cc
testing.iconFailed#3aea75cc
testing.iconPassed#3aea75cc
testing.iconQueued#3aea75cc
testing.iconSkipped#3aea75cc
testing.iconUnset#3aea75cc
testing.message.error.decorationForeground#000000ff
testing.message.error.lineBackground#30bf60ff
testing.message.info.decorationForeground#000000ff
testing.message.info.lineBackground#30bf60ff
testing.peekBorder#3aea75cc
testing.peekHeaderBackground#30bf60ff
testing.runAction#30bf60ff
textBlockQuote.background#30bf60ff
textBlockQuote.border#3aea75cc
textCodeBlock.background#30bf60ff
textLink.activeForeground#000000ff
textLink.foreground#000000ff
textPreformat.foreground#000000ff
textSeparator.foreground#000000ff
titleBar.activeBackground#3aea75ff
titleBar.activeForeground#000000ff
titleBar.border#3aea75cc
titleBar.inactiveBackground#29a653ff
titleBar.inactiveForeground#000000ff
toolbar.activeBackground#3aea75ff
toolbar.hoverBackground#3aea75ff
toolbar.hoverOutline#3ef87ccc
tree.indentGuidesStroke#15f853ff
tree.tableColumnsBorder#13ea4ecc
walkThrough.embeddedEditorBackground#30bf60ff
welcomePage.background#30bf60ff
welcomePage.buttonBackground#3aea75cc
welcomePage.buttonHoverBackground#3ef87ccc
welcomePage.progress.background#30bf60ff
welcomePage.progress.foreground#000000ff
welcomePage.tileBackground#30bf60ff
welcomePage.tileHoverBackground#3aea75ff
welcomePage.tileShadow.#3aea75cc
widget.shadow#3ef87c99
window.activeBorder#3ef87ccc
window.inactiveBorder#38e171cc
workspace.hiddenColor#30bf6099

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.tag.jsx support.class.component.open.jsx	#000000ff	bold
meta.tag.jsx support.class.component.close.jsx	#000000ff	bold
meta.tag.jsx entity.other.attribute-name.jsx	#000000ff	italic
variable.other.constant , variable.other.dollar , variable.other.readwrite	#000000ff	bold
entity	#000000ff	bold
support	#000000ff	bold
variable	#000000ff	bold
keyword.operator	#000000ff
constant	#000000ff
string	#000000ff
keyword	#000000ff
meta	#000000ff
punctuation	#000000ff
storage	#000000ff
comment	#408060ff
source	#509f78ff

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