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

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	#40552bff
source	#506a35ff

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