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

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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