Flux Theme

Name: Flux Theme
Author: Danil Reznichenko

Publisher: Danil ReznichenkoThemes in package: 4

Flux themes for VS Code, Cursor, and other VS Code-compatible editors

GitHub

Color themes

VS Code preview

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

Flux Theme — Flux Twilight

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#0000
activityBar.activeBorder#F99B6C
activityBar.background#1E2233
activityBar.border#0000
activityBar.dropBorder#F99B6C
activityBar.foreground#D0D2DC
activityBar.inactiveForeground#484E70
activityBarBadge.background#A46CF9
activityBarBadge.foreground#F3ECFE
activityBarTop.activeBorder#F99B6C
activityBarTop.dropBorder#F99B6C
activityBarTop.foreground#D0D2DC
activityBarTop.inactiveForeground#484E70
badge.background#A46CF9
badge.foreground#FFF
breadcrumb.activeSelectionForeground#D0D2DC
breadcrumb.background#272B3F
breadcrumb.focusForeground#D0D2DC
breadcrumb.foreground#878DAB
breadcrumbPicker.background#272B3F
button.background#A46CF9
button.border#0000
button.foreground#FFF
button.hoverBackground#A46CF999
button.secondaryBackground#484E70
button.secondaryForeground#F4F4F6
button.secondaryHoverBackground#5E668D
button.separator#F4F4F6
checkbox.background#1E2233
checkbox.border#30344B
checkbox.foreground#ACB0C3
commandCenter.border#30344B
contrastActiveBorder#0000
contrastBorder#0000
debugConsole.errorForeground#F98BAC
debugConsole.infoForeground#8BC2F9
debugConsole.warningForeground#F9CD8B
debugConsoleInputIcon.foreground#484E70
debugExceptionWidget.border#30344B
debugIcon.breakpointForeground#F96C96
debugIcon.breakpointUnverifiedForeground#F96C96
debugIcon.continueForeground#8BC2F9
debugIcon.disconnectForeground#F98BAC
debugIcon.pauseForeground#8BC2F9
debugIcon.restartForeground#77F8C0
debugIcon.startForeground#77F8C0
debugIcon.stepBackForeground#8BC2F9
debugIcon.stepIntoForeground#76ECF9
debugIcon.stepOutForeground#76ECF9
debugIcon.stepOverForeground#8BC2F9
debugIcon.stopForeground#F9AF8B
debugToolBar.background#272B3F
debugToolBar.border#30344B
descriptionForeground#ACB0C3
diffEditor.border#30344B
diffEditor.diagonalFill#484E70
diffEditor.insertedLineBackground#5AF6B31A
diffEditor.insertedTextBackground#5AF6B31A
diffEditor.insertedTextBorder#0000
diffEditor.move.border#30344B
diffEditor.moveActive.border#30344B
diffEditor.removedLineBackground#F96C961A
diffEditor.removedTextBackground#F96C961A
diffEditor.removedTextBorder#0000
diffEditorGutter.insertedLineBackground#0000
diffEditorGutter.removedLineBackground#0000
disabledForeground#484E70
dropdown.background#30344B
dropdown.border#30344B
dropdown.foreground#ACB0C3
dropdown.listBackground#272B3F
editor.background#272B3F
editor.findMatchBackground#F99B6C66
editor.findMatchBorder#F99B6C
editor.findMatchHighlightBackground#A46CF966
editor.findMatchHighlightBorder#A46CF9
editor.findRangeHighlightBackground#878DAB1A
editor.findRangeHighlightBorder#0000
editor.foldBackground#30344B
editor.foreground#878DAB
editor.hoverHighlightBackground#ACB0C333
editor.inactiveSelectionBackground#5E668D1A
editor.lineHighlightBackground#30344B
editor.lineHighlightBorder#0000
editor.rangeHighlightBackground#878DAB1A
editor.selectionBackground#30344B
editor.selectionHighlightBackground#A46CF94D
editor.selectionHighlightBorder#A46CF9
editor.snippetFinalTabstopHighlightBackground#484E7066
editor.snippetFinalTabstopHighlightBorder#878DAB
editor.snippetTabstopHighlightBackground#484E7066
editor.snippetTabstopHighlightBorder#878DAB
editor.wordHighlightBackground#A46CF94D
editor.wordHighlightBorder#A46CF9
editor.wordHighlightStrongBackground#A46CF94D
editor.wordHighlightStrongBorder#A46CF9
editorBracketHighlight.foreground1#F9CD8B
editorBracketHighlight.foreground2#F98BF2
editorBracketHighlight.foreground3#76ECF9
editorBracketHighlight.foreground4#FAD59E
editorBracketHighlight.foreground5#FA9EF4
editorBracketHighlight.foreground6#93F0FB
editorBracketHighlight.unexpectedBracket.foreground#F96C96
editorBracketMatch.background#F9CD8B66
editorBracketMatch.border#30344B
editorBracketPairGuide.activeBackground1#F9CD8B
editorBracketPairGuide.activeBackground2#F98BF2
editorBracketPairGuide.activeBackground3#76ECF9
editorBracketPairGuide.activeBackground4#FAD59E
editorBracketPairGuide.activeBackground5#FA9EF4
editorBracketPairGuide.activeBackground6#93F0FB
editorCodeLens.foreground#484E70
editorCursor.foreground#F99B6C
editorError.foreground#F98BAC
editorGhostText.border#30344B
editorGhostText.foreground#484E70
editorGroup.border#30344B
editorGroup.dropBackground#878DAB1A
editorGroup.dropIntoPromptBackground#272B3F
editorGroup.dropIntoPromptBorder#161927
editorGroup.dropIntoPromptForeground#ACB0C3
editorGroup.emptyBackground#272B3F
editorGroupHeader.border#0000
editorGroupHeader.tabsBackground#1E2233
editorGroupHeader.tabsBorder#30344B
editorGutter.addedBackground#5AF6B3
editorGutter.background#272B3F
editorGutter.deletedBackground#F96C96
editorGutter.modifiedBackground#5AE7F6
editorHoverWidget.background#1E2233
editorHoverWidget.border#30344B
editorIndentGuide.activeBackground1#5E668D
editorIndentGuide.background1#484E70
editorInfo.foreground#8BC2F9
editorLineNumber.activeForeground#D0D2DC
editorLineNumber.foreground#484E70
editorLink.activeForeground#8BC2F9
editorMultiCursor.primary.foreground#F9CD8B
editorMultiCursor.secondary.foreground#FAD59E
editorOverviewRuler.background#0000
editorOverviewRuler.border#0000
editorStickyScroll.background#272B3F
editorStickyScroll.border#0000
editorStickyScroll.shadow#1619274D
editorStickyScrollHover.background#30344B
editorSuggestWidget.background#1E2233
editorSuggestWidget.border#30344B
editorSuggestWidget.focusHighlightForeground#A46CF9
editorSuggestWidget.foreground#878DAB
editorSuggestWidget.highlightForeground#C39EFA
editorSuggestWidget.selectedBackground#30344B
editorSuggestWidget.selectedForeground#D0D2DC
editorSuggestWidget.selectedIconForeground#D0D2DC
editorUnicodeHighlight.border#30344B
editorWarning.foreground#F9CD8B
editorWhitespace.foreground#484E70
editorWidget.background#272B3F
editorWidget.border#30344B
editorWidget.foreground#878DAB
editorWidget.resizeBorder#A46CF9
errorForeground#F96C96
extensionButton.prominentBackground#F9C16C
extensionButton.prominentForeground#F4F4F6
extensionButton.prominentHoverBackground#F9C16CCC
extensionIcon.preReleaseForeground#6CB2F9
extensionIcon.sponsorForeground#F99B6C
extensionIcon.starForeground#F9C16C
extensionIcon.verifiedForeground#6CB2F9
focusBorder#A46CF9
foreground#ACB0C3
gitDecoration.addedResourceForeground#77F8C0
gitDecoration.conflictingResourceForeground#FABD9E
gitDecoration.deletedResourceForeground#F98BAC
gitDecoration.ignoredResourceForeground#484E70
gitDecoration.modifiedResourceForeground#76ECF9
gitDecoration.renamedResourceForeground#52E0A3
gitDecoration.stageDeletedResourceForeground#E25A83
gitDecoration.stageModifiedResourceForeground#3DA2AE
gitDecoration.untrackedResourceForeground#52E0A3
icon.foreground#ACB0C3
inlineChat.border#30344B
inlineChatInput.border#30344B
input.background#30344B
input.border#30344B
input.foreground#878DAB
input.placeholderForeground#484E70
inputOption.activeBackground#A46CF966
inputOption.activeBorder#A46CF9
inputValidation.errorBackground#883A51E6
inputValidation.errorBorder#F96C96
inputValidation.errorForeground#FEECF1
inputValidation.infoBackground#3A6188E6
inputValidation.infoBorder#6CB2F9
inputValidation.infoForeground#ECF5FE
inputValidation.warningBackground#88693AE6
inputValidation.warningBorder#F9C16C
inputValidation.warningForeground#FEF7EC
keybindingLabel.background#30344B
keybindingLabel.border#30344B
keybindingLabel.bottomBorder#878DAB
keybindingLabel.foreground#878DAB
list.activeSelectionBackground#A46CF966
list.activeSelectionForeground#F4F4F6
list.activeSelectionIconForeground#D0D2DC
list.dropBackground#878DAB1A
list.errorForeground#F96C96
list.focusAndSelectionOutline#A46CF9
list.focusBackground#A46CF966
list.focusForeground#D0D2DC
list.focusHighlightForeground#D0D2DC
list.focusOutline#A46CF9
list.highlightForeground#B78BF9
list.hoverBackground#30344B99
list.hoverForeground#F4F4F6
list.inactiveFocusBackground#30344B
list.inactiveFocusOutline#0000
list.inactiveSelectionBackground#272B3F
list.warningForeground#F9C16C
menu.background#1E2233
menu.border#30344B
menu.foreground#878DAB
menu.selectionBackground#A46CF966
menu.selectionBorder#A46CF9
menu.selectionForeground#D0D2DC
menu.separatorBackground#30344B
menubar.selectionBackground#878DAB1A
menubar.selectionBorder#0000
menubar.selectionForeground#D0D2DC
merge.border#30344B
merge.currentContentBackground#5AE7F633
merge.currentHeaderBackground#5AE7F666
merge.incomingContentBackground#6CB2F933
merge.incomingHeaderBackground#6CB2F966
mergeEditor.change.background#FA9EBA33
mergeEditor.change.word.background#883A5199
mergeEditor.conflict.handled.minimapOverViewRuler#5E668D
mergeEditor.conflict.handledFocused.border#5E668D
mergeEditor.conflict.handledUnfocused.border#5E668D66
mergeEditor.conflict.unhandled.minimapOverViewRuler#F98BAC
mergeEditor.conflict.unhandledFocused.border#F98BAC
mergeEditor.conflict.unhandledUnfocused.border#F98BAC66
minimap.background#1619274D
minimap.findMatchHighlight#A46CF966
minimap.foregroundOpacity#161927CC
minimap.selectionHighlight#878DAB1A
multiDiffEditor.border#30344B
notificationCenter.border#30344B
notificationCenterHeader.background#1E2233
notificationCenterHeader.foreground#878DAB
notificationLink.foreground#8BC2F9
notifications.background#1E2233
notifications.border#30344B
notifications.foreground#ACB0C3
notificationsErrorIcon.foreground#E25A83
notificationsInfoIcon.foreground#5A9EE2
notificationsWarningIcon.foreground#E2AC5A
notificationToast.border#30344B
panel.background#272B3F
panel.border#30344B
panelInput.border#30344B
panelSection.border#30344B
panelSection.dropBackground#878DAB1A
panelSectionHeader.background#30344B
panelSectionHeader.border#30344B
panelTitle.activeBorder#F99B6C
panelTitle.activeForeground#D0D2DC
panelTitle.inactiveForeground#484E70
peekView.border#30344B
peekViewEditor.background#1E223399
peekViewEditor.matchHighlightBackground#F9CD8B66
peekViewEditor.matchHighlightBorder#F9CD8B
peekViewEditorGutter.background#1E223399
peekViewEditorStickyScroll.background#1E2233CC
peekViewResult.background#1E2233
peekViewResult.fileForeground#ACB0C3
peekViewResult.lineForeground#878DAB
peekViewResult.matchHighlightBackground#A46CF966
peekViewResult.selectionBackground#A46CF966
peekViewResult.selectionForeground#D0D2DC
peekViewTitle.background#1E2233
peekViewTitleDescription.foreground#484E70
peekViewTitleLabel.foreground#ACB0C3
pickerGroup.border#30344B
pickerGroup.foreground#30344B
progressBar.background#F99B6C
quickInput.background#1E2233
scrollbar.shadow#16192799
scrollbarSlider.activeBackground#F4F4F64D
scrollbarSlider.background#484E7066
scrollbarSlider.hoverBackground#F4F4F633
search.resultsInfoForeground#484E70
selection.background#878DAB4D
settings.dropdownBackground#1E2233
settings.dropdownBorder#30344B
settings.dropdownListBorder#30344B
settings.focusedRowBackground#30344B
settings.focusedRowBorder#A46CF9
settings.modifiedItemIndicator#A46CF9
settings.numberInputBackground#1E2233
settings.rowHoverBackground#30344B
settings.settingsHeaderHoverForeground#D0D2DC
settings.textInputBackground#1E2233
sideBar.background#1E2233
sideBar.border#30344B
sideBar.dropBackground#878DAB1A
sideBar.foreground#878DAB
sideBarActivityBarTop.border#30344B
sideBarSectionHeader.background#1E2233
sideBarSectionHeader.border#0000
sideBarSectionHeader.foreground#878DAB
sideBarStickyScroll.background#1E2233CC
sideBarStickyScroll.border#0000
sideBarStickyScroll.shadow#16192799
sideBarTitle.background#0000
sideBarTitle.foreground#878DAB
simpleFindWidget.sashBorder#A46CF9
statusBar.background#1E2233
statusBar.border#30344B
statusBar.debuggingBackground#B36F4D
statusBar.debuggingBorder#6D422C
statusBar.debuggingForeground#FEF2EC
statusBar.focusBorder#0000
statusBar.foreground#5E668D
statusBar.noFolderBackground#3FAB7C
statusBar.noFolderBorder#27684C
statusBar.noFolderForeground#ECFEF6
statusBarItem.activeBackground#0000
statusBarItem.errorBackground#E25A83
statusBarItem.errorForeground#FEECF1
statusBarItem.errorHoverForeground#FFF
statusBarItem.focusBorder#0000
statusBarItem.hoverForeground#F4F4F6
statusBarItem.remoteBackground#A46CF9
statusBarItem.remoteForeground#FFF
statusBarItem.remoteHoverBackground#16192733
statusBarItem.remoteHoverForeground#FFF
statusBarItem.warningBackground#E2AC5A
statusBarItem.warningForeground#FEF7EC
statusBarItem.warningHoverForeground#FFF
tab.activeBackground#272B3F
tab.activeBorder#272B3F
tab.activeBorderTop#F99B6C
tab.activeForeground#D0D2DC
tab.activeModifiedBorder#A46CF9
tab.border#0000
tab.dragAndDropBorder#F99B6C
tab.hoverBackground#272B3F
tab.hoverBorder#272B3F
tab.hoverForeground#D0D2DC
tab.inactiveBackground#1E2233
tab.inactiveForeground#484E70
tab.inactiveModifiedBorder#A46CF999
tab.selectedBorderTop#F99B6C
tab.unfocusedActiveBackground#272B3F
tab.unfocusedActiveBorder#272B3F
tab.unfocusedActiveBorderTop#F99B6C99
tab.unfocusedActiveForeground#878DAB
tab.unfocusedActiveModifiedBorder#A46CF999
tab.unfocusedHoverBackground#272B3F
tab.unfocusedHoverBorder#272B3F
tab.unfocusedHoverForeground#D0D2DC
tab.unfocusedInactiveBackground#1E2233
tab.unfocusedInactiveForeground#484E70
tab.unfocusedInactiveModifiedBorder#A46CF999
terminal.ansiBlack#30344B
terminal.ansiBlue#6CB2F9
terminal.ansiBrightBlack#484E70
terminal.ansiBrightBlue#8BC2F9
terminal.ansiBrightCyan#76ECF9
terminal.ansiBrightGreen#77F8C0
terminal.ansiBrightMagenta#F98BF2
terminal.ansiBrightRed#F98BAC
terminal.ansiBrightWhite#D0D2DC
terminal.ansiBrightYellow#F9CD8B
terminal.ansiCyan#5AE7F6
terminal.ansiGreen#5AF6B3
terminal.ansiMagenta#F96CEF
terminal.ansiRed#F96C96
terminal.ansiWhite#ACB0C3
terminal.ansiYellow#F9C16C
terminal.background#272B3F
terminal.border#30344B
terminal.dropBackground#878DAB1A
terminal.foreground#ACB0C3
terminal.hoverHighlightBackground#30344BE6
terminal.inactiveSelectionBackground#5E668D1A
terminal.selectionBackground#30344B
terminal.tab.activeBorder#F99B6C
terminalCursor.foreground#F99B6C
terminalStickyScroll.border#0000
textBlockQuote.background#30344B
textBlockQuote.border#484E70
textCodeBlock.background#1E2233
textLink.activeForeground#6CB2F9
textLink.foreground#8BC2F9
textPreformat.background#30344B
textPreformat.foreground#FAD59E
titleBar.activeBackground#1E2233
titleBar.activeForeground#878DAB
titleBar.border#30344B
titleBar.inactiveBackground#272B3F
titleBar.inactiveForeground#878DAB
toolbar.activeBackground#484E7099
toolbar.hoverBackground#484E7066
toolbar.hoverOutline#0000
tree.inactiveIndentGuidesStroke#30344B
tree.indentGuidesStroke#5E668D
welcomePage.buttonBackground#30344B
welcomePage.buttonHoverBackground#484E70
welcomePage.progress.background#484E70
welcomePage.progress.foreground#A46CF9
welcomePage.tileBackground#30344B
welcomePage.tileHoverBackground#484E70
widget.border#30344B
widget.shadow#1E2233

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#5E668D	—
keyword	#B78BF9	—
storage.type	#B78BF9	—
entity.name.function	#8BC2F9	—
constant.numeric	#F9AF8B	—
string	#77F8C0	—
support.type, support.variable.dom, support.variable.property, support.variable.property.dom, storage.modifier.import, constant.other.php, variable.other.object.cs, 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.cpp	#F98BAC	—
entity.name.type, entity.name.type.class	#FA9EF4	—
variable	#ACB0C3	—
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	#FAD59E	—
variable.parameter.url.css	#77F8C0	—
variable.other.less, variable.other.sass, variable.scss, meta.function.calc.css, source.sass variable.other	#FAD59E	—
variable.other.readwrite.alias, entity.name.type.module, entity.name.package, variable.other, support.variable, meta.definition.variable, variable.other.object, variable.other.readwrite, 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, source.python, meta.item-access.python, meta.function-call.arguments.python, meta.item-access.arguments.python, variable.parameter.keyframe-list.css, meta.property-value.css, source.css.less	#ACB0C3	—
variable.other.property, variable.other.object.property, variable.other.constant.property	#9ECCFA	—
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	#ACB0C3	—
keyword.operator.assignment, meta.property-value.css keyword.operator.less	#ACB0C3	—
keyword.operator.key.php	#BADBFCCC	—
keyword.operator.expression.typeof, keyword.other.typeof, keyword.operator.expression.instanceof, keyword.operator.instanceof	#52D2E0	—
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	#ACB0C3	—
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	#ACB0C3	—
punctuation.accessor, punctuation.separator.period, punctuation.separator.dot-access, punctuation.separator.method, punctuation.other.period, punctuation.dot, meta.delimiter.property.period	#ACB0C3	bold
meta.parameters.js	#ACB0C3	—
support.constant.font-name	#77F8C0	—
support.constant.property-value.scss, support.constant.property-value.css, support.constant.vendored.property-value.css	#FA9EF4	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#8BC2F9	—
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.property-value.scss	#9ECCFA	italic
keyword.operator.negation.regexp, keyword.control.anchor.regexp, punctuation.definition.group.capture.regexp, keyword.operator.quantifier.regexp	#FAD59E	—
support.class	#8BC2F9	—
support.class.console, support.class.component	#FA9EBA	—
support.class.builtin	#8BC2F9	—
entity.name.class	#8BC2F9	—
meta.method.declaration	#8BC2F9	—
storage.type.function.arrow	#B78BF9	—
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, variable.language.import-all, constant.language.import-export-all, storage.modifier.reference, storage.modifier.pointer	#52D2E0	—
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	#B78BF9	—
keyword.operator.expression.in, keyword.operator.expression.of	#F98BF2	—
keyword.control, keyword.other.using, keyword.preprocessor.elif, keyword.preprocessor.if, keyword.preprocessor.else, keyword.preprocessor.endif, storage.modifier.extends, keyword.control.directive, punctuation.definition.directive, punctuation.separator.hash, storage.type.modifier, keyword.control.export, keyword.control.import, keyword.control.at-rule.import.css, keyword.control.at-rule.import.less, keyword.control.at-rule.import.sass, keyword.other.import, keyword.import, keyword.package, keyword.control.flow, keyword.other.special-method.ruby, keyword.input, keyword.type.graphql, entity.name.function.definition.special.constructor.cpp, keyword.cmake	#F98BF2	—
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, punctuation.separator.namespace, keyword.operator.dart	#F98BF2	—
keyword.control.from, entity.other.keyframe-offset	#F98BF2	—
entity.name.function, support.type.pthread, entity.name.scope-resolution.function, meta.block.class.cpp meta.body.class.cpp meta.block.class.cpp entity.name.function.definition.special.constructor.cpp	#6CB2F9	—
support.function, meta.function-call, support.function.construct.output, invalid.deprecated.gradient.function.css, invalid.deprecated.function.css, support.function.console, support.function.dom	#52D2E0	—
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	#8BC2F9	—
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.modifier, storage.type.modifier.cpp, storage.type.language.primitive.cpp, storage.type.built-in.primitive.c, storage.type.struct, storage.type.template, support.type.built-in.posix-reserved.pthread	#B78BF9	—
keyword.control.default	#F98BF2	—
support.type.primitive, support.type.builtin, entity.name.type.instance, entity.name.type.alias.ts, storage.type.string, storage.type.numeric, storage.type.boolean, storage.type.primitive, meta.type.annotation, meta.method.identifier, meta.return.type, meta.type.parameters, keyword.interface, storage.type.generic, entity.name.type.interface, entity.other.inherited-class, storage.type.cs, entity.name.type.struct, keyword.type, entity.name.type.type-parameter, storage.type.object.array, storage.type.java, entity.name.type.delegate, storage.type.c, support.class.dart, meta.declaration.dart, meta.type.declaration, meta.block.ts, meta.class-struct-block.cpp entity.name.type.cpp, support.type.graphql, meta.function.definition.parameters storage.type.built-in.primitive.c, 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	#FA9EF4	—
entity.name.type.js, new.expr.ts	#8BC2F9	—
string, punctuation.definition.string.begin.html, punctuation.definition.string.end.html	#77F8C0	—
constant.language, constant.language.boolean, keyword.operator.expression.void, constant.language.json	#A46CF9	italic bold
constant.numeric, keyword.other.unit, support.constant.dom, constant.other.character-class.regexp, meta.attribute.id.html entity.other.attribute-name.html, entity.other.attribute-name.id, support.constant.math, support.constant.property.math, support.constant.ext, support.constant.core, variable.other.enummember, constant.other.enum, entity.name.variable.enum-member, entity.name.variable.preprocessor.symbol, entity.name.function.preprocessor.c, entity.other.keyframe-offset.percentage.css, variable.other.constant, constant.other.js	#F9AF8B	—
beginning.punctuation.definition.quote	#8BC2F9	—
fenced_code.block.language	#F98BAC	italic
entity.name.tag, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#E25A83	—
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	#878DAB	—
text.html.basic, text.html, meta.paragraph, text.html.php, text.html.derivative, text.html.wxml, text.xml, text.html, source.js, source.ignore, source.nginx, text	#ACB0C3	—
meta.jsx.children	#ACB0C3	—
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.generic.begin.html, punctuation.definition.generic.end.html, 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	#ACB0C3	—
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	#ACB0C3	—
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	#ACB0C3	—
support.type.property-name.css, support.type.vendored.property-name.css, meta.at-rule.each.scss support.constant.property-value.css, source.css.scss, entity.name.tag.css	#9ECCFACC	—
entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name	#52D2E0	—
entity.other.attribute-name.class.mixin	#8BC2F9	—
entity.other.attribute-name.class.css, selector.sass, entity.other.attribute-name.parent-selector.css, meta.at-rule.extend.scss	#77F8C0	—
entity.other.attribute-name.pseudo-class.css, support.type.property-name.media.css, support.constant.media.css	#52D2E0	—
entity.other.attribute-name.pseudo-element.css	#F98BAC	—
beginning.punctuation.definition.list, beginning.punctuation.definition.quote	#8BC2F9	—
string.other.link.title, string.other.link.description	#8BC2F9	—
string.regexp	#77F8C0	—
keyword.other	#F98BAC	—
constant.character.escape	#52D2E0	—
invalid, invalid.illegal, invalid.illegal.expected-dictionary-separator.json, invalid.broken, invalid.deprecated	#E25A83	italic bold underline
source.json meta.structure.dictionary.json > string.quoted.json	#F98BAC	—
source.json meta.structure.dictionary.json > value.json > string.quoted.json, source.json meta.structure.array.json > value.json > string.quoted.json, source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation, source.json meta.structure.array.json > value.json > string.quoted.json > punctuation	#77F8C0	—
support.type.property-name.json	#9ECCFA	—
variable.other.global.safer.php, variable.other.global.php	#FAD59E	—
variable.language.self, variable.language.this, variable.language.super, variable.language.special.self.python, variable.language.dart, keyword.operator.delete, keyword.operator.expression.delete	#FABD9E	italic bold
token.info-token	#6CB2F9	italic bold
token.warn-token	#F9C16C	italic bold
token.error-token	#F96C96	italic bold
token.debug-token, keyword.other.debugger	#F96CEF	italic bold
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, keyword.operator.closure.dart, storage.type.enum, storage.type.type, keyword.control.at-rule.function, keyword.control.at-rule.mixin, storage.type.const	#B78BF9	—
punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc, keyword.control.at-rule.keyframes.css	#B78BF9	—
support.module.node.js, support.type.object.module.js, support.type.object.module.ts, support.module.node.ts	#B78BF9	—
markup.bold, punctuation.definition.bold	#FAD59E	—
comment.markup.link, punctuation.definition.comment, markup.quote	#5E668D	italic
entity.name.section, markup.heading, punctuation.definition.heading	#F98BAC	—
markup.italic, punctuation.definition.italic	#FA9EF4	italic
markup.inline.raw	#77F8C0	—
markup.underline.link, markup.underline.link.image, punctuation.definition.metadata	#9ECCFA	—
markup.inline.raw.string, punctuation.definition.raw, markup.fenced_code.block, markup.fenced_code.block punctuation, markup.raw.block	#C39EFA	—
markup.underline	—	underline
markup.strikethrough	—	strikethrough

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