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

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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