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

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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