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

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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