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-charcoal-dark

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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