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

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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