Remedy

Name: Remedy
Author: Robert Rossmann

Publisher: Robert RossmannThemes in package: 4

A dark & bright theme with orange accents with roots in Base16 - Eighties colour theme

GitHub

Color themes

VS Code preview

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

Remedy — Remedy - Dark (Straight)

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...
~/my-project

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#EB684B
activityBar.background#352B2A
activityBar.border#2A2222
activityBar.dropBorder#EB684B
activityBar.foreground#F7E0B4
activityBar.inactiveForeground#635A48
activityBarBadge.background#EB684B
activityBarBadge.foreground#0B0908
activityBarTop.activeBackground#352B2A
activityBarTop.activeBorder#EB684B
activityBarTop.background#352B2A
activityBarTop.dropBorder#EB684B
activityBarTop.foreground#F7E0B4
activityBarTop.inactiveForeground#635A48
activityErrorBadge.background#A54242
activityErrorBadge.foreground#0B0908
activityWarningBadge.background#DE935F
activityWarningBadge.foreground#0B0908
badge.background#EB684B
badge.foreground#0B0908
bookmarks.lineBackground#5F819D11
bookmarks.lineBorder#5F819D66
bookmarks.overviewRuler#5F819D
breadcrumb.activeSelectionForeground#F7E0B4
breadcrumb.focusForeground#F7E0B4
breadcrumb.foreground#6A5C41
breadcrumbPicker.background#352B2A
button.background#EB684B
button.foreground#0B0908
button.hoverBackground#F19783
button.secondaryBackground#DE935F
button.secondaryForeground#0B0908
button.secondaryHoverBackground#E9B694
charts.blue#5F819D
charts.green#8C9440
charts.orange#DE935F
charts.purple#85678F
charts.red#A54242
charts.yellow#F0C674
chat.avatarBackground#F7E0B4
chat.avatarForeground#352B2A
chat.requestBackground#3F3433
chat.requestBorder#2A2222
chat.slashCommandBackground#EB684B
chat.slashCommandForeground#0B0908
checkbox.background#352B2A
checkbox.border#2A2222
checkbox.foreground#DE935F
commandCenter.activeBackground#3F3433
commandCenter.activeBorder#EB684B
commandCenter.activeForeground#6A5C41
commandCenter.background#3F3433
commandCenter.border#2A2222
commandCenter.foreground#6A5C41
commandCenter.inactiveBorder#2A2222
debugConsole.errorForeground#A54242
debugConsole.infoForeground#5F819D
debugConsole.sourceForeground#635A48
debugConsole.warningForeground#DE935F
debugConsoleInputIcon.foreground#635A48
debugExceptionWidget.background#352B2A
debugExceptionWidget.border#EB684B
debugIcon.breakpointCurrentStackframeForeground#81A2BE
debugIcon.breakpointDisabledForeground#635A4866
debugIcon.breakpointForeground#CC6666
debugIcon.breakpointStackframeForeground#5F819D99
debugIcon.breakpointUnverifiedForeground#707880
debugIcon.continueForeground#EB684B
debugIcon.disconnectForeground#A54242
debugIcon.pauseForeground#EB684B
debugIcon.restartForeground#B5BD68
debugIcon.startForeground#EB684B
debugIcon.stepBackForeground#81A2BE
debugIcon.stepIntoForeground#81A2BE
debugIcon.stepOutForeground#81A2BE
debugIcon.stepOverForeground#81A2BE
debugIcon.stopForeground#A54242
debugTokenExpression.boolean#DE935F
debugTokenExpression.error#A54242
debugTokenExpression.name#F7E0B4
debugTokenExpression.number#DE935F
debugTokenExpression.string#B5BD68
debugTokenExpression.type#CC6666
debugTokenExpression.value#635A48
debugToolBar.background#352B2A
debugToolBar.border#2A2222
debugView.exceptionLabelBackground#A54242
debugView.exceptionLabelForeground#0B0908
debugView.stateLabelBackground#5F819D
debugView.stateLabelForeground#0B0908
debugView.valueChangedHighlight#5F819D99
descriptionForeground#F7E0B4
diffEditor.border#2A2222
diffEditor.diagonalFill#6A5C4144
diffEditor.insertedLineBackground#B5BD6809
diffEditor.insertedTextBackground#B5BD6822
diffEditor.removedLineBackground#CC666609
diffEditor.removedTextBackground#CC666622
diffEditor.unchangedCodeBackground#70788022
diffEditor.unchangedRegionForeground#6A5C41
disabledForeground#635A48
dropdown.background#352B2A
dropdown.border#2A2222
dropdown.foreground#F7E0B4
editor.background#3F3433
editor.findMatchBackground#5E8D8744
editor.findMatchBorder#5E8D87AA
editor.findMatchHighlightBackground#5E8D8733
editor.findRangeHighlightBackground#B5BD6811
editor.focusedStackFrameHighlightBackground#81A2BE22
editor.foldBackground#5F819D11
editor.foldPlaceholderForeground#6A5C41
editor.foreground#F7E0B4
editor.hoverHighlightBackground#F7E0B411
editor.inlineValuesBackground#352B2A
editor.inlineValuesForeground#6A5C41
editor.lineHighlightBackground#F7E0B409
editor.rangeHighlightBackground#F7E0B411
editor.selectionBackground#F7E0B422
editor.selectionHighlightBackground#F7E0B411
editor.snippetFinalTabstopHighlightBackground#5E8D8733
editor.snippetFinalTabstopHighlightBorder#5E8D8799
editor.snippetTabstopHighlightBackground#5E8D8700
editor.snippetTabstopHighlightBorder#5E8D8799
editor.stackFrameHighlightBackground#5F819D33
editor.wordHighlightBackground#F7E0B411
editor.wordHighlightStrongBackground#EB684B33
editor.wordHighlightStrongBorder#EB684BAA
editorBracketHighlight.foreground1#B294BB88
editorBracketHighlight.foreground2#CC666688
editorBracketHighlight.foreground3#F0C67488
editorBracketHighlight.foreground4#8ABEB788
editorBracketHighlight.foreground5#B5BD6888
editorBracketHighlight.foreground6#81A2BE88
editorBracketHighlight.unexpectedBracket.foreground#DE935F
editorBracketMatch.background#6A5C4133
editorBracketMatch.border#6A5C4166
editorCodeLens.foreground#6A5C41
editorCursor.background#352B2A
editorCursor.foreground#F7E0B4
editorError.foreground#A54242
editorGhostText.background#6A5C4122
editorGhostText.foreground#6A5C41
editorGroup.border#2A2222
editorGroup.dropBackground#F7E0B422
editorGroupHeader.noTabsBackground#352B2A
editorGroupHeader.tabsBackground#352B2A
editorGutter.addedBackground#B5BD68
editorGutter.commentRangeForeground#6A5C4199
editorGutter.deletedBackground#CC6666
editorGutter.foldingControlForeground#6A5C41
editorGutter.modifiedBackground#81A2BE
editorHint.foreground#707880
editorHoverWidget.background#352B2A
editorHoverWidget.border#2A2222
editorIndentGuide.activeBackground#6A5C4199
editorIndentGuide.background#6A5C4133
editorInfo.foreground#5F819D
editorInlayHint.background#352B2A
editorInlayHint.foreground#6A5C41
editorLightBulb.foreground#DE935F
editorLightBulbAutoFix.foreground#5F819D
editorLineNumber.activeForeground#F7E0B4
editorLineNumber.foreground#6A5C41
editorLink.activeForeground#EB684B
editorMarkerNavigation.background#352B2A
editorMarkerNavigationError.background#A5424244
editorMarkerNavigationInfo.background#5F819D44
editorMarkerNavigationWarning.background#DE935F44
editorOverviewRuler.addedForeground#B5BD68
editorOverviewRuler.background#352B2A
editorOverviewRuler.border#352B2A
editorOverviewRuler.bracketMatchForeground#6A5C41
editorOverviewRuler.deletedForeground#CC6666
editorOverviewRuler.errorForeground#A54242
editorOverviewRuler.findMatchForeground#5E8D87AA
editorOverviewRuler.infoForeground#5F819D
editorOverviewRuler.modifiedForeground#81A2BE
editorOverviewRuler.rangeHighlightForeground#EB684BAA
editorOverviewRuler.warningForeground#DE935F
editorOverviewRuler.wordHighlightForeground#5E8D8799
editorOverviewRuler.wordHighlightStrongForeground#5E8D87
editorPane.background#352B2A
editorRuler.foreground#6A5C4199
editorStickyScrollHover.background#F7E0B409
editorSuggestWidget.background#352B2A
editorSuggestWidget.border#2A2222
editorSuggestWidget.foreground#F7E0B4
editorSuggestWidget.highlightForeground#EB684B
editorSuggestWidget.selectedBackground#EB684B66
editorUnnecessaryCode.opacity#00000055
editorWarning.foreground#DE935F
editorWhitespace.foreground#6A5C4199
editorWidget.background#352B2A
editorWidget.border#2A2222
editorWidget.resizeBorder#EB684B
errorLens.errorBackground#0000
errorLens.errorBackgroundLight#0000
errorLens.errorForeground#A54242
errorLens.errorForegroundLight#A54242
errorLens.hintBackground#0000
errorLens.hintBackgroundLight#0000
errorLens.hintForeground#707880
errorLens.hintForegroundLight#707880
errorLens.infoBackground#0000
errorLens.infoBackgroundLight#0000
errorLens.infoForeground#5F819D
errorLens.infoForegroundLight#5F819D
errorLens.warningBackground#0000
errorLens.warningBackgroundLight#0000
errorLens.warningForeground#DE935F
errorLens.warningForegroundLight#DE935F
extensionButton.prominentBackground#EB684B
extensionButton.prominentForeground#0B0908
extensionButton.prominentHoverBackground#F3A391
extensionIcon.preReleaseForeground#A54242
extensionIcon.starForeground#EB684B
extensionIcon.verifiedForeground#8C9440
filewatcher.error#A54242
focusBorder#EB684B66
foreground#F7E0B4
gitDecoration.addedResourceForeground#B5BD68
gitDecoration.conflictingResourceForeground#F0C674
gitDecoration.deletedResourceForeground#CC6666
gitDecoration.ignoredResourceForeground#635A48
gitDecoration.modifiedResourceForeground#81A2BE
gitDecoration.submoduleResourceForeground#707880
gitDecoration.untrackedResourceForeground#707880
gitlens.closedPullRequestIconColor#F7E0B4
gitlens.decorations.addedForegroundColor#B5BD68
gitlens.decorations.branchAheadForegroundColor#81A2BE
gitlens.decorations.branchBehindForegroundColor#B5BD68
gitlens.decorations.branchDivergedForegroundColor#F0C674
gitlens.decorations.branchUnpublishedForegroundColor#707880
gitlens.decorations.branchUpToDateForegroundColor#F7E0B4
gitlens.decorations.copiedForegroundColor#81A2BE
gitlens.decorations.deletedForegroundColor#CC6666
gitlens.decorations.ignoredForegroundColor#635A48
gitlens.decorations.modifiedForegroundColor#81A2BE
gitlens.decorations.renamedForegroundColor#81A2BE
gitlens.decorations.untrackedForegroundColor#707880
gitlens.gutterBackgroundColor#3F3433
gitlens.gutterForegroundColor#6A5C41
gitlens.gutterUncommittedForegroundColor#707880
gitlens.lineHighlightBackgroundColor#B5BD6811
gitlens.lineHighlightOverviewRulerColor#B5BD6811
gitlens.mergedPullRequestIconColor#F7E0B4
gitlens.openPullRequestIconColor#F7E0B4
gitlens.unpublishedCommitIconColor#F7E0B4
gitlens.unpulledChangesIconColor#F7E0B4
gitlens.unpushlishedChangesIconColor#F7E0B4
icon.foreground#F7E0B4
input.background#3F3433
input.border#2A2222
input.placeholderForeground#6A5C41
inputOption.activeBorder#EB684B66
inputValidation.errorBackground#A54242
inputValidation.errorBorder#A54242
inputValidation.errorForeground#0B0908
inputValidation.infoBackground#5F819D
inputValidation.infoBorder#5F819D
inputValidation.infoForeground#0B0908
inputValidation.warningBackground#DE935F
inputValidation.warningBorder#DE935F
inputValidation.warningForeground#0B0908
issues.closed#A54242
issues.newIssueDecoration#6A5C41
issues.open#8C9440
keybindingLabel.background#52463F66
keybindingLabel.border#2A2222
keybindingLabel.bottomBorder#2A2222
keybindingLabel.foreground#F7E0B4
keybindingTable.headerBackground#352B2A
keybindingTable.rowsBackground#352B2A66
lintlens.annotationColor#70788099
list.activeSelectionBackground#EB684BAA
list.activeSelectionForeground#F7E0B4
list.deemphasizedForeground#635A48
list.dropBackground#F7E0B422
list.errorForeground#A54242
list.filterMatchBackground#5E8D8744
list.highlightForeground#EB684B
list.hoverBackground#F7E0B411
list.inactiveFocusBackground#F7E0B409
list.inactiveSelectionBackground#F7E0B409
list.invalidItemForeground#A54242
list.warningForeground#DE935F
listFilterWidget.background#352B2A
listFilterWidget.noMatchesOutline#A54242
menu.background#352B2A
menu.border#EB684B66
menu.foreground#F7E0B4
menu.selectionBackground#EB684B44
menu.selectionForeground#F7E0B4
menu.separatorBackground#2A2222
menubar.selectionBackground#EB684B
menubar.selectionForeground#F7E0B4
merge.border#2A222299
merge.commonContentBackground#C5C8C611
merge.commonHeaderBackground#C5C8C633
merge.currentContentBackground#B5BD6811
merge.currentHeaderBackground#B5BD6833
merge.incomingContentBackground#81A2BE11
merge.incomingHeaderBackground#81A2BE33
mergeEditor.change.background#F0C67411
mergeEditor.change.word.background#F0C67422
mergeEditor.conflict.handled.minimapOverViewRuler#81A2BE
mergeEditor.conflict.handledFocused.border#81A2BE66
mergeEditor.conflict.handledUnfocused.border#81A2BE22
mergeEditor.conflict.unhandled.minimapOverViewRuler#F0C674
mergeEditor.conflict.unhandledFocused.border#F0C67466
mergeEditor.conflict.unhandledUnfocused.border#F0C67422
mergeEditor.conflictingLines.background#F0C67466
minimap.background#352B2A
minimap.errorHighlight#A54242
minimap.findMatchHighlight#5E8D8744
minimap.selectionHighlight#F7E0B4AA
minimap.warningHighlight#DE935F
minimapGutter.addedBackground#B5BD68
minimapGutter.deletedBackground#CC6666
minimapGutter.modifiedBackground#81A2BE
minimapSlider.activeBackground#EB684B66
minimapSlider.background#EB684B22
minimapSlider.hoverBackground#EB684B44
multiDiffEditor.headerBackground#352B2A
notebook.cellBorderColor#2A2222
notebook.cellHoverBackground#F7E0B409
notebook.cellInsertionIndicator#EB684B
notebook.cellStatusBarItemHoverBackground#52463F66
notebook.cellToolbarSeparator#2A2222
notebook.focusedCellBackground#F7E0B409
notebook.focusedCellBorder#EB684B66
notebook.inactiveFocusedCellBorder#EB684B44
notebook.outputContainerBackgroundColor#352B2A
notebook.selectedCellBackground#F7E0B422
notebook.symbolHighlightBackground#F7E0B411
notebookStatusErrorIcon.foreground#A54242
notebookStatusRunningIcon.foreground#F7E0B4
notebookStatusSuccessIcon.foreground#8C9440
notificationCenter.border#2A2222
notificationCenterHeader.background#2A2222
notificationCenterHeader.foreground#F7E0B4
notificationLink.foreground#EB684B
notifications.background#352B2A
notifications.border#2A2222
notificationsErrorIcon.foreground#A54242
notificationsInfoIcon.foreground#5F819D
notificationsWarningIcon.foreground#DE935F
notificationToast.border#2A2222
panel.background#352B2A
panel.border#2A2222
panel.dropBorder#EB684B
panelSection.border#2A2222
panelSection.dropBackground#F7E0B422
panelSectionHeader.background#352B2A
panelSectionHeader.border#2A2222
panelSectionHeader.foreground#6A5C41
panelTitle.activeBorder#EB684B
panelTitle.activeForeground#F7E0B4
panelTitle.inactiveForeground#6A5C41
peekView.border#EB684B99
peekViewEditor.background#3F3433
peekViewEditor.matchHighlightBackground#5E8D8722
peekViewEditorGutter.background#352B2A
peekViewResult.background#352B2A
peekViewResult.fileForeground#F7E0B4
peekViewResult.lineForeground#F7E0B4
peekViewResult.matchHighlightBackground#5E8D8799
peekViewResult.selectionBackground#EB684B99
peekViewResult.selectionForeground#F7E0B4
peekViewTitle.background#352B2A
peekViewTitleDescription.foreground#6A5C41
peekViewTitleLabel.foreground#F7E0B4
pickerGroup.border#2A2222
pickerGroup.foreground#F7E0B4
ports.iconRunningProcessForeground#8C9440
problemsErrorIcon.foreground#A54242
problemsInfoIcon.foreground#5F819D
problemsWarningIcon.foreground#DE935F
progressBar.background#EB684B
pullRequests.closed#CC6666
pullRequests.draft#707880
pullRequests.merged#85678F
pullRequests.notification#5F819D
pullRequests.open#B5BD68
quickInputList.focusBackground#EB684B99
radio.activeBackground#EB684B
radio.activeBorder#2A2222
radio.activeForeground#0B0908
radio.inactiveBackground#352B2A
radio.inactiveBorder#2A2222
radio.inactiveHoverBackground#F7E0B411
sash.hoverBorder#2A2222
scmGraph.foreground1#5E8D87
scmGraph.foreground2#5F819D
scmGraph.foreground3#85678F
scmGraph.foreground4#CC6666
scmGraph.foreground5#81A2BE
scmGraph.historyItemBaseRefColor#B5BD68
scmGraph.historyItemHoverAdditionsForeground#B5BD68
scmGraph.historyItemHoverDefaultLabelBackground#81A2BE
scmGraph.historyItemHoverDefaultLabelForeground#0B0908
scmGraph.historyItemHoverDeletionsForeground#CC6666
scmGraph.historyItemHoverLabelForeground#0B0908
scmGraph.historyItemRefColor#8C9440
scmGraph.historyItemRemoteRefColor#DE935F
scrollbar.shadow#1A1615
scrollbarSlider.activeBackground#EB684B66
scrollbarSlider.background#EB684B22
scrollbarSlider.hoverBackground#EB684B44
searchEditor.findMatchBorder#5E8D8744
selection.background#F7E0B444
settings.checkboxBackground#352B2A
settings.checkboxBorder#2A2222
settings.checkboxForeground#DE935F
settings.dropdownBackground#352B2A
settings.dropdownBorder#2A2222
settings.dropdownForeground#DE935F
settings.dropdownListBorder#2A2222
settings.focusedRowBackground#F7E0B409
settings.focusedRowBorder#EB684B66
settings.headerForeground#F7E0B4
settings.modifiedItemIndicator#EB684B
settings.numberInputBackground#352B2A
settings.numberInputBorder#2A2222
settings.numberInputForeground#DE935F
settings.sashBorder#2A2222
settings.textInputBackground#352B2A
settings.textInputBorder#2A2222
settings.textInputForeground#B5BD68
sideBar.background#352B2A
sideBar.border#2A2222
sideBar.dropBackground#F7E0B422
sideBar.foreground#F7E0B4
sideBarSectionHeader.background#352B2A
sideBarSectionHeader.border#2A2222
sideBarSectionHeader.foreground#6A5C41
sideBarTitle.foreground#6A5C41
sqltools.currentQueryBg#5E8D8722
sqltools.currentQueryOutline#0000
statusBar.background#352B2A
statusBar.border#2A2222
statusBar.debuggingBackground#81A2BE
statusBar.debuggingBorder#2A2222
statusBar.debuggingForeground#1C1508
statusBar.focusBorder#EB684B66
statusBar.foreground#95815B
statusBar.noFolderBackground#352B2A
statusBarItem.activeBackground#352B2A
statusBarItem.compactHoverBackground#0000
statusBarItem.errorBackground#A54242
statusBarItem.errorForeground#1C1508
statusBarItem.errorHoverBackground#0000
statusBarItem.errorHoverForeground#F7E0B4
statusBarItem.focusBorder#EB684B66
statusBarItem.hoverBackground#0000
statusBarItem.hoverForeground#F7E0B4
statusBarItem.prominentBackground#52463F
statusBarItem.prominentForeground#F7E0B4
statusBarItem.prominentHoverBackground#0000
statusBarItem.prominentHoverForeground#F7E0B4
statusBarItem.remoteBackground#DE935F
statusBarItem.remoteForeground#1C1508
statusBarItem.remoteHoverBackground#0000
statusBarItem.warningBackground#DE935F
statusBarItem.warningForeground#1C1508
statusBarItem.warningHoverBackground#0000
statusBarItem.warningHoverForeground#F7E0B4
symbolIcon.arrayForeground#7C705A
symbolIcon.booleanForeground#DE935F
symbolIcon.classForeground#F0C674
symbolIcon.constantForeground#DE935F
symbolIcon.constructorForeground#F0C674
symbolIcon.fieldForeground#DE935F
symbolIcon.functionForeground#81A2BE
symbolIcon.interfaceForeground#CC6666
symbolIcon.keywordForeground#B294BB
symbolIcon.methodForeground#81A2BE
symbolIcon.moduleForeground#F0C674
symbolIcon.namespaceForeground#F0C674
symbolIcon.nullForeground#DE935F
symbolIcon.numberForeground#DE935F
symbolIcon.objectForeground#7C705A
symbolIcon.operatorForeground#B294BB
symbolIcon.packageForeground#F0C674
symbolIcon.propertyForeground#CC6666
symbolIcon.snippetForeground#DE935F
symbolIcon.stringForeground#B5BD68
symbolIcon.structForeground#CC6666
symbolIcon.textForeground#7C705A
symbolIcon.typeParameterForeground#CC6666
symbolIcon.unitForeground#DE935F
symbolIcon.variableForeground#707880
tab.activeBackground#3F3433
tab.activeBorderTop#EB684B
tab.activeForeground#F7E0B4
tab.activeModifiedBorder#EB684B
tab.border#352B2A
tab.dragAndDropBorder#EB684B
tab.hoverForeground#F7E0B4
tab.inactiveBackground#352B2A
tab.inactiveForeground#6A5C41
tab.inactiveModifiedBorder#EB684B66
tab.lastPinnedBorder#2A2222
tab.selectedBackground#352B2A
tab.selectedBorderTop#EB684B
tab.unfocusedActiveForeground#6A5C41
tab.unfocusedHoverForeground#F7E0B4
tab.unfocusedInactiveForeground#6A5C41
terminal.ansiBlack#282A2E
terminal.ansiBlue#5F819D
terminal.ansiBrightBlack#535961
terminal.ansiBrightBlue#81A2BE
terminal.ansiBrightCyan#8ABEB7
terminal.ansiBrightGreen#B5BD68
terminal.ansiBrightMagenta#B294BB
terminal.ansiBrightRed#CC6666
terminal.ansiBrightWhite#EEEFEE
terminal.ansiBrightYellow#F0C674
terminal.ansiCyan#5E8D87
terminal.ansiGreen#8C9440
terminal.ansiMagenta#85678F
terminal.ansiRed#A54242
terminal.ansiWhite#707880
terminal.ansiYellow#DE935F
terminal.background#352B2A
terminal.border#2A2222
terminal.findMatchBackground#5E8D8744
terminal.findMatchBorder#5E8D87AA
terminal.findMatchHighlightBackground#5E8D8733
terminal.foreground#F7E0B4
terminal.initialHintForeground#635A48
terminal.selectionBackground#F7E0B422
terminal.tab.activeBorder#EB684B
terminalCommandDecoration.defaultBackground#635A48
terminalCommandDecoration.errorBackground#A54242
terminalCommandDecoration.successBackground#8C9440
terminalCommandGuide.foreground#52463F
terminalCursor.foreground#F7E0B4
terminalOverviewRuler.border#2A2222
terminalStickyScrollHover.background#52463FFF
testExplorer.errorDecorationBackground#A5424266
testing.iconErrored#A54242
testing.iconFailed#A54242
testing.iconPassed#8C9440
testing.iconQueued#5F819D
testing.iconSkipped#635A48
testing.iconUnset#5F819D
testing.message.error.decorationForeground#1C1508
testing.message.error.lineBackground#A5424266
testing.message.info.decorationForeground#1C1508
testing.message.info.lineBackground#5F819D66
testing.peekBorder#2A2222
testing.runAction#6A5C41
textBlockQuote.background#352B2A
textBlockQuote.border#EB684B
textCodeBlock.background#3F3433
textLink.activeForeground#EB684B
textLink.foreground#EB684B
textPreformat.background#352B2A
textPreformat.foreground#DE935F
titleBar.activeBackground#352B2A
titleBar.activeForeground#F7E0B4
titleBar.border#2A2222
titleBar.inactiveBackground#3F3433
titleBar.inactiveForeground#6A5C41
toolbar.activeBackground#52463FBB
toolbar.hoverBackground#52463F66
toolbar.hoverOutline#0000
tree.indentGuidesStroke#6A5C4199
tree.tableColumnsBorder#2A2222
walkThrough.embeddedEditorBackground#352B2A
widget.shadow#1A1615

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
entity.name.tag, constant.numeric, constant.language, support.type.builtin, support.type.primitive, support.constant	#DE935F	—
comment, punctuation.definition.comment	#7C705A	—
keyword, storage, storage.type.class, storage.type.enum, storage.type.function, storage.type.interface, storage.type.internaldeclaration, storage.type.modifier, storage.type.namespace, storage.type.property, storage.type.trait, storage.type.type	#B294BB	—
punctuation.definition.directive, keyword.control.directive, entity.name.function.preprocessor, entity.name.function.directive, entity.name.label	#5E8D87	—
punctuation, meta.brace.angle, meta.brace.round, meta.brace.square, meta.brace.curly, meta.brackets	#7C705A	—
entity.name.type.class, entity.name.type.namespace, entity.other.inherited-class, storage.type.namespace, support.class, support.other.namespace	#F0C674	—
storage.type, entity.name.type, keyword.other.type, support.type	#CC6666	—
entity.name.function, support.function	#81A2BE	—
variable	#F7E0B4	—
constant, variable.language	#CC6666	—
string	#B5BD68	—
constant.character.escape	#707880	—
string.regexp, string.regexp punctuation.definition	#8ABEB7	—
string.regexp constant.other.character-class	#CC6666	—
string.regexp constant.other.character-class.set	#A54242	—
entity.name.section, punctuation.definition.heading	#CC6666	bold
variable.other.jsdoc, meta.other.type.phpdoc, comment.block.javadoc variable.parameter	#707880	—
variable.other.link	#5E8D87	—
source.c storage.modifier.array.bracket.square, meta.embedded.block.c storage.modifier.array.bracket.square	#7C705A	—
source.c keyword.other.unit, meta.embedded.block.c keyword.other.unit	#DE935F	—
source.cpp entity.name.type.namespace, meta.embedded.block.cpp entity.name.type.namespace	#F0C674	—
source.cpp storage.type.namespace.definition, meta.embedded.block.cpp storage.type.namespace.definition	#B294BB	—
source.cs entity.name.type.namespace, meta.embedded.block.csharp entity.name.type.namespace	#F0C674	—
source.cs keyword.type, meta.embedded.block.csharp keyword.type	#CC6666	—
source.css entity.name.tag, meta.embedded.block.css entity.name.tag, meta.embedded.block.less entity.name.tag	#DE935F	—
source.css entity.other.attribute-name.class, meta.embedded.block.css entity.other.attribute-name.class, meta.embedded.block.less entity.other.attribute-name.class	#F0C674	—
source.css entity.other.attribute-name.id, meta.embedded.block.css entity.other.attribute-name.id, meta.embedded.block.less entity.other.attribute-name.id	#8C9440	—
source.css entity.other.attribute-name.pseudo-element, meta.embedded.block.css entity.other.attribute-name.pseudo-element, meta.embedded.block.less entity.other.attribute-name.pseudo-element	#5E8D87	—
source.css variable, meta.embedded.block.css variable, meta.embedded.block.less variable	#707880	—
source.css support.type.property-name, meta.embedded.block.css support.type.property-name, meta.embedded.block.less support.type.property-name	#F7E0B4	—
source.css constant.numeric, source.css constant.other.color, source.css keyword.other.unit, source.css support.constant.property-value, meta.embedded.block.css constant.numeric, meta.embedded.block.css constant.other.color, meta.embedded.block.css keyword.other.unit, meta.embedded.block.css support.constant.property-value, meta.embedded.block.less constant.numeric, meta.embedded.block.less constant.other.color, meta.embedded.block.less keyword.other.unit, meta.embedded.block.less support.constant.property-value	#DE935F	—
source.css support.function, meta.embedded.block.css support.function, meta.embedded.block.less support.function	#81A2BE	—
text.html entity.other.attribute-name, meta.embedded.block.html entity.other.attribute-name	#CC6666	—
text.html meta.attribute.id string.quoted, meta.embedded.block.html meta.attribute.id string.quoted	#8C9440	—
text.pug entity.other.attribute-name.tag, text.pug entity.name.label	#CC6666	—
text.pug entity.other.attribute-name.id	#8C9440	—
text.pug entity.other.attribute-name.class	#F0C674	—
text.pug storage.type.import.include, text.pug attribute_value	#B294BB	—
text.pug meta.tag.other constant.name.attribute.tag.pug	#7C705A	—
text.pug string.comment	#7C705A	—
text.pug constant.language.name.generic.filter	#81A2BE	—
source.java storage.modifier.import, source.java storage.modifier.package, meta.embedded.block.java storage.modifier.import, meta.embedded.block.java storage.modifier.package	#F7E0B4	—
source.js support.variable.object, source.js support.type.object.module, source.ts support.variable.object, source.ts support.type.object.module, source.tsx support.variable.object, source.tsx support.type.object.module, source.svelte support.variable.object, source.svelte support.type.object.module, meta.embedded.block.javascript support.variable.object, meta.embedded.block.javascript support.type.object.module, meta.embedded.block.typescript support.variable.object, meta.embedded.block.typescript support.type.object.module, meta.embedded.block.typescriptreact support.variable.object, meta.embedded.block.typescriptreact support.type.object.module, meta.embedded.block.svelte support.variable.object, meta.embedded.block.svelte support.type.object.module	#DE935F	—
source.js storage.type.js, source.ts storage.type.ts, source.tsx storage.type.tsx, meta.embedded.block.javascript storage.type.js, meta.embedded.block.typescript storage.type.ts, meta.embedded.block.svelte storage.type.js, meta.embedded.block.svelte storage.type.ts, source.js storage.type.class, source.js storage.type.function, source.ts storage.type.class, source.ts storage.type.function, source.tsx storage.type.class, source.tsx storage.type.function, source.svelte storage.type.class, source.svelte storage.type.function, meta.embedded.block.javascript storage.type.class, meta.embedded.block.javascript storage.type.function, meta.embedded.block.typescript storage.type.class, meta.embedded.block.typescript storage.type.function, meta.embedded.block.typescriptreact storage.type.class, meta.embedded.block.typescriptreact storage.type.function, meta.embedded.block.svelte storage.type.class, meta.embedded.block.svelte storage.type.function	#B294BB	—
source.js new.expr entity.name.type, source.ts new.expr entity.name.type, source.tsx new.expr entity.name.type, source.svelte new.expr entity.name.type, meta.embedded.block.javascript new.expr entity.name.type, meta.embedded.block.typescript new.expr entity.name.type, meta.embedded.block.typescriptreact new.expr entity.name.type, meta.embedded.block.svelte new.expr entity.name.type	#F0C674	—
source.js meta.tag.attributes entity.other.attribute-name, source.js meta.attribute entity.other.attribute-name, source.js variable.other.constant.property, source.ts meta.tag.attributes entity.other.attribute-name, source.ts meta.attribute entity.other.attribute-name, source.ts variable.other.constant.property, source.tsx meta.tag.attributes entity.other.attribute-name, source.tsx meta.attribute entity.other.attribute-name, source.tsx variable.other.constant.property, source.svelte meta.tag.attributes entity.other.attribute-name, source.svelte meta.attribute entity.other.attribute-name, source.svelte variable.other.constant.property, meta.embedded.block.javascript meta.tag.attributes entity.other.attribute-name, meta.embedded.block.javascript meta.attribute entity.other.attribute-name, meta.embedded.block.javascript variable.other.constant.property, meta.embedded.block.typescript meta.tag.attributes entity.other.attribute-name, meta.embedded.block.typescript meta.attribute entity.other.attribute-name, meta.embedded.block.typescript variable.other.constant.property, meta.embedded.block.typescriptreact meta.tag.attributes entity.other.attribute-name, meta.embedded.block.typescriptreact meta.attribute entity.other.attribute-name, meta.embedded.block.typescriptreact variable.other.constant.property, meta.embedded.block.svelte meta.tag.attributes entity.other.attribute-name, meta.embedded.block.svelte meta.attribute entity.other.attribute-name, meta.embedded.block.svelte variable.other.constant.property	#CC6666	—
source.ts meta.type.annotation entity.name.type, source.tsx meta.type.annotation entity.name.type, meta.embedded.block.typescript meta.type.annotation entity.name.type, meta.embedded.block.typescriptreact meta.type.annotation entity.name.type	#CC6666	—
source.env variable, source.json support.type.property-name, meta.embedded.block.json support.type.property-name, source.terraform source.terraform.embedded.source variable.other.terraform, meta.embedded.block.terraform source.terraform.embedded.source variable.other.terraform, source.yaml entity.name.tag, meta.embedded.block.yaml entity.name.tag, meta.embedded.block.frontmatter entity.name.tag	#CC6666	—
source.yaml entity.other.document.begin, meta.embedded.block.yaml entity.other.document.begin, meta.embedded.block.frontmatter entity.other.document.begin, source.terraform entity.tag.embedded, meta.embedded.block.terraform entity.tag.embedded	#7C705A	—
source.makefile variable.other, meta.embedded.block.makefile variable.other	#CC6666	—
source.makefile meta.scope.prerequisites, meta.embedded.block.makefile meta.scope.prerequisites	#DE935F	—
source.makefile entity.name.function.target, meta.embedded.block.makefile entity.name.function.target	#F0C674	bold
source.makefile support.function.target, meta.embedded.block.makefile support.function.target	#F0C674	—
source.makefile meta.scope.function-call, meta.embedded.block.makefile meta.scope.function-call	#5E8D87	—
text.html.markdown markup.quote, meta.embedded.block.markdown markup.quote	#7C705A	italic
text.html.markdown markup.inline.raw, meta.embedded.block.markdown markup.inline.raw	#DE935F	—
text.html.markdown constant.other.reference.link, text.html.markdown markup.underline.link, text.html.markdown meta.link.reference, meta.embedded.block.markdown constant.other.reference.link, meta.embedded.block.markdown markup.underline.link, meta.embedded.block.markdown meta.link.reference	#5E8D87	—
text.html.markdown string.other.link.title, meta.embedded.block.markdown string.other.link.title	#CC6666	—
text.html.markdown fenced_code.block.language, meta.embedded.block.markdown fenced_code.block.language	#7C705A	—
text.html.markdown markup.bold, meta.embedded.block.markdown markup.bold	#C5C8C6	bold
text.html.markdown markup.italic, meta.embedded.block.markdown markup.italic	#C5C8C6	italic
source.shell variable.other.bracket, source.shell variable.other.special, source.shell variable.other.normal, meta.embedded.block.shellscript variable.other.bracket, meta.embedded.block.shellscript variable.other.special, meta.embedded.block.shellscript variable.other.normal	#CC6666	—
source.shell variable.other.positional, meta.embedded.block.shellscript variable.other.positional	#DE935F	—

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