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

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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