Thunder Theme

Name: Thunder Theme
Author: jhonx

Publisher: jhonxThemes in package: 2

GitHub

Color themes

VS Code preview

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

Thunder Theme — Landscape

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.activeBackground#282c34
activityBar.activeBorder#282c34
activityBar.activeFocusBorder#4480F4
activityBar.background#282c34
activityBar.border#282c3400
activityBar.dropBorder#4480F4
activityBar.foreground#a7aac9
activityBar.inactiveForeground#5C617D
activityBarBadge.background#598DEF
activityBarBadge.foreground#fff
badge.background#676E95E5
badge.foreground#CED5E1
breadcrumb.activeSelectionForeground#d7dae0
breadcrumb.background#282c34
breadcrumb.focusForeground#d7dae0
breadcrumb.foreground#8E99B1
breadcrumbPicker.background#252830
button.background#676E9599
button.border#676E9500
button.foreground#DCDFE5
button.hoverBackground#598DEFE6
button.secondaryBackground#676E9599
button.secondaryForeground#DCDFE5
button.secondaryHoverBackground#598DEFE6
charts.blue#6495EE
charts.foreground#B0B7C3
charts.green#98C379
charts.lines#454963
charts.orange#FF9070
charts.purple#A78CFA
charts.red#f14c4c
charts.yellow#E4BF7F
checkbox.background#21252B
checkbox.border#181a1f
checkbox.foreground#B0B7C3
debugConsole.errorForeground#E51400
debugConsole.infoForeground#4480F4
debugConsole.warningForeground#FF8A4C
debugExceptionWidget.background#a3151533
debugExceptionWidget.border#a31515
debugToolBar.background#21252B
debugToolBar.border#21252B
descriptionForeground#B0B7C3BF
diffEditor.diagonalFill#5F668B
diffEditor.insertedTextBackground#45B7463F
diffEditor.removedTextBackground#f14c4c21
dropdown.background#23272F
dropdown.border#181A1F
dropdown.foreground#9DA5B3
dropdown.listBackground#23272F
editor.background#282c34
editor.findMatchBackground#F8F900
editor.findMatchBorder#F8F90000
editor.findMatchHighlightBackground#324464
editor.findMatchHighlightBorder#32446400
editor.findRangeHighlightBackground#F8F9004C
editor.foldBackground#32446469
editor.foreground#9DA5B3
editor.hoverHighlightBackground#32446499
editor.lineHighlightBackground#2F323B
editor.lineHighlightBorder#2F323B00
editor.rangeHighlightBackground#2F323B
editor.selectionBackground#598DEF59
editor.selectionHighlightBackground#0080997F
editor.selectionHighlightBorder#00809900
editor.snippetFinalTabstopHighlightBackground#32446499
editor.snippetFinalTabstopHighlightBorder#5F668B
editor.snippetTabstopHighlightBackground#32446499
editor.snippetTabstopHighlightBorder#32446400
editor.wordHighlightBackground#0080997F
editor.wordHighlightBorder#00809900
editor.wordHighlightStrongBackground#A78CFA72
editor.wordHighlightStrongBorder#A78CFA00
editorBracketHighlight.foreground1#E4BF7F
editorBracketHighlight.foreground2#CF68E1
editorBracketHighlight.foreground3#6495EE
editorBracketHighlight.foreground4#E4BF7F
editorBracketHighlight.foreground5#CF68E1
editorBracketHighlight.foreground6#6495EE
editorBracketHighlight.unexpectedBracket.foreground#838FA7
editorBracketMatch.background#FF90707F
editorBracketMatch.border#FF907000
editorBracketPairGuide.activeBackground1#E4BF7Fcc
editorBracketPairGuide.activeBackground2#CF68E1cc
editorBracketPairGuide.activeBackground3#6495EEcc
editorBracketPairGuide.activeBackground4#E4BF7Fcc
editorBracketPairGuide.activeBackground5#CF68E1cc
editorBracketPairGuide.activeBackground6#6495EEcc
editorCodeLens.foreground#50567C
editorCursor.background#FFFFFF
editorCursor.foreground#FF9070
editorError.foreground#E51400
editorGroup.border#181A1F
editorGroup.dropBackground#598DEF4C
editorGroup.emptyBackground#282c3400
editorGroup.focusedEmptyBorder#5889EA
editorGroupHeader.border#282c3400
editorGroupHeader.noTabsBackground#21252B
editorGroupHeader.tabsBackground#21252B
editorGroupHeader.tabsBorder#282c3400
editorGutter.addedBackground#40AD41
editorGutter.background#282c34
editorGutter.deletedBackground#F14C4C
editorGutter.foldingControlForeground#FFF
editorGutter.modifiedBackground#A78CFA
editorHoverWidget.background#23272F
editorHoverWidget.border#181A1F
editorHoverWidget.foreground#B0B7C3
editorHoverWidget.statusBarBackground#23272F
editorIndentGuide.activeBackground1#FF9070BF
editorIndentGuide.background1#454963
editorInfo.foreground#4480F4
editorInlayHint.foreground#8A97C3
editorLineNumber.activeForeground#9DA5B3
editorLineNumber.foreground#535773
editorLink.activeForeground#D365E5
editorMarkerNavigation.background#2F323B
editorMarkerNavigationError.background#E51400
editorMarkerNavigationInfo.background#598DEF
editorMarkerNavigationWarning.background#FF8A4C
editorOverviewRuler.addedForeground#40AD41
editorOverviewRuler.background#282c34
editorOverviewRuler.border#5F668B00
editorOverviewRuler.bracketMatchForeground#FF90707F
editorOverviewRuler.currentContentForeground#598DEF59
editorOverviewRuler.deletedForeground#f14c4c
editorOverviewRuler.errorForeground#E51400
editorOverviewRuler.findMatchForeground#EEF3FF7F
editorOverviewRuler.incomingContentForeground#45B7463F
editorOverviewRuler.infoForeground#4480F4
editorOverviewRuler.modifiedForeground#A78CFA
editorOverviewRuler.rangeHighlightForeground#2D3039
editorOverviewRuler.selectionHighlightForeground#008099BF
editorOverviewRuler.warningForeground#FF8A4C
editorOverviewRuler.wordHighlightForeground#008099BF
editorOverviewRuler.wordHighlightStrongForeground#A78CFABF
editorPane.background#282c34
editorRuler.foreground#676E95
editorSuggestWidget.background#23272F
editorSuggestWidget.border#181A1F
editorSuggestWidget.foreground#8E99B1
editorSuggestWidget.highlightForeground#4480F4
editorSuggestWidget.selectedBackground#598DEF64
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#000000b2
editorWarning.foreground#FF8A4C
editorWhitespace.foreground#60678E
editorWidget.background#21252B
editorWidget.border#21252B
editorWidget.foreground#b0b7c3
errorForeground#E51400
extensionButton.prominentBackground#499149
extensionButton.prominentForeground#fff
extensionButton.prominentHoverBackground#377337
extensionIcon.starForeground#FF8A4C
focusBorder#4480F4
foreground#B0B7C3
gitDecoration.addedResourceForeground#98C379
gitDecoration.conflictingResourceForeground#E51400
gitDecoration.deletedResourceForeground#F14C4C
gitDecoration.ignoredResourceForeground#676E95
gitDecoration.modifiedResourceForeground#A78CFA
gitDecoration.renamedResourceForeground#E4BF7F
gitDecoration.stageDeletedResourceForeground#E06C75
gitDecoration.stageModifiedResourceForeground#D365E5
gitDecoration.submoduleResourceForeground#FF6AB3
gitDecoration.untrackedResourceForeground#7BBE54
gitlens.trailingLineBackgroundColor#2F323B00
gitlens.trailingLineForegroundColor#585D68
icon.foreground#c5c5c5
input.background#282c34
input.border#21252B
input.foreground#9DA5B3
input.placeholderForeground#5E658B
inputOption.activeBackground#598DEFE6
inputOption.activeBorder#598DEF00
inputOption.activeForeground#fff
inputValidation.errorBackground#21252B
inputValidation.errorBorder#E51400
inputValidation.errorForeground#E51400
inputValidation.infoBackground#21252B
inputValidation.infoBorder#4480F4
inputValidation.infoForeground#4480F4
inputValidation.warningBackground#21252B
inputValidation.warningBorder#FF8A4C
inputValidation.warningForeground#FF8A4C
list.activeSelectionBackground#2C313A
list.activeSelectionForeground#d7dae0
list.activeSelectionIconForeground#D2D5DB
list.dropBackground#598DEF4C
list.errorForeground#E51400
list.filterMatchBackground#FFF
list.focusBackground#598DEF66
list.focusForeground#d7dae0
list.focusHighlightForeground#4480F4
list.focusOutline#598DEF00
list.highlightForeground#5889EA
list.hoverBackground#598DEF66
list.hoverForeground#d7dae0
list.inactiveFocusBackground#598DEF3F
list.inactiveFocusOutline#2C313A00
list.inactiveSelectionBackground#2C313A
list.inactiveSelectionForeground#d7dae0
list.inactiveSelectionIconForeground#d7dae0
list.invalidItemForeground#676E95
list.warningForeground#FF8A4C
listFilterWidget.background#21252B
listFilterWidget.noMatchesOutline#ff0000
listFilterWidget.outline#fff
menu.background#21252b
menu.foreground#8E99B1
menu.selectionBackground#598DEFB3
menu.selectionBorder#598DEF00
menu.selectionForeground#E1E4EA
menu.separatorBackground#8E99B1
menubar.selectionBackground#598DEFB3
menubar.selectionBorder#598DEF00
menubar.selectionForeground#E1E4EA
merge.border#181A1F
merge.currentContentBackground#598DEF59
merge.currentHeaderBackground#598DEF59
merge.incomingContentBackground#45B7463F
merge.incomingHeaderBackground#45B7463F
minimap.background#282c34
minimap.errorHighlight#E514007F
minimap.findMatchHighlight#D0D5E17F
minimap.selectionHighlight#5F97FFF2
minimap.warningHighlight#FF8A4C7F
minimapGutter.addedBackground#40AD41
minimapGutter.deletedBackground#F14C4C
minimapGutter.modifiedBackground#A78CFA
minimapSlider.activeBackground#A2ABE533
minimapSlider.background#A2ABE519
minimapSlider.hoverBackground#A2ABE533
notificationCenter.border#181A1F
notificationCenterHeader.background#21252b
notificationCenterHeader.foreground#B0B7C3
notificationLink.foreground#598DEF
notifications.background#21252b
notifications.border#181A1F
notifications.foreground#B0B7C3
notificationToast.border#181A1F
panel.background#282c34
panel.border#21252B
panelSection.border#21252B
panelSection.dropBackground#598DEF4C
panelSectionHeader.background#21252B
panelTitle.activeBorder#B0B7C3
panelTitle.activeForeground#B0B7C3
panelTitle.inactiveForeground#676E95
peekView.border#535773
peekViewEditor.background#2D3039
peekViewEditor.matchHighlightBackground#598DEF33
peekViewEditor.matchHighlightBorder#598DEF00
peekViewEditorGutter.background#2D3039
peekViewResult.background#282c34
peekViewResult.fileForeground#9DA5B3
peekViewResult.lineForeground#8E99B1
peekViewResult.matchHighlightBackground#282c3400
peekViewResult.selectionBackground#598DEFA5
peekViewResult.selectionForeground#d7dae0
peekViewTitle.background#282c34
peekViewTitleDescription.foreground#8E99B1
peekViewTitleLabel.foreground#9DA5B3
pickerGroup.border#4480F4
pickerGroup.foreground#4480F4
problemsErrorIcon.foreground#E51400
problemsInfoIcon.foreground#4480F4
problemsWarningIcon.foreground#FF8A4C
profileBadge.background#676E95E5
profileBadge.foreground#CED5E1
progressBar.background#4283F5
quickInput.background#21252B
quickInput.foreground#B0B7C3
quickInputList.focusBackground#598DEF3F
quickInputTitle.background#21252B
sash.hoverBorder#598DEF
scrollbar.shadow#000
scrollbarSlider.activeBackground#A2ABE54C
scrollbarSlider.background#A2ABE533
scrollbarSlider.hoverBackground#A2ABE54C
selection.background#598DEF59
settings.checkboxBackground#23272F
settings.checkboxBorder#181A1F
settings.checkboxForeground#9DA5B3
settings.dropdownBackground#23272F
settings.dropdownBorder#181A1F
settings.dropdownForeground#9DA5B3
settings.dropdownListBorder#181A1F
settings.focusedRowBackground#598DEF66
settings.focusedRowBorder#598DEF00
settings.headerForeground#d7dae0
settings.modifiedItemIndicator#A78CFA
settings.numberInputBackground#23272F
settings.numberInputBorder#181A1F
settings.numberInputForeground#9DA5B3
settings.rowHoverBackground#598DEF3F
settings.textInputBackground#23272F
settings.textInputBorder#181A1F
settings.textInputForeground#9DA5B3
sideBar.background#21252B
sideBar.dropBackground#598DEF4C
sideBar.foreground#8E99B1
sideBarSectionHeader.background#282c34
sideBarSectionHeader.foreground#9DA5B3
sideBarTitle.foreground#9DA5B3
statusBar.background#1B1E2B
statusBar.border#1B1E2B00
statusBar.debuggingBackground#6c2022
statusBar.debuggingForeground#DDE0E6
statusBar.focusBorder#4480F4
statusBar.foreground#9DA5B3
statusBar.noFolderBackground#21252B
statusBar.noFolderForeground#9DA5B3
statusBarItem.activeBackground#7467c9
statusBarItem.compactHoverBackground#598defB3
statusBarItem.errorBackground#21252B
statusBarItem.errorForeground#e51400
statusBarItem.hoverBackground#598DEF66
statusBarItem.prominentBackground#21252B
statusBarItem.prominentHoverBackground#598DEF66
statusBarItem.remoteBackground#7E57C2
statusBarItem.remoteForeground#ffffff
statusBarItem.remoteHoverForeground#ffffff
statusBarItem.warningBackground#21252B
statusBarItem.warningForeground#ff8a4c
symbolIcon.arrayForeground#B0B7C3
symbolIcon.booleanForeground#CF68E1
symbolIcon.classForeground#56B7C3
symbolIcon.constantForeground#FF9070
symbolIcon.constructorForeground#6495EE
symbolIcon.enumeratorMemberForeground#FF9070
symbolIcon.eventForeground#6495EE
symbolIcon.fieldForeground#E06C75
symbolIcon.fileForeground#8E99B1
symbolIcon.folderForeground#9DA5B3
symbolIcon.functionForeground#6495EE
symbolIcon.interfaceForeground#56B7C3
symbolIcon.keyForeground#B0B7C3
symbolIcon.keywordForeground#A78CFA
symbolIcon.methodForeground#6495EE
symbolIcon.moduleForeground#E06C75
symbolIcon.namespaceForeground#E06C75
symbolIcon.nullForeground#CF68E1
symbolIcon.numberForeground#FF9070
symbolIcon.objectForeground#B0B7C3
symbolIcon.operatorForeground#56B7C3
symbolIcon.packageForeground#E06C75
symbolIcon.propertyForeground#8A97C3
symbolIcon.snippetForeground#A78CFA
symbolIcon.stringForeground#98c379
symbolIcon.structForeground#56B7C3
symbolIcon.textForeground#676E95
symbolIcon.typeParameterForeground#FF6AB3
symbolIcon.unitForeground#FF9070
symbolIcon.variableForeground#B0B7C3
tab.activeBackground#282c34
tab.activeBorder#282c3400
tab.activeBorderTop#4e33f3
tab.activeForeground#d7dae0
tab.activeModifiedBorder#A78CFA
tab.border#181A1F
tab.hoverBackground#598DEF66
tab.hoverBorder#598DEF00
tab.hoverForeground#d7dae0
tab.inactiveBackground#21252B
tab.inactiveForeground#676E95
tab.inactiveModifiedBorder#A78CFA
tab.unfocusedActiveBackground#282c34
tab.unfocusedActiveBorder#282c3400
tab.unfocusedActiveBorderTop#282c3400
tab.unfocusedActiveForeground#d7dae0BF
tab.unfocusedActiveModifiedBorder#A78CFA
tab.unfocusedHoverBackground#598DEF66
tab.unfocusedHoverBorder#598DEF00
tab.unfocusedHoverForeground#d7dae0
tab.unfocusedInactiveForeground#676E95
tab.unfocusedInactiveModifiedBorder#A78CFA
terminal.ansiBlack#000
terminal.ansiBlue#4283F5
terminal.ansiBrightBlack#676E95
terminal.ansiBrightBlue#6495EE
terminal.ansiBrightCyan#56B7C3
terminal.ansiBrightGreen#3FB93F
terminal.ansiBrightMagenta#FF6AB3
terminal.ansiBrightRed#f14c4c
terminal.ansiBrightWhite#8A97C3
terminal.ansiBrightYellow#FF8A4C
terminal.ansiCyan#56B7C3
terminal.ansiGreen#98c379
terminal.ansiMagenta#CF68E1
terminal.ansiRed#e51400
terminal.ansiWhite#fff
terminal.ansiYellow#E4BF7F
terminal.background#282c34
terminal.border#21252B
terminal.foreground#B0B7C3
terminal.selectionBackground#598DEF59
terminal.tab.activeBorder#d7dae0
terminalCommandDecoration.defaultBackground#B0B7C300
terminalCommandDecoration.errorBackground#e51400
terminalCommandDecoration.successBackground#3FB93F
terminalCursor.background#FFF
terminalCursor.foreground#FF9070
textBlockQuote.background#31353c
textBlockQuote.border#4283F5
textCodeBlock.background#181A1F
textLink.activeForeground#D365E5
textLink.foreground#4283F5
textPreformat.foreground#FF9070
titleBar.activeBackground#282c34
titleBar.activeForeground#8E99B1
titleBar.border#282c3400
titleBar.inactiveBackground#282C34
titleBar.inactiveForeground#676E95
toolbar.activeBackground#4283F58F
toolbar.hoverBackground#4283F58F
toolbar.hoverOutline#4283F500
tree.indentGuidesStroke#454963
walkThrough.embeddedEditorBackground#21252B
welcomePage.background#282c34
welcomePage.progress.background#282c34
welcomePage.progress.foreground#4283F5
welcomePage.tileBackground#21252B
welcomePage.tileHoverBackground#598DEF64
widget.shadow#000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable.parameter,token.variable.parameter,variable.other.jsdoc,variable.language.arguments,function.parameter,entity.name.variable.parameter,meta.function.c, punctuation.vararg-ellipses,variable.other.block.ruby, meta.arguments, entity.name.type.template, meta.type.parameters entity.name.type, meta.parameters, meta.function.parameter variable.other	#E5C07B	italic
variable.other.less,variable.other.sass,variable.scss, source.sass variable.other, variable.argument.css	#E4BF7F
variable.parameter.url	#98C379
entity.name.type.module,entity.name.package	#E06C75
variable.other, support.variable,meta.definition.variable,variable.other.object, entity.name.type.enum,meta.method.body,entity.name.variable,variable.other.object.property.cs,meta.block.c,source.c,source.cpp,source.ruby,source.go,meta.class-struct-block,source.dart,meta.item-access.python,meta.function-call.arguments.python,meta.item-access.arguments.python, variable.parameter.keyframe-list.css, entity.name.tag.custom, entity.name.function.scss, source.css.less, variable, meta.function-call.c, entity.name.function.preprocessor, meta.parens	#B0B7C3
meta.property-value.css, meta.property-value.scss, variable.other.readwrite.ts	#E5C07B
variable.other.readwrite.js	#B0B7C3	italic
source.python punctuation.separator.dict.python	#8E99B1
variable.other.readwrite, support.class	#ff6480
comment,comment markup.link,punctuation.definition.comment,markup.quote.markdown	#676E95	italic
constant.character.escape, constant.character.entity	#8A97C3
invalid	#676E95	underline
invalid.unimplemented	#676E95	underline
variable.other.property	#E06C75
variable.other.object.property,variable.other.constant.property, entity.name.type.option, entity.name.label	#E06C75
variable.other.constant.js	#E5C07B
punctuation.separator.key-value, keyword.operator.type.annotation,punctuation.definition.section.case-statement,punctuation.separator.colon,punctuation.separator.other,punctuation.definition.parameters,punctuation.definition.constant.ruby,punctuation.separator.dictionary.key-value, keyword.operator.ternary.dart,punctuation.section.function.begin.python, meta.property-list.css.sass, sass-script-maps, punctuation.colon, punctuation.separator.initializers, keyword.operator.key-value, punctuation.separator.label, keyword.operator.colon, variable.parameter.url.scss, punctuation.separator.annotation.python	#8E99B1
keyword.operator.key.php	#8E99B1
punctuation.separator.comma,punctuation.separator.delimiter,punctuation.separator.list.comma,punctuation.separator.parameter, meta.array.php, punctuation.separator.parameters,punctuation.separator.arguments.python,punctuation.separator.object,meta.function.method.with-arguments.ruby, punctuation.comma, punctuation.separator.element.python, comment.punctuation.comma.sass, meta.at-rule.keyframes.body.css, meta.delimiter.object.comma, punctuation.other.comma	#79859D
punctuation.terminator,punctuation.terminator.statement, punctuation.terminator.rule, punctuation.terminator.expression,punctuation.separator.statement,meta.using-namespace-declaration.cpp,invalid.deprecated.semicolon, constant.character.end, punctuation.semi	#676E95
punctuation.accessor,punctuation.separator.period,punctuation.separator.dot-access,punctuation.separator.method,punctuation.other.period,punctuation.dot, meta.delimiter.property.period, keyword.operator.access.dot, keyword.operator.period	#838FA7	bold
meta.parameters.js	#838FA7
support.constant.font-name	#66D9EF
support.constant.property-value.scss,support.constant.property-value.css,support.constant.vendored.property-value.css	#C57BDB
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end, punctuation.definition.generic.begin.html, punctuation.definition.generic.end.html, punctuation.definition.interpolation.begin.bracket, punctuation.definition.interpolation.end.bracket, support.constant.handlebars.wxml, constant.character.format.placeholder.other.python	#6495EE
meta.object-literal.key, meta.object-literal.key string.quoted,variable.object.property,keyword.operator.optional,support.type.map.key,meta.at-rule.each.scss, meta.object-literal.key punctuation.definition.string, meta.attribute.python	#E06C75
keyword.operator.negetion.regexp,keyword.control.anchor.regexp,punctuation.definition.group.capture.regexp,keyword.operator.quantifier.regexp	#E4BF7F
support.variable.dom,support.variable.property,support.variable.property.dom,storage.modifier.import,constant.other.php, entity.name.type.namespace,variable.other.member.c,meta.using-namespace-declaration.cpp entity.name.type.cpp,meta.class-struct-block.cpp meta.namespace-block.cpp entity.name.type.cpp, variable.other.source.dart, entity.name.namespace, entity.name.module, entity.name.type.result.rust, entity.name.scope-resolution.namespace, entity.name.variable.field.cs	#E06C75
punctuation.definition.comment	#676E95
keyword.operator.expression.typeof,keyword.other.typeof	#FF6AB3
keyword.operator.assignment, meta.property-value.css keyword.operator.less, keyword.operator.assignment.equal, keyword.operator.eq	#838FA7
punctuation.definition.tag, meta.tag.inline.any, meta.tag.block.any, meta.tag.any , meta.tag.structure.any, meta.tag.metadata.script, punctuation.definition.tag.begin, punctuation.definition.tag.end, meta.tag.preprocessor.xml,punctuation.separator.key-value.html, meta.tag.metadata.style.html, meta.tag.attributes.js keyword.operator.assignment, meta.tag.other.html, meta.tag.inline.any.html source.directive.vue meta.brace, punctuation.definition.tag.begin source.js, punctuation.definition.tag.end source.js, punctuation.definition.tag source,source.vue, meta.attribute-selector.scss keyword.operator.scss, punctuation.separator.equals, meta.tag.svg, text.xml.svg meta.tag.style	#8792AA
keyword.operator, keyword.operator.arithmetic,keyword.operator.decrement, keyword.operator.increment,keyword.operator.assignment.compound,keyword.operator.less,meta.property-list.css,keyword.operator.sass, keyword.operator.increment-decrement, keyword.operator.css, entity.name.tag.wildcard.scss, keyword.operator.string,keyword.operator.bitwise,keyword.operator.assignment.augmented,storage.type.variable.ruby, keyword.operator.assignment.arithmetic, punctuation.definition.list.begin.markdown, variable.language.import-all, constant.language.import-export-all, storage.modifier.reference, storage.modifier.pointer, keyword.operator.assignment.rust,meta.directive.vue, punctuation.definition.quote.begin.markdown, meta.format.brace constant, meta.selector invalid.deprecated.combinator, meta.selector, storage.type.operator, entity.name.function.infix.haskell, constant.other.operator.infix.haskell, punctuation.separator.annotation.result.python	#56B7C3
keyword.operator.string.php	#56B7C3	bold
keyword.operator.ternary,keyword.operator.logical,keyword.operator.comparison,keyword.operator.relational,keyword.operator.or.regexp,keyword.operator.class,keyword.operator.type,keyword.operator.other.ruby,keyword.operator.conditional,punctuation.separator.question-mark,keyword.operator.null-coalescing,punctuation.tilde,punctuation.separator.pointer-access, keyword.operator.dart, keyword.operator.nulltype, keyword.operator.bitwise.dart, keyword.operator.arrow.haskell, keyword.operator.arrow.left.haskell	#CF68E1	bold
keyword.operator.expression.instanceof,keyword.operator.instanceof	#CF68E1	bold
meta.function-call,support.function.construct.output,invalid.deprecated.gradient.function.css,invalid.deprecated.function.css, support.function.builtin.python, support.function.go, entity.name.function.macro, meta.attribute.rust, new.expr meta.function-call support.class.builtin, new.expr meta.function-call support.class, keyword.operator.function, suppor.function.js	#6495EE	bold
support.function.console	#6495EE	bold
support.function.dom	#6495EE	bold
entity.name.function,support.type.pthread, meta.block.class.cpp meta.body.class.cpp meta.block.class.cpp entity.name.function.definition.special.constructor.cpp, keyword.operator.sizeof, meta.function-call.python support.type.python, entity.name.function.cs	#6495EE	bold
support.function	#2BBAC5	bold
support.function.any-method.builtin.url,support.function.any-method.builtin,support.function.url,support.function.misc,support.function.transform,support.function.calc,support.function.var,support.function.string,support.function.basic_functions,support.function.array,support.function.construct,support.function.datetime,support.function.file,support.function.network,support.function.session,support.function.mail,support.function.filter,support.function.errorfunc,support.function.mysql,support.function.php_odbc,support.function.xml,support.function.math, entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust	#6495EE
entity.name.type, entity.name.type.class, entity.name.scope-resolution, entity.name.type.struct, entity.other.inherited-class, entity.name.type.interface, entity.other.inherited-classentity.name.type.interface,keyword.interface, entity.name.type.delegate, support.class, storage.type.cs, support.class.builtin, support.type.graphql	#56B7C3
support.class.console,support.class.component	#E5C07B
entity.name.class	#6495EE	bold
meta.method.declaration	#6495EE	bold
punctuation.separator.namespace, keyword.operator.namespace	#56B7C3
storage.type.function.arrow, keyword.operator.arrow, keyword.control.trycatch, keyword.control.catch-exception, keyword.operator.closure, keyword.operator.cast, keyword.operator.big-arrow	#6495EE	bold
punctuation.definition.directive, keyword.operator.new,keyword.other.new, storage.modifier.c, keyword.control.directive.define, keyword.control.def, keyword.control.class, keyword.control.directive.define punctuation.definition.directive, keyword.control.module, keyword.control.new,keyword.preprocessor.define, meta.preprocessor.cs punctuation.separator.hash.cs, keyword.control.directive.undef, keyword.control.directive.undef punctuation.definition.directive, keyword.other.fn, storage.type.rust, keyword.operator.arrow.skinny, storage.modifier.extern, storage.modifier.const, keyword.control.directive.include punctuation.definition.directive, storage.modifier.extends, storage.modifier.ts, keyword.control.at-rule, keyword.other.let, keyword.other.instance, keyword.other.newtype, keyword.other.data, keyword.other.module, keyword.other, keyword.other.preprocessor, keyword.type.cs, storage.type.var.cs, storage.type.record.cs, keyword.cs	#A78CFA	bold
keyword.operator.expression.in,keyword.operator.expression.of	#CF68E1	bold
keyword.control, keyword.other.using,keyword.preprocessor.elif,keyword.preprocessor.if,keyword.preprocessor.else,keyword.preprocessor.endif, keyword.control.directive, punctuation.separator.hash, keyword.package, keyword.control.flow,keyword.other.special-method.ruby, keyword.input, keyword.type.graphql,keyword.cmake, keyword.control.rust, keyword.other.rust, keyword.control.default, keyword.control.export, keyword.control.directive punctuation.definition.directive, keyword.other.where, keyword.other.forall, keyword.other.deriving, keyword.other.qualified, keyword.other.hiding, keyword.other.in	#CF68E1
storage.type.accessor	#FF8683	bold
entity.other.keyframe-offset, keyword.control.import, keyword.other.import,keyword.import, keyword.control.from, keyword.control.directive.include	#A78CFA
keyword.other.package,keyword.other.class,keyword.other.namespace,keyword.other.enum,keyword.other.operator-decl,keyword.other.interface,keyword.preprocessor,keyword.other.delegate,storage.type.cpp,storage.type.namespace, storage.type.language.primitive.cpp, storage.type.struct, storage.type.template, support.type.built-in.posix-reserved.pthread,keyword.other.typedef, storage.modifier.dart, meta.class.identifier.java storage.modifier.java, meta.enum.java storage.modifier.java, storage.type.modifier, storage.modifier, keyword.control.as, keyword.other.phpdoc, keyword.other.var, storage.modifier.java	#A78CFA	bold
support.type.primitive,support.type.builtin,entity.name.type.instance, storage.type.string,storage.type.numeric,storage.type.boolean,storage.type.primitive, meta.method.identifier,entity.other.inherited-classentity.name.type.interface,meta.return.type,meta.type.parameters,keyword.interface,storage.type.generic, keyword.type,entity.name.type.type-parameter,storage.type.object.array,entity.name.type.delegate,storage.type.c, meta.declaration.dart, meta.type.declaration, meta.block.ts, meta.class-struct-block.cpp entity.name.type.cpp, meta.function.definition.parameters.cpp storage.type.language.primitive.cpp, meta.function.definition.parameters.cpp storage.type.struct.cpp, meta.function.constructor.cpp storage.type.language.primitive.cpp, storage.type.template.argument, entity.name.type.numeric.rust, storage.modifier.mut, entity.name.type.primitive, storage.type.built-in, support.type.built-in.posix-reserved, support.class.dart, keyword.other.type, storage.type.haskell, meta.method.identifier.java storage.type.java, support.type.python	#FF6AB3
entity.name.type.js,new.expr.ts	#6495EE	bold
string, markup.inline.raw.string, text.html.vue-html meta.object-literal.key, meta.preprocessor.cs, text.html.vue-html meta.object-literal.key string.quoted, text.html.vue-html meta.object-literal.key punctuation.definition.string	#89ca78
punctuation.definition.string	#89ca78
constant.language,constant.language.boolean,keyword.operator.expression.void	#CF68E1	bold
constant.numeric, entity.other.keyframe-offset.percentage.css,keyword.other.unit,	#FF9070
support.constant.dom,constant.other.character-class.regexp,support.constant.property.math,support.constant.ext,support.constant.core, entity.name.function.preprocessor.c, constant.other.js, meta.at-rule.keyframes.scss entity.other.attribute-name.scss, constant,variable.other.enummember, constant.other.enum, entity.name.variable.enum-member,constant.language.infinity, constant.other.character-class.range.regexp, constant.other.character-class.set.regexp	#FF9070
meta.attribute.id.html entity.other.attribute-name.html, entity.other.attribute-name.id, entity.name.variable.preprocessor.symbol, entity.other.attribute-name.id.css punctuation.definition.entity.css	#FF9070	bold
markup.bold.markdown, punctuation.definition.bold.markdown	#E4BF7F	bold
punctuation.definition.markdown	#676E95
beginning.punctuation.definition.quote.markdown	#6495EE
fenced_code.block.language	#FF6AB3
string.regexp keyword.other	#E06C75
entity.name.tag,punctuation.section.embedded.begin.php,punctuation.section.embedded.end.php, meta.use.rust, punctuation.section.embedded.end.php source.php, keyword.other.preprocessor.extension	#EF596F
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php source.php, punctuation.section.embedded.end.php	#2BD3E2
variable.other.php	#E06C75
punctuation.definition.variable.php	#2BD3E2
entity.name.tag.html, entity.name.tag	#EF596F
constant.other.php	#E5C07B
entity.name.function.decorator	#ff8683
variable.css	#E4BF7F
meta.at-rule.media.header.css	#66D9EF
text.html.basic,text.html.markdown,meta.paragraph.markdown,text.html.php,text.html.derivative, text.html.wxml, text.xml, text.html, source.js, source.ignore, source.nginx, text	#B0B7C3
meta.jsx.children	#B0B7C3
punctuation.section.block.begin.bracket,punctuation.section.block.end.bracket,punctuation.definition.block,punctuation.section.embedded.begin,punctuation.section.embedded.end,meta.brace,punctuation.bracket,punctuation.definition.parameters.ruby,punctuation.definition.parameters.begin,punctuation.definition.parameters.end,punctuation.section.function.begin.bracket,punctuation.section.function.end.bracket,punctuation.definition.typeparameters.begin,punctuation.definition.typeparameters.end, punctuation.section.array.end, punctuation.section.array.begin, punctuation.definition.array.end, punctuation.definition.array.begin, punctuation.section.scope.end, punctuation.section.scope.begin, meta.parameter.object-binding-pattern, punctuation.definition.binding-pattern.object,punctuation.definition.arguments.end,punctuation.definition.arguments.begin,punctuation.definition.begin.bracket,punctuation.definition.end.bracket,punctuation.curlybrace.open,punctuation.curlybrace.close,punctuation.parenthesis.open,punctuation.parenthesis.close,punctuation.squarebracket.open,punctuation.squarebracket.close,punctuation.section.method.begin,punctuation.section.method.end,punctuation.section.class.begin,punctuation.section.class.end,punctuation.section.enum.begin,punctuation.section.enum.end,punctuation.section.parameters.begin.bracket,punctuation.section.parameters.end.bracket,punctuation.section.parens.begin.bracket,punctuation.section.parens.end.bracket,punctuation.section.arguments.begin.bracket,punctuation.section.arguments.end.bracket,punctuation.separator.arguments,punctuation.section.function.ruby,punctuation.definition.dictionary.begin,punctuation.definition.dictionary.end,punctuation.separator.dictionary.pair,punctuation.separator.array,punctuation.definition.map.begin.bracket,punctuation.definition.map.end.bracket,punctuation.section.function, punctuation.definition.parameters.end.bracket, punctuation.definition.parameters.begin.bracket,punctuation.section.property-list.begin.bracket,punctuation.section.property-list.end.bracket,punctuation.definition.list.begin,punctuation.definition.list.end,punctuation.definition.binding-pattern.array, punctuation.section.embedded.end.ruby source.ruby, punctuation.section.embedded.begin.ruby source.ruby, source.cs, punctuation.definition.function.body.begin.bracket, punctuation.definition.function.body.end.bracket, punctuation.definition.modules.begin, punctuation.definition.modules.end, constant.character.brace, punctuation.operation.graphql,punctuation.definition.optional.arguments.begin,punctuation.definition.optional.arguments.end, punctuation.definition.brackets, punctuation.math.begin.bracket, punctuation.math.end.bracket, punctuation.section.angle-brackets, keyword.operator.delete.array.bracket, punctuation.brackets.round, punctuation.brackets.round, punctuation.brackets.square, punctuation.brackets.attribute, punctuation.definition.attribute, punctuation.brackets, punctuation.definition.bracket, punctuation.definition.character-class.regexp, meta.preprocessor.haskell, punctuation.paren, punctuation.brace, punctuation.parenthesis.begin, punctuation.parenthesis.end	#838FA7
meta.brace.round.css,punctuation.section.property-list.begin.bracket.curly.css,punctuation.section.property-list.end.bracket.curly.css,punctuation.section.function.begin.bracket.round.css,punctuation.section.function.end.bracket.round.css,punctuation.section.media.begin.bracket.curly.css,punctuation.section.media.end.bracket.curly.css,punctuation.definition.parameters.begin.bracket.round.css,punctuation.definition.parameters.end.bracket.round.css,punctuation.section.keyframes.begin.bracket.curly.css,punctuation.section.keyframes.end.bracket.curly.css, punctuation.definition.entity.end.bracket.square.css,punctuation.definition.entity.begin.bracket.square.css,punctuation.section.property-list.begin.bracket.curly.scss,punctuation.section.property-list.end.bracket.curly.scss,punctuation.section.function.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss, punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.pseudo-class.begin.bracket.round.css, punctuation.definition.pseudo-class.end.bracket.round.css	#838FA7CC
support.constant.color.w3c-standard-color-name,constant.other.color.rgb-value.hex,constant.other.rgb-value, support.constant.color.w3c-extended-color-name.css	#B0B7C3
support.type.property-name.css,meta.at-rule.each.scss support.constant.property-value.css, source.css.scss	#B0B7C3
support.type.vendored.property-name.css	#2BBAC5
meta.property-name.css	#676E95
entity.other.attribute-name,invalid.deprecated.entity.other.attribute-name	#56B7C3	italic
entity.other.attribute-name.class.mixin	#6495EE	bold
entity.other.attribute-name.class.css,selector.sass,entity.other.attribute-name.parent-selector.css, meta.at-rule.extend.scss	#98C379
storage.type.java,entity.other.attribute-name.pseudo-class.css,support.type.property-name.media.css,support.constant.media.css,source.css.less entity.name.tag.custom.css	#56B7C3
keyword.control.loop	#CF68E1
entity.other.attribute-name.pseudo-element.css,entity.other.attribute-name.parent-selector.css punctuation.definition.entity.css	#E06C75
entity.name.section.markdown,markup.heading,punctuation.definition.heading.markdown	#E06C75	bold
markup.italic, punctuation.definition.italic	#C57BDB	italic
beginning.punctuation.definition.list.markdown,beginning.punctuation.definition.quote.markdown	#6495EE
markup.inline.raw.markdown	#98c379
markup.quote.markdown	#676E95
markup.underline.link.markdown,markup.underline.link.image.markdown,punctuation.definition.metadata.markdown	#98C379
string.other.link.title.markdown,string.other.link.description.markdown,punctuation.definition.string.begin.markdown,punctuation.definition.string.end.markdown	#6495EE
string.regexp	#98C379
entity.other.attribute-name.pseudo-element.css punctuation.definition.entity.css, entity.other.attribute-name.pseudo-class.css punctuation.definition.entity.css	#56B7C3
invalid.illegal	#8E99B1
invalid.illegal.expected-dictionary-separator.json	#8E99B1
invalid.broken	#8E99B1
invalid.deprecated	#8E99B1
source.jsonmeta.structure.dictionary.json>string.quoted.json	#E06C75
source.jsonmeta.structure.dictionary.json>value.json>string.quoted.json,source.jsonmeta.structure.array.json>value.json>string.quoted.json,source.jsonmeta.structure.dictionary.json>value.json>string.quoted.json>punctuation,source.jsonmeta.structure.array.json>value.json>string.quoted.json>punctuation,string.quoted source,punctuation.definition.entity.css, meta.attribute-selector.scss, string invalid.illegal	#98c379
support.type.property-name.json	#E06C75
variable.other.constant.object,support.constant,support.constant.math,support.constant.json	#FF9070
variable.language.self,variable.language.this,variable.language.super,variable.language.special.self.python,variable.language.dart, keyword.operator.delete, keyword.operator.expression.delete,keyword.other.important,	#F02B77	bold
keyword.other.debugger	#E51400	bold
token.info-token	#4480F4
token.warn-token	#FF8A4C
token.error-token	#E51400
token.debug-token	#CF68E1
meta.var.expr,storage.type.function,keyword.function,keyword.var,keyword.const,keyword.channel,keyword.struct,keyword.other.struct,keyword.map,keyword.reserved,storage.type.class,storage.type.php,storage.type.interface,storage.type.object,storage.type.primitive.dart,keyword.declaration, storage.type.enum,storage.type.type, storage.type.const, storage.modifier.specifier	#A78CFA
punctuation.definition.block.tag.jsdoc,storage.type.class.jsdoc	#A78CFA	bold
support.module.node.js,support.type.object.module.js,support.type.object.module.ts,support.module.node.ts	#A78CFA	bold
punctuation.section.group.tex,punctuation.definition.arguments.begin.latex,punctuation.definition.arguments.end.latex,punctuation.definition.arguments.latex	#838FA7
meta.text.normal.tex,entity.name.section.latex,text.tex.latex,meta.function.environment.frame.latex,meta.function.environment.general.latex	#8A97C3
meta.group.braces.tex	#B0B7C3
string.other.math.tex	#98c379
variable.parameter.function.latex	#E4BF7F
punctuation.definition.constant.math.tex,constant.other.math.tex punctuation.definition.function.tex,support.class.math.block.environment.latex punctuation.definition.function.tex	#B0B7C3
text.tex.latex constant.other.math.tex,constant.other.general.math.tex,constant.other.general.math.tex,constant.character.math.tex,constant.other.reference.citation.latex	#B0B7C3
string.other.math.tex	#98c379
punctuation.definition.string.begin.tex,punctuation.definition.string.end.tex	#98c379
keyword.control.label.latex	#CF68E1	bold
variable.parameter.definition.label.latex	#E4BF7F
support.function.be.latex	#6495EE	bold
punctuation.definition.function.latex	#6495EE
keyword.control punctuation.definition.function.latex	#CF68E1
punctuation.definition.keyword.latex	#A78CFA
keyword.control punctuation.definition.function.latex,keyword.control punctuation.definition.keyword.latex	#A78CFA
support.function.section.latex,support.function.general.tex,support.function.general.tex punctuation.definition.function.tex,support.function.section.latex punctuation.definition.function.latex	#E06C75
punctuation.definition.function.tex	#6495EE
punctuation.math.operator.latex	#56B7C3
keyword.control.ref.latex,keyword.other.item.latex	#CF68E1	bold
punctuation.math.begin.bracket.curly,punctuation.math.end.bracket.curly	#838FA7
keyword.control.equation.newline.latex,keyword.control.newline.tex,keyword.other.item.latex punctuation.definition.keyword.latex	#CF68E1
keyword.control.equation.align.latex,keyword.control.preamble.latex,keyword.control.cite.latex,keyword.control.label.latex	#A78CFA	bold
meta.math.block.latex support.function.general.tex	#79859D

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