Esmerald

Name: Esmerald
Author: Esteban H. Acevedo

Publisher: Esteban H. AcevedoThemes in package: 2

It's a beautiful theme

GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Esmerald — Esmerald

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

actionBar.toggledBackground#383a49
activityBar.activeBorder#ffaf00
activityBar.background#121c2b
activityBar.border#121c2b
activityBar.foreground#a4b1cd98
activityBar.inactiveForeground#a4b1cd47
activityBarBadge.background#9fef00
activityBarBadge.foreground#1a2332
badge.background#ff3e3e
badge.foreground#ffffff
banner.background#121c2b
banner.foreground#a4b1cd
banner.iconForeground#ffffff
breadcrumb.activeSelectionForeground#9fef00
breadcrumb.background#121c2b
breadcrumb.focusForeground#9fef00
breadcrumb.foreground#a4b1cd98
breadcrumbPicker.background#121c2b
button.background#9fef00
button.border#ffffff12
button.foreground#121c2b
button.hoverBackground#026ec1
button.secondaryBackground#313131
button.secondaryForeground#cccccc
button.secondaryHoverBackground#3c3c3c
charts.blue#004cff
charts.foreground#a4b1cd
charts.green#9fef00
charts.lines#a4b1cd
charts.orange#2ee7b6
charts.purple#9f00ff
charts.red#cda9a9
charts.yellow#ffaf00
chat.slashCommandBackground#34414b
chat.slashCommandForeground#40a6ff
checkbox.background#121c2b
checkbox.border#121c2b
checkbox.foreground#9fef00
commandCenter.background#121c2b
commandCenter.foreground#a4b1cd98
debugExceptionWidget.background#ff3e3e49
debugExceptionWidget.border#ff3e3e49
debugIcon.breakpointCurrentStackframeForeground#ffcb5c8e
debugIcon.breakpointDisabledForeground#ff3e3e49
debugIcon.breakpointForeground#ff3e3e
debugIcon.breakpointStackframeForeground#004cff49
debugIcon.breakpointUnverifiedForeground#a4b1cd
debugIcon.continueForeground#9fef00
debugIcon.disconnectForeground#ff3e3e
debugIcon.pauseForeground#9fef00
debugIcon.restartForeground#ffaf00
debugIcon.startForeground#9fef00
debugIcon.stepBackForeground#a4b1cd
debugIcon.stepIntoForeground#a4b1cd
debugIcon.stepOutForeground#a4b1cd
debugIcon.stepOverForeground#a4b1cd
debugIcon.stopForeground#ff3e3e
debugToolBar.background#1a2332
debugToolBar.border#1a2332
descriptionForeground#a4b1cd
dropdown.background#121c2b
dropdown.border#3c3c3c
dropdown.foreground#a4b1cd
dropdown.listBackground#121c2b
editor.background#0f1724
editor.findMatchBackground#6e7b96a1
editor.findMatchHighlightBackground#6e7b96cc
editor.findRangeHighlightBackground#6e7b96cc
editor.foldBackground#121c2bce
editor.foreground#a4b1cd
editor.inactiveSelectionBackground#3a3d41cc
editor.lineHighlightBackground#1a2332
editor.lineHighlightBorder#1a2332
editor.rangeHighlightBackground#313f55de
editor.selectionBackground#6e7b968c
editor.selectionForeground#121c2b
editor.selectionHighlightBackground#6e7b968c
editor.stackFrameHighlightBackground#6e7b968c
editorBracketHighlight.foreground1#08c19c
editorBracketHighlight.foreground2#ffda96
editorBracketHighlight.foreground3#ff8f8f
editorBracketHighlight.foreground4#66ff00
editorBracketHighlight.unexpectedBracket.foreground#ffffff
editorBracketMatch.border#313f55
editorCursor.background#9fef00
editorCursor.foreground#9fef00
editorGroup.border#313f55
editorGroup.dropBackground#6e7b9625
editorGroupHeader.border#121c2b
editorGroupHeader.tabsBackground#121c2b
editorGroupHeader.tabsBorder#121c2b
editorGutter.addedBackground#9fef00cc
editorGutter.background#0f1724
editorGutter.commentRangeForeground#a4b1cd
editorGutter.deletedBackground#ff3e3ecc
editorGutter.modifiedBackground#004cffcc
editorHoverWidget.background#1a2332
editorHoverWidget.foreground#a4b1cd
editorIndentGuide.activeBackground1#00ff089a
editorIndentGuide.background1#121c2b
editorInlayHint.background#0f1724
editorInlayHint.foreground#4553ac
editorLightBulb.foreground#ffaf00
editorLightBulbAutoFix.foreground#9fef00
editorLineNumber.activeForeground#a4b1cd
editorLineNumber.foreground#313f55
editorOverviewRuler.border#010409
editorOverviewRuler.bracketMatchForeground#a4b1cd
editorOverviewRuler.commonContentForeground#9fef00
editorOverviewRuler.errorForeground#ff3e3e
editorOverviewRuler.findMatchForeground#024effcb
editorOverviewRuler.infoForeground#ffffff
editorOverviewRuler.rangeHighlightForeground#024effcb
editorOverviewRuler.selectionHighlightForeground#024effcb
editorOverviewRuler.warningForeground#ffaf00
editorOverviewRuler.wordHighlightForeground#a4b1cddc
editorRuler.foreground#2937558c
editorStickyScroll.background#121c2b
editorStickyScroll.shadow#9fef008c
editorStickyScrollHover.background#9fef0031
editorSuggestWidget.background#1a2332
editorSuggestWidget.border#1a2332
editorSuggestWidget.foreground#a4b1cd
editorWidget.background#212c3d
editorWidget.border#1a2332
errorForeground#ff3e3e
extensionBadge.remoteBackground#2ee7b6
extensionBadge.remoteForeground#121c2b
extensionButton.prominentBackground#9fef00
extensionButton.prominentForeground#121c2b
extensionButton.prominentHoverBackground#c5f467
extensionIcon.starForeground#ffae00da
focusBorder#1a2332
foreground#a4b1cd
gitDecoration.addedResourceForeground#9fef00
gitDecoration.conflictingResourceForeground#ffaf00
gitDecoration.deletedResourceForeground#ff3e3e
gitDecoration.ignoredResourceForeground#6e7b96be
gitDecoration.modifiedResourceForeground#ffffff
gitDecoration.submoduleResourceForeground#5cecc6
gitDecoration.untrackedResourceForeground#a4b1cd
icon.foreground#ffffff
inlineChat.shadow#9fef00
input.background#2e384b
input.border#121c2b
input.foreground#ffffff
input.placeholderForeground#a4b1cd
inputOption.activeBackground#313f55
inputOption.activeBorder#313f55
inputOption.activeForeground#a4b1cd
inputValidation.errorBackground#ff3e3e70
inputValidation.errorBorder#ff3e3e49
inputValidation.errorForeground#ffffff
inputValidation.infoBackground#004cff70
inputValidation.infoBorder#004cff54
inputValidation.infoForeground#ffffff
inputValidation.warningBackground#ffaf0070
inputValidation.warningBorder#ffaf0070
inputValidation.warningForeground#ffffff
keybindingLabel.background#6e7b965d
keybindingLabel.border#6e7b968c
keybindingLabel.bottomBorder#a4b1cd7e
keybindingLabel.foreground#a4b1cd
list.activeSelectionBackground#313f55
list.activeSelectionForeground#ffffff
list.activeSelectionIconForeground#ffffff
list.dropBackground#313f55
list.errorForeground#ff3e3e
list.filterMatchBackground#bb00ff90
list.focusAndSelectionOutline#9fef00
list.focusBackground#435777
list.focusForeground#ffffff
list.hoverBackground#313f557e
list.inactiveSelectionBackground#313f55
list.warningForeground#ffaf00
listFilterWidget.background#34414b
listFilterWidget.shadow#9fef00
menu.background#121c2b
menu.border#12c212d0
menu.foreground#e4e4e4
menu.separatorBackground#12c21238
menubar.selectionBackground#9fef00
menubar.selectionForeground#0f1724
merge.commonContentBackground#ffffffc7
merge.commonHeaderBackground#ffffffc7
merge.currentContentBackground#ff3e3e49
merge.currentHeaderBackground#ff3e3ed8
merge.incomingContentBackground#004cfc49
merge.incomingHeaderBackground#004cffc9
minimap.background#0f1724
minimap.errorHighlight#ff8484cc
minimap.findMatchHighlight#c5f467cc
minimap.foregroundOpacity#00255dcc
minimap.selectionHighlight#58a3ea3b
minimap.warningHighlight#ffcc5ccc
minimapGutter.addedBackground#9fef00cc
minimapGutter.deletedBackground#ff3e3ecc
minimapGutter.modifiedBackground#004cffcc
minimapSlider.activeBackground#2937558c
minimapSlider.background#29375533
minimapSlider.hoverBackground#29375533
notificationCenterHeader.background#1a2332
notificationCenterHeader.foreground#cccccc
notificationLink.foreground#5cb2ff
notifications.background#1a2332
notifications.border#2b2b2b
notifications.foreground#a4b1cd
notificationsErrorIcon.foreground#ff8f8f
notificationsInfoIcon.foreground#9fef00
notificationsWarningIcon.foreground#ffcc5c
panel.background#121c2b
panel.border#121c2b
panelInput.border#2b2b2b
panelStickyScroll.shadow#9fef0070
panelTitle.activeBorder#ffaf00
panelTitle.activeForeground#cccccc
panelTitle.inactiveForeground#7b8db7
peekView.border#1a2332
peekViewEditor.background#121c2b
peekViewEditor.matchHighlightBackground#bb800966
peekViewResult.background#1f1f1f
peekViewResult.matchHighlightBackground#bb800966
pickerGroup.border#3c3c3c
ports.iconRunningProcessForeground#369432
progressBar.background#9fef00
quickInput.background#0e141e
quickInput.foreground#cccccc
scrollbar.shadow#9fef0070
scrollbarSlider.activeBackground#9fef0093
scrollbarSlider.background#6e7b9642
scrollbarSlider.hoverBackground#6e7b968c
selection.background#aec3f098
settings.checkboxBackground#121c2b
settings.checkboxBorder#1f2b42
settings.checkboxForeground#9fef00
settings.dropdownBackground#121c2b
settings.dropdownBorder#1f2b42
settings.dropdownForeground#a4b1cd
settings.dropdownListBorder#121c2b
settings.headerForeground#ffffff
settings.modifiedItemIndicator#9fef00
settings.numberInputBackground#121c2b
settings.numberInputBorder#1f2b42
settings.numberInputForeground#a4b1cd
settings.textInputBackground#121c2b
settings.textInputBorder#1f2b42
settings.textInputForeground#a4b1cd
sideBar.background#121c2b
sideBar.border#121c2b
sideBar.foreground#a4b1cd
sideBarSectionHeader.background#121c2b
sideBarSectionHeader.border#6e768166
sideBarSectionHeader.foreground#cccccc
sideBarTitle.foreground#ffaf00
statusBar.background#1a2332
statusBar.border#1a2332
statusBar.debuggingBackground#00255dcc
statusBar.debuggingForeground#bdefff
statusBar.focusBorder#0078d4
statusBar.foreground#a4b1cd
statusBar.noFolderBackground#1a2332
statusBar.noFolderForeground#a4b1cd
statusBarItem.focusBorder#0078d4
statusBarItem.prominentBackground#6e768166
statusBarItem.remoteBackground#1a2332
statusBarItem.remoteForeground#ffffff
tab.activeBackground#2c3849
tab.activeBorder#121c2b
tab.activeBorderTop#121c2b
tab.activeForeground#a4b1cd
tab.activeModifiedBorder#a4b1cd
tab.border#121c2b
tab.hoverBackground#435777
tab.hoverBorder#121c2b
tab.inactiveBackground#121c2b
tab.inactiveForeground#a4b1cd98
tab.lastPinnedBorder#6e7b968c
tab.unfocusedActiveBorder#a4b1cd
terminal.ansiBlue#004cff
terminal.ansiBrightBlue#5cb2ffd0
terminal.ansiBrightCyan#5cecc6d0
terminal.ansiBrightGreen#c5f467d0
terminal.ansiBrightMagenta#c290e4d0
terminal.ansiBrightRed#f3aeaed0
terminal.ansiBrightWhite#bababa
terminal.ansiBrightYellow#edc97a
terminal.ansiCyan#9fdada
terminal.ansiGreen#95b35b
terminal.ansiMagenta#794a97
terminal.ansiRed#f27474
terminal.ansiWhite#e4e4e4
terminal.ansiYellow#cfb272
terminal.background#121c2b
terminal.foreground#a4b1cd
terminal.inactiveSelectionBackground#3a3d41
terminal.tab.activeBorder#0078d4
terminalCursor.background#313f55
terminalCursor.foreground#9fef00
testing.iconErrored#ffaf00
testing.iconFailed#ff3e3e
testing.iconPassed#9fef00
testing.iconQueued#a4b1cd
testing.iconSkipped#a4b1cd
testing.iconUnset#a4b1cd
testing.message.error.lineBackground#ff3e3e
testing.message.info.decorationForeground#004cff
testing.message.info.lineBackground#004cff
testing.peekBorder#a4b1cd
textBlockQuote.background#121c2b
textBlockQuote.border#a4b1cd
textCodeBlock.background#121c2b
textLink.activeForeground#c5f467
textLink.foreground#9fef00
textPreformat.background#161d2900
textPreformat.foreground#fff4b5
textSeparator.foreground#ffffff
titleBar.activeBackground#121c2b
titleBar.activeForeground#a4b1cd98
titleBar.border#121c2b
titleBar.inactiveBackground#121c2b
titleBar.inactiveForeground#a4b1cd98
tree.indentGuidesStroke#9fef00
walkThrough.embeddedEditorBackground#121c2b
welcomePage.background#121c2b
welcomePage.progress.foreground#0078d4
welcomePage.tileBackground#2b2b2b
widget.border#9fef00
widget.shadow#9fef0070
window.activeBorder#1a2332

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
constant.regexp	#646695	—
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp	#CE9178	—
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp	#D2FF77	—
keyword.operator.or.regexp, keyword.control.anchor.regexp	#dcaaaa	—
keyword.operator.quantifier.regexp	#CE9178	—
constant.character, constant.other.option	#569CD6	—
constant.character.escape	#CE9178	—
entity.name.label	#C8C8C8	—
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python	#D4D4D4	—
heading.1.markdown, heading.1.markdown punctuation.definition.heading.markdown	#ffffff	—
heading.2.markdown, heading.2.markdown punctuation.definition.heading.markdown	#ff8f8f	—
heading.3.markdown, heading.3.markdown punctuation.definition.heading.markdown	#ffda96	—
heading.4.markdown, heading.4.markdown punctuation.definition.heading.markdown	#9CDCFE	—
text.html.markdown, punctuation.definition.list_item.markdown	#A4B1CD	—
text.html.markdown markup.inline.raw.markdown	#d79bff	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#313F55	—
markup.italic	#569CD6	italic
markup.bold, markup.bold string	#FF009D	—
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	#ff8f8f	bold
markup.underline	#d79bff	underline
markup.quote punctuation.definition.blockquote.markdown	#1A2332	—
markup.quote	—	italic
string.other.link.title.markdown	#9CDCFE	—
string.other.link.description.title.markdown	#d79bff	—
constant.other.reference.link.markdown	#5CB2FF	—
markup.raw.block	#d79bff	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#A4B1CD	—
variable.language.fenced.markdown	#313F55	—
punctuation.definition.quote.begin.markdown	#6A9955	—
punctuation.definition.list.begin.markdown	#ffda96	—
meta.separator	#313F55	bold
markup.table	#A4B1CD	—
markup.underline	—	underline
markup.bold	#569CD6	bold
markup.heading	#569CD6	bold
markup.italic	—	italic
markup.strikethrough	—	strikethrough
markup.inserted	#B5CEA8	—
markup.deleted	#CE9178	—
markup.changed	#569CD6	—
markup.inline.raw	#CE9178	—
punctuation.definition.tag	#808080	—
meta.preprocessor, entity.name.function.preprocessor	#569CD6	—
meta.preprocessor.string	#CE9178	—
meta.preprocessor.numeric	#B5CEA8	—
meta.structure.dictionary.key.python	#9CDCFE	—
meta.diff.header	#569CD6	—
storage	#569CD6	—
storage.type	#569CD6	—
storage.modifier, keyword.operator.noexcept	#569CD6	—
string.tag	#CE9178	—
string.value	#CE9178	—
string.regexp	#D2FF77	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#569CD6	—
meta.template.expression	#D4D4D4	—
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded	#9CDCFE	—
keyword	#569CD6	—
keyword.control	#569CD6	—
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike	#569CD6	—
keyword.other.unit	#B5CEA8	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#569CD6	—
support.function.git-rebase	#9CDCFE	—
constant.sha.git-rebase	#B5CEA8	—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java	#D4D4D4	—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class	#4EC9B0	—
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color	#CE9178	—
meta.object-literal.key	#9CDCFE	—
invalid	#ff0000	—
keyword.operator.assignment	#ff8f8f	—
constant.numeric, variable.other.enummember	#A4B1CD	—
keyword.operator, keyword.operator.bitwise.python	#f4f4f4	—
emphasis	—	italic
strong	—	bold
string, string.quoted, string.unquoted, string.template	#D2FF77	—
string.quoted.single.python, string.quoted.double.python	#D2FF77	—
punctuation.definition.string, punctuation.definition.string string.quoted.single.python	#84a640	—
string.quoted.docstring.single.python, string.quoted.docstring.multi.python, comment, comment.block	#889eda	—
comment	—	italic
punctuation.definition.comment, string.quoted.docstring.multi.python punctuation.definition.string.begin.python, string.quoted.docstring.multi.python punctuation.definition.string.end.python	#889EDA7C	—
meta.function-call.generic.python	#A4B1CD	—
meta.function-call.arguments.python	#4FC1FF	—
constant.language, variable.other.constant, variable.other.enummember	#4FC1FF	—
entity.name.tag	#ff8f8f	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#A33C3C	—
entity.other.attribute-name	#9CDCFE	—
punctuation.separator.key-value.html, text.html.derivative punctuation.definition.string	#2a6696	—
text.html.derivative string.quoted.double.html	#569CD6	—
comment.block.html, punctuation.definition.comment.html	#6286A7	italic
text.html.derivative	#ffffff	—
entity.name.tag.css, entity.name.tag.less	#ffda96	—
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss	#ffda96	—
variable.language	#569CD6	—
storage.type.class, storage.type.function	#F87F7F	—
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal, punctuation.separator.annotation.result.python, punctuation.separator.parameters.python, punctuation.separator.arguments.python	#ffda96	—
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy, punctuation.definition, punctuation.separator	#5DEED1	—
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator, constant.other.ellipsis.python, keyword.operator.logical.python, punctuation.separator.colon.python	#d79bff	—
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder, variable.other.constant	#9CDCFE	—
variable.parameter	#4FC1FF	—
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python	#569CD6	—
constant.language.python	#5DEED1	—
entity.name.namespace	#ffffff	—
keyword.operator.bitwise.python	#A4B1CD	—
variable.other.django, keyword.operator.getter.django, meta.variable.structure.django	#ffda96	—
text.html.derivative string.quoted.double.html meta.tag.structure.django	#ffda96
text.html.jinja	#ffffff	—
text.html.jinja string.quoted.double.html, text.html.jinja punctuation.definition.string	#569CD6	—
text.html.django	#ffffff	—
text.html.django storage.type.templatetag.django keyword.operator.django	#d79bff	—
text.html.django meta.tag.inline.any.html string.quoted.double.html, text.html.django meta.tag.inline.any.html string.quoted.double.html punctuation.definition.string.begin.html, text.html.django meta.tag.inline.any.html string.quoted.double.html punctuation.definition.string.end.html, text.html.django meta.tag.block.any.html string.quoted.double.html, text.html.django meta.tag.block.any.html string.quoted.double.html punctuation.definition.string.begin.html, text.html.django meta.tag.block.any.html string.quoted.double.html punctuation.definition.string.end.html, text.html.django meta.tag.block.any.html, text.html.django meta.tag.inline.any.html	#569CD6	—
text.html.django storage.type.templatetag.django string.unquoted.tag-string.django, text.html.django storage.type.variable.django string.unquoted.tag-string.django, text.html.django meta.tag.inline.any.html string.quoted.double.html storage.type.templatetag.django string.quoted.single.html punctuation.definition.string.begin.html	#ffda96	—
text.html.django meta.tag.inline.any.html string.quoted.double.html storage.type.templatetag.django string.quoted.single.html punctuation.definition.string.begin.html, text.html.django meta.tag.inline.any.html string.quoted.double.html storage.type.templatetag.django string.quoted.single.html punctuation.definition.string.end.html	#84a640	—
storage.type.templatetag.django, storage.type.variable.django, storage.type.customtemplatetag.django, storage.type.templatetag.django entity.tag.tagbraces.django	#08c19c	—
source.js constant.other.object.key.js string.unquoted.label.js	#ff8f8f	italic
punctuation.definition.tag.begin.js.jsx, punctuation.definition.tag.end.js.jsx	#A33C3C	—
punctuation.definition.tag.begin.js.jsx, punctuation.definition.tag.end.js.jsx	#A33C3C	—
punctuation.accessor.js	#5DEED1	—
meta.jsx.children.js.jsx	#ffffff	—
keyword.operator.logical.js.jsx	#d79bff	—
storage.modifier.async.js, meta.function.js meta.block.js meta.block.js meta.var.expr.js keyword.control.flow.js	#ff8f8f	—
punctuation.definition.tag.begin.astro, punctuation.definition.tag.end.astro	#A33C3C	—
text.astro, source.astro meta.embedded.expression.astro	#ffffff	—
punctuation.separator.key-value.astro, punctuation.definition.string.begin.astro, punctuation.definition.string.end.astro	#2A6696	—
markup.underline.link.markdown, punctuation.definition.metadata.markdown	#2A6696	—
fenced_code.block.language	#2A6696	—
markup.fenced_code.block.markdown	#a7c075	—
markup.inline.raw.string.markdown	#D2FF77	—
punctuation.terminator.statement	#569CD6	—
source.go keyword.operator.assignment	#FFFFFF	—
keyword.operator.comparison.go	#A4B1CD	—
constant.numeric.decimal.go	#fcb0b0	—
source.go keyword.function, keyword.control.import.go, keyword.package.go, keyword.type.go, keyword.struct.go, keyword.var.go, keyword.map.go	#F87F7F	—
keyword.control.go	#D79BFF	—
keyword.operator.address.go	#D79BFF	—
entity.name.type.package.go	#FFFFFF
variable.other.property.go	#4FC1FF	—
entity.name.import.go	#D2FF77	italic
constant.language.boolean.go	#FFFFFF	—
punctuation.definition.begin.bracket.curly.go, punctuation.definition.end.bracket.curly.go, punctuation.definition.begin.bracket.round.go, punctuation.definition.end.bracket.round.go	#5DEED1	—

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