Always Half-Full

Name: Always Half-Full
Author: Marcin Jeznach

Publisher: Marcin JeznachThemes in package: 5

A happy, colorful theme

GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Always Half-Full — Always Half-Full 🌆 evening

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#4a85c522
activityBar.activeBorder#2d6398
activityBar.activeFocusBorder#4a85c5
activityBar.background#121415
activityBar.border#393c3e
activityBar.dropBorder#4a85c588
activityBar.foreground#4a85c5
activityBar.inactiveForeground#ffffff6a
activityBarBadge.background#2d6398dd
activityBarBadge.foreground#ffffff
badge.background#2d6398dd
badge.foreground#ffffff
banner.background#d3447e88
banner.foreground#ffffff
banner.iconForeground#ffffffb4
breadcrumb.activeSelectionForeground#4a85c5
breadcrumb.background#232627
breadcrumb.focusForeground#ffffffb4
breadcrumb.foreground#ffffff9e
breadcrumbPicker.background#1d2021
button.background#2d6398
button.border#2d639800
button.foreground#ffffff
button.hoverBackground#4a85c5
button.secondaryBackground#6a6a6a
button.secondaryForeground#ffffff
button.secondaryHoverBackground#4a85c5
button.separator#ffffff66
charts.blue#4a85c5
charts.foreground#ffffffb4
charts.green#4c954e
charts.lines#ffffff6a
charts.orange#ba693a
charts.purple#a065b9
charts.red#e82c38
charts.yellow#968103
checkbox.background#43474988
checkbox.border#c5c5c5
checkbox.foreground#ffffff
checkbox.selectBackground#4a85c5
checkbox.selectBorder#4a85c5
commandCenter.activeBackground#1a1c1d
commandCenter.activeBorder#4a85c5
commandCenter.activeForeground#ffffffb4
commandCenter.background#1a1c1d
commandCenter.border#ffffff6a
commandCenter.foreground#ffffff6a
commandCenter.inactiveBorder#ffffff43
commandCenter.inactiveForeground#ffffff6a
debugConsole.errorForeground#e82c38
debugConsole.infoForeground#4a85c5
debugConsole.sourceForeground#798768
debugConsole.warningForeground#968103
debugConsoleInputIcon.foreground#997780
debugExceptionWidget.background#a62d3788
debugExceptionWidget.border#e82c38
debugIcon.breakpointCurrentStackframeForeground#968103
debugIcon.breakpointDisabledForeground#6a6a6a
debugIcon.breakpointForeground#d3447e
debugIcon.breakpointStackframeForeground#a065b9
debugIcon.breakpointUnverifiedForeground#997780
debugIcon.continueForeground#269294
debugIcon.disconnectForeground#ba693a
debugIcon.pauseForeground#968103
debugIcon.restartForeground#4c954e
debugIcon.startForeground#4c954e
debugIcon.stepBackForeground#b854af
debugIcon.stepIntoForeground#4a85c5
debugIcon.stepOutForeground#4a85c5
debugIcon.stepOverForeground#b854af
debugIcon.stopForeground#e82c38
debugTokenExpression.boolean#ba693a
debugTokenExpression.error#e82c38
debugTokenExpression.name#a065b9
debugTokenExpression.number#4c954e
debugTokenExpression.string#269294
debugTokenExpression.value#c5c5c5
debugToolBar.background#232627bb
debugToolBar.border#494c4e
debugView.exceptionLabelBackground#a62d37bb
debugView.exceptionLabelForeground#ffffffb4
debugView.stateLabelBackground#2d6398aa
debugView.stateLabelForeground#ffffffb4
debugView.valueChangedHighlight#4a85c5
descriptionForeground#ffffff9e
diffEditor.border#269294
diffEditor.diagonalFill#96810366
diffEditor.insertedLineBackground#4c954e18
diffEditor.insertedTextBackground#4c954e18
diffEditor.insertedTextBorder#4c954e33
diffEditor.removedLineBackground#ba693a18
diffEditor.removedTextBackground#ba693a18
diffEditor.removedTextBorder#ba693a33
diffEditorGutter.insertedLineBackground#4c954e22
diffEditorGutter.removedLineBackground#ba693a22
diffEditorOverview.insertedForeground#4c954e
diffEditorOverview.removedForeground#ba693a
disabledForeground#c5c5c588
dropdown.background#43474988
dropdown.border#ffffff6a
dropdown.foreground#ffffffb4
dropdown.listBackground#1d2021ee
editor.background#1a1c1d
editor.findMatchBackground#a065b911
editor.findMatchBorder#a065b9
editor.findMatchHighlightBackground#a065b911
editor.findMatchHighlightBorder#a065b9
editor.findRangeHighlightBackground#a065b918
editor.focusedStackFrameHighlightBackground#a065b933
editor.foldBackground#090b0d
editor.foreground#c5c5c5
editor.hoverHighlightBackground#6a6a6a66
editor.inactiveSelectionBackground#9e9e9e33
editor.inlineValuesBackground#d3447e44
editor.inlineValuesForeground#ffffffb4
editor.lineHighlightBackground#232627
editor.lineHighlightBorder#65a0fe33
editor.linkedEditingBackground#ba693a44
editor.rangeHighlightBackground#a065b933
editor.rangeHighlightBorder#00000000
editor.selectionBackground#3e74aa66
editor.selectionForeground#ffffff
editor.selectionHighlightBackground#9e9e9e44
editor.selectionHighlightBorder#269294aa
editor.snippetFinalTabstopHighlightBackground#4a85c533
editor.snippetFinalTabstopHighlightBorder#4a85c533
editor.snippetTabstopHighlightBackground#9e9e9e33
editor.snippetTabstopHighlightBorder#9e9e9e33
editor.stackFrameHighlightBackground#d3447e33
editor.symbolHighlightBackground#79876833
editor.symbolHighlightBorder#798768
editor.wordHighlightBackground#26929444
editor.wordHighlightStrongBackground#4c954e44
editor.wordHighlightTextBackground#6a6a6a44
editorBracketHighlight.foreground1#ba693acc
editorBracketHighlight.foreground2#269294cc
editorBracketHighlight.foreground3#a065b9cc
editorBracketHighlight.foreground4#4c954ecc
editorBracketHighlight.foreground5#4a85c5cc
editorBracketHighlight.foreground6#d3447ecc
editorBracketHighlight.unexpectedBracket.foreground#e82c38
editorBracketMatch.background#00000000
editorBracketMatch.border#ffffff88
editorBracketPairGuide.activeBackground1#ba693acc
editorBracketPairGuide.activeBackground2#269294cc
editorBracketPairGuide.activeBackground3#a065b9cc
editorBracketPairGuide.activeBackground4#4c954ecc
editorBracketPairGuide.activeBackground5#4a85c5cc
editorBracketPairGuide.activeBackground6#d3447ecc
editorBracketPairGuide.background1#ba693a88
editorBracketPairGuide.background2#26929488
editorBracketPairGuide.background3#a065b988
editorBracketPairGuide.background4#4c954e88
editorBracketPairGuide.background5#4a85c588
editorBracketPairGuide.background6#d3447e88
editorCodeLens.foreground#798768
editorCommentsWidget.rangeActiveBackground#79876844
editorCommentsWidget.rangeActiveBorder#798768
editorCommentsWidget.rangeBackground#ffffff22
editorCommentsWidget.rangeBorder#798768
editorCommentsWidget.resolvedBorder#4c954e88
editorCommentsWidget.unresolvedBorder#ba693a88
editorCursor.background#1a1c1d
editorCursor.foreground#ffffffba
editorError.background#00000000
editorError.border#00000000
editorError.foreground#e82c38
editorGhostText.background#767eab33
editorGhostText.border#00000000
editorGhostText.foreground#ffffff6a
editorGroup.border#393c3e
editorGroup.dropBackground#4a85c588
editorGroup.dropIntoPromptBackground#2d6398
editorGroup.dropIntoPromptBorder#121415
editorGroup.dropIntoPromptForeground#ffffff
editorGroup.emptyBackground#121415
editorGroup.focusedEmptyBorder#4a85c5
editorGroupHeader.border#393c3e
editorGroupHeader.noTabsBackground#121415
editorGroupHeader.tabsBackground#121415
editorGroupHeader.tabsBorder#393c3e
editorGutter.addedBackground#4c954e
editorGutter.background#1a1c1d
editorGutter.commentGlyphForeground#ffffffb4
editorGutter.commentRangeForeground#323536
editorGutter.commentUnresolvedGlyphForeground#baa002
editorGutter.deletedBackground#ba693a
editorGutter.foldingControlForeground#ffffffb4
editorGutter.modifiedBackground#269294
editorHint.border#4c954e
editorHint.foreground#00000000
editorHoverWidget.background#232627e2
editorHoverWidget.border#494c4e
editorHoverWidget.foreground#ffffffb4
editorHoverWidget.highlightForeground#b854af
editorHoverWidget.statusBarBackground#1d2021ee
editorIndentGuide.activeBackground#ffffff6a
editorIndentGuide.background#ffffff44
editorInfo.background#00000000
editorInfo.border#00000000
editorInfo.foreground#65a0fe
editorInlayHint.background#43474988
editorInlayHint.foreground#ffffff9e
editorInlayHint.parameterBackground#43474988
editorInlayHint.parameterForeground#997780
editorInlayHint.typeBackground#43474988
editorInlayHint.typeForeground#4a85c5
editorLightBulb.foreground#baa002
editorLightBulbAutoFix.foreground#65a0fe
editorLineNumber.activeForeground#65a0fe
editorLineNumber.dimmedForeground#ffffff33
editorLineNumber.foreground#ffffff44
editorLink.activeForeground#2d6398
editorMarkerNavigation.background#232627e2
editorMarkerNavigationError.background#e82c38
editorMarkerNavigationError.headerBackground#a62d3788
editorMarkerNavigationInfo.background#4a85c5
editorMarkerNavigationInfo.headerBackground#2d639888
editorMarkerNavigationWarning.background#968103
editorMarkerNavigationWarning.headerBackground#705f0488
editorOverviewRuler.addedForeground#4c954e
editorOverviewRuler.background#232627aa
editorOverviewRuler.border#393c3e
editorOverviewRuler.bracketMatchForeground#ffffff88
editorOverviewRuler.commonContentForeground#28712f
editorOverviewRuler.currentContentForeground#2d6398
editorOverviewRuler.deletedForeground#ba693a
editorOverviewRuler.errorForeground#e82c38
editorOverviewRuler.findMatchForeground#b854af
editorOverviewRuler.incomingContentForeground#ab145d
editorOverviewRuler.infoForeground#4a85c5
editorOverviewRuler.modifiedForeground#269294
editorOverviewRuler.rangeHighlightForeground#b854af66
editorOverviewRuler.selectionHighlightForeground#4a85c599
editorOverviewRuler.warningForeground#968103
editorOverviewRuler.wordHighlightForeground#26929455
editorOverviewRuler.wordHighlightStrongForeground#26929499
editorOverviewRuler.wordHighlightTextForeground#6a6a6a99
editorPane.background#121415
editorRuler.foreground#ffffff33
editorStickyScroll.background#232627
editorStickyScrollHover.background#2d639888
editorSuggestWidget.background#1d2021ee
editorSuggestWidget.border#494c4e
editorSuggestWidget.focusHighlightForeground#4a85c5
editorSuggestWidget.foreground#ffffffb4
editorSuggestWidget.highlightForeground#a065b9
editorSuggestWidget.selectedBackground#4a85c544
editorSuggestWidget.selectedForeground#ffffffc6
editorSuggestWidget.selectedIconForeground#ffffffc6
editorSuggestWidgetStatus.foreground#ffffffda
editorUnicodeHighlight.background#00000000
editorUnicodeHighlight.border#baa002
editorUnnecessaryCode.opacity#000000bb
editorWarning.background#00000000
editorWarning.border#00000000
editorWarning.foreground#968103
editorWhitespace.foreground#6a6a6a55
editorWidget.background#1d2021ee
editorWidget.border#494c4e
editorWidget.foreground#ffffffb4
editorWidget.resizeBorder#6a6a6a
errorForeground#e82c38
extensionBadge.remoteBackground#28712fdd
extensionBadge.remoteForeground#ffffff
extensionButton.background#2d6398
extensionButton.foreground#ffffff
extensionButton.hoverBackground#4a85c5
extensionButton.prominentBackground#2d6398
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#4a85c5
extensionButton.separator#ffffff66
extensionIcon.preReleaseForeground#d3447edd
extensionIcon.sponsorForeground#b854af
extensionIcon.starForeground#aa7603
extensionIcon.verifiedForeground#2d6398
focusBorder#4a85c5
foreground#ffffff9e
gitDecoration.addedResourceForeground#4c954e
gitDecoration.conflictingResourceForeground#d3447e
gitDecoration.deletedResourceForeground#ba693a
gitDecoration.ignoredResourceForeground#6a6a6a
gitDecoration.modifiedResourceForeground#269294
gitDecoration.renamedResourceForeground#4a85c5
gitDecoration.stageDeletedResourceForeground#aa7603
gitDecoration.stageModifiedResourceForeground#a065b9
gitDecoration.submoduleResourceForeground#608b8b
gitDecoration.untrackedResourceForeground#798768
icon.foreground#ffffffbb
input.background#43474988
input.border#ffffff6a
input.foreground#ffffff9e
input.placeholderForeground#ffffff6a
inputOption.activeBackground#4a85c588
inputOption.activeBorder#4a85c5
inputOption.activeForeground#ffffff
inputOption.hoverBackground#2d6398
inputValidation.errorBackground#a62d3788
inputValidation.errorBorder#a62d37
inputValidation.errorForeground#ffffffc6
inputValidation.infoBackground#2d639888
inputValidation.infoBorder#2d6398
inputValidation.infoForeground#ffffffc6
inputValidation.warningBackground#705f0488
inputValidation.warningBorder#705f04
inputValidation.warningForeground#ffffffc6
issues.closed#a065b9
issues.newIssueDecoration#4a85c5
issues.open#4c954e
keybindingLabel.background#121415
keybindingLabel.border#393c3e
keybindingLabel.bottomBorder#090b0d
keybindingLabel.foreground#ffffffb4
keybindingTable.headerBackground#232627
keybindingTable.rowsBackground#00000044
list.activeSelectionBackground#4a85c544
list.activeSelectionForeground#9e9e9e
list.deemphasizedForeground#ffffff6a
list.dropBackground#4a85c588
list.errorForeground#e82c38
list.filterMatchBackground#a065b933
list.filterMatchBorder#a065b9
list.focusAndSelectionOutline#4a85c5
list.focusHighlightForeground#4a85c5
list.focusOutline#4a85c5
list.highlightForeground#a065b9
list.hoverBackground#2d639888
list.hoverForeground#ffffffb4
list.inactiveFocusOutline#4a85c5
list.inactiveSelectionBackground#232627
list.invalidItemForeground#ba693a
list.warningForeground#968103
listFilterWidget.background#1d2021ee
listFilterWidget.noMatchesOutline#e82c3888
listFilterWidget.outline#00000000
listFilterWidget.shadow#00000066
markdown.extension.editor.codeSpan.background#79876822
markdown.extension.editor.codeSpan.border#798768
menu.background#1d2021ee
menu.border#494c4e
menu.foreground#ffffffb4
menu.selectionBackground#2d639888
menu.selectionBorder#00000000
menu.selectionForeground#ffffffb4
menu.separatorBackground#494c4e
menubar.selectionBackground#2d639888
menubar.selectionBorder#00000000
menubar.selectionForeground#ffffffb4
merge.border#6a6a6a
merge.commonContentBackground#28712f
merge.commonHeaderBackground#28712f44
merge.currentContentBackground#2d639844
merge.currentHeaderBackground#2d6398
merge.incomingContentBackground#ab145d44
merge.incomingHeaderBackground#ab145d
mergeEditor.change.background#d3447e44
mergeEditor.change.word.background#00000000
mergeEditor.changeBase.background#FFf900
mergeEditor.changeBase.word.background#FFf300
mergeEditor.conflict.handled.minimapOverViewRuler#4c954e
mergeEditor.conflict.handledFocused.border#4c954e
mergeEditor.conflict.handledUnfocused.border#4c954e88
mergeEditor.conflict.input1.background#FFed00
mergeEditor.conflict.input2.background#FFe700
mergeEditor.conflict.unhandled.minimapOverViewRuler#d3447e
mergeEditor.conflict.unhandledFocused.border#d3447e
mergeEditor.conflict.unhandledUnfocused.border#d3447e88
mergeEditor.conflictingLines.background#FFff00
minimap.background#232627aa
minimap.errorHighlight#a62d37
minimap.findMatchHighlight#b854af
minimap.foregroundOpacity#000000ff
minimap.selectionHighlight#4a85c588
minimap.selectionOccurrenceHighlight#269294
minimap.warningHighlight#705f04
minimapGutter.addedBackground#4c954e
minimapGutter.deletedBackground#ba693a
minimapGutter.modifiedBackground#269294
minimapSlider.activeBackground#4a85c588
minimapSlider.background#4a85c544
minimapSlider.hoverBackground#2d639888
notebook.cellBorderColor#393c3e
notebook.cellEditorBackground#121415
notebook.cellHoverBackground#00000000
notebook.cellInsertionIndicator#4a85c588
notebook.cellStatusBarItemHoverBackground#2d639888
notebook.cellToolbarSeparator#494c4e
notebook.editorBackground#1a1c1d
notebook.focusedCellBackground#00000000
notebook.focusedCellBorder#2d6398
notebook.focusedEditorBorder#4a85c5
notebook.inactiveFocusedCellBorder#6a6a6a
notebook.inactiveSelectedCellBorder#6a6a6a
notebook.outputContainerBackgroundColor#232627
notebook.outputContainerBorderColor#393c3e
notebook.selectedCellBackground#4a85c588
notebook.selectedCellBorder#4a85c5
notebook.symbolHighlightBackground#a065b9
notebookEditorOverviewRuler.runningCellForeground#65a0fe
notebookScrollbarSlider.activeBackground#c5c5c599
notebookScrollbarSlider.background#ffffff33
notebookScrollbarSlider.hoverBackground#dbdbdb66
notebookStatusErrorIcon.foreground#e82c38
notebookStatusRunningIcon.foreground#9e9e9e
notebookStatusSuccessIcon.foreground#4c954e
notificationCenter.border#494c4e
notificationCenterHeader.background#232627e2
notificationCenterHeader.foreground#ffffffb4
notificationLink.foreground#65a0fe
notifications.background#232627e2
notifications.border#494c4e
notifications.foreground#ffffffb4
notificationsErrorIcon.foreground#e82c38
notificationsInfoIcon.foreground#4a85c5
notificationsWarningIcon.foreground#968103
notificationToast.border#494c4e
panel.background#232627
panel.border#393c3e
panel.dropBorder#4a85c588
panelInput.border#ffffff6a
panelSection.border#494c4e
panelSection.dropBackground#4a85c588
panelSectionHeader.background#323536
panelSectionHeader.border#494c4e
panelSectionHeader.foreground#ffffffb4
panelTitle.activeBorder#2d6398
panelTitle.activeForeground#4a85c5
panelTitle.inactiveForeground#ffffff9e
peekView.border#494c4e
peekViewEditor.background#232627
peekViewEditor.matchHighlightBackground#79876833
peekViewEditor.matchHighlightBorder#798768
peekViewEditorGutter.background#232627
peekViewResult.background#1a1c1d
peekViewResult.fileForeground#ffffff9e
peekViewResult.lineForeground#ffffffc6
peekViewResult.matchHighlightBackground#a065b933
peekViewResult.selectionBackground#4a85c544
peekViewResult.selectionForeground#ffffffb4
peekViewTitle.background#232627
peekViewTitleDescription.foreground#ffffff6a
peekViewTitleLabel.foreground#ffffffb4
pickerGroup.border#494c4e
pickerGroup.foreground#4a85c5
ports.iconRunningProcessForeground#FFdb00
problemsErrorIcon.foreground#e82c38
problemsInfoIcon.foreground#65a0fe
problemsWarningIcon.foreground#968103
profileBadge.background#2d6398dd
profileBadge.foreground#ffffff
progressBar.background#4a85c5
pullRequests.closed#e82c38
pullRequests.draft#9e9e9e
pullRequests.merged#a065b9
pullRequests.notification#4a85c5
pullRequests.open#4c954e
quickInput.background#1d2021ee
quickInput.foreground#ffffffb4
quickInputList.focusBackground#4a85c544
quickInputList.focusForeground#ffffffb4
quickInputList.focusIconForeground#ffffffb4
quickInputTitle.background#232627
regionmarker.background#b854af44
regionmarker.foreground#b854af
sash.hoverBorder#2d6398
scm.providerBorder#FFe100
scrollbar.shadow#00000066
scrollbarSlider.activeBackground#c5c5c599
scrollbarSlider.background#ffffff33
scrollbarSlider.hoverBackground#dbdbdb66
search.resultsInfoForeground#a065b9
searchEditor.findMatchBackground#a065b911
searchEditor.findMatchBorder#a065b9
searchEditor.textInputBorder#434749
selection.background#4a85c533
settings.checkboxBackground#43474988
settings.checkboxBorder#ffffff6a
settings.checkboxForeground#4a85c5
settings.dropdownBackground#43474988
settings.dropdownBorder#ffffff6a
settings.dropdownForeground#ffffffb4
settings.dropdownListBorder#ffffff6a
settings.focusedRowBackground#4a85c544
settings.headerBorder#494c4e
settings.headerForeground#4a85c5
settings.modifiedItemIndicator#269294
settings.numberInputBackground#43474988
settings.numberInputBorder#ffffff9e
settings.numberInputForeground#ffffffb4
settings.rowHoverBackground#2d639888
settings.sashBorder#ffffff66
settings.settingsHeaderHoverForeground#ffffffdd
settings.textInputBackground#43474988
settings.textInputBorder#ffffff6a
settings.textInputForeground#ffffffb4
sideBar.background#121415
sideBar.border#393c3e
sideBar.dropBackground#4a85c588
sideBar.foreground#ffffff9e
sideBarSectionHeader.background#121415
sideBarSectionHeader.border#393c3e
sideBarSectionHeader.foreground#ffffffb4
sideBarTitle.foreground#ffffffb4
sideBySideEditor.horizontalBorder#6a6a6a
sideBySideEditor.verticalBorder#6a6a6a
statusBar.background#2d6398
statusBar.debuggingBackground#93481c
statusBar.debuggingForeground#ffffff
statusBar.focusBorder#4a85c5
statusBar.foreground#ffffffdd
statusBar.noFolderBackground#7b4495
statusBar.noFolderForeground#ffffffdd
statusBarItem.activeBackground#00000044
statusBarItem.compactHoverBackground#ffffff66
statusBarItem.errorBackground#a62d37
statusBarItem.errorForeground#ffffffdd
statusBarItem.focusBorder#4a85c5
statusBarItem.hoverBackground#ffffff44
statusBarItem.prominentBackground#14141444
statusBarItem.prominentForeground#ffffff
statusBarItem.prominentHoverBackground#ffffff22
statusBarItem.remoteBackground#28712f
statusBarItem.remoteForeground#ffffff
statusBarItem.warningBackground#705f04
statusBarItem.warningForeground#ffffffdd
symbolIcon.arrayForeground#968103
symbolIcon.booleanForeground#968103
symbolIcon.classForeground#4a85c5
symbolIcon.colorForeground#d3447e
symbolIcon.constantForeground#608b8b
symbolIcon.constructorForeground#4a85c5
symbolIcon.enumeratorForeground#4a85c5
symbolIcon.enumeratorMemberForeground#608b8b
symbolIcon.eventForeground#aa7603
symbolIcon.fieldForeground#a065b9
symbolIcon.fileForeground#b854af
symbolIcon.folderForeground#b854af
symbolIcon.functionForeground#ba693a
symbolIcon.interfaceForeground#4a85c5
symbolIcon.keyForeground#997780
symbolIcon.keywordForeground#968103
symbolIcon.methodForeground#ba693a
symbolIcon.moduleForeground#6a6a6a
symbolIcon.namespaceForeground#6a6a6a
symbolIcon.nullForeground#968103
symbolIcon.numberForeground#4c954e
symbolIcon.objectForeground#608b8b
symbolIcon.operatorForeground#6a6a6a
symbolIcon.packageForeground#6a6a6a
symbolIcon.propertyForeground#a065b9
symbolIcon.referenceForeground#aa7603
symbolIcon.snippetForeground#798768
symbolIcon.stringForeground#269294
symbolIcon.structForeground#4a85c5
symbolIcon.textForeground#269294
symbolIcon.typeParameterForeground#767eab
symbolIcon.unitForeground#767eab
symbolIcon.variableForeground#c5c5c5
tab.activeBackground#232627
tab.activeBorder#232627
tab.activeBorderTop#2d6398
tab.activeForeground#ffffffb4
tab.border#393c3e
tab.hoverBackground#2d639888
tab.inactiveBackground#121415
tab.inactiveForeground#c5c5c5bb
tab.lastPinnedBorder#4a85c5
tab.unfocusedActiveBackground#1a1c1d
tab.unfocusedActiveBorder#1d2021
tab.unfocusedActiveBorderTop#393c3e
tab.unfocusedActiveForeground#c5c5c5bb
tab.unfocusedHoverBackground#2d639866
tab.unfocusedInactiveBackground#121415
tab.unfocusedInactiveForeground#c5c5c566
terminal.ansiBlack#525252
terminal.ansiBlue#4a85c5
terminal.ansiBrightBlack#848484
terminal.ansiBrightBlue#767eab
terminal.ansiBrightCyan#608b8b
terminal.ansiBrightGreen#798768
terminal.ansiBrightMagenta#d3447e
terminal.ansiBrightRed#997780
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#968103
terminal.ansiCyan#269294
terminal.ansiGreen#4c954e
terminal.ansiMagenta#a065b9
terminal.ansiRed#e82c38
terminal.ansiWhite#c5c5c5
terminal.ansiYellow#ba693a
terminal.background#1d2021
terminal.border#494c4e
terminal.dropBackground#4a85c588
terminal.findMatchBackground#a065b911
terminal.findMatchBorder#a065b9
terminal.findMatchHighlightBackground#a065b922
terminal.findMatchHighlightBorder#a065b9
terminal.foreground#c5c5c5
terminal.hoverHighlightBackground#26929466
terminal.inactiveSelectionBackground#9e9e9e33
terminal.selectionBackground#4a85c533
terminal.tab.activeBorder#2d6398
terminalCommandDecoration.defaultBackground#6a6a6a
terminalCommandDecoration.errorBackground#e82c38
terminalCommandDecoration.successBackground#4c954e
terminalCursor.background#1d2021
terminalCursor.foreground#ffffffda
terminalOverviewRuler.cursorForeground#ffffffda
terminalOverviewRuler.findMatchForeground#a065b9
testing.iconErrored#e82c38
testing.iconFailed#968103
testing.iconPassed#4c954e
testing.iconQueued#9e9e9e
testing.iconSkipped#b854af
testing.iconUnset#9e9e9e
testing.message.error.decorationForeground#e82c38
testing.message.error.lineBackground#e82c38
testing.message.info.decorationForeground#d3447e
testing.message.info.lineBackground#d3447e
testing.peekBorder#d3447e
testing.peekHeaderBackground#d3447e66
testing.runAction#4c954e
textBlockQuote.background#232627
textBlockQuote.border#798768
textCodeBlock.background#79876866
textLink.activeForeground#2d6398
textLink.foreground#65a0fe
textPreformat.foreground#269294
textSeparator.foreground#6a6a6a
titleBar.activeBackground#121415
titleBar.activeForeground#ffffffb4
titleBar.border#121415
titleBar.inactiveBackground#121415
titleBar.inactiveForeground#ffffff6a
toolbar.activeBackground#4a85c5
toolbar.hoverBackground#2d6398
tree.inactiveIndentGuidesStroke#ffffff33
tree.indentGuidesStroke#ffffff66
tree.tableColumnsBorder#494c4e
tree.tableOddRowsBackground#00000044
walkThrough.embeddedEditorBackground#121415
walkthrough.stepTitle.foreground#a065b9
welcomePage.background#1a1c1d
welcomePage.progress.background#434749
welcomePage.progress.foreground#4a85c5
welcomePage.tileBackground#232627
welcomePage.tileBorder#393c3e
welcomePage.tileHoverBackground#2d639888
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.template.expression variable.other.readwrite, variable.other.jsdoc, variable.other.php, variable.other.normal.shell	#c5c5c5	—
source.sql text.variable	#c5c5c5	italic
string.quoted.double.oracle_sql	#c5c5c5	underline
support.constant.core.php, constant.other.php, constant.other.class.php	#c5c5c5	bold
keyword.operator, entity.name.operator, punctuation.separator, punctuation.section, punctuation.definition, punctuation.accessor, punctuation.destructuring, meta.brace, punctuation.bracket, storage.type.function.arrow, constant.character.entity.xml, punctuation.curlybrace, punctuation.parenthesis, punctuation.squarebracket, entity.name.namespace, storage.modifier.import, storage.modifier.package, entity.name.tag.namespace, entity.other.attribute-name.namespace, entity.name.scope-resolution, entity.name.scope-resolution.namespace.using, support.other.namespace.php, entity.name.type.namespace.php, meta.link.email.lt-gt.markdown, punctuation.other.colon.go, punctuation.other.period.go, punctuation.other.comma.go, punctuation.eq.toml	#9e9e9e
support.function.magic.python	#9e9e9e	italic
comment, punctuation.definition.comment, punctuation.definition.group.no-capture.regexp	#6a6a6a	—
fenced_code.block.language.markdown	#6a6a6a	bold
comment.block.documentation, comment.block.documentation punctuation.definition.comment, string.quoted.docstring, string.quoted.docstring punctuation.definition.string, comment.block.javadoc, comment.block.javadoc punctuation.definition.comment	#798768	—
markup.fenced_code.block.markdown punctuation.definition.markdown, punctuation.definition.raw.markdown, meta.link.reference.def.markdown markup.underline.link.markdown	#798768
invalid.deprecated.line-too-long.git-commit	#968103	—
keyword, punctuation.terminator, punctuation.section.function.begin.python, punctuation.separator.colon.python, keyword.operator.ternary, keyword.operator.conditional.question-mark.cs, keyword.operator.conditional.colon.cs, punctuation.definition.constant.xml, keyword.operator.new, keyword.operator.delete, keyword.operator.expression.typeof, keyword.operator.expression.instanceof, keyword.operator.expression.in, keyword.operator.expression.of, keyword.operator.noexcept, keyword.operator.expression.keyof, constant.language, support.type.primitive, support.type.builtin, variable.language.this, variable.language.super, storage, storage.type.primitive.groovy, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-element punctuation.definition.entity, support.constant.media, punctuation.separator.colon.access.control, keyword.operator.or.regexp, keyword.operator.negation.regexp, keyword.operator.logical.python, keyword.operator.logical.python	#968103	bold
entity.other.keyframe-offset, keyword.blade	#968103	italic bold
entity.name.function, support.function, punctuation.definition.group.regexp, markup.changed.git-commit, meta.method.groovy	#ba693a	—
constant.other.timestamp.yaml, constant.other.time.time.toml, constant.other.time.date.toml, constant.other.time.datetime.local.toml, constant.other.time.datetime.offset.toml	#ba693a
entity.name.function.blade	#ba693a	italic bold
punctuation.definition.tag, keyword.control.anchor.regexp, support.function.aggregate.sql	#aa7603	—
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python, variable.language.special.shell, support.function.builtin.shell	#aa7603	bold
entity.name.tag, support.function.builtin.zig, support.function.builtin.go, support.function.builtin.python	#aa7603	italic bold
markup.changed.git-commit	#269294	—
string, punctuation.definition.string, meta.property-value.css, punctuation.section.embedded	#269294	bold
markup.inserted.git-commit	#4c954e	—
constant.numeric, keyword.other.unit.exponent, constant.numeric storage, keyword.other.unit.hexadecimal.cpp, keyword.other.unit.octal.cpp, keyword.other.unit.binary.cpp, keyword.operator.quantifier.regexp, punctuation.section.arithmetic.double.shell, punctuation.definition.logical-expression.shell	#4c954e	bold
variable.css, variable.argument.css, constant.character.escape	#608b8b	bold
meta.enum variable, constant.other.enum.java, constant.enum.php	#608b8b	bold underline
storage.type.format.python, constant.other.placeholder, keyword.operator.expansion.shell, storage.type.groovy	#4a85c5
entity.name.type, storage.type.java, storage.type.tag-handle.yaml, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-class punctuation.definition.entity.css, entity.name.tag support.class.component, constant.other.character-class.regexp, punctuation.definition.character-class.regexp, support.class.php, entity.other.inherited-class.php, meta.use.php entity.other.alias.php, meta.other.type.phpdoc.php, support.class.builtin.php, text.html.php.blade meta.tag.custom entity.name.tag.html, text.html.php.blade invalid.illegal.unrecognized-tag	#4a85c5	—
meta.attribute.class string, entity.other.attribute-name.class, entity.other.attribute-name.class punctuation.definition.entity, entity.name.type.trait.php, entity.name.type.interface.php	#4a85c5	italic
markup.heading.markdown, punctuation.definition.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown, punctuation.separator.statement.background.shell	#4a85c5	bold
entity.name.type.record, entity.name.type.struct	#4a85c5	italic bold
entity.name.type.enum.java, entity.name.type.enum.php	#4a85c5	bold underline
storage.type.generic.java, entity.name.type.template, keyword.other.unit, constant.other.color punctuation.definition.constant, storage.type.string.python, keyword.operator.spread, keyword.operator.rest, punctuation.definition.parameters.varargs, punctuation.vararg-ellipses, keyword.operator.unpacking, keyword.operator.variadic.php	#767eab	—
variable.object.property, variable.other.object.property, variable.other.property, variable.other.constant.property, entity.name.tag.yaml, support.type.property-name, meta.object-literal.key, meta.object-literal.key string.quoted.double, keyword.other.definition.ini, keyword.other.back-reference.regexp, punctuation.definition.group.regexp variable.other.regexp, variable.other.makefile, punctuation.definition.list.begin.markdown	#a065b9
support.type.vendored.property-name	#a065b9	italic
punctuation.definition.variable.php	#a065b9	bold
meta.preprocessor, punctuation.definition.directive, keyword.control.directive	#d3447e	bold italic
keyword.control.at-rule, keyword.control.at-rule punctuation.definition, storage.type.class.jsdoc, storage.type.class.doxygen, punctuation.definition.block.tag, keyword.other.documentation.javadoc, keyword.other.phpdoc.php, meta.decorator, entity.name.function.decorator, entity.name.function.decorator punctuation.definition.decorator, storage.type.annotation, punctuation.definition.annotation, support.other.attribute.cpp, support.other.attribute.cpp punctuation.section, meta.attribute.php, entity.other.document, support.other.directive, punctuation.definition.directive, support.type.property-name.table.toml, punctuation.definition.entity.ini, entity.name.section.group-title.ini, meta.tag.preprocessor entity.name.tag, meta.tag.preprocessor.xml punctuation.definition.tag.xml, meta.assertion.look-ahead.regexp, string.other.link.description.markdown, meta.separator.markdown, docstring.variable.identifier.sphinx.python, docstring.variable.begin.sphinx.python, docstring.variable.end.sphinx.python, support.variable.magic.python	#d3447e	—
meta.assertion.negative-look-ahead.regexp	#d3447e	underline
entity.name.function.preprocessor, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, keyword.begin.blade, keyword.end.blade	#d3447e	bold
variable.parameter, entity.name.variable.parameter.php, meta.function.parameter.typehinted.php variable.other.php, meta.function.parameter.default.php variable.other.php, meta.function.parameter.no-default.php variable.other.php, constant.other.option	#997780	bold
entity.other.attribute-name, entity.name.type.anchor.yaml, punctuation.definition.anchor.yaml, variable.other.alias.yaml, punctuation.definition.alias.yaml, markup.quote.markdown, punctuation.definition.quote.begin.markdown	#997780
punctuation.definition.ng-binding-name	#997780	italic bold
entity.other.ng-binding-name	#997780	italic
entity.name.label, punctuation.separator.label, punctuation.definition.template-expression, constant.character.format.placeholder, punctuation.section.embedded, punctuation.definition.interpolation, punctuation.definition.variable.shell, punctuation.definition.variable.shell variable.other.normal.shell, punctuation.definition.subshell, punctuation.definition.group.shell, punctuation.section.parenthese.shell, string.interpolated.process-substitution.shell, string.interpolated.process-substitution.shell punctuation.definition.string, support.function.construct.begin.blade, support.function.construct.end.blade, storage.type.generic.wildcard.java, meta.assertion.look-behind.regexp, string.other.link.title.markdown, comment.line.shebang, meta.shebang.shell	#b854af
meta.assertion.negative-look-behind.regexp, meta.link.reference.markdown string.other.link.title.markdown, constant.other.reference.link.markdown	#b854af	underline
meta.attribute.id string, entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition	#b854af	italic
invalid.illegal, invalid.illegal.line-too-long.git-commit	#e82c38	—
constant.other.caps.python, markup.bold.markdown	—	bold
markup.italic.markdown	—	italic
markup.italic.markdown markup.bold.markdown	—	italic bold
markup.underline.link.image.markdown, markup.underline.link.markdown	#65a0fe	underline
rainbow1	#a065b9	bold
keyword.rainbow2	#4a85c5	italic bold
entity.name.function.rainbow3	#4c954e	bold
comment.rainbow4	#968103	italic bold
string.rainbow5	#ba693a	bold
variable.parameter.rainbow6	#d3447e	italic bold
constant.numeric.rainbow7	#269294	bold
entity.name.type.rainbow8	#9e9e9e	italic bold
markup.bold.rainbow9	#997780	bold
invalid.rainbow10	#aa7603	italic bold

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