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-heath-light

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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