Cherry

Name: Cherry
Author: Nauval Rizky

Publisher: Nauval RizkyThemes in package: 2

Fervent Tempo battlesuit inspired Theme for VSCode

Open in VS Code GitHub

Color themes

VS Code preview

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

Cherry — Cherry Midnight

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.activeBorder#00000000
activityBar.background#101017
activityBar.border#2a2d3a
activityBar.foreground#ff568e
activityBar.inactiveForeground#aeb4d099
activityBarBadge.background#ff568e
breadcrumb.foreground#aeb4d0
button.background#ff568e66
button.hoverBackground#ff568eb3
debugExceptionWidget.border#ff568e
debugToolBar.background#1f222e
dropdown.background#101017
dropdown.border#ff568e66
dropdown.foreground#bdc3df
dropdown.listBackground#101017
editor.background#101017
editor.findMatchBackground#ff568e66
editor.findMatchBorder#00000000
editor.findMatchHighlightBackground#ff568e33
editor.findMatchHighlightBorder#00000000
editor.findRangeHighlightBackground#ff568e66
editor.foreground#bdc3df
editor.lineHighlightBackground#1f222e
editor.rangeHighlightBackground#ff568e33
editor.selectionBackground#ff568e66
editor.selectionForeground#1f222eb3
editor.selectionHighlightBackground#1f222e
editor.selectionHighlightBorder#ff568e66
editor.wordHighlightBackground#101017
editor.wordHighlightBorder#ff568e66
editor.wordHighlightStrongBackground#101017
editor.wordHighlightStrongBorder#ff568e66
editorBracketMatch.border#737380
editorCursor.foreground#ff568e
editorError.foreground#ff568e66
editorGroup.border#2a2d3a
editorGroup.dropBackground#ff568e66
editorGroup.emptyBackground#101017
editorGroupHeader.tabsBackground#101017
editorGroupHeader.tabsBorder#2a2d3a
editorHint.foreground#efff73
editorHoverWidget.background#101017
editorHoverWidget.border#ff568e
editorIndentGuide.activeBackground#535664
editorIndentGuide.background#2a2d3a80
editorLineNumber.activeForeground#ff568e
editorLineNumber.foreground#737380
editorMarkerNavigation.background#000009
editorOverviewRuler.border#2a2d3a
editorOverviewRuler.selectionHighlightForeground#fa9d86
editorPane.background#000009
editorRuler.foreground#2a2d3a
editorSuggestWidget.background#1f222e
editorSuggestWidget.border#2a2d3a
editorSuggestWidget.foreground#ff568e
editorSuggestWidget.highlightForeground#ebebf0
editorSuggestWidget.selectedBackground#ff568e33
editorWarning.foreground#fa9d86
editorWhitespace.foreground#1f222e
editorWidget.background#1f222e
editorWidget.border#ff568e
errorForeground#ff568eb3
focusBorder#ff568e66
foreground#bdc3df
input.background#101017
input.border#2a2d3a
input.foreground#aeb4d0
input.placeholderForeground#aeb4d0
inputOption.activeBorder#ff568eb3
inputValidation.errorBackground#101017
inputValidation.errorBorder#ff568eb3
inputValidation.infoBackground#101017
inputValidation.infoBorder#737380
inputValidation.warningBackground#101017
inputValidation.warningBorder#fa9d86
list.activeSelectionBackground#ff568e33
list.dropBackground#1f222e80
list.errorForeground#ff568eb3
list.focusBackground#1f222e80
list.focusForeground#ebebf0
list.highlightForeground#ebebf0
list.hoverBackground#1f222e80
list.hoverForeground#ebebf0
list.inactiveSelectionBackground#1f222e80
list.inactiveSelectionForeground#aeb4d0
list.warningForeground#fa9d86
menu.background#1f222e
menu.foreground#bdc3df
menu.selectionBackground#ff568e66
menu.selectionBorder#2a2d3a
menu.selectionForeground#dedeef
menu.separatorBackground#33333f
menubar.selectionBackground#ff568e66
menubar.selectionBorder#2a2d3a
menubar.selectionForeground#aeb4d0
panel.background#101017
panel.border#2a2d3a
panelTitle.activeBorder#ff568e
panelTitle.activeForeground#ff568e
panelTitle.inactiveForeground#aeb4d0
peekView.border#ff568e
peekViewEditor.background#1f222e80
peekViewEditor.matchHighlightBackground#1f222e80
peekViewEditor.matchHighlightBorder#ff568e66
peekViewResult.background#1f222e80
peekViewResult.matchHighlightBackground#ff568e66
peekViewResult.selectionBackground#ff568e66
peekViewTitle.background#1f222e80
pickerGroup.border#2a2d3a
pickerGroup.foreground#ff568e
progressBar.background#ff568e
scrollbar.shadow#101017
scrollbarSlider.activeBackground#ff568e66
scrollbarSlider.background#1f222e80
scrollbarSlider.hoverBackground#ff568e66
selection.background#ff568e66
settings.checkboxBackground#1f222e
settings.checkboxBorder#101017
settings.checkboxForeground#bdc3df
settings.dropdownBackground#101017
settings.dropdownBorder#2a2d3a
settings.dropdownForeground#bdc3df
settings.headerForeground#bdc3df
settings.numberInputBackground#101017
settings.numberInputBorder#2a2d3a
settings.numberInputForeground#bdc3df
settings.textInputBackground#101017
settings.textInputBorder#2a2d3a
settings.textInputForeground#bdc3df
sideBar.background#101017
sideBar.border#2a2d3a
sideBar.dropBackground#ff568eb3
sideBar.foreground#aeb4d0
sideBarSectionHeader.background#101017
sideBarSectionHeader.foreground#aeb4d0
sideBarTitle.foreground#aeb4d0
statusBar.background#101017
statusBar.border#2a2d3a
statusBar.debuggingBackground#ff568e
statusBar.debuggingForeground#101017
statusBar.foreground#aeb4d0
statusBar.noFolderBackground#101017
statusBar.noFolderForeground#aeb4d0
statusBarItem.activeBackground#ff568e66
statusBarItem.hoverBackground#ff568e66
statusBarItem.remoteForeground#101017
tab.activeBackground#101017
tab.activeBorder#ff568e
tab.activeForeground#bdc3df
tab.border#101017
tab.hoverBorder#ff568e
tab.inactiveBackground#101017
tab.inactiveForeground#737380
tab.unfocusedActiveBorder#2a2d3a
tab.unfocusedActiveForeground#737380
tab.unfocusedHoverBorder#737380
tab.unfocusedInactiveForeground#737380
terminal.ansiBlack#33333f
terminal.ansiBlue#73a9ff
terminal.ansiBrightBlack#43435a
terminal.ansiBrightBlue#85b6ff
terminal.ansiBrightCyan#71c2d9
terminal.ansiBrightGreen#73de8a
terminal.ansiBrightMagenta#a481f7
terminal.ansiBrightRed#ff69a2
terminal.ansiBrightWhite#ebebf0
terminal.ansiBrightYellow#f3ff85
terminal.ansiCyan#62c6da
terminal.ansiGreen#64de83
terminal.ansiMagenta#946ff7
terminal.ansiRed#ff568e
terminal.ansiWhite#dedeef
terminal.ansiYellow#efff73
terminal.background#101017
terminal.foreground#bdc3df
terminal.selectionBackground#ff568e33
terminalCursor.background#101017
terminalCursor.foreground#bdc3df
textBlockQuote.background#1f222e
textBlockQuote.border#ff568e
textLink.activeForeground#946ff7
textLink.foreground#73a9ff
textPreformat.foreground#946ff7
textSeparator.foreground#737380
titleBar.activeBackground#101017
titleBar.activeForeground#bdc3df
titleBar.border#2a2d3a
titleBar.inactiveBackground#101017
titleBar.inactiveForeground#737380
welcomePage.buttonBackground#1f222e
welcomePage.buttonHoverBackground#1f222e
widget.shadow#101017

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
constant.character.escape, constant.keyword.clojure, constant.language.symbol.elixir, constant.language.symbol.ruby, constant.other.symbol, entity.name.class.xi, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, keyword.control.xi, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.decrement, keyword.operator.increment, keyword.operator.relational, keyword.operator.assignment, keyword.operator.assignment.compound.js, keyword.operator.assignment.compound.ts, keyword.operator.bitwise, keyword.operator.channel, keyword.operator.comparison.php, keyword.operator.css, keyword.operator.scss, keyword.operator.less, keyword.operator.logical, keyword.operator.logical.php, keyword.operator.bitwise.php, keyword.operator.arithmetic.php, rgb-value, source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json, string.regexp, support.function, support.token.decorator.python, meta.function.decorator.identifier.python, support.type.object.dom, support.type.posix-reserved.c, support.type.posix-reserved.cpp, support.type.prelude.elm, support.type.python, support.type.vendored.property-name.css	#62c6da	—
comment markup.link, markup.quote.markdown, punctuation.definition.tag.xi	#43435a	—
accent.xi, constant.character.xi, entity.name.function, entity.name.function, support.function.console, entity.name.goto-label.php, support.other.php, meta.require, support.function.any-method, variable.function	#73a9ff	—
entity.other.attribute-name.id	#73a9ff	normal
keyword.operator.expression.import, keyword.other.special-method, markup.heading punctuation.definition.heading, entity.name.section, meta.diff.header.from-file, meta.diff.header.to-file, punctuation.definition.from-file.diff, punctuation.definition.to-file.diff, meta.function-call.generic.python, meta.function-call.php, meta.function-call.object.php, meta.function-call.static.php, meta.function.decorator.python, meta.method.groovy, meta.method.java, string.other.link.title.markdown, string.other.link.description.markdown, support.function.std.rust, support.type.type.flowtype, token.info-token	#73a9ff	—
beginning.punctuation.definition.list.markdown.xi	#737380	—
comment, punctuation.definition.comment	#737380	italic
beginning.punctuation.definition.quote.markdown.xi, keyword.other.substitution.begin, keyword.other.substitution.end, keyword.other.template.begin, keyword.other.template.end, markup.inline.raw.markdown, markup.inline.raw.string.markdown, markup.inserted.diff, meta.definition.class.inherited.classes.groovy, punctuation.definition.string.begin, punctuation.definition.string.end, source.ini, source.json meta.structure.dictionary.json > value.json > string.quoted.json, source.json meta.structure.array.json > value.json > string.quoted.json, source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation, source.json meta.structure.array.json > value.json > string.quoted.json > punctuation, string	#64de83	—
meta.brace.square, block.scope.end, block.scope.begin, function.brace, function.parameter, function.parameter.ruby, function.parameter.cs, invalid.illegal.bad-ampersand.html, invalid.xi, keyword.operator, keyword.operator.misc.rust, markup.heading.setext, meta.tag, meta.template.expression, punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python, punctuation.separator.arguments.python, punctuation.definition.list.begin.python, punctuation.definition.list.end.python, punctuation.definition.block.sequence.item.yaml, punctuation.definition.parameters.begin.bracket.round.php, punctuation.definition.parameters.end.bracket.round.php, punctuation.separator.delimiter.php, punctuation.section.scope.begin.php, punctuation.section.scope.end.php, punctuation.terminator.expression.php, punctuation.definition.arguments.begin.bracket.round.php, punctuation.definition.arguments.end.bracket.round.php, punctuation.definition.storage-type.begin.bracket.round.php, punctuation.definition.storage-type.end.bracket.round.php, punctuation.definition.array.begin.bracket.round.php, punctuation.definition.array.end.bracket.round.php, punctuation.definition.begin.bracket.round.php, punctuation.definition.end.bracket.round.php, punctuation.definition.begin.bracket.curly.php, punctuation.definition.end.bracket.curly.php, punctuation.definition.section.switch-block.end.bracket.curly.php, punctuation.definition.section.switch-block.start.bracket.curly.php, punctuation.definition.section.switch-block.begin.bracket.curly.php, punctuation.definition.section.switch-block.end.bracket.curly.php, punctuation.section.array.begin.php, punctuation.section.array.end.php, punctuation.section.block.begin.bracket.curly.cpp, punctuation.section.block.end.bracket.curly.cpp, punctuation.terminator.statement.c, punctuation.section.block.begin.bracket.curly.c, punctuation.section.block.end.bracket.curly.c, punctuation.section.parens.begin.bracket.round.c, punctuation.section.parens.end.bracket.round.c, punctuation.section.parameters.begin.bracket.round.c, punctuation.section.parameters.end.bracket.round.c, punctuation.section.block.begin.java, punctuation.section.block.end.java, punctuation.definition.method-parameters.begin.java, punctuation.definition.method-parameters.end.java, meta.method.identifier.java, punctuation.section.method.begin.java, punctuation.section.method.end.java, punctuation.terminator.java, punctuation.section.class.begin.java, punctuation.section.class.end.java, punctuation.section.inner-class.begin.java, punctuation.section.inner-class.end.java, meta.method-call.java, punctuation.section.class.begin.bracket.curly.java, punctuation.section.class.end.bracket.curly.java, punctuation.section.method.begin.bracket.curly.java, punctuation.section.method.end.bracket.curly.java, punctuation.separator.period.java, punctuation.bracket.angle.java, punctuation.definition.annotation.java, meta.method.body.java, punctuation.separator.delimiter, punctuation.separator.key-value, punctuation.separator.list.comma.css, punctuation.separator.period.python, punctuation.separator.element.python, punctuation.parenthesis.begin.python, punctuation.parenthesis.end.python, storage.modifier.lifetime.rust, support.constant.property-value, support.type.property-name, token.package, token.variable.parameter.java, variable.c, variable.parameter.function	#bdc3df	—
constant.regexp.xi, emphasis md, keyword, keyword.control, keyword.operator.address.go, keyword.operator.arithmetic.go, keyword.operator.assignment.c, keyword.operator.comparison.c, keyword.operator.c, keyword.operator.increment.c, keyword.operator.decrement.c, keyword.operator.bitwise.shift.c, keyword.operator.assignment.cpp, keyword.operator.comparison.cpp, keyword.operator.cpp, keyword.operator.increment.cpp, keyword.operator.decrement.cpp, keyword.operator.bitwise.shift.cpp, keyword.operator.assignment.compound, keyword.operator.delete, keyword.operator.error-control.php, keyword.operator.expression.delete, keyword.operator.expression.in, keyword.operator.expression.of, keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.expression.typeof, keyword.operator.expression.void, keyword.operator.expression.instanceof, keyword.operator.expression.keyof, keyword.operator.heredoc.php, keyword.operator.nowdoc.php, keyword.operator.instanceof.java, keyword.operator.logical.python, keyword.operator.module, keyword.operator.new, keyword.operator.optional, keyword.operator.regexp.php, keyword.operator.sigil.rust, keyword.operator.sizeof.c, keyword.operator.sizeof.cpp, keyword.operator.ternary, keyword.operator.type.php, markup.italic, punctuation.definition.italic, todo.emphasis, markup.underline.link.markdown, markup.underline.link.image.markdown, meta.selector, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.quasi.element, punctuation.section.embedded, punctuation.section.embedded.begin, punctuation.section.embedded.end, punctuation.separator.c, punctuation.separator.cpp, storage, support.constant.edge, support.type.fx.hlsl, support.type.object.hlsl, support.type.object.rw.hlsl, support.type.sampler.hlsl, support.type.texture.hlsl, text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade, text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade, token.debug-token, token.package.keyword, token.storage, variable.other.generic-type.haskell	#946ff7	—
constant, constant.character.format.placeholder.other.python, constant.numeric, control.elements, keyword.operator.less, entity.other.attribute-name, punctuation.definition.constant	#fa9d86	—
entity.other.attribute-name.class.css	#fa9d86	normal
inline-color-decoration rgb-value, keyword.operator.quantifier.regexp, less rgb-value, markup.bold, todo.bold, punctuation.definition.bold.markdown, storage.type.haskell, support.constant.color.w3c-standard-color-name.css, support.constant.color.w3c-standard-color-name.css, support.constant.color.w3c-standard-color-name.scss, support.constant.core.rust, support.constant.elm, support.constant.ext.php, support.constant.std.php, support.constant.core.php, support.constant.parser-token.php, support.constant.font-name, support.constant.json, support.constant.property-value.scss, support.constant.property-value.css, support.constant.property.math, support.variable.property.process, token.warn-token, variable.parameter.function.language.python, variable.parameter.function.python, wikiword.xi	#fa9d86	—
beginning.punctuation.definition.list.markdown, constant.character.character-class.regexp.xi, constant.character.entity, constant.other.character-class.regexp, entity.name.label.cs, entity.name.section.markdown, entity.name.tag, entity.name.variable.local.cs, keyword.other.unit, markup.deleted.diff, markup.heading, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown, meta.arguments.coffee, meta.definition.variable.name.groovy, meta.definition.variable.name.java, meta.function.c, meta.function.cpp, meta.property.object, meta.scope.prerequisites.makefile, meta.symbol.clojure, punctuation.definition.delayed.unison, punctuation.definition.list.begin.unison, punctuation.definition.list.end.unison, punctuation.definition.ability.begin.unison, punctuation.definition.ability.end.unison, punctuation.operator.assignment.as.unison, punctuation.separator.pipe.unison, punctuation.separator.delimiter.unison, punctuation.definition.hash.unison, punctuation.definition.heading.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.list.markdown, punctuation.definition.metadata.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.section.embedded, variable.interpolation, selector.sass, source.java, source.json meta.structure.dictionary.json > string.quoted.json, source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string, support.type.object.console, support.type.property-name.json, support.type.property-name.json punctuation, support.variable.dom, support.variable.property.dom, support.variable.magic.python, text.bracketed, text.variable, variable, variable.language.rust, variable.language, variable.other.class.php, variable.other.readwrite, meta.object-literal.key, support.variable.property, support.variable.object.process, support.variable.object.node, variable.parameter.function.coffee, variable.parameter.function.js	#ff568e	—
entity.global.clojure, entity.name.class, entity.name.class.identifier.namespace.type, entity.name.function.xi, entity.name.label.cs, entity.name.lifetime.rust, entity.name.namespace, entity.name.package.go, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition, entity.name.type, entity.name.type.module, entity.name.type.namespace, entity.other.inherited-class, import.storage.java, keyword.operator.assignment.go, markup.changed.diff, punctuation.definition.bold, source.makefile, storage.modifier.import.groovy, storage.modifier.import.java, storage.type.java, storage.type.generic.java, storage.type.annotation.java, storage.type.cs, storage.type.object.array.java, storage.type.php, meta.other.type.phpdoc.php, keyword.other.type.php, keyword.other.array.phpdoc.php, support.class, entity.name.type.class, support.constant.math, support.module.node, support.type.object.module, support.module.node, support.other.namespace.use.php, support.other.namespace.use-as.php, support.other.namespace.php, entity.other.alias.php, meta.interface.php, support.type.primitive, support.type.primitive.ts, support.type.builtin.ts, support.type.primitive.tsx, support.type.builtin.tsx, support.type.swift, support.type.vb.asp, support.variable.semantic.hlsl, token.storage.type.java, variable.other.class.js, variable.other.class.ts, variable.other.constant, variable.parameter.function.language.special.self.python	#efff73	—
invalid.illegal.non-null-typehinted.php, token.error-token	#ff568e66	—
constant.other.color.rgb-value.xi, invalid.broken, invalid.deprecated, invalid.illegal, invalid.unimplemented	#ebebf0	—
comment.block.documentation, comment.line.double-slash, entity.other.attribute-name.js, entity.other.attribute-name.jsx, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.ts, entity.other.attribute-name.tsx, entity.other.inherited-class, keyword.control.flow.python, keyword.control.import.python, keyword.declaration, markup.italic.markdown, markup.quote, meta.block keyword.operator.new, meta.block meta.function-call variable.other.object, meta.function.variable.css, meta.var storage.type, punctuation.definition.italic.markdown, punctuation.definition.string.css, storage.type.annotation, string.quoted.double.css, support.variable, variable.argument.css, variable.language, variable.other.object.property, variable.parameter	—	italic
constant.character.escape, constant.keyword.clojure, constant.language.symbol.elixir, constant.language.symbol.ruby, constant.other.symbol, entity.name.class.xi, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, keyword.control.xi, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.decrement, keyword.operator.increment, keyword.operator.relational, keyword.operator.assignment, keyword.operator.assignment.compound.js, keyword.operator.assignment.compound.ts, keyword.operator.bitwise, keyword.operator.channel, keyword.operator.comparison.php, keyword.operator.css, keyword.operator.scss, keyword.operator.less, keyword.operator.logical, keyword.operator.logical.php, keyword.operator.bitwise.php, keyword.operator.arithmetic.php, rgb-value, source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json, string.regexp, support.function, support.token.decorator.python, meta.function.decorator.identifier.python, support.type.object.dom, support.type.posix-reserved.c, support.type.posix-reserved.cpp, support.type.prelude.elm, support.type.python, support.type.vendored.property-name.css	#62c6da	—
comment markup.link, markup.quote.markdown, punctuation.definition.tag.xi	#43435a	—
accent.xi, constant.character.xi, entity.name.function, entity.name.function, support.function.console, entity.name.goto-label.php, support.other.php, meta.require, support.function.any-method, variable.function	#73a9ff	—
entity.other.attribute-name.id	#73a9ff	normal
keyword.operator.expression.import, keyword.other.special-method, markup.heading punctuation.definition.heading, entity.name.section, meta.diff.header.from-file, meta.diff.header.to-file, punctuation.definition.from-file.diff, punctuation.definition.to-file.diff, meta.function-call.generic.python, meta.function-call.php, meta.function-call.object.php, meta.function-call.static.php, meta.function.decorator.python, meta.method.groovy, meta.method.java, string.other.link.title.markdown, string.other.link.description.markdown, support.function.std.rust, support.type.type.flowtype, token.info-token	#73a9ff	—
beginning.punctuation.definition.list.markdown.xi	#737380	—
comment, punctuation.definition.comment	#737380	italic
beginning.punctuation.definition.quote.markdown.xi, keyword.other.substitution.begin, keyword.other.substitution.end, keyword.other.template.begin, keyword.other.template.end, markup.inline.raw.markdown, markup.inline.raw.string.markdown, markup.inserted.diff, meta.definition.class.inherited.classes.groovy, punctuation.definition.string.begin, punctuation.definition.string.end, source.ini, source.json meta.structure.dictionary.json > value.json > string.quoted.json, source.json meta.structure.array.json > value.json > string.quoted.json, source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation, source.json meta.structure.array.json > value.json > string.quoted.json > punctuation, string	#64de83	—
meta.brace.square, block.scope.end, block.scope.begin, function.brace, function.parameter, function.parameter.ruby, function.parameter.cs, invalid.illegal.bad-ampersand.html, invalid.xi, keyword.operator, keyword.operator.misc.rust, markup.heading.setext, meta.tag, meta.template.expression, punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python, punctuation.separator.arguments.python, punctuation.definition.list.begin.python, punctuation.definition.list.end.python, punctuation.definition.block.sequence.item.yaml, punctuation.definition.parameters.begin.bracket.round.php, punctuation.definition.parameters.end.bracket.round.php, punctuation.separator.delimiter.php, punctuation.section.scope.begin.php, punctuation.section.scope.end.php, punctuation.terminator.expression.php, punctuation.definition.arguments.begin.bracket.round.php, punctuation.definition.arguments.end.bracket.round.php, punctuation.definition.storage-type.begin.bracket.round.php, punctuation.definition.storage-type.end.bracket.round.php, punctuation.definition.array.begin.bracket.round.php, punctuation.definition.array.end.bracket.round.php, punctuation.definition.begin.bracket.round.php, punctuation.definition.end.bracket.round.php, punctuation.definition.begin.bracket.curly.php, punctuation.definition.end.bracket.curly.php, punctuation.definition.section.switch-block.end.bracket.curly.php, punctuation.definition.section.switch-block.start.bracket.curly.php, punctuation.definition.section.switch-block.begin.bracket.curly.php, punctuation.definition.section.switch-block.end.bracket.curly.php, punctuation.section.array.begin.php, punctuation.section.array.end.php, punctuation.section.block.begin.bracket.curly.cpp, punctuation.section.block.end.bracket.curly.cpp, punctuation.terminator.statement.c, punctuation.section.block.begin.bracket.curly.c, punctuation.section.block.end.bracket.curly.c, punctuation.section.parens.begin.bracket.round.c, punctuation.section.parens.end.bracket.round.c, punctuation.section.parameters.begin.bracket.round.c, punctuation.section.parameters.end.bracket.round.c, punctuation.section.block.begin.java, punctuation.section.block.end.java, punctuation.definition.method-parameters.begin.java, punctuation.definition.method-parameters.end.java, meta.method.identifier.java, punctuation.section.method.begin.java, punctuation.section.method.end.java, punctuation.terminator.java, punctuation.section.class.begin.java, punctuation.section.class.end.java, punctuation.section.inner-class.begin.java, punctuation.section.inner-class.end.java, meta.method-call.java, punctuation.section.class.begin.bracket.curly.java, punctuation.section.class.end.bracket.curly.java, punctuation.section.method.begin.bracket.curly.java, punctuation.section.method.end.bracket.curly.java, punctuation.separator.period.java, punctuation.bracket.angle.java, punctuation.definition.annotation.java, meta.method.body.java, punctuation.separator.delimiter, punctuation.separator.key-value, punctuation.separator.list.comma.css, punctuation.separator.period.python, punctuation.separator.element.python, punctuation.parenthesis.begin.python, punctuation.parenthesis.end.python, storage.modifier.lifetime.rust, support.constant.property-value, support.type.property-name, token.package, token.variable.parameter.java, variable.c, variable.parameter.function	#bdc3df	—
constant.regexp.xi, emphasis md, keyword, keyword.control, keyword.operator.address.go, keyword.operator.arithmetic.go, keyword.operator.assignment.c, keyword.operator.comparison.c, keyword.operator.c, keyword.operator.increment.c, keyword.operator.decrement.c, keyword.operator.bitwise.shift.c, keyword.operator.assignment.cpp, keyword.operator.comparison.cpp, keyword.operator.cpp, keyword.operator.increment.cpp, keyword.operator.decrement.cpp, keyword.operator.bitwise.shift.cpp, keyword.operator.assignment.compound, keyword.operator.delete, keyword.operator.error-control.php, keyword.operator.expression.delete, keyword.operator.expression.in, keyword.operator.expression.of, keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.expression.typeof, keyword.operator.expression.void, keyword.operator.expression.instanceof, keyword.operator.expression.keyof, keyword.operator.heredoc.php, keyword.operator.nowdoc.php, keyword.operator.instanceof.java, keyword.operator.logical.python, keyword.operator.module, keyword.operator.new, keyword.operator.optional, keyword.operator.regexp.php, keyword.operator.sigil.rust, keyword.operator.sizeof.c, keyword.operator.sizeof.cpp, keyword.operator.ternary, keyword.operator.type.php, markup.italic, punctuation.definition.italic, todo.emphasis, markup.underline.link.markdown, markup.underline.link.image.markdown, meta.selector, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.quasi.element, punctuation.section.embedded, punctuation.section.embedded.begin, punctuation.section.embedded.end, punctuation.separator.c, punctuation.separator.cpp, storage, support.constant.edge, support.type.fx.hlsl, support.type.object.hlsl, support.type.object.rw.hlsl, support.type.sampler.hlsl, support.type.texture.hlsl, text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade, text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade, token.debug-token, token.package.keyword, token.storage, variable.other.generic-type.haskell	#946ff7	—
constant, constant.character.format.placeholder.other.python, constant.numeric, control.elements, keyword.operator.less, entity.other.attribute-name, punctuation.definition.constant	#fa9d86	—
entity.other.attribute-name.class.css	#fa9d86	normal
inline-color-decoration rgb-value, keyword.operator.quantifier.regexp, less rgb-value, markup.bold, todo.bold, punctuation.definition.bold.markdown, storage.type.haskell, support.constant.color.w3c-standard-color-name.css, support.constant.color.w3c-standard-color-name.css, support.constant.color.w3c-standard-color-name.scss, support.constant.core.rust, support.constant.elm, support.constant.ext.php, support.constant.std.php, support.constant.core.php, support.constant.parser-token.php, support.constant.font-name, support.constant.json, support.constant.property-value.scss, support.constant.property-value.css, support.constant.property.math, support.variable.property.process, token.warn-token, variable.parameter.function.language.python, variable.parameter.function.python, wikiword.xi	#fa9d86	—
beginning.punctuation.definition.list.markdown, constant.character.character-class.regexp.xi, constant.character.entity, constant.other.character-class.regexp, entity.name.label.cs, entity.name.section.markdown, entity.name.tag, entity.name.variable.local.cs, keyword.other.unit, markup.deleted.diff, markup.heading, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown, meta.arguments.coffee, meta.definition.variable.name.groovy, meta.definition.variable.name.java, meta.function.c, meta.function.cpp, meta.property.object, meta.scope.prerequisites.makefile, meta.symbol.clojure, punctuation.definition.delayed.unison, punctuation.definition.list.begin.unison, punctuation.definition.list.end.unison, punctuation.definition.ability.begin.unison, punctuation.definition.ability.end.unison, punctuation.operator.assignment.as.unison, punctuation.separator.pipe.unison, punctuation.separator.delimiter.unison, punctuation.definition.hash.unison, punctuation.definition.heading.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.list.markdown, punctuation.definition.metadata.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.section.embedded, variable.interpolation, selector.sass, source.java, source.json meta.structure.dictionary.json > string.quoted.json, source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string, support.type.object.console, support.type.property-name.json, support.type.property-name.json punctuation, support.variable.dom, support.variable.property.dom, support.variable.magic.python, text.bracketed, text.variable, variable, variable.language.rust, variable.language, variable.other.class.php, variable.other.readwrite, meta.object-literal.key, support.variable.property, support.variable.object.process, support.variable.object.node, variable.parameter.function.coffee, variable.parameter.function.js	#ff568e	—
entity.global.clojure, entity.name.class, entity.name.class.identifier.namespace.type, entity.name.function.xi, entity.name.label.cs, entity.name.lifetime.rust, entity.name.namespace, entity.name.package.go, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition, entity.name.type, entity.name.type.module, entity.name.type.namespace, entity.other.inherited-class, import.storage.java, keyword.operator.assignment.go, markup.changed.diff, punctuation.definition.bold, source.makefile, storage.modifier.import.groovy, storage.modifier.import.java, storage.type.java, storage.type.generic.java, storage.type.annotation.java, storage.type.cs, storage.type.object.array.java, storage.type.php, meta.other.type.phpdoc.php, keyword.other.type.php, keyword.other.array.phpdoc.php, support.class, entity.name.type.class, support.constant.math, support.module.node, support.type.object.module, support.module.node, support.other.namespace.use.php, support.other.namespace.use-as.php, support.other.namespace.php, entity.other.alias.php, meta.interface.php, support.type.primitive, support.type.primitive.ts, support.type.builtin.ts, support.type.primitive.tsx, support.type.builtin.tsx, support.type.swift, support.type.vb.asp, support.variable.semantic.hlsl, token.storage.type.java, variable.other.class.js, variable.other.class.ts, variable.other.constant, variable.parameter.function.language.special.self.python	#efff73	—
invalid.illegal.non-null-typehinted.php, token.error-token	#ff568e66	—
constant.other.color.rgb-value.xi, invalid.broken, invalid.deprecated, invalid.illegal, invalid.unimplemented	#ebebf0	—
comment.block.documentation, comment.line.double-slash, entity.other.attribute-name.js, entity.other.attribute-name.jsx, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.ts, entity.other.attribute-name.tsx, entity.other.inherited-class, keyword.control.flow.python, keyword.control.import.python, keyword.declaration, markup.italic.markdown, markup.quote, meta.block keyword.operator.new, meta.block meta.function-call variable.other.object, meta.function.variable.css, meta.var storage.type, punctuation.definition.italic.markdown, punctuation.definition.string.css, storage.type.annotation, string.quoted.double.css, support.variable, variable.argument.css, variable.language, variable.other.object.property, variable.parameter	—	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}!`;
}