GrayJack Themes

Name: GrayJack Themes
Author: GrayJack

Publisher: GrayJackThemes in package: 27

My personal take on classic/famous themes

GitHub

Color themes

VS Code preview

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

GrayJack Themes — Legacy GrayJack's Tokyo Night

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#1d202f
activityBar.border#1a1b26
activityBar.dropBackground#221f22bf
activityBar.dropBorder#221f22bf
activityBar.foreground#9aa5ce
activityBar.inactiveForeground#ff9e6490
activityBarBadge.background#bb9af7
activityBarBadge.foreground#181A1F
badge.background#bb9af7
badge.foreground#181A1F
breadcrumb.activeSelectionForeground#c0caf5
breadcrumb.background#1f2335
breadcrumb.border#1f2335
breadcrumb.focusForeground#a9b1d6
breadcrumb.foreground#7982a9
button.background#7aa2f7
button.foreground#D7DAE0
button.hoverBackground#7dcfff
button.secondaryBackground#1f2335
button.secondaryForeground#7982a9
button.secondaryHoverBackground#24283b
debugConsole.warningForeground#b4f9f8
debugIcon.breakpointCurrentStackframeForeground#b4f9f8
debugIcon.breakpointDisabledForeground#a9b1d6
debugIcon.breakpointForeground#f7768e
debugIcon.breakpointStackframeForeground#c0caf5
debugIcon.breakpointUnverifiedForeground#ff9e64
debugIcon.continueForeground#c0caf5
debugIcon.disconnectForeground#c0caf5
debugIcon.pauseForeground#c0caf5
debugIcon.restartForeground#9ece6a
debugIcon.startForeground#9ece6a
debugIcon.stepBackForeground#c0caf5
debugIcon.stepIntoForeground#c0caf5
debugIcon.stepOutForeground#c0caf5
debugIcon.stepOverForeground#c0caf5
debugIcon.stopForeground#f7768e
debugToolBar.background#1f2335
descriptionForeground#7982a9
diffEditor.insertedLineBackground#9ece6a19
diffEditor.insertedTextBackground#9ece6a15
diffEditor.insertedTextBorder#9ece6a19
diffEditor.removedLineBackground#f7768e19
diffEditor.removedTextBackground#f7768e15
diffEditor.removedTextBorder#f7768e19
dropdown.background#262b41
dropdown.border#181A1F
dropdown.foreground#c0caf5
dropdown.listBackground#1f2335
editor.background#24283b
editor.findMatchBackground#c0caf526
editor.findMatchBorder#9ece6a
editor.findMatchHighlightBackground#c0caf526
editor.findMatchHighlightBorder#00000000
editor.findRangeHighlightBackground#c0caf526
editor.findRangeHighlightBorder#00000000
editor.foreground#c0caf5
editor.hoverHighlightBackground#6f7bb630
editor.inactiveSelectionBackground#6f7bb630
editor.lineHighlightBackground#6f7bb630
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#1f2335
editor.rangeHighlightBorder#1f2335
editor.selectionBackground#6f7bb630
editor.selectionHighlightBackground#6f7bb630
editor.selectionHighlightBorder#00000000
editor.wordHighlightBackground#c0caf526
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#c0caf526
editor.wordHighlightStrongBorder#00000000
editorBracketHighlight.foreground1#f88ea2
editorBracketHighlight.foreground2#ffae7e
editorBracketHighlight.foreground3#e4ba7d
editorBracketHighlight.foreground4#aad47d
editorBracketHighlight.foreground5#97d8ff
editorBracketHighlight.foreground6#cbb2f9
editorBracketHighlight.unexpectedBracket.foreground#f7768e
editorBracketMatch.background#24283b
editorBracketMatch.border#545c7e
editorCodeLens.foreground#545c7e
editorCursor.background#24283b
editorCursor.foreground#7dcfff
editorError.border#00000000
editorError.foreground#f7768e
editorGroup.background#1f2335
editorGroup.border#181A1F
editorGroup.dropBackground#181A1Fbf
editorGroup.emptyBackground#1f2335
editorGroup.focusedEmptyBorder#181A1F
editorGroupHeader.border#1f2335
editorGroupHeader.noTabsBackground#1f2335
editorGroupHeader.tabsBackground#24283b
editorGroupHeader.tabsBorder#1f2335
editorGutter.addedBackground#9ece6a
editorGutter.background#24283b
editorGutter.deletedBackground#f7768e
editorGutter.modifiedBackground#7dcfff
editorHint.border#24283b
editorHint.foreground#bb9af7
editorHoverWidget.background#1f2335
editorHoverWidget.border#181A1F
editorIndentGuide.activeBackground#626772
editorIndentGuide.background#c0caf526
editorInfo.border#24283b
editorInfo.foreground#7dcfff
editorInlayHint.background#2b3047C0
editorInlayHint.foreground#565f89C0
editorInlayHint.parameterBackground#2b3047C0
editorInlayHint.parameterForeground#e0af68C0
editorInlayHint.typeBackground#2b3047C0
editorInlayHint.typeForeground#73dacaC0
editorLightBulb.foreground#e0af68
editorLightBulbAutoFix.foreground#9ece6a
editorLineNumber.activeForeground#ffbe97
editorLineNumber.foreground#737aa2
editorLink.activeForeground#73daca
editorMarkerNavigation.background#1f2335
editorMarkerNavigationError.background#f7768e
editorMarkerNavigationInfo.background#7dcfff
editorMarkerNavigationWarning.background#e0af68
editorOverviewRuler.addedForeground#9ece6a
editorOverviewRuler.border#24283b
editorOverviewRuler.commonContentForeground#1f2335
editorOverviewRuler.currentContentForeground#1f2335
editorOverviewRuler.deletedForeground#f7768e
editorOverviewRuler.errorForeground#f7768e
editorOverviewRuler.findMatchForeground#c0caf526
editorOverviewRuler.incomingContentForeground#1f2335
editorOverviewRuler.infoForeground#7dcfff
editorOverviewRuler.modifiedForeground#ff9e64
editorOverviewRuler.rangeHighlightForeground#c0caf526
editorOverviewRuler.selectionHighlightForeground#c0caf526
editorOverviewRuler.warningForeground#b4f9f8
editorOverviewRuler.wordHighlightForeground#c0caf526
editorOverviewRuler.wordHighlightStrongForeground#c0caf526
editorPane.background#24283b
editorRuler.foreground#c0caf526
editorStickyScroll.border#1a1b26
editorStickyScroll.shadow#1a1b26
editorStickyScrollHover.background#40475d
editorSuggestWidget.background#1f2335
editorSuggestWidget.border#181A1F
editorSuggestWidget.foreground#a9b1d6
editorSuggestWidget.highlightForeground#c0caf5
editorSuggestWidget.selectedBackground#292e42
editorWarning.border#00000000
editorWarning.foreground#e0af68
editorWhitespace.foreground#c0caf526
editorWidget.background#1f2335
editorWidget.border#3A3F4B
errorForeground#f7768e
extensionButton.prominentBackground#e0af68
extensionButton.prominentForeground#1f2335
extensionButton.prominentHoverBackground#7dcfff
focusBorder#ff9e64
foreground#c0caf5
gitDecoration.addedResourceForeground#9ece6a
gitDecoration.conflictingResourceForeground#ff9e64
gitDecoration.deletedResourceForeground#f7768e
gitDecoration.ignoredResourceForeground#c0caf576
gitDecoration.modifiedResourceForeground#7dcfff
gitDecoration.submoduleResourceForeground#bb9af7
gitDecoration.untrackedResourceForeground#73daca
input.background#1f2335
input.border#181A1F
input.foreground#c0caf5
input.placeholderForeground#545c7e
inputOption.activeBackground#c0caf526
inputOption.activeBorder#c0caf526
inputOption.activeForeground#c0caf5
inputValidation.errorBackground#1f2335
inputValidation.errorBorder#f7768e
inputValidation.errorForeground#f7768e
inputValidation.infoBackground#1f2335
inputValidation.infoBorder#7dcfff
inputValidation.infoForeground#7dcfff
inputValidation.warningBackground#1f2335
inputValidation.warningBorder#e0af68
inputValidation.warningForeground#e0af68
list.activeSelectionBackground#292e42
list.activeSelectionForeground#D7DAE0
list.dropBackground#221f22bf
list.errorForeground#f7768e
list.focusBackground#292e42
list.focusForeground#c0caf5
list.highlightForeground#D7DAE0
list.hoverBackground#292e4266
list.hoverForeground#c0caf5
list.inactiveFocusBackground#24283b
list.inactiveSelectionBackground#292e42
list.inactiveSelectionForeground#D7DAE0
list.invalidItemForeground#f7768e
list.warningForeground#e0af68
listFilterWidget.background#24283b
listFilterWidget.noMatchesOutline#f7768e
listFilterWidget.outline#24283b
menu.background#221f22
menu.foreground#c0caf5
menu.selectionBackground#2f3549
merge.border#24283b
merge.commonContentBackground#c0caf519
merge.commonHeaderBackground#c0caf526
merge.currentContentBackground#f7768e19
merge.currentHeaderBackground#f7768e26
merge.incomingContentBackground#9ece6a19
merge.incomingHeaderBackground#9ece6a26
minimap.background#1f2335
minimap.errorHighlight#f7768e
minimap.selectionHighlight#1f2335
minimap.warningHighlight#e0af68
minimapGutter.addedBackground#9ece6a
minimapGutter.deletedBackground#f7768e
minimapGutter.modifiedBackground#7dcfff
minimapSlider.hoverBackground#c0caf560
notificationCenter.border#1f2335
notificationCenterHeader.background#1f2335
notificationCenterHeader.foreground#7982a9
notificationLink.foreground#7dcfff
notifications.background#1f2335
notifications.border#1f2335
notifications.foreground#a9b1d6
notificationsErrorIcon.foreground#f7768e
notificationsInfoIcon.foreground#7dcfff
notificationsWarningIcon.foreground#b4f9f8
notificationToast.border#1f2335
panel.background#1f2335
panel.border#24283b
panel.dropBorder#221f22bf
panelStickyScroll.border#1a1b26
panelStickyScroll.shadow#1a1b26
panelTitle.activeBorder#ff9e64
panelTitle.activeForeground#ff9e64
panelTitle.inactiveForeground#7982a9
peekView.border#ff9e64
peekViewEditor.background#1b1e2e
peekViewEditor.matchHighlightBackground#c0caf526
peekViewEditor.matchHighlightBorder#c0caf526
peekViewEditorGutter.background#1b1e2e
peekViewResult.background#1f2335
peekViewResult.fileForeground#7982a9
peekViewResult.lineForeground#7982a9
peekViewResult.matchHighlightBackground#c0caf526
peekViewResult.selectionBackground#292e42
peekViewResult.selectionForeground#c0caf5
peekViewTitle.background#1b1e2e
peekViewTitleDescription.foreground#7982a9
peekViewTitleLabel.foreground#c0caf5
pickerGroup.border#7dcfff
pickerGroup.foreground#c0caf526
problemsErrorIcon.foreground#f7768e
problemsInfoIcon.foreground#7dcfff
problemsWarningIcon.foreground#e0af68
progressBar.background#1f2335
rust_analyzer.inlayHints.background#2b3047C0
rust_analyzer.inlayHints.background.chainingHints#2b3047C0
rust_analyzer.inlayHints.background.parameterHints#2b3047C0
rust_analyzer.inlayHints.background.typeHints#2b3047C0
rust_analyzer.inlayHints.foreground#565f89C0
rust_analyzer.inlayHints.foreground.chainingHints#73dacaC0
rust_analyzer.inlayHints.foreground.parameterHints#e0af68C0
rust_analyzer.inlayHints.foreground.typeHints#73dacaC0
scrollbar.shadow#24283b
scrollbarSlider.activeBackground#747D9180
scrollbarSlider.background#4E566680
scrollbarSlider.hoverBackground#5A637580
selection.background#6f7bb630
settings.checkboxBackground#1f2335
settings.checkboxBorder#1f2335
settings.checkboxForeground#c0caf5
settings.dropdownBackground#1f2335
settings.dropdownBorder#1f2335
settings.dropdownForeground#c0caf5
settings.dropdownListBorder#7982a9
settings.headerForeground#bb9af7
settings.modifiedItemIndicator#bb9af7
settings.numberInputBackground#1f2335
settings.numberInputBorder#1f2335
settings.numberInputForeground#c0caf5
settings.textInputBackground#1f2335
settings.textInputBorder#1f2335
settings.textInputForeground#c0caf5
sideBar.background#262b41
sideBar.border#1f2335
sideBar.dropBackground#221f22bf
sideBar.foreground#7982a9
sideBarSectionHeader.background#323855
sideBarSectionHeader.border#221f22
sideBarSectionHeader.foreground#b4f9f8
sideBarStickyScroll.border#1a1b26
sideBarStickyScroll.shadow#1a1b26
sideBarTitle.foreground#7dcfff
statusBar.background#ff9e64
statusBar.border#181A1F
statusBar.debuggingBackground#e0af68
statusBar.debuggingBorder#221f22
statusBar.debuggingForeground#24283b
statusBar.foreground#24283b
statusBar.noFolderBackground#7aa2f7
statusBar.noFolderBorder#181A1F
statusBar.noFolderForeground#24283b
statusBarItem.activeBackground#24283b
statusBarItem.hoverBackground#fcfcfa0c
statusBarItem.prominentBackground#1f2335
statusBarItem.prominentHoverBackground#1f2335
statusBarItem.remoteBackground#bb9af7
statusBarItem.remoteForeground#221f22
symbolIcon.arrayForeground#bb9af7
symbolIcon.booleanForeground#ff9e64
symbolIcon.classForeground#73daca
symbolIcon.colorForeground#ff9e64
symbolIcon.constantForeground#ff9e64
symbolIcon.constructorForeground#7aa2f7
symbolIcon.enumeratorForeground#73daca
symbolIcon.enumeratorMemberForeground#2ac3de
symbolIcon.eventForeground#bb9af7
symbolIcon.fieldForeground#7dcfff
symbolIcon.fileForeground#a9b1d6
symbolIcon.folderForeground#a9b1d6
symbolIcon.functionForeground#7aa2f7
symbolIcon.interfaceForeground#73daca
symbolIcon.keyForeground#bb9af7
symbolIcon.keywordForeground#bb9af7
symbolIcon.methodForeground#7aa2f7
symbolIcon.moduleForeground#868DAB
symbolIcon.namespaceForeground#868DAB
symbolIcon.nullForeground#ff9e64
symbolIcon.numberForeground#ff9e64
symbolIcon.objectForeground#73daca
symbolIcon.operatorForeground#C678DD
symbolIcon.packageForeground#f7768e
symbolIcon.propertyForeground#2ac3de
symbolIcon.referenceForeground#bb9af7
symbolIcon.snippetForeground#7dcfff
symbolIcon.stringForeground#9ece6a
symbolIcon.structForeground#73daca
symbolIcon.textForeground#9ece6a
symbolIcon.typeParameterForeground#73daca
symbolIcon.unitForeground#ff9e64
symbolIcon.variableForeground#c0caf5
tab.activeBackground#1f2335
tab.activeBorder#1f2335
tab.activeBorderTop#ff9e64
tab.activeForeground#D7DAE0
tab.activeModifiedBorder#c0caf526
tab.border#24283b
tab.hoverBackground#40475d
tab.hoverBorder#bb9af7
tab.hoverForeground#bb9af7
tab.inactiveBackground#24283b
tab.inactiveForeground#7982a9
tab.inactiveModifiedBorder#c0caf526
tab.unfocusedActiveBackground#1f2335
tab.unfocusedActiveBorderTop#73daca90
tab.unfocusedActiveForeground#73daca90
tab.unfocusedActiveModifiedBorder#1f2335
tab.unfocusedHoverBackground#24283b
tab.unfocusedHoverBorder#24283b
tab.unfocusedInactiveModifiedBorder#1f2335
terminal.ansiBlack#1f2335
terminal.ansiBlue#7dcfff
terminal.ansiBrightBlack#545c7e
terminal.ansiBrightBlue#7dcfff
terminal.ansiBrightCyan#2ac3de
terminal.ansiBrightGreen#9ece6a
terminal.ansiBrightMagenta#9ece6a
terminal.ansiBrightRed#f7768e
terminal.ansiBrightWhite#c0caf5
terminal.ansiBrightYellow#ff9e64
terminal.ansiCyan#2ac3de
terminal.ansiGreen#9ece6a
terminal.ansiMagenta#9ece6a
terminal.ansiRed#f7768e
terminal.ansiWhite#c0caf5
terminal.ansiYellow#e0af68
terminal.background#1f2335
terminal.foreground#c0caf5
textBlockQuote.background#1f2335
textBlockQuote.border#1f2335
textCodeBlock.background#1f2335
textLink.activeForeground#c0caf5
textLink.foreground#7dcfff
textPreformat.foreground#c0caf5
textSeparator.foreground#545c7e
titleBar.activeBackground#221f22
titleBar.activeForeground#7982a9
titleBar.border#1a1b26
titleBar.inactiveBackground#221f22
titleBar.inactiveForeground#c0caf526
welcomePage.buttonBackground#1f2335
welcomePage.buttonHoverBackground#c0caf526
widget.shadow#1a1b26

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#565f89	italic
punctuation, punctuation.separator.period.python, keyword.operator.sigil.rust, keyword.operator.key-value.rust, keyword.operator.access.dot.rust, koka.type	#868DAB	—
variable, meta.function-call.arguments, string constant.other.placeholder, meta.function-call.java, storage.modifier.import.java, variable.other.object, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, variable.other.readwrite, support.variable.swift, meta.function-call.swift	#c0caf5	—
	#c0caf5	underline
constant.other.color	#c0caf5	—
invalid, invalid.illegal	#f7768e	—
keyword, storage.type, storage.modifier, punctuation.definition.directive.c, punctuation.definition.directive.cpp, storage.type.impl.rust, keyword.type.go, storage.class.d, variable.language.super.rust, markup.deleted.git_gutter, entity.name.tag.css, punctuation.definition.keyword.css, entity.name.tag.wildcard.css, storage.struct.racket	#bb9af7	—
storage.control, keyword.control, constant.other.color, meta.tag, punctuation.separator.inheritance.php, punctuation.separator.key-value.html, punctuation.section.embedded, punctuation.symbol.match-branch, punctuation.symbol.return-type, keyword.other.template, keyword.other.substitution, punctuation.separator.pointer-access.c, punctuation.definition.function.pointer.dereference.cpp, punctuation.separator.namespace.access.cpp, punctuation.separator.scope-resolution.function.definition.cpp, punctuation.separator.scope-resolution.cpp, punctuation.separator.colon.python, punctuation.separator.annotation.result.python, koka.op	#bb9af7	—
entity.name.tag, meta.tag.sgml, variable.key.toml	#bb9af7	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, keyword.other.common.function, entity.name.command	#7aa2f7	—
entity.name.function.core.janet, entity.name.function.call.janet	#73daca	—
support.function.macro.rust, support.function.macro.builtin.rust, support.function.macro.core.rust, entity.name.type.macro.rust, entity.name.function.macro.rust, entity.name.function.macro.rules.rust, support.function.macro.julia, support.function.builtin.zig	#2ac3de	—
support.enum.core.rust, entity.name.type.option.rust, entity.name.type.result.rust, constant.other.haskell, variable.other.enummember.cpp, variable.other.enummember.zig, variable.other.enummember.swift	#2ac3de	underline
variable.constant.error.zig	#2ac3de	underline italic
storage.modifier.lifetime.rust, punctuation.definition.lifetime.rust, entity.name.type.lifetime.rust, variable.other.generic-type.haskell, punctuation.definition.template-expression, constant.other.placeholder.c, punctuation.definition.evaluation, variable.language.special.shell, routine.arm, variable.name.labels.arm64	#7dcfff	italic
keyword.operator.misc.question-mark.rust, keyword.operator.question.rust, keyword.operator.misc.special.rust, keyword.operator.macro.dollar.rust, variable.other.metavariable.name.rust, punctuation.section.embedded.meta.tag.format.rust, keyword.control.shortfn.janet, storage.control.shortfn.janet, entity.name.package.go	#7dcfff	—
punctuation.definition.interpolation.rust, constant.character.format.placeholder.other.python, punctuation.section.embedded.begin.swift, punctuation.section.embedded.end.swift	#7dcfff	bold
entity.name.type.module.ts, koka.moduleid	#868DAB	—
meta.block variable.other	#f07178	—
support.other.variable, string.other.link	#f07178	—
constant.literal, constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.other.constant, constant.other.boolean, constant.other.caps.python, keyword.constant.bool.zig, keyword.constant.default.zig	#ff9e64	—
string, punctuation.definition.string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, punctuation.definition.char.rust	#9ece6a	—
keyword.other.unsafe	#f7768e	—
meta.attributes, entity.name.function.attribute, meta.preprocessor.pragma.nim, punctuation.pragma.start.nim, punctuation.pragma.end.nim, meta.attribute.rust, meta.attribute.rust keyword.operator.namespace.rust, punctuation.brackets.attribute.rust, punctuation.definition.attribute.rust, entity.name.function.preprocessor.nim, constant.other.linkage.d, variable.key.array.table.toml, support.function.attribute.fsharp, support.pragma.block.agda, punctuation.definition.pragma.agda, storage.modifier.attribute.swift	#b4f9f8	—
meta.attribute.rust entity.name.type.rust	#b4f9f8	italic
variable.other.property, entity.name.variable.field, variable.other.member, meta.member, variable.other.object.property, variable.object.property, entity.name.variable.property	#7dcfff	—
variable.parameter, keyword.other.self.rust, meta.parens.block.c, variable.css, variable.language.closure-parameter.swift, koka.id.param	#e0af68	italic
constant.keyword.janet	#e0af68	—
keyword.other.racket	#e0af68	italic
support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name.table.toml, variable.key.table.toml, storage.type.haskell, storage.type.java, storage.type.primitive.java, storage.type.object.array.java, storage.type.c, storage.type.built-in.c, meta.function.definition.parameters.c, storage.type.built-in.cpp, storage.type.built-in.primitive.cpp, entity.name.class.kotlin, storage.type.go, storage.type.boolean.go, storage.type.byte.go, storage.type.error.go, storage.type.numeric.go, storage.type.rune.go, storage.type.string.go, storage.type.uintptr.go, storage.type.concrete.nim, storage.type.basic-type.d, storage.type.d, support.type.python, basicTypes.nim, meta.class.stanza.dune, storage.type.cs, entity.name.struct.racket, koka.type.typecon	#73daca	—
support.type, entity.name.type, keyword.type, storage.type.built-in.primitive.c, storage.type.string.python, variable.other.metavariable.specifier.rust, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.class.css	#73daca	—
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	#2ac3de	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#2ac3de	—
variable.language	#9ece6a	italic
entity.name.method.js	#7aa2f7	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#7aa2f7	—
entity.other.attribute-name	#b4f9f8	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name, entity.other.attribute-name.html	#73daca	—
entity.other.attribute-name.class	#ff9e64	italic
source.sass keyword.control	#7aa2f7	—
markup.inserted	#9ece6a	—
markup.deleted	#e0af68	—
markup.changed	#bb9af7	—
string.regexp	#9ece6a	italic
constant.character.escape	#ff9e64	italic
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, punctuation.definition.decorator.python, meta.function.decorator.python, entity.name.function.decorator.python, punctuation.definition.annotation.java, storage.type.annotation.java, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#9ece6a	italic
source.js constant.other.object.key.js string.unquoted.label.js	#e0af68	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#ff9e64	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#9ece6a	—
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	#bb9af7	—
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	#7aa2f7	—
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	#e0af68	—
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	#73daca	—
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	#b4f9f8	—
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	#7aa2f7	—
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	#f7768e	—
text.html.markdown, punctuation.definition.list_item.markdown	#c0caf5	—
text.html.markdown markup.inline.raw.markdown	#C792EA	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#65737E	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#e0af68	bold
markup.underline.link	#73daca	—
markup.italic	#ff9e64	italic
punctuation.definition.bold.markdown, markup.bold, markup.bold string	#ff9e64	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#ff9e64	bolditalic
markup.underline	#ff9e64	underline
entity.name.section.markdown	#e0af68	—
markup.quote punctuation.definition.blockquote.markdown	#c0caf5	—
markup.quote	—	italic
string.other.link.title.markdown	#7aa2f7	—
string.other.link.description.title.markdown	#7aa2f7	—
constant.other.reference.link.markdown	#bb9af7	—
markup.raw.block	#bb9af7	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#c0caf5	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#c0caf5	—

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