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-chicago-day

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8a9a91	italic
variable, string constant.other.placeholder, entity.name.variable.parameter, entity.name.variable.local, variable.parameter	#c60c30	—
variable.other.object.property	#522398	—
constant.other.color	#009b3a	—
invalid, invalid.illegal	#c60c30	—
invalid.deprecated	#62361b	—
keyword, storage.modifier	#e27ea6	—
keyword.control, keyword.control.flow, keyword.control.from, keyword.control.import, keyword.control.as	#e27ea6	—
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	#e27ea6	—
keyword.type, storage.type.primitive	#00a1de	—
storage.type.function	#522398	—
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	#364c40	—
punctuation.section.embedded, variable.interpolation	#62361b	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#c60c30	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#522398	—
meta.block variable.other	#c60c30	—
support.other.variable, string.other.link	#c60c30	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other	#f9461c	—
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	#009b3a
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	#968400	—
storage.type, storage.modifier.package, storage.modifier.import	#968400	—
entity.name.variable.field	#522398	—
support.type	#00a1de	—
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	#00a1de	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#c60c30	—
variable.language	#c60c30	italic
entity.name.method.js	#522398	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#522398	—
entity.other.attribute-name	#522398	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#968400	italic
entity.other.attribute-name.class	#968400	—
source.sass keyword.control	#522398	—
markup.inserted	#009b3a	—
markup.deleted	#c60c30	—
markup.changed	#e27ea6	—
string.regexp	#00a1de	—
constant.character.escape	#00a1de	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#522398	italic
source.js constant.other.object.key.js string.unquoted.label.js	#e27ea6	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#522398	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#522398	—
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	#522398	—
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	#522398	—
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	#522398	—
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	#522398	—
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	#522398	—
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	#522398	—
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	#522398	—
text.html.markdown, punctuation.definition.list_item.markdown	#364c40	—
text.html.markdown markup.inline.raw.markdown	#e27ea6	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#00a1de	—
text.html.markdown meta.dummy.line-break	#8a9a91	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#522398	—
markup.italic	#c60c30	italic
markup.bold, markup.bold string	#c60c30	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	#c60c30	bold
markup.underline	#f9461c	underline
markup.quote punctuation.definition.blockquote.markdown	#00a1de	—
markup.quote	—	italic
string.other.link.title.markdown	#522398	—
string.other.link.description.title.markdown	#e27ea6	—
constant.other.reference.link.markdown	#968400	—
markup.raw.block	#e27ea6	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown	#e27ea6	—
variable.language.fenced.markdown	#c60c30	—
meta.separator	#00a1de	bold
markup.table	#e27ea6	—
token.info-token	#522398	—
token.warn-token	#968400	—
token.error-token	#c60c30	—
token.debug-token	#e27ea6	—

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