Loops@Manjaro

Name: Loops@Manjaro
Author: LudoLoops

Publisher: LudoLoopsThemes in package: 2

tokyo night theme base with a manjaro flavor

Open in VS Code GitHub

Color themes

VS Code preview

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

Loops@Manjaro — loops@manjaro

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.

activityBar.background#0b1014
activityBar.border#1a1b26
activityBar.foreground#07a9a9
activityBar.inactiveForeground#3b3e52
activityBarBadge.background#07a9a9
activityBarBadge.foreground#0b1014
badge.background#7e83b230
badge.foreground#acb0d0
breadcrumb.activeSelectionForeground#a9b1d6
breadcrumb.background#1a1b26
breadcrumb.focusForeground#a9b1d6
breadcrumb.foreground#515670
breadcrumbPicker.background#16161e
button.background#07a9a9
button.foreground#0b1014
button.hoverBackground#0d7574
charts.blue#7aa2f7
charts.foreground#9aa5ce
charts.green#41a6b5
charts.lines#16161e
charts.orange#ff9e64
charts.purple#9d7cd8
charts.red#f7768e
charts.yellow#e0af68
debugConsole.errorForeground#bb616b
debugConsole.infoForeground#787c99
debugConsole.sourceForeground#787c99
debugConsole.warningForeground#c49a5a
debugConsoleInputIcon.foreground#73daca
debugExceptionWidget.background#101014
debugExceptionWidget.border#963c47
debugTokenExpression.boolean#ff9e64
debugTokenExpression.error#bb616b
debugTokenExpression.name#7dcfff
debugTokenExpression.number#ff9e64
debugTokenExpression.string#9ece6a
debugTokenExpression.value#9aa5ce
debugToolBar.background#101014
debugView.stateLabelBackground#14141b
debugView.stateLabelForeground#787c99
debugView.valueChangedHighlight#3d59a1aa
descriptionForeground#515670
diffEditor.insertedTextBackground#41a6b515
diffEditor.removedTextBackground#db4b4b22
dropdown.background#14141b
dropdown.foreground#787c99
dropdown.listBackground#14141b
editor.background#1a1b26
editor.findMatchBackground#3d59a166
editor.findMatchBorder#e0af68
editor.findMatchHighlightBackground#3d59a166
editor.findRangeHighlightBackground#515c7e33
editor.focusedStackFrameHighlightBackground#73daca20
editor.foreground#a9b1d6
editor.inactiveSelectionBackground#515c7e25
editor.lineHighlightBackground#1e202e
editor.rangeHighlightBackground#515c7e20
editor.selectionBackground#4f2d66
editor.selectionForeground#18a8a8
editor.selectionHighlightBackground#515c7e28
editor.stackFrameHighlightBackground#e2bd3a20
editor.wordHighlightBackground#515c7e33
editor.wordHighlightStrongBackground#515c7e44
editorBracketMatch.background#16161e
editorBracketMatch.border#42465d
editorCodeLens.foreground#484f70
editorCursor.foreground#27e8a7
editorError.foreground#db4b4b
editorGroup.border#1a1b26
editorGroup.dropBackground#07abab38
editorGroupHeader.border#1a1b26
editorGroupHeader.noTabsBackground#1a1b26
editorGroupHeader.tabsBackground#0b1014
editorGroupHeader.tabsBorder#1a1b26
editorGutter.addedBackground#164846
editorGutter.deletedBackground#823c41
editorGutter.modifiedBackground#394b70
editorHint.foreground#0da0ba
editorHoverWidget.background#16161e
editorHoverWidget.border#101014
editorIndentGuide.activeBackground1#363b54
editorIndentGuide.background1#1e202e
editorInfo.foreground#0da0ba
editorLightBulb.foreground#e0af68
editorLightBulbAutoFix.foreground#e0af68
editorLineNumber.activeForeground#737aa2
editorLineNumber.foreground#363b54
editorLink.activeForeground#acb0d0
editorMarkerNavigation.background#16161e
editorOverviewRuler.addedForeground#164846
editorOverviewRuler.border#1a1b26
editorOverviewRuler.bracketMatchForeground#101014
editorOverviewRuler.deletedForeground#703438
editorOverviewRuler.errorForeground#db4b4b
editorOverviewRuler.findMatchForeground#a9b1d644
editorOverviewRuler.infoForeground#1abc9c
editorOverviewRuler.modifiedForeground#394b70
editorOverviewRuler.rangeHighlightForeground#a9b1d644
editorOverviewRuler.selectionHighlightForeground#a9b1d622
editorOverviewRuler.warningForeground#e0af68
editorOverviewRuler.wordHighlightForeground#bb9af755
editorOverviewRuler.wordHighlightStrongForeground#bb9af766
editorPane.background#1a1b26
editorRuler.foreground#1a1b26
editorSuggestWidget.background#16161e
editorSuggestWidget.border#101014
editorSuggestWidget.highlightForeground#6183bb
editorSuggestWidget.selectedBackground#20222c
editorWarning.foreground#e0af68
editorWhitespace.foreground#363b54
editorWidget.background#16161e
editorWidget.resizeBorder#545c7e33
errorForeground#515670
extensionBadge.remoteBackground#3d59a1
extensionBadge.remoteForeground#ffffff
extensionButton.prominentBackground#3d59a1dd
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#3d59a1aa
focusBorder#1a1b26
foreground#787c99
gitDecoration.conflictingResourceForeground#bb7a61
gitDecoration.deletedResourceForeground#914c54
gitDecoration.ignoredResourceForeground#515670
gitDecoration.modifiedResourceForeground#6183bb
gitDecoration.stageDeletedResourceForeground#914c54
gitDecoration.stageModifiedResourceForeground#6183bb
gitDecoration.untrackedResourceForeground#449dab
icon.foreground#787c99
input.background#14141b
input.border#0f0f14
input.foreground#a9b1d6
input.placeholderForeground#787c998a
inputOption.activeBackground#3d59a144
inputOption.activeForeground#c0caf5
inputValidation.errorBackground#85353e
inputValidation.errorBorder#963c47
inputValidation.errorForeground#bbc2e0
inputValidation.infoBackground#0da0ba
inputValidation.infoBorder#0db9d7
inputValidation.infoForeground#000000
inputValidation.warningBackground#c2985b
inputValidation.warningBorder#e0af68
inputValidation.warningForeground#000000
list.activeSelectionBackground#202330
list.activeSelectionForeground#a9b1d6
list.deemphasizedForeground#787c99
list.dropBackground#1e202e
list.errorForeground#bb616b
list.focusBackground#1c1d29
list.focusForeground#a9b1d6
list.highlightForeground#668ac4
list.hoverBackground#13131a
list.hoverForeground#a9b1d6
list.inactiveSelectionBackground#1c1d29
list.inactiveSelectionForeground#a9b1d6
list.invalidItemForeground#c97018
list.warningForeground#c49a5a
listFilterWidget.background#101014
listFilterWidget.noMatchesOutline#a6333f
listFilterWidget.outline#3d59a1
menu.background#16161e
menu.border#101014
menu.foreground#787c99
menu.selectionBackground#1a1a23
menu.selectionForeground#0DB9D7
menu.separatorBackground#101014
menubar.selectionBackground#1e202e
menubar.selectionBorder#1b1e2e
menubar.selectionForeground#a9b1d6
merge.currentContentBackground#007a7544
merge.currentHeaderBackground#007a75aa
merge.incomingContentBackground#3d59a144
merge.incomingHeaderBackground#3d59a1aa
minimapGutter.addedBackground#1c5957
minimapGutter.deletedBackground#944449
minimapGutter.modifiedBackground#425882
notificationCenterHeader.background#101014
notificationLink.foreground#6183bb
notifications.background#101014
notificationsErrorIcon.foreground#bb616b
notificationsInfoIcon.foreground#0da0ba
notificationsWarningIcon.foreground#bba461
panel.background#16161e
panel.border#101014
panelInput.border#16161e
panelTitle.activeBorder#16161e
panelTitle.activeForeground#787c99
panelTitle.inactiveForeground#42465d
peekView.border#101014
peekViewEditor.background#16161e
peekViewEditor.matchHighlightBackground#3d59a166
peekViewResult.background#101014
peekViewResult.fileForeground#787c99
peekViewResult.lineForeground#a9b1d6
peekViewResult.matchHighlightBackground#3d59a166
peekViewResult.selectionBackground#3d59a133
peekViewResult.selectionForeground#a9b1d6
peekViewTitle.background#101014
peekViewTitleDescription.foreground#787c99
peekViewTitleLabel.foreground#a9b1d6
pickerGroup.border#1a1b26
pickerGroup.foreground#a9b1d6
progressBar.background#3d59a1
quickInputList.focusBackground#202330
scrollbar.shadow#00000033
scrollbarSlider.activeBackground#868bc422
scrollbarSlider.background#868bc415
scrollbarSlider.hoverBackground#868bc410
selection.background#1f2d4b
settings.checkboxForeground#07a9a9
settings.headerForeground#07a9a9
settings.modifiedItemIndicator#07a9a9
sideBar.background#16161e
sideBar.border#1a1b26
sideBar.dropBackground#1a1b26
sideBar.foreground#787c99
sideBarSectionHeader.background#1a1b26
sideBarSectionHeader.border#1a1b26
sideBarSectionHeader.foreground#a9b1d6
sideBarTitle.foreground#787c99
statusBar.background#1a1b26
statusBar.border#1a1b26
statusBar.debuggingBackground#1a1b26
statusBar.debuggingForeground#787c99
statusBar.foreground#787c99
statusBar.noFolderBackground#1a1b26
statusBarItem.activeBackground#1a1b26
statusBarItem.hoverBackground#1a1b26
statusBarItem.prominentBackground#1a1b26
statusBarItem.prominentHoverBackground#1a1b26
tab.activeBackground#1a1b26
tab.activeBorder#1a1b25
tab.activeBorderTop#27e8a7
tab.activeForeground#07a9a9
tab.activeModifiedBorder#1a1b26
tab.border#1a1b26
tab.hoverForeground#a9b1d6
tab.inactiveBackground#0b1014
tab.inactiveForeground#787c99
tab.inactiveModifiedBorder#a90719
tab.lastPinnedBorder#1a1b26
tab.unfocusedActiveBorder#1a1b26
tab.unfocusedActiveForeground#a9b1d6
tab.unfocusedActiveModifiedBorder#a90719
tab.unfocusedHoverForeground#a9b1d6
tab.unfocusedInactiveForeground#787c99
tab.unfocusedInactiveModifiedBorder#a90719
terminal.ansiBlack#363b54
terminal.ansiBlue#7aa2f7
terminal.ansiBrightBlack#363b54
terminal.ansiBrightBlue#7aa2f7
terminal.ansiBrightCyan#7dcfff
terminal.ansiBrightGreen#41a6b5
terminal.ansiBrightMagenta#bb9af7
terminal.ansiBrightRed#f7768e
terminal.ansiBrightWhite#acb0d0
terminal.ansiBrightYellow#e0af68
terminal.ansiCyan#7dcfff
terminal.ansiGreen#41a6b5
terminal.ansiMagenta#bb9af7
terminal.ansiRed#f7768e
terminal.ansiWhite#787c99
terminal.ansiYellow#e0af68
terminal.background#16161e
terminal.foreground#787c99
terminal.selectionBackground#515c7e30
textBlockQuote.background#16161e
textCodeBlock.background#16161e
textLink.activeForeground#7dcfff
textLink.foreground#07a9a9
textPreformat.foreground#07a9a9
textSeparator.foreground#07a9a9
titleBar.activeBackground#1a1b26
titleBar.activeForeground#787c99
titleBar.border#101014
titleBar.inactiveBackground#1a1b26
titleBar.inactiveForeground#787c99
tree.indentGuidesStroke#2b2b3b
walkThrough.embeddedEditorBackground#16161e
widget.shadow#ffffff00
window.activeBorder#1a1b26
window.inactiveBorder#1a1b26

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.block.documentation, punctuation.definition.comment, comment.block.documentation punctuation, meta.separator	#444B6A	—
comment.block.documentation variable, comment.block.documentation storage, comment.block.documentation keyword, comment.block.documentation support, comment.block.documentation markup, comment.block.documentation markup.inline.raw.string.markdown, meta.other.type.phpdoc.php keyword.other.type.php, meta.other.type.phpdoc.php support.other.namespace.php, meta.other.type.phpdoc.php punctuation.separator.inheritance.php, meta.other.type.phpdoc.php support.class, keyword.other.phpdoc.php, log.date	#5A638C	—
meta.other.type.phpdoc.php support.class, comment.block.documentation storage.type, comment.block.documentation punctuation.definition.block.tag, comment.block.documentation entity.name.type.instance	#646E9C	—
variable.other.constant, punctuation.definition.constant, constant.language, constant.numeric, support.constant, meta.property-list meta.at-rule.if, meta.at-rule.return variable.parameter.url, meta.property-list meta.at-rule.else, support.constant.property-value	#FF9E64	—
string, constant.other.symbol, constant.other.key, meta.attribute-selector, support.constant.font-name, meta.definition.variable, entity.other.attribute-name.class, meta.at-rule.mixin.scss entity.name.function.scss, 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	#9ECE6A	—
constant.other.color, constant.other.color.rgb-value.hex punctuation.definition.constant, text.html, text.log, heading.5.markdown entity.name, heading.5.markdown punctuation.definition.heading.markdown	#9AA5CE	—
invalid, invalid.illegal, invalid.deprecated	#FF5370	—
keyword.control.export.ts, keyword.control.export.js, keyword.control.flow.ts, keyword.control.import.ts, storage.type.ts, keyword.control.from.ts, keyword.control.from.js, meta.var.expr storage.type, storage.modifier, keyword.control.at-rule.include punctuation.definition.keyword, keyword.control.at-rule.mixin punctuation.definition.keyword, meta.at-rule.include keyword.control.at-rule.include, keyword.control.at-rule.extend punctuation.definition.keyword, meta.at-rule.extend keyword.control.at-rule.extend, entity.other.attribute-name.placeholder.css punctuation.definition.entity.css, meta.at-rule.media keyword.control.at-rule.media, meta.at-rule.mixin keyword.control.at-rule.mixin, meta.at-rule.function keyword.control.at-rule.function, keyword.control punctuation.definition.keyword, keyword.control.import.ts, keyword.control.import.js	#A29BFE	—
punctuation.definition.template, support.class.component, variable.other.readwrite.alias, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.js	#86E1FC	—
meta.class-method.js entity.name.function.js, entity.name.method.js, variable.function.constructor, keyword.other.special-method, storage.type.cs, entity.name.function, meta.function-call, meta.function-call entity.name.function, variable.function, meta.definition.method entity.name.function, meta.object-literal entity.name.function, 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, support.type.property-name.css, support.type.vendored.property-name, support.type.map.key, keyword.control.smarty, keyword.control.twig, support.constant.handlebars keyword.control, keyword.operator.comparison.twig, keyword.blade, entity.name.function.blade, keyword.control.smarty, keyword.control.twig, support.constant.handlebars keyword.control, keyword.operator.comparison.twig, keyword.blade, entity.name.function.blade, punctuation.definition.template-expression, punctuation.section.embedded, meta.embedded.line.tag.smarty, support.constant.handlebars, punctuation.section.tag.twig, keyword.control.import, keyword.control.default, meta.import keyword.other, keyword.other.DML, meta.array.literal variable, variable.other.property, support.variable.property, support.variable.property.dom, meta.function-call variable.other.object.property, 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, storage.modifier.async.ts	#0DB9D7	—
constant.character.escape, keyword.operator.quantifier.regexp, keyword.operator, keyword.control.as, keyword.other, keyword.operator.bitwise.shift, punctuation, text.html.twig meta.tag.inline.any.html, meta.tag.template.value.twig meta.function.arguments.twig, meta.directive.vue punctuation.separator.key-value.html, punctuation.definition.constant.markdown, punctuation.definition.string, punctuation.support.type.property-name, text.html.vue-html meta.tag, punctuation.definition.keyword, punctuation.terminator.rule, punctuation.definition.entity, punctuation.separator.inheritance.php, keyword.other.template, keyword.other.substitution, entity.name.operator, meta.property-list punctuation.separator.key-value, meta.at-rule.mixin punctuation.separator.key-value, meta.at-rule.function variable.parameter.url, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.language.fenced.markdown	#89DDFF	—
keyword.operator.spread, keyword.operator.rest, keyword, keyword.control, keyword.other.important, keyword.operator.logical, storage.type.function, keyword.operator.bitwise, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.relational, keyword.operator.or.regexp, keyword.other.type.php, storage.type.php, constant.character, constant.escape, keyword.other.unit, variable.other.declaration, entity.other.inherited-class, meta.at-rule.mixin keyword.control.at-rule.mixin, meta.at-rule.include entity.name.function.scss, meta.at-rule.include keyword.control.at-rule.include, storage.type, entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name, entity.other.attribute-name.id.html, meta.directive.vue entity.other.attribute-name.html, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.placeholder, meta.property-list meta.property-value, constant.other.character-class.regexp, 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, text.html.markdown markup.inline.raw.markdown	#BB9AF7	—
entity.name.tag, entity.name.tag support.class.component, meta.tag	#DE5971	—
punctuation.definition.tag	#BA3C97	—
constant.other.character-class.set.regexp, punctuation.definition.character-class.regexp, 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, variable.parameter.function.language.special, variable.parameter, meta.function.parameters punctuation.definition.variable, meta.function.parameter variable, constant.other.php, variable.other.global.safer, variable.other.global.safer punctuation.definition.variable, variable.other.global, variable.other.global punctuation.definition.variable, constant.other, entity.other.attribute-name.pseudo-class punctuation.definition.entity, entity.other.attribute-name.pseudo-element punctuation.definition.entity, entity.other.attribute-name.class punctuation.definition.entity, entity.name.tag.reference, entity.other.attribute-name.html, variable.other.jsdoc	#E0AF68	—
variable, support.variable, string constant.other.placeholder, variable.parameter.handlebars, variable.other.object, variable.other.object.property, support.class, support.type, variable.other.readwrite.alias, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, support.type.sys-types, support.variable.dom, support.constant.math, support.type.object.module, support.constant.json, entity.name.namespace, meta.import.qualifier, support.function, entity.name.tag.css, text.html constant.character.entity, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, 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, token.info-token, entity.name, entity.name.module.js, variable.import.parameter.js, variable.other.class.js, variable.other punctuation.definition.variable, meta.property-list meta.at-rule.include, constant.character.escape.backslash, meta.jsx.children, meta.embedded.block	#C0CAF5	—
meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key	#41A6B5	—
source.cpp meta.block variable.other, support.other.variable, variable.language, source.js constant.other.object.key.js string.unquoted.label.js, variable.language.this punctuation.definition.variable, keyword.other.this, punctuation.definition.group, 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, entity.tag.apacheconf	#F7768E	—
entity.other.attribute-name.id	#FC7B7B	—
meta.property-list, meta.property-list meta.property-list, punctuation.definition.list_item.markdown, meta.block, meta.brace, punctuation.definition.block, punctuation.definition.use, punctuation.definition.class, punctuation.definition.begin.bracket, punctuation.definition.end.bracket, punctuation.definition.switch-expression.begin.bracket, punctuation.definition.switch-expression.end.bracket, punctuation.definition.section.switch-block.begin.bracket, punctuation.definition.section.switch-block.end.bracket, punctuation.definition.group.shell, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.definition.dictionary, punctuation.definition.array, punctuation.section	#9ABDF5	—
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity.css, string.other.link, markup.underline.link, constant.other.reference.link.markdown, string.other.link.description.title.markdown, meta.object-literal.key, string.alias.graphql, string.unquoted.graphql, string.unquoted.alias.graphql, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, meta.field.declaration.ts variable.object.property, meta.preprocessor, 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	#73DACA	—
source.sass keyword.control, heading.3.markdown entity.name, heading.3.markdown punctuation.definition.heading.markdown, source.env, support.class.component.js, storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, entity.name.type.class.ts, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, source.json meta.structure.dictionary.json support.type.property-name.json	#7AA2F7	—
markup.inserted	#449DAB	—
markup.deleted	#914C54	—
markup.changed	#6183BB	—
string.regexp	#B4F9F8	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown, markup.quote punctuation.definition.blockquote.markdown	#4E5579	—
heading.1.markdown entity.name, heading.1.markdown punctuation.definition.heading.markdown	#89DDFF	—
heading.2.markdown entity.name, heading.2.markdown punctuation.definition.heading.markdown	#61BDF2	—
heading.4.markdown entity.name, heading.4.markdown punctuation.definition.heading.markdown	#6D91DE	—
heading.6.markdown entity.name, heading.6.markdown punctuation.definition.heading.markdown	#747CA1	—
markup.italic, markup.italic punctuation, markup.bold, markup.bold punctuation, markup.bold markup.italic, markup.bold markup.italic punctuation	#C0CAF5	—
meta.separator	#444B6A	—
markup.table	#C0CEFC	—
token.warn-token	#FFDB69	—
token.error-token	#DB4B4B	—
token.debug-token	#B267E6	—
variable.language.this.ts, meta.definition.variable variable.other.readwrite, meta.definition.variable variable.other.constant, variable.other.object.ts, variable.other.readwrite.ts, variable.other.readwrite.js	#00CECB	—
entity.name.tag.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, support.class.component.js, entity.name.tag, punctuation.definition.string.begin, punctuation.definition.string.end	#07A9A9	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.begin, punctuation.definition.tag.end	#7A7D84	—
punctuation.accessor.html	#E84855	—
keyword.control.conditional.ts, keyword.control.trycatch.ts, keyword.control.conditional.svelte	#FCA7EA	—
entity.name.type.ts, support.type.primitive.ts, comment.line.double-slash.ts, comment.block.documentation.ts	#7390AA	—
markup.italic, markup.italic punctuation, markup.quote, variable.language.this.ts, keyword.control.export.ts, keyword.control.export.js, keyword.control.flow.ts, keyword.control.import.ts, storage.type.ts, comment.line.double-slash, entity.other.attribute-name, keyword.control.from, keyword.control.import, keyword.control.conditional.js, keyword.control.conditional, comment, meta.var.expr storage.type, keyword.control.flow, meta.directive.vue punctuation.separator.key-value.html, meta.directive.vue entity.other.attribute-name.html, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, storage.modifier, keyword.control.import, storage.modifier.async.ts	—	italic
meta.separator, keyword.operator.spread, keyword.operator.rest, markup.bold, markup.bold punctuation, heading.1.markdown entity.name, heading.1.markdown punctuation.definition.heading.markdown, heading.2.markdown entity.name, heading.2.markdown punctuation.definition.heading.markdown, heading.3.markdown entity.name, heading.3.markdown punctuation.definition.heading.markdown, heading.4.markdown entity.name, heading.4.markdown punctuation.definition.heading.markdown, heading.5.markdown entity.name, heading.5.markdown punctuation.definition.heading.markdown, heading.6.markdown entity.name, heading.6.markdown punctuation.definition.heading.markdown	—	bold
markup.underline, markup.underline punctuation	—	underline
markup.bold markup.italic, markup.bold markup.italic punctuation	—	bold italic

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