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-da-one-paper

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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