Tinted VSCode

Name: Tinted VSCode
Author: Tinted Theming

Publisher: Tinted ThemingThemes in package: 510

Choose from over 250 Tinted Themes

Open in VS Code GitHub

Color themes

VS Code preview

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

Tinted VSCode — base16-blueish

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.activeBackground#46290a
activityBar.background#182430
activityBar.dropBackground#8f98a0
activityBar.foreground#c8e1f8
activityBar.inactiveForeground#616d78
activityBarBadge.background#82aaff
activityBarBadge.foreground#8f98a0
badge.background#182430
badge.foreground#c8e1f8
banner.background#46290a
banner.foreground#c8e1f8
banner.iconForeground#82aaff
breadcrumb.activeSelectionForeground#8f98a0
breadcrumb.background#243c54
breadcrumb.focusForeground#ddeaf6
breadcrumb.foreground#c8e1f8
breadcrumbPicker.background#243c54
button.background#82aaff
button.foreground#8f98a0
button.hoverBackground#74afe7
button.secondaryBackground#ff84dd
button.secondaryForeground#8f98a0
button.secondaryHoverBackground#74afe7
charts.blue#82aaff
charts.foreground#c8e1f8
charts.green#c3e88d
charts.lines#c8e1f8
charts.orange#f6a85c
charts.purple#ff84dd
charts.red#4ce587
charts.yellow#f6cd5c
checkbox.background#182430
checkbox.foreground#c8e1f8
commandCenter.activeBackground#243c54
commandCenter.activeForeground#8f98a0
commandCenter.background#182430
commandCenter.foreground#c8e1f8
debugConsole.errorForeground#4ce587
debugConsole.infoForeground#c8e1f8
debugConsole.sourceForeground#c8e1f8
debugConsole.warningForeground#f6cd5c
debugConsoleInputIcon.foreground#c8e1f8
debugExceptionWidget.background#243c54
debugIcon.breakpointCurrentStackframeForeground#f6cd5c
debugIcon.breakpointDisabledForeground#74afe7
debugIcon.breakpointForeground#4ce587
debugIcon.breakpointStackframeForeground#bbd2e8
debugIcon.breakpointUnverifiedForeground#46290a
debugIcon.continueForeground#c3e88d
debugIcon.disconnectForeground#4ce587
debugIcon.pauseForeground#82aaff
debugIcon.restartForeground#c3e88d
debugIcon.startForeground#c3e88d
debugIcon.stepBackForeground#bbd2e8
debugIcon.stepIntoForeground#5fd1ff
debugIcon.stepOutForeground#ff84dd
debugIcon.stepOverForeground#82aaff
debugIcon.stopForeground#4ce587
debugTokenExpression.boolean#f6a85c
debugTokenExpression.error#4ce587
debugTokenExpression.name#ff84dd
debugTokenExpression.number#f6a85c
debugTokenExpression.string#c3e88d
debugTokenExpression.value#c8e1f8
debugToolBar.background#243c54
debugView.stateLabelBackground#82aaff
debugView.stateLabelForeground#8f98a0
debugView.valueChangedHighlight#82aaff
descriptionForeground#616d78
diffEditor.diagonalFill#46290a
diffEditor.insertedTextBackground#c3e88d20
diffEditor.removedTextBackground#4ce58720
disabledForeground#74afe7
dropdown.background#182430
dropdown.foreground#c8e1f8
dropdown.listBackground#182430
editor.background#182430
editor.findMatchBackground#f6cd5c6f
editor.findMatchHighlightBackground#f6a85c6f
editor.findRangeHighlightBackground#243c546f
editor.foreground#c8e1f8
editor.hoverHighlightBackground#46290a6f
editor.inactiveSelectionBackground#46290a
editor.lineHighlightBackground#243c54
editor.rangeHighlightBackground#243c546f
editor.selectionBackground#46290a
editor.selectionHighlightBackground#243c54
editor.snippetFinalTabstopHighlightBackground#616d78
editor.snippetTabstopHighlightBackground#46290a
editor.wordHighlightBackground#46290a6f
editor.wordHighlightStrongBackground#616d786f
editorBracketHighlight.foreground1#4ce587
editorBracketHighlight.foreground2#f6a85c
editorBracketHighlight.foreground3#f6cd5c
editorBracketHighlight.foreground4#c3e88d
editorBracketHighlight.foreground5#82aaff
editorBracketHighlight.foreground6#ff84dd
editorBracketHighlight.unexpectedBracket.foreground#bbd2e8
editorBracketMatch.background#46290a
editorCodeLens.foreground#46290a
editorCursor.foreground#c8e1f8
editorError.foreground#4ce587
editorGroup.background#182430
editorGroup.dropBackground#46290a6f
editorGroup.dropIntoPromptBackground#182430
editorGroup.dropIntoPromptForeground#ddeaf6
editorGroup.emptyBackground#182430
editorGroupHeader.noTabsBackground#243c54
editorGroupHeader.tabsBackground#243c54
editorGutter.addedBackground#c3e88d
editorGutter.background#182430
editorGutter.commentRangeForeground#74afe7
editorGutter.deletedBackground#4ce587
editorGutter.foldingControlForeground#c8e1f8
editorGutter.modifiedBackground#ff84dd
editorHint.foreground#82aaff
editorHoverWidget.background#182430
editorHoverWidget.foreground#c8e1f8
editorIndentGuide.activeBackground#74afe7
editorIndentGuide.background#616d78
editorInfo.foreground#5fd1ff
editorInlayHint.background#243c54
editorInlayHint.foreground#c8e1f8
editorInlayHint.parameterBackground#243c54
editorInlayHint.parameterForeground#c8e1f8
editorInlayHint.typeBackground#243c54
editorInlayHint.typeForeground#c8e1f8
editorLightBulb.foreground#f6cd5c
editorLightBulbAutoFix.foreground#82aaff
editorLineNumber.activeForeground#74afe7
editorLineNumber.foreground#616d78
editorLink.activeForeground#82aaff
editorMarkerNavigation.background#243c54
editorMarkerNavigationError.background#4ce587
editorMarkerNavigationError.headerBackground#4ce58720
editorMarkerNavigationInfo.background#82aaff
editorMarkerNavigationInfo.headerBackground#5fd1ff20
editorMarkerNavigationWarning.background#f6cd5c
editorMarkerNavigationWarning.headerBackground#f6cd5c20
editorOverviewRuler.addedForeground#c3e88d
editorOverviewRuler.bracketMatchForeground#ddeaf6
editorOverviewRuler.commonContentForeground#bbd2e8
editorOverviewRuler.currentContentForeground#82aaff
editorOverviewRuler.deletedForeground#4ce587
editorOverviewRuler.errorForeground#4ce587
editorOverviewRuler.findMatchForeground#f6cd5c6f
editorOverviewRuler.incomingContentForeground#c3e88d
editorOverviewRuler.infoForeground#5fd1ff
editorOverviewRuler.modifiedForeground#ff84dd
editorOverviewRuler.rangeHighlightForeground#616d786f
editorOverviewRuler.selectionHighlightForeground#46290a6f
editorOverviewRuler.warningForeground#f6cd5c
editorOverviewRuler.wordHighlightForeground#8f98a06f
editorOverviewRuler.wordHighlightStrongForeground#82aaff6f
editorPane.background#182430
editorRuler.foreground#616d78
editorSuggestWidget.background#243c54
editorSuggestWidget.focusHighlightForeground#8f98a0
editorSuggestWidget.foreground#c8e1f8
editorSuggestWidget.highlightForeground#82aaff
editorSuggestWidget.selectedBackground#46290a
editorSuggestWidget.selectedForeground#ddeaf6
editorWarning.foreground#f6cd5c
editorWhitespace.foreground#616d78
editorWidget.background#182430
editorWidget.foreground#c8e1f8
errorForeground#4ce587
extensionBadge.remoteBackground#f6a85c
extensionBadge.remoteForeground#8f98a0
extensionButton.prominentBackground#c3e88d
extensionButton.prominentForeground#8f98a0
extensionButton.prominentHoverBackground#46290a
extensionIcon.preReleaseForeground#f6a85c
extensionIcon.starForeground#f6cd5c
extensionIcon.verifiedForeground#82aaff
foreground#c8e1f8
gitDecoration.addedResourceForeground#c3e88d
gitDecoration.conflictingResourceForeground#f6cd5c
gitDecoration.deletedResourceForeground#4ce587
gitDecoration.ignoredResourceForeground#616d78
gitDecoration.modifiedResourceForeground#ff84dd
gitDecoration.renamedResourceForeground#5fd1ff
gitDecoration.stageDeletedResourceForeground#4ce587
gitDecoration.stageModifiedResourceForeground#ff84dd
gitDecoration.submoduleResourceForeground#bbd2e8
gitDecoration.untrackedResourceForeground#f6a85c
icon.foreground#74afe7
input.background#182430
input.foreground#c8e1f8
input.placeholderForeground#616d78
inputOption.activeBackground#46290a
inputOption.activeBorder#f6a85c
inputOption.activeForeground#c8e1f8
inputValidation.errorBackground#4ce587
inputValidation.errorBorder#4ce587
inputValidation.errorForeground#c8e1f8
inputValidation.infoBackground#82aaff
inputValidation.infoBorder#82aaff
inputValidation.infoForeground#c8e1f8
inputValidation.warningBackground#f6cd5c
inputValidation.warningBorder#f6cd5c
inputValidation.warningForeground#c8e1f8
keybindingLabel.background#46290a
keybindingLabel.foreground#c8e1f8
keybindingTable.headerBackground#46290a
keybindingTable.rowsBackground#243c54
list.activeSelectionBackground#46290a
list.activeSelectionForeground#c8e1f8
list.dropBackground#8f98a0
list.errorForeground#4ce587
list.filterMatchBackground#46290a
list.focusBackground#46290a
list.focusForeground#c8e1f8
list.highlightForeground#8f98a0
list.hoverBackground#616d78
list.hoverForeground#c8e1f8
list.inactiveFocusBackground#46290a
list.inactiveSelectionBackground#46290a
list.inactiveSelectionForeground#c8e1f8
list.invalidItemForeground#4ce587
list.warningForeground#f6cd5c
listFilterWidget.background#182430
listFilterWidget.noMatchesOutline#4ce587
menu.background#243c54
menu.foreground#c8e1f8
menu.selectionBackground#46290a
menu.selectionForeground#c8e1f8
menu.separatorBackground#8f98a0
menubar.selectionBackground#243c54
menubar.selectionForeground#c8e1f8
merge.currentContentBackground#82aaff40
merge.currentHeaderBackground#82aaff40
merge.incomingContentBackground#c3e88d60
merge.incomingHeaderBackground#c3e88d60
minimap.background#182430
minimap.errorHighlight#4ce587
minimap.findMatchHighlight#f6cd5c6f
minimap.selectionHighlight#46290a6f
minimap.selectionOccurrenceHighlight#616d78
minimap.warningHighlight#f6cd5c
minimapGutter.addedBackground#c3e88d
minimapGutter.deletedBackground#4ce587
minimapGutter.modifiedBackground#ff84dd
notebook.cellBorderColor#616d78
notebook.cellEditorBackground#182430
notebook.cellHoverBackground#243c54
notebook.cellToolbarSeparator#46290a
notebook.editorBackground#182430
notebook.focusedCellBackground#46290a
notebook.focusedCellBorder#82aaff
notebook.focusedEditorBorder#82aaff
notebook.inactiveFocusedCellBorder#616d78
notebook.selectedCellBackground#46290a
notebookStatusErrorIcon.foreground#4ce587
notebookStatusRunningIcon.foreground#5fd1ff
notebookStatusSuccessIcon.foreground#c3e88d
notification.background#46290a
notification.buttonBackground#82aaff
notification.buttonForeground#8f98a0
notification.buttonHoverBackground#46290a
notification.errorBackground#4ce587
notification.errorForeground#8f98a0
notification.foreground#c8e1f8
notification.infoBackground#5fd1ff
notification.infoForeground#8f98a0
notification.warningBackground#f6cd5c
notification.warningForeground#8f98a0
notificationCenterHeader.background#243c54
notificationCenterHeader.foreground#c8e1f8
notificationLink.foreground#82aaff
notifications.background#46290a
notifications.foreground#c8e1f8
notificationsErrorIcon.foreground#4ce587
notificationsInfoIcon.foreground#82aaff
notificationsWarningIcon.foreground#f6cd5c
panel.background#182430
panel.dropBackground#243c546f
panel.dropBorder#243c546f
panelTitle.activeForeground#c8e1f8
panelTitle.inactiveForeground#616d78
peekViewEditor.background#243c54
peekViewEditor.matchHighlightBackground#f6a85c6f
peekViewEditorGutter.background#243c54
peekViewResult.background#182430
peekViewResult.fileForeground#c8e1f8
peekViewResult.lineForeground#616d78
peekViewResult.matchHighlightBackground#f6a85c6f
peekViewResult.selectionBackground#46290a
peekViewResult.selectionForeground#c8e1f8
peekViewTitle.background#46290a
peekViewTitleDescription.foreground#616d78
peekViewTitleLabel.foreground#c8e1f8
pickerGroup.foreground#616d78
ports.iconRunningProcessForeground#f6a85c
problemsErrorIcon.foreground#4ce587
problemsInfoIcon.foreground#5fd1ff
problemsWarningIcon.foreground#f6cd5c
progressBar.background#616d78
quickInput.background#243c54
quickInput.foreground#c8e1f8
quickInputList.focusBackground#616d78
quickInputList.focusForeground#8f98a0
quickInputList.focusIconForeground#8f98a0
scrollbar.shadow#243c54
scrollbarSlider.activeBackground#74afe76f
scrollbarSlider.background#46290a6f
scrollbarSlider.hoverBackground#616d786f
searchEditor.findMatchBackground#f6cd5c6f
selection.background#82aaff
settings.checkboxBackground#243c54
settings.checkboxForeground#c8e1f8
settings.dropdownBackground#243c54
settings.dropdownForeground#c8e1f8
settings.focusedRowBackground#46290a
settings.headerBorder#c8e1f8
settings.headerForeground#c8e1f8
settings.modifiedItemForeground#c3e88d
settings.modifiedItemIndicator#82aaff
settings.numberInputBackground#243c54
settings.numberInputForeground#c8e1f8
settings.rowHoverBackground#46290a
settings.sashBorder#c8e1f8
settings.textInputBackground#243c54
settings.textInputForeground#c8e1f8
sideBar.background#243c54
sideBar.dropBackground#46290a6f
sideBar.foreground#c8e1f8
sideBarSectionHeader.background#616d78
sideBarSectionHeader.foreground#c8e1f8
sideBarTitle.foreground#c8e1f8
statusBar.background#82aaff
statusBar.debuggingBackground#f6a85c
statusBar.debuggingForeground#8f98a0
statusBar.foreground#8f98a0
statusBar.noFolderBackground#ff84dd
statusBar.noFolderForeground#8f98a0
statusBarItem.activeBackground#616d78
statusBarItem.errorBackground#4ce587
statusBarItem.errorForeground#8f98a0
statusBarItem.hoverBackground#46290a
statusBarItem.prominentBackground#ff84dd
statusBarItem.prominentForeground#8f98a0
statusBarItem.prominentHoverBackground#4ce587
statusBarItem.remoteBackground#c3e88d
statusBarItem.remoteForeground#8f98a0
statusBarItem.warningBackground#f6cd5c
statusBarItem.warningForeground#8f98a0
symbolIcon.arrayForeground#c8e1f8
symbolIcon.booleanForeground#f6a85c
symbolIcon.classForeground#f6cd5c
symbolIcon.colorForeground#f0f
symbolIcon.constantForeground#f6a85c
symbolIcon.constructorForeground#82aaff
symbolIcon.enumeratorForeground#f6a85c
symbolIcon.enumeratorMemberForeground#82aaff
symbolIcon.eventForeground#f6cd5c
symbolIcon.fieldForeground#4ce587
symbolIcon.fileForeground#c8e1f8
symbolIcon.folderForeground#c8e1f8
symbolIcon.functionForeground#82aaff
symbolIcon.interfaceForeground#82aaff
symbolIcon.keyForeground#f0f
symbolIcon.keywordForeground#ff84dd
symbolIcon.methodForeground#82aaff
symbolIcon.moduleForeground#c8e1f8
symbolIcon.namespaceForeground#c8e1f8
symbolIcon.nullForeground#bbd2e8
symbolIcon.numberForeground#f6a85c
symbolIcon.objectForeground#f0f
symbolIcon.operatorForeground#f0f
symbolIcon.packageForeground#f0f
symbolIcon.propertyForeground#c8e1f8
symbolIcon.referenceForeground#f0f
symbolIcon.snippetForeground#c8e1f8
symbolIcon.stringForeground#c3e88d
symbolIcon.structForeground#f6cd5c
symbolIcon.textForeground#c8e1f8
symbolIcon.typeParameterForeground#f0f
symbolIcon.unitForeground#f0f
symbolIcon.variableForeground#4ce587
tab.activeBackground#182430
tab.activeForeground#c8e1f8
tab.activeModifiedBorder#82aaff
tab.hoverBackground#46290a
tab.inactiveBackground#243c54
tab.inactiveForeground#616d78
tab.inactiveModifiedBorder#82aaff
tab.unfocusedActiveBackground#182430
tab.unfocusedActiveForeground#74afe7
tab.unfocusedActiveModifiedBorder#82aaff
tab.unfocusedHoverBackground#46290a
tab.unfocusedInactiveForeground#616d78
tab.unfocusedInactiveModifiedBorder#82aaff
terminal.ansiBlack#182430
terminal.ansiBlue#82aaff
terminal.ansiBrightBlack#616d78
terminal.ansiBrightBlue#82aaff
terminal.ansiBrightCyan#5fd1ff
terminal.ansiBrightGreen#c3e88d
terminal.ansiBrightMagenta#ff84dd
terminal.ansiBrightRed#4ce587
terminal.ansiBrightWhite#8f98a0
terminal.ansiBrightYellow#f6cd5c
terminal.ansiCyan#5fd1ff
terminal.ansiGreen#c3e88d
terminal.ansiMagenta#ff84dd
terminal.ansiRed#4ce587
terminal.ansiWhite#c8e1f8
terminal.ansiYellow#f6cd5c
terminal.background#182430
terminal.foreground#c8e1f8
terminalCursor.foreground#c8e1f8
terminalOverviewRuler.cursorForeground#ff0000
terminalOverviewRuler.findMatchForeground#ff0000
testing.iconErrored#bbd2e8
testing.iconFailed#4ce587
testing.iconPassed#c3e88d
testing.iconQueued#f6cd5c
testing.iconSkipped#ff84dd
testing.iconUnset#74afe7
testing.message.error.decorationForeground#c8e1f8
testing.message.error.lineBackground#4ce58720
testing.message.info.decorationForeground#c8e1f8
testing.message.info.lineBackground#82aaff20
testing.peekHeaderBackground#243c54
testing.runAction#74afe7
textBlockQuote.background#243c54
textBlockQuote.border#82aaff
textCodeBlock.background#182430
textLink.activeForeground#5fd1ff
textLink.foreground#82aaff
textPreformat.foreground#82aaff
textSeparator.foreground#f0f
titleBar.activeBackground#182430
titleBar.activeForeground#c8e1f8
titleBar.inactiveBackground#243c54
titleBar.inactiveForeground#616d78
toolbar.activeBackground#616d78
toolbar.hoverBackground#46290a
tree.indentGuidesStroke#c8e1f8
walkThrough.embeddedEditorBackground#182430
welcomePage.background#182430
welcomePage.buttonBackground#243c54
welcomePage.buttonHoverBackground#46290a
welcomePage.progress.background#616d78
welcomePage.progress.foreground#82aaff
welcomePage.tileBackground#243c54
welcomePage.tileHoverBackground#46290a
widget.shadow#182430

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#616d78	italic
variable, string constant.other.placeholder, entity.name.variable.parameter, entity.name.variable.local, variable.parameter	#4ce587	—
variable.other.object.property	#82aaff	—
constant.other.color	#c3e88d	—
invalid, invalid.illegal	#4ce587	—
invalid.deprecated	#bbd2e8	—
keyword, storage.modifier	#ff84dd	—
keyword.control, keyword.control.flow, keyword.control.from, keyword.control.import, keyword.control.as	#ff84dd	—
keyword.other.using, keyword.other.namespace, keyword.other.class, keyword.other.new, keyword.other.event, keyword.other.this, keyword.other.await, keyword.other.var, keyword.other.package, keyword.other.import, variable.language.this, storage.type.ts	#ff84dd	—
keyword.type, storage.type.primitive	#5fd1ff	—
storage.type.function	#82aaff	—
constant.other.color, punctuation, punctuation.section.class.end, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, keyword.other.template, keyword.other.substitution	#c8e1f8	—
punctuation.section.embedded, variable.interpolation	#bbd2e8	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#4ce587	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#82aaff	—
meta.block variable.other	#4ce587	—
support.other.variable, string.other.link	#4ce587	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other	#f6a85c	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#c3e88d
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#f6cd5c	—
storage.type, storage.modifier.package, storage.modifier.import	#f6cd5c	—
entity.name.variable.field	#82aaff	—
support.type	#5fd1ff	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#5fd1ff	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#4ce587	—
variable.language	#4ce587	italic
entity.name.method.js	#82aaff	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#82aaff	—
entity.other.attribute-name	#82aaff	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#f6cd5c	italic
entity.other.attribute-name.class	#f6cd5c	—
source.sass keyword.control	#82aaff	—
markup.inserted	#c3e88d	—
markup.deleted	#4ce587	—
markup.changed	#ff84dd	—
string.regexp	#5fd1ff	—
constant.character.escape	#5fd1ff	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#82aaff	italic
source.js constant.other.object.key.js string.unquoted.label.js	#ff84dd	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#82aaff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#82aaff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#82aaff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#82aaff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#82aaff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#82aaff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#82aaff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#82aaff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#82aaff	—
text.html.markdown, punctuation.definition.list_item.markdown	#c8e1f8	—
text.html.markdown markup.inline.raw.markdown	#ff84dd	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#5fd1ff	—
text.html.markdown meta.dummy.line-break	#616d78	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#82aaff	—
markup.italic	#4ce587	italic
markup.bold, markup.bold string	#4ce587	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#4ce587	bold
markup.underline	#f6a85c	underline
markup.quote punctuation.definition.blockquote.markdown	#5fd1ff	—
markup.quote	—	italic
string.other.link.title.markdown	#82aaff	—
string.other.link.description.title.markdown	#ff84dd	—
constant.other.reference.link.markdown	#f6cd5c	—
markup.raw.block	#ff84dd	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown	#ff84dd	—
variable.language.fenced.markdown	#4ce587	—
meta.separator	#5fd1ff	bold
markup.table	#ff84dd	—
token.info-token	#82aaff	—
token.warn-token	#f6cd5c	—
token.error-token	#4ce587	—
token.debug-token	#ff84dd	—

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