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-apprentice

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#87875f	italic
variable, string constant.other.placeholder, entity.name.variable.parameter, entity.name.variable.local, variable.parameter	#444444	—
variable.other.object.property	#8787af	—
constant.other.color	#ffffaf	—
invalid, invalid.illegal	#444444	—
invalid.deprecated	#bcbcbc	—
keyword, storage.modifier	#5fafaf	—
keyword.control, keyword.control.flow, keyword.control.from, keyword.control.import, keyword.control.as	#5fafaf	—
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	#5fafaf	—
keyword.type, storage.type.primitive	#87afd7	—
storage.type.function	#8787af	—
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	#5f5f87	—
punctuation.section.embedded, variable.interpolation	#bcbcbc	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#444444	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#8787af	—
meta.block variable.other	#444444	—
support.other.variable, string.other.link	#444444	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other	#ff8700	—
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	#ffffaf
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	#87af87	—
storage.type, storage.modifier.package, storage.modifier.import	#87af87	—
entity.name.variable.field	#8787af	—
support.type	#87afd7	—
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	#87afd7	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#444444	—
variable.language	#444444	italic
entity.name.method.js	#8787af	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#8787af	—
entity.other.attribute-name	#8787af	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#87af87	italic
entity.other.attribute-name.class	#87af87	—
source.sass keyword.control	#8787af	—
markup.inserted	#ffffaf	—
markup.deleted	#444444	—
markup.changed	#5fafaf	—
string.regexp	#87afd7	—
constant.character.escape	#87afd7	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#8787af	italic
source.js constant.other.object.key.js string.unquoted.label.js	#5fafaf	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#8787af	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#8787af	—
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	#8787af	—
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	#8787af	—
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	#8787af	—
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	#8787af	—
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	#8787af	—
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	#8787af	—
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	#8787af	—
text.html.markdown, punctuation.definition.list_item.markdown	#5f5f87	—
text.html.markdown markup.inline.raw.markdown	#5fafaf	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#87afd7	—
text.html.markdown meta.dummy.line-break	#87875f	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#8787af	—
markup.italic	#444444	italic
markup.bold, markup.bold string	#444444	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	#444444	bold
markup.underline	#ff8700	underline
markup.quote punctuation.definition.blockquote.markdown	#87afd7	—
markup.quote	—	italic
string.other.link.title.markdown	#8787af	—
string.other.link.description.title.markdown	#5fafaf	—
constant.other.reference.link.markdown	#87af87	—
markup.raw.block	#5fafaf	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown	#5fafaf	—
variable.language.fenced.markdown	#444444	—
meta.separator	#87afd7	bold
markup.table	#5fafaf	—
token.info-token	#8787af	—
token.warn-token	#87af87	—
token.error-token	#444444	—
token.debug-token	#5fafaf	—

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