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-black-metal

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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