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 Monokai (Solarized)

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#333842
activityBar.border#19181a
activityBar.dropBackground#221f22bf
activityBar.dropBorder#221f22bf
activityBar.foreground#84b3f5
activityBar.inactiveForeground#b3d0f990
activityBarBadge.background#c5ec79
activityBarBadge.foreground#181A1F
badge.background#84b3f5
badge.foreground#181A1F
breadcrumb.activeSelectionForeground#C4C9D2
breadcrumb.background#21252B
breadcrumb.border#21252B
breadcrumb.focusForeground#c1c0c0
breadcrumb.foreground#939293
button.background#4D78CC
button.foreground#D7DAE0
button.hoverBackground#6087CF
button.secondaryBackground#3E4451
button.secondaryForeground#939293
button.secondaryHoverBackground#282C34
debugConsole.warningForeground#ffd866
debugIcon.breakpointCurrentStackframeForeground#ffd866
debugIcon.breakpointDisabledForeground#c1c0c0
debugIcon.breakpointForeground#ff6188
debugIcon.breakpointStackframeForeground#C4C9D2
debugIcon.breakpointUnverifiedForeground#D19A66
debugIcon.continueForeground#C4C9D2
debugIcon.disconnectForeground#C4C9D2
debugIcon.pauseForeground#C4C9D2
debugIcon.restartForeground#c5ec79
debugIcon.startForeground#c5ec79
debugIcon.stepBackForeground#C4C9D2
debugIcon.stepIntoForeground#C4C9D2
debugIcon.stepOutForeground#C4C9D2
debugIcon.stepOverForeground#C4C9D2
debugIcon.stopForeground#ff6188
debugToolBar.background#3E4451
descriptionForeground#939293
diffEditor.insertedLineBackground#B2E64C19
diffEditor.insertedTextBackground#a9dc7615
diffEditor.insertedTextBorder#a9dc7619
diffEditor.removedLineBackground#ff618819
diffEditor.removedTextBackground#ff618815
diffEditor.removedTextBorder#ff618819
dropdown.background#353b45
dropdown.border#181A1F
dropdown.foreground#C4C9D2
dropdown.listBackground#3E4451
editor.background#282C34
editor.findMatchBackground#C4C9D226
editor.findMatchBorder#c5ec79
editor.findMatchHighlightBackground#C4C9D226
editor.findMatchHighlightBorder#00000000
editor.findRangeHighlightBackground#C4C9D226
editor.findRangeHighlightBorder#00000000
editor.foreground#C4C9D2
editor.hoverHighlightBackground#3e4451A0
editor.inactiveSelectionBackground#3e4451A0
editor.lineHighlig htBorder#00000000
editor.lineHighlightBackground#3e4451A0
editor.rangeHighlightBackground#3E4451
editor.rangeHighlightBorder#3E4451
editor.selectionBackground#3e4451A0
editor.selectionHighlightBackground#3e4451A0
editor.selectionHighlightBorder#00000000
editor.wordHighlightBackground#C4C9D226
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#C4C9D226
editor.wordHighlightStrongBorder#00000000
editorBracketHighlight.foreground1#ff7b9b
editorBracketHighlight.foreground2#fca980
editorBracketHighlight.foreground3#ffdf80
editorBracketHighlight.foreground4#b6e18a
editorBracketHighlight.foreground5#8ee2ec
editorBracketHighlight.foreground6#beb4f5
editorBracketHighlight.unexpectedBracket.foreground#ff2e62
editorBracketMatch.background#282C34
editorBracketMatch.border#727072
editorCodeLens.foreground#727072
editorCursor.background#282C34
editorCursor.foreground#84b3f5
editorError.border#00000000
editorError.foreground#ff6188
editorGroup.backfround#21252B
editorGroup.border#181A1F
editorGroup.dropBackground#181A1Fbf
editorGroup.emptyBackground#21252B
editorGroup.focusedEmptyBorder#181A1F
editorGroupHeader.border#21252B
editorGroupHeader.noTabsBackground#21252B
editorGroupHeader.tabsBackground#282C34
editorGroupHeader.tabsBorder#21252B
editorGutter.addedBackground#c5ec79
editorGutter.background#282C34
editorGutter.deletedBackground#ff6188
editorGutter.modifiedBackground#84b3f5
editorHint.border#282C34
editorHint.foreground#ab9df2
editorHoverWidget.background#21252B
editorHoverWidget.border#181A1F
editorIndentGuide.activeBackground#626772
editorIndentGuide.background#C4C9D226
editorInfo.border#00000000
editorInfo.foreground#84b3f5
editorInlayHint.background#31353fC0
editorInlayHint.foreground#717171C0
editorInlayHint.parameterBackground#31353fC0
editorInlayHint.parameterForeground#fc9867C0
editorInlayHint.typeBackground#31353fC0
editorInlayHint.typeForeground#78dce8C0
editorLightBulb.foreground#ffd866
editorLightBulbAutoFix.foreground#c5ec79
editorLineNumber.activeForeground#c4e7a1
editorLineNumber.foreground#737f95
editorLink.activeForeground#78dce8
editorMarkerNavigation.background#3E4451
editorMarkerNavigationError.background#ff6188
editorMarkerNavigationInfo.background#84b3f5
editorMarkerNavigationWarning.background#ffd866
editorOverviewRuler.addedForeground#c5ec79
editorOverviewRuler.border#282C34
editorOverviewRuler.commonContentForeground#3E4451
editorOverviewRuler.currentContentForeground#3E4451
editorOverviewRuler.deletedForeground#ff6188
editorOverviewRuler.errorForeground#ff6188
editorOverviewRuler.findMatchForeground#C4C9D226
editorOverviewRuler.incomingContentForeground#3E4451
editorOverviewRuler.infoForeground#84b3f5
editorOverviewRuler.modifiedForeground#D19A66
editorOverviewRuler.rangeHighlightForeground#C4C9D226
editorOverviewRuler.selectionHighlightForeground#C4C9D226
editorOverviewRuler.warningForeground#ffd866
editorOverviewRuler.wordHighlightForeground#C4C9D226
editorOverviewRuler.wordHighlightStrongForeground#C4C9D226
editorPane.background#282C34
editorRuler.foreground#C4C9D226
editorStickyScroll.border#19181a
editorStickyScroll.shadow#19181a
editorStickyScrollHover.background#3E4451
editorSuggestWidget.background#21252B
editorSuggestWidget.border#181A1F
editorSuggestWidget.foreground#c1c0c0
editorSuggestWidget.highlightForeground#C4C9D2
editorSuggestWidget.selectedBackground#2C313A
editorWarning.border#00000000
editorWarning.foreground#ffd866
editorWhitespace.foreground#C4C9D226
editorWidget.background#21252B
editorWidget.border#3A3F4B
errorForeground#ff94ae
extensionButton.prominentBackground#a9dc76
extensionButton.prominentForeground#21252B
extensionButton.prominentHoverBackground#c3e69f
focusBorder#84b3f5
foreground#C4C9D2
gitDecoration.addedResourceForeground#c5ec79
gitDecoration.conflictingResourceForeground#D19A66
gitDecoration.deletedResourceForeground#ff6188
gitDecoration.ignoredResourceForeground#C4C9D276
gitDecoration.modifiedResourceForeground#84b3f5
gitDecoration.submoduleResourceForeground#78dce8
gitDecoration.untrackedResourceForeground#be5046
input.background#313640
input.border#181A1F
input.foreground#C4C9D2
input.placeholderForeground#727072
inputOption.activeBackground#C4C9D226
inputOption.activeBorder#C4C9D226
inputOption.activeForeground#C4C9D2
inputValidation.errorBackground#313640
inputValidation.errorBorder#ff6188
inputValidation.errorForeground#ff6188
inputValidation.infoBackground#313640
inputValidation.infoBorder#84b3f5
inputValidation.infoForeground#84b3f5
inputValidation.warningBackground#313640
inputValidation.warningBorder#ffd866
inputValidation.warningForeground#ffd866
list.activeSelectionBackground#2C313A
list.activeSelectionForeground#D7DAE0
list.dropBackground#221f22bf
list.errorForeground#ff6188
list.focusBackground#2C313A
list.focusForeground#C4C9D2
list.highlightForeground#D7DAE0
list.hoverBackground#2C313A66
list.hoverForeground#C4C9D2
list.inactiveFocusBackground#282C34
list.inactiveSelectionBackground#2C313A
list.inactiveSelectionForeground#D7DAE0
list.invalidItemForeground#ff6188
list.warningForeground#ffd866
listFilterWidget.background#282C34
listFilterWidget.noMatchesOutline#ff6188
listFilterWidget.outline#282C34
menu.background#221f22
menu.foreground#C4C9D2
menu.selectionBackground#3C393E
merge.border#282C34
merge.commonContentBackground#C4C9D219
merge.commonHeaderBackground#C4C9D226
merge.currentContentBackground#ff618819
merge.currentHeaderBackground#ff618826
merge.incomingContentBackground#c5ec7919
merge.incomingHeaderBackground#c5ec7926
minimap.background#21252B
minimap.errorHighlight#ff6188
minimap.selectionHighlight#333842
minimap.warningHighlight#ffd866
minimapGutter.addedBackground#c5ec79
minimapGutter.deletedBackground#ff6188
minimapGutter.modifiedBackground#84b3f5
minimapSlider.hoverBackground#C4C9D260
notificationCenter.border#21252B
notificationCenterHeader.background#21252B
notificationCenterHeader.foreground#939293
notificationLink.foreground#84b3f5
notifications.background#21252B
notifications.border#21252B
notifications.foreground#c1c0c0
notificationsErrorIcon.foreground#ff6188
notificationsInfoIcon.foreground#84b3f5
notificationsWarningIcon.foreground#ffd866
notificationToast.border#21252B
panel.background#3E4451
panel.border#282C34
panel.dropBorder#221f22bf
panelStickyScroll.border#19181a
panelStickyScroll.shadow#19181a
panelTitle.activeBorder#84b3f5
panelTitle.activeForeground#84b3f5
panelTitle.inactiveForeground#939293
peekView.border#84b3f5
peekViewEditor.background#1B1D23
peekViewEditor.matchHighlightBackground#C4C9D226
peekViewEditor.matchHighlightBorder#C4C9D226
peekViewEditorGutter.background#1B1D23
peekViewResult.background#21252B
peekViewResult.fileForeground#939293
peekViewResult.lineForeground#939293
peekViewResult.matchHighlightBackground#C4C9D226
peekViewResult.selectionBackground#2C313A
peekViewResult.selectionForeground#C4C9D2
peekViewTitle.background#1B1D23
peekViewTitleDescription.foreground#939293
peekViewTitleLabel.foreground#C4C9D2
pickerGroup.border#84b3f5
pickerGroup.foreground#C4C9D226
problemsErrorIcon.foreground#ff6188
problemsInfoIcon.foreground#84b3f5
problemsWarningIcon.foreground#ffd866
progressBar.background#3E4451
rust_analyzer.inlayHints.background#31353fC0
rust_analyzer.inlayHints.background.chainingHints#31353fC0
rust_analyzer.inlayHints.background.parameterHints#31353fC0
rust_analyzer.inlayHints.background.typeHints#31353fC0
rust_analyzer.inlayHints.foreground#717171C0
rust_analyzer.inlayHints.foreground.chainingHints#78dce8C0
rust_analyzer.inlayHints.foreground.parameterHints#fc9867C0
rust_analyzer.inlayHints.foreground.typeHints#78dce8C0
scrollbar.shadow#282C34
scrollbarSlider.activeBackground#747D9180
scrollbarSlider.background#4E566680
scrollbarSlider.hoverBackground#5A637580
selection.background#454a53
settings.checkboxBackground#3E4451
settings.checkboxBorder#3E4451
settings.checkboxForeground#C4C9D2
settings.dropdownBackground#3E4451
settings.dropdownBorder#3E4451
settings.dropdownForeground#C4C9D2
settings.dropdownListBorder#939293
settings.headerForeground#84b3f5
settings.modifiedItemIndicator#84b3f5
settings.numberInputBackground#3E4451
settings.numberInputBorder#3E4451
settings.numberInputForeground#C4C9D2
settings.textInputBackground#3E4451
settings.textInputBorder#3E4451
settings.textInputForeground#C4C9D2
sideBar.background#21252B
sideBar.border#19181a
sideBar.dropBackground#221f22bf
sideBar.foreground#939293
sideBarSectionHeader.background#333842
sideBarSectionHeader.border#221f22
sideBarSectionHeader.foreground#dfb79f
sideBarStickyScroll.border#19181a
sideBarStickyScroll.shadow#19181a
sideBarTitle.foreground#c5ec79
statusBar.background#84b3f5
statusBar.border#181A1F
statusBar.debuggingBackground#fc9867
statusBar.debuggingBorder#221f22
statusBar.debuggingForeground#282C34
statusBar.foreground#282C34
statusBar.noFolderBackground#ab9df2
statusBar.noFolderBorder#181A1F
statusBar.noFolderForeground#282C34
statusBarItem.activeBackground#282C34
statusBarItem.hoverBackground#C4C9D20c
statusBarItem.prominentBackground#3E4451
statusBarItem.prominentHoverBackground#3E4451
statusBarItem.remoteBackground#a9dc76
statusBarItem.remoteForeground#221f22
symbolIcon.arrayForeground#ff6188
symbolIcon.booleanForeground#ab9df2
symbolIcon.classForeground#78dce8
symbolIcon.colorForeground#ab9df2
symbolIcon.constantForeground#ab9df2
symbolIcon.constructorForeground#a9dc76
symbolIcon.enumeratorForeground#78dce8
symbolIcon.enumeratorMemberForeground#84b3f5
symbolIcon.eventForeground#fc9867
symbolIcon.fieldForeground#d29b79
symbolIcon.fileForeground#c1c0c0
symbolIcon.folderForeground#c1c0c0
symbolIcon.functionForeground#a9dc76
symbolIcon.interfaceForeground#78dce8
symbolIcon.keyForeground#fc9867
symbolIcon.keywordForeground#ff6188
symbolIcon.methodForeground#a9dc76
symbolIcon.moduleForeground#9CA0A8
symbolIcon.namespaceForeground#9CA0A8
symbolIcon.nullForeground#ab9df2
symbolIcon.numberForeground#ab9df2
symbolIcon.objectForeground#78dce8
symbolIcon.operatorForeground#ff6188
symbolIcon.packageForeground#d29b79
symbolIcon.propertyForeground#ffe599
symbolIcon.referenceForeground#fc9867
symbolIcon.snippetForeground#84b3f5
symbolIcon.stringForeground#ffd866
symbolIcon.structForeground#78dce8
symbolIcon.textForeground#ffd866
symbolIcon.typeParameterForeground#78dce8
symbolIcon.unitForeground#ab9df2
symbolIcon.variableForeground#C4C9D2
tab.activeBackground#21252B
tab.activeBorder#221f22
tab.activeBorderTop#c5ec79
tab.activeForeground#D7DAE0
tab.activeModifiedBorder#C4C9D226
tab.border#282C34
tab.hoverBackground#3E4451
tab.hoverBorder#ab9df2
tab.hoverForeground#ab9df2
tab.inactiveBackground#282C34
tab.inactiveForeground#939293
tab.inactiveModifiedBorder#C4C9D226
tab.unfocusedActiveBackground#3E4451
tab.unfocusedActiveBorderTop#84b3f590
tab.unfocusedActiveForeground#84b3f590
tab.unfocusedActiveModifiedBorder#3E4451
tab.unfocusedHoverBackground#282C34
tab.unfocusedHoverBorder#282C34
tab.unfocusedInactiveModifiedBorder#3E4451
terminal.ansiBlack#3E4451
terminal.ansiBlue#84b3f5
terminal.ansiBrightBlack#727072
terminal.ansiBrightBlue#b3d0f9
terminal.ansiBrightCyan#a4e7ef
terminal.ansiBrightGreen#c3e69f
terminal.ansiBrightMagenta#FA8282
terminal.ansiBrightRed#ff94ae
terminal.ansiBrightWhite#C4C9D2
terminal.ansiBrightYellow#ffe599
terminal.ansiCyan#78dce8
terminal.ansiGreen#a9dc76
terminal.ansiMagenta#FF5794
terminal.ansiRed#ff6188
terminal.ansiWhite#C4C9D2
terminal.ansiYellow#ffd866
terminal.background#3E4451
terminal.foreground#C4C9D2
terminal.selectionBackground#717171C0
textBlockQuote.background#3E4451
textBlockQuote.border#3E4451
textCodeBlock.background#3E4451
textLink.activeForeground#C4C9D2
textLink.foreground#84b3f5
textPreformat.foreground#C4C9D2
textSeparator.foreground#727072
titleBar.activeBackground#221f22
titleBar.activeForeground#939293
titleBar.border#19181a
titleBar.inactiveBackground#221f22
titleBar.inactiveForeground#C4C9D226
welcomePage.buttonBackground#3E4451
welcomePage.buttonHoverBackground#C4C9D226
widget.shadow#19181a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#717171	italic
punctuation, punctuation.separator.period.python, keyword.operator.sigil.rust, keyword.operator.key-value.rust, keyword.operator.access.dot.rust, koka.type	#898C93	—
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	#C4C9D2	—
	#ffffff	underline
constant.other.color	#ffffff	—
invalid, invalid.illegal	#ff94ae	—
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	#ff6188	—
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	#ff6188	—
entity.name.tag, meta.tag.sgml, variable.key.toml	#ff6188	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, keyword.other.common.function, entity.name.command	#a9dc76	—
entity.name.function.core.janet, entity.name.function.call.janet	#78dce8	—
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	#84b3f5
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	#84b3f5	underline
variable.constant.error.zig	#84b3f5	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	#d29b79	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	#d29b79	—
punctuation.definition.interpolation.rust, constant.character.format.placeholder.other.python, punctuation.section.embedded.begin.swift, punctuation.section.embedded.end.swift	#d29b79	bold
entity.name.type.module.ts, koka.moduleid	#898C93	—
meta.block variable.other	#f07178	—
support.other.variable, string.other.link	#ff6188	—
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	#ab9df2	—
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	#ffd866	—
keyword.other.unsafe	#ff94ae	—
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	#ffe599	—
meta.attribute.rust entity.name.type.rust	#ffe599	italic
variable.other.property, entity.name.variable.field, variable.other.member, meta.member, variable.other.object.property, variable.object.property, entity.name.variable.property	#d29b79	—
variable.parameter, keyword.other.self.rust, meta.parens.block.c, variable.css, variable.language.closure-parameter.swift, koka.id.param	#fc9867	—
constant.keyword.janet	#fc9867	—
keyword.other.racket	#fc9867	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	#78dce8	—
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	#78dce8	—
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	#d29b79	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#FF5370	—
variable.language	#fc9867	italic
entity.name.method.js	#a9dc76	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#a9dc76	—
entity.other.attribute-name	#ffe599	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name, entity.other.attribute-name.html	#78dce8	italic
entity.other.attribute-name.class	#78dce8	italic
source.sass keyword.control	#82AAFF	—
markup.inserted	#C3E88D	—
markup.deleted	#FF5370	—
markup.changed	#C792EA	—
string.regexp	#fc9867	—
constant.character.escape	#ab9df2	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	#84b3f5	italic
source.js constant.other.object.key.js string.unquoted.label.js	#ff6188	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#ab9df2	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ffd866	—
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	#ff94ae	—
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	#ff6188	—
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	#d29b79	—
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	#78dce8	—
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	#84b3f5	—
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	#C792EA	—
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	#C3E88D	—
text.html.markdown, punctuation.definition.list_item.markdown	#C4C9D2	—
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	#a9dc76	bold
markup.underline.link	#78dce8	—
markup.italic	#fc9867	italic
punctuation.definition.bold.markdown, markup.bold, markup.bold string	#fc9867	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	#fc9867	bold
markup.underline	#F78C6C	underline
entity.name.section.markdown	#a9dc76	bold
markup.quote punctuation.definition.blockquote.markdown	#65737E	—
markup.quote	—	italic
string.other.link.title.markdown	#ffd866	—
string.other.link.description.title.markdown	#C792EA	—
constant.other.reference.link.markdown	#ab9df2	—
markup.raw.block	#C792EA	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#C4C9D2	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#C4C9D2	—

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