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

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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