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

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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