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

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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