Fantastic (Ayu, Darcula, Gruvbox, Material, Monokai, Slime, Oceanic, One)

Name: Fantastic (Ayu, Darcula, Gruvbox, Material, Monokai, Slime, Oceanic, One)
Author: dobbbri

Publisher: dobbbriThemes in package: 16

Each theme has a modified version to use with the Operator Mono font/Italic

GitHub

Color themes

VS Code preview

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

Fantastic (Ayu, Darcula, Gruvbox, Material, Monokai, Slime, Oceanic, One) — ƒ - AYU

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.background#0b1015
activityBar.foreground#74819B
activityBarBadge.background#ffffff
activityBarBadge.foreground#000000
button.hoverBackground#18222D
debugToolBar.background#0b1015
dropdown.background#0b1015
dropdown.border#18222D
editor.background#0b1015
editor.findMatchBackground#18222D
editor.foreground#c7d0d9
editor.lineHighlightBackground#18222D
editor.lineHighlightBorder#18222D
editor.selectionBackground#18222D
editorActiveLineNumber.foreground#74819B
editorBracketMatch.border#74819B
editorCursor.foreground#ffffff
editorGroup.background#0b1015
editorGroup.border#0b1015
editorGroupHeader.noTabsBackground#0b1015
editorGroupHeader.tabsBackground#0b1015
editorGutter.addedBackground#98c378
editorGutter.deletedBackground#EF596F
editorGutter.modifiedBackground#e5c07b
editorHoverWidget.background#0b1015
editorIndentGuide.activeBackground#4B5567
editorIndentGuide.background#18222D
editorLineNumber.foreground#3A3E46
editorOverviewRuler.border#0b1015
editorRuler.foreground#18222D
editorSuggestWidget.background#0b1015
editorSuggestWidget.selectedBackground#18222D
editorWhitespace.foreground#18222D
editorWidget.background#0b1015
focusBorder#74819B
foreground#74819B
gitDecoration.conflictingResourceForeground#d55fde
gitDecoration.deletedResourceForeground#EF596F
gitDecoration.ignoredResourceForeground#00B7C9
gitDecoration.modifiedResourceForeground#f7f308
gitDecoration.untrackedResourceForeground#11eb73
input.background#0b1015
input.border#18222D
list.activeSelectionBackground#0b1015
list.activeSelectionForeg round#ffffff
list.focusBackground#18222D
list.focusForeground#ffffff
list.highlightForeground#ffffff
list.hoverBackground#18222D
list.hoverForeground#ffffff
list.inactiveSelectionBackground#0b1015
list.inactiveSelectionForeground#ffffff
notificationCenterHeader.background#18222D
notificationCenterHeader.foreground#eeeeee
notifications.background#18222D
notifications.border#18222D
notifications.foreground#eeeeee
notificationToast.border#18222D
panel.background#0b1015
panel.border#18222D
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#74819B
peekView.border#18222D
peekViewEditor.background#18222D
peekViewResult.background#18222D
peekViewResult.selectionBackground#18222D
peekViewTitle.background#18222D
peekViewTitleLabel.foreground#ffffff
scrollbar.shadow#00000026
scrollbarSlider.background#18222D
scrollbarSlider.hoverBackground#22303Eff
sideBar.background#0b1015
sideBarSectionHeader.background#0b1015
sideBarSectionHeader.foreground#FFFFFF
statusBar.background#0b1015
statusBar.debuggingBackground#0b1015
statusBar.foreground#74819B
tab.activeBackground#0b1015
tab.activeBorder#18222D
tab.activeForeground#ffffff
tab.border#0b1015
tab.hoverBackground#18222D
tab.inactiveBackground#0b1015
tab.inactiveForeground#74819B
tab.unfocusedActiveBorder#0b1015
titleBar.activeBackground#0b1015
titleBar.inactiveForeground#0b1015
widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#F4F7FAff	—
comment, punctuation.definition.comment	#5C6773	—
variable, variable.other.object.js.jsx, support.variable.property.dom	#D27CED	—
variable.other.property.js.jsx, support.variable.property.dom.js.jsx	#95e6cb	—
keyword, storage.type, storage.modifier	#FD971F	—
constant.other.color, meta.tag, punctuation.separator.inheritance.php, punctuation.section.embedded, punctuation.definition.block.js, keyword.other.substitution,	#00B7C9	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#00B7C9	—
meta.tag.jsx, meta.jsx.children.js.jsx	#F4F7FA	—
entity.name.function, keyword.other.special-method, meta.block-level, support.function.console.js, support.function.dom.js, support.function.js.jsx	#FDC114	—
support.other.variable, string.other.link, support.variable.dom	#FC6664	—
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit	#D27CED	—
string, keyword.other.template, 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	#9ED54E	normal
punctuation.definition.string	#F4F7FA	—
entity.name.class, entity.name.type.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter	#00B7C9	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#00B7C9	—
variable.language	#00B7C9	italic
invalid	#FF3333	—
invalid.deprecated	#FFFFFF	—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#F4F7FA	—
entity.other.attribute-name, meta.object-literal.key.js.jsx	#FD971F	italic
markup.inserted	#9ED54E	—
markup.deleted	#00B7C9	—
markup.changed	#FD971F	—
string.regexp, constant.character.escape	#95E6CB	—
url, link, uri	—	underline
constant.numeric.line-number.find-in-files - match	#5C6773	—
entity.name.filename.find-in-files	#9ED54E	—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#FFC44C	italic
source.js constant.other.object.key.js string.unquoted.label.js	#00B7C9	italic
entity.name.method.js	#FFC44C	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#FFC44C	—
markup.italic	#FC6664	italic
markup.bold	#FC6664	bold
markup.underline	#D27CED	underline
markup.strike	#FFC44C	strike
markup.quote	#00B7C9	italic
markup.raw.block	#FD971F	—
markup.table	#00B7C9	—
text.html.markdown, punctuation.definition.list_item.markdown	#F4F7FA	—
text.html.markdown markup.raw.inline	#00B7C9	—
text.html.markdown meta.dummy.line-break	#5C6773	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#9ED54E	—
markup.quote, punctuation.definition.blockquote.markdown	#00B7C9	italic
string.other.link.title.markdown	#FFC44C	underline
markup.raw.block.fenced.markdown	#F4F7FA	—
punctuation.definition.fenced.markdown, variable.language.fenced.markdown	#5C6773	—
variable.language.fenced.markdown	#5C6773
meta.separator	#5C6773	bold
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#00B7C9	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#00B7C9	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#00B7C9	—
source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#00B7C9	—
source.json meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#00B7C9	—
source.json meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#00B7C9	—
source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#00B7C9	—
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta.structure.dictionary.json punctuation.definition.string - meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#00B7C9	—
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#00B7C9	—
acejump.label.blue	#FFFFFF	—
acejump.label.green	#FFFFFF	—
acejump.label.orange	#FFFFFF	—
acejump.label.purple	#FFFFFF	—
sublimelinter.mark.warning	#00B7C9	—
sublimelinter.gutter-mark	#FFFFFF	—
sublimelinter.mark.error	#FF3333	—
markup.ignored.git_gutter	#5C6773	—
markup.untracked.git_gutter	#5C6773	—
gutter_color	#FFFFFF	—
token.info-token	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#f44747	—
token.debug-token	#D27CED	—
—	#F4F7FAff	—
comment, punctuation.definition.comment	#5C6773	—
variable, variable.other.object.js.jsx, support.variable.property.dom	#D27CED	—
variable.other.property.js.jsx, support.variable.property.dom.js.jsx	#95e6cb	—
keyword, storage.type, storage.modifier	#FD971F	—
constant.other.color, meta.tag, punctuation.separator.inheritance.php, punctuation.section.embedded, punctuation.definition.block.js, keyword.other.substitution,	#00B7C9	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#00B7C9	—
meta.tag.jsx, meta.jsx.children.js.jsx	#F4F7FA	—
entity.name.function, keyword.other.special-method, meta.block-level, support.function.console.js, support.function.dom.js, support.function.js.jsx	#FDC114	—
support.other.variable, string.other.link, support.variable.dom	#FC6664	—
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit	#D27CED	—
string, keyword.other.template, 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	#9ED54E	normal
punctuation.definition.string	#F4F7FA	—
entity.name.class, entity.name.type.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter	#00B7C9	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#00B7C9	—
variable.language	#00B7C9	italic
invalid	#FF3333	—
invalid.deprecated	#FFFFFF	—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#F4F7FA	—
entity.other.attribute-name, meta.object-literal.key.js.jsx	#FD971F	italic
markup.inserted	#9ED54E	—
markup.deleted	#00B7C9	—
markup.changed	#FD971F	—
string.regexp, constant.character.escape	#95E6CB	—
url, link, uri	—	underline
constant.numeric.line-number.find-in-files - match	#5C6773	—
entity.name.filename.find-in-files	#9ED54E	—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#FFC44C	italic
source.js constant.other.object.key.js string.unquoted.label.js	#00B7C9	italic
entity.name.method.js	#FFC44C	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#FFC44C	—
markup.italic	#FC6664	italic
markup.bold	#FC6664	bold
markup.underline	#D27CED	underline
markup.strike	#FFC44C	strike
markup.quote	#00B7C9	italic
markup.raw.block	#FD971F	—
markup.table	#00B7C9	—
text.html.markdown, punctuation.definition.list_item.markdown	#F4F7FA	—
text.html.markdown markup.raw.inline	#00B7C9	—
text.html.markdown meta.dummy.line-break	#5C6773	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#9ED54E	—
markup.quote, punctuation.definition.blockquote.markdown	#00B7C9	italic
string.other.link.title.markdown	#FFC44C	underline
markup.raw.block.fenced.markdown	#F4F7FA	—
punctuation.definition.fenced.markdown, variable.language.fenced.markdown	#5C6773	—
variable.language.fenced.markdown	#5C6773
meta.separator	#5C6773	bold
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#00B7C9	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#00B7C9	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#00B7C9	—
source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#00B7C9	—
source.json meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#00B7C9	—
source.json meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#00B7C9	—
source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#00B7C9	—
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta.structure.dictionary.json punctuation.definition.string - meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#00B7C9	—
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#00B7C9	—
acejump.label.blue	#FFFFFF	—
acejump.label.green	#FFFFFF	—
acejump.label.orange	#FFFFFF	—
acejump.label.purple	#FFFFFF	—
sublimelinter.mark.warning	#00B7C9	—
sublimelinter.gutter-mark	#FFFFFF	—
sublimelinter.mark.error	#FF3333	—
markup.ignored.git_gutter	#5C6773	—
markup.untracked.git_gutter	#5C6773	—
gutter_color	#FFFFFF	—
token.info-token	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#f44747	—
token.debug-token	#D27CED	—
support.constant.edge	#d55fdeff	—
constant.other.character-class.regexp	#e06c75ff	—
keyword.operator.quantifier.regexp	#d19a66ff	—
punctuation.definition.string.begin,punctuation.definition.string.end	#98c378	—
variable.parameter.function	#A6B2C0	—
comment, punctuation.definition.comment	#5C6370	italic
comment markup.link	#5C6370	—
markup.changed.diff	#e0c285	—
meta.diff.header.from-file,punctuation.definition.from-file.diff	#569cd6	—
markup.inserted.diff	#89CA78	—
markup.deleted.diff	#EF596F	—
meta.function.c	#EF596F	—
keyword.control.cpp	#e5c07b	—
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	#AAB1C0	—
punctuation.separator.key-value	#bbbbbb	—
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.super	—	italic
keyword.operator.expression.import	#52ADF2	—
support.constant.math	#e5c07b	—
support.constant.property.math	#d19a66	—
variable.other.constant	#e5c07b	—
storage.type.annotation.java	#e5c07bff	—
source.java	#EF596F	—
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,storage.type.generic.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,meta.method.body.java	#AAB1C0	—
meta.method.java	#52ADF2	—
storage.modifier.import.java,storage.type.java	#e5c07b	—
meta.definition.variable.name.java	#EF596F	—
keyword.operator.logical	#2BBAC5	—
keyword.operator.bitwise	#2BBAC5	—
support.constant.property-value.scss,support.constant.property-value.css	#D8985F	—
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss	#D8985F	—
punctuation.separator.list.comma.css	#b9c0ca	—
support.constant.color.w3c-standard-color-name.css	#D8985F	—
support.type.vendored.property-name.css	#2BBAC5	—
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end	#EF596F	—
support.module.node,support.type.object.module	#e5c07b	—
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node	#EF596F	—
comment.line.double-slash,comment.block.documentation	—	normal
support.constant.json	#D8985F	—
keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.ternary	#D55FDE	—
support.type.object.console	#EF596F	—
support.variable.property.process	#D8985F	—
entity.name.function,support.function.console	#52ADF2	—
keyword.operator	#2BBAC5	—
support.type.object.dom	#2BBAC5	—
support.variable.dom,support.variable.property.dom	#EF596F	—
keyword.operator.arithmetic,keyword.operator.comparison	#2BBAC5	—
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c	#D55FDEff	—
punctuation.separator.delimiter.c	#bbbbbb	—
support.type.posix-reserved.c	#57adb8	—
keyword.operator.sizeof.c	#C178DD	—
variable.parameter.function.language.python	#D8985F	—
support.type.python	#2BBAC5	—
keyword.operator.logical.python	#D55FDE	—
meta.function-call.arguments.python	#E06C60	—
meta.function-call.python	#E06C60	—
variable.parameter.function.python	#D18C4E	—
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python,meta.function-call.arguments.python	#AAB1C0	—
meta.function-call.generic.python	#52ADF2	—
constant.character.format.placeholder.other.python	#98c379	—
none	#A6B2C0	—
keyword.operator	#AAB1C0	—
keyword	#D55FDE	—
variable	#EF596F	—
token.variable.parameter.java	#AAB1C0	—
import.storage.java	#e5c07b	—
token.package.keyword	#D55FDE	—
token.package	#AAB1C0	—
entity.name.function, meta.require, support.function.any-method	#52ADF2	—
entity.name.type.namespace	#e5c07b	—
support.class, entity.name.type.class	#e5c07b	—
entity.name.class.identifier.namespace.type	#e5c07b	—
entity.name.class	#52ADF2	—
entity.name.type	#e5c07b	—
keyword.control	#D55FDE	—
control.elements, keyword.operator.less	#D8985F	—
keyword.other.special-method	#52ADF2	—
storage	#D55FDE	—
token.storage	#D55FDE	—
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	#D55FDE	—
token.storage.type.java	#e5c07b	—
support.function	#2BBAC5	—
support.type.property-name	#AAB1C0	—
support.constant.property-value	#AAB1C0	—
support.constant.font-name	#D8985F	—
meta.tag	#AAB1C0	—
string, entity.other.inherited-class	#89CA78	—
constant.other.symbol	#2BBAC5	—
constant.numeric	#D8985F	—
none	#D8985F	—
none	#D8985F	—
constant	#D8985F	—
punctuation.definition.constant	#D8985F	—
entity.name.tag	#EF596F	—
entity.other.attribute-name	#D8985F	—
entity.other.attribute-name.id	#52ADF2	normal
entity.other.attribute-name.class.css	#D8985F	normal
meta.selector	#D55FDE	—
none	#D2945D	—
markup.heading	#EF596F	bold
markup.heading punctuation.definition.heading, entity.name.section	#52ADF2	—
keyword.other.unit	#D8985F	—
markup.bold,todo.bold	#D8985F	bold
punctuation.definition.bold	#e5c07b	—
markup.italic,punctuation.definition.italic,todo.emphasis	#D55FDE	—
emphasis md	#D55FDE	—
entity.name.section.markdown	#EF596F	—
punctuation.definition.heading.markdown	#EF596F	—
markup.heading.setext	#AAB1C0	—
punctuation.definition.bold.markdown	#D8985F	—
markup.inline.raw.markdown	#89CA78	—
markup.inline.raw.string.markdown	#98c379	—
beginning.punctuation.definition.list.markdown	#EF596F	—
markup.quote.markdown	#5C6370	italic
punctuation.definition.string.begin.markdown,punctuation.definition.string.end.markdown,punctuation.definition.metadata.markdown	#AAB1C0	—
punctuation.definition.metadata.markdown	#D55FDE	—
markup.underline.link.markdown,markup.underline.link.image.markdown	#D55FDE	—
string.other.link.title.markdown,string.other.link.description.markdown	#52ADF2	—
markup.italic.markdown	—	italic
markup.bold.markdown	—	bold
string.regexp	#57B6C2	—
constant.character.escape	#57B6C2	—
punctuation.section.embedded, variable.interpolation	#BE4F44	—
invalid.illegal	#FFFFFF	—
invalid.broken	#FFFFFF	—
invalid.deprecated	#FFFFFF	—
invalid.unimplemented	#FFFFFF	—
source.json meta.structure.dictionary.json > string.quoted.json	#EF596F	—
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string	#EF596F	—
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	#89CA78	—
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json	#2BBAC5	—
support.type.property-name.json	#EF596F	—
support.type.property-name.json punctuation	#EF596F	—
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade	#C679DD	—
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade	#C679DD	—
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php	#e5c07b	—
keyword.operator.error-control.php	#D55FDE	—
keyword.operator.type.php	#D55FDE	—
punctuation.section.array.begin.php	#AAB1C0	—
punctuation.section.array.end.php	#AAB1C0	—
invalid.illegal.non-null-typehinted.php	#ff0000	—
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php	#e5c07b	—
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php	#52ADF2	—
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	#bbbbbb	—
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php	#D8985F	—
entity.name.goto-label.php,support.other.php	#52ADF2	—
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php	#2BBAC5	—
keyword.operator.regexp.php	#D55FDE	—
keyword.operator.comparison.php	#2BBAC5	—
punctuation.definition.variable.php	#EF596F	—
keyword.operator.heredoc.php,keyword.operator.nowdoc.php	#D55FDE	—
meta.function.decorator.python	#52ADF2	—
support.token.decorator.python,meta.function.decorator.identifier.python	#2BBAC5	—
function.parameter	#D8985F	—
function.parameter	#AAB1C0	—
function.brace	#AAB1C0	—
function.parameter.ruby, function.parameter.cs	#AAB1C0	—
rgb-value	#2BBAC5	—
inline-color-decoration rgb-value	#D8985F	—
less rgb-value	#D8985F	—
selector.sass	#EF596F	—
var.this,variable.language.this.js,variable.language.this.ts,variable.language.this.jsx,variable.language.this.tsx	#e5c07b	italic
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx	#e5c07b	—
block.scope.end,block.scope.begin	#AAB1C0	—
storage.type.cs	#e5c07bff	—
entity.name.variable.local.cs	#EF596F	—
token.info-token	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#f44747	—
token.debug-token	#b267e6	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#d55fde	—
meta.template.expression	#aab1c0	—

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