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

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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