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-atelier-lakeside

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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