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 Daylight

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#0000
activityBar.activeBorder#FD712B
activityBar.background#F4F5F5
activityBar.border#0000
activityBar.dropBorder#FD8C53
activityBar.foreground#252B37
activityBar.inactiveForeground#8F96A3
activityBarBadge.background#6E7687
activityBarBadge.foreground#FFF
activityBarTop.activeBorder#FD8C53
activityBarTop.dropBorder#FD8C53
badge.background#6E7687
badge.foreground#FFF
breadcrumb.background#FFF
breadcrumbPicker.background#FFF
button.background#6E7687
button.border#0000
button.foreground#FFF
button.hoverBackground#393F4C99
button.secondaryBackground#D3D5D9
button.secondaryForeground#252B37
button.secondaryHoverBackground#B2B6BD
checkbox.background#F4F5F5
checkbox.border#B2B6BD
checkbox.foreground#252B37
contrastActiveBorder#0000
contrastBorder#0000
debugToolBar.background#FFF
debugToolBar.border#0000
descriptionForeground#B2B6BD
diffEditor.border#0000
diffEditor.insertedTextBorder#0000
diffEditor.removedTextBorder#0000
diffEditorGutter.insertedLineBackground#0000
diffEditorGutter.removedLineBackground#0000
disabledForeground#B2B6BD
dropdown.background#F4F5F5
dropdown.border#B2B6BD
dropdown.foreground#252B37
dropdown.listBackground#FFF
editor.background#FFF
editor.findMatchBackground#FD712B66
editor.findMatchBorder#FD712B
editor.findMatchHighlightBackground#6E76874D
editor.findMatchHighlightBorder#6E7687
editor.findRangeHighlightBackground#6E768733
editor.findRangeHighlightBorder#0000
editor.foldBackground#B2B6BD1A
editor.foreground#252B37
editor.hoverHighlightBackground#F4F5F5
editor.inactiveSelectionBackground#8F96A31A
editor.lineHighlightBackground#F4F5F5
editor.lineHighlightBorder#0000
editor.rangeHighlightBackground#F4F5F5
editor.selectionBackground#8F96A333
editor.selectionHighlightBackground#6E768733
editor.selectionHighlightBorder#6E7687
editor.wordHighlightBackground#6E76871A
editor.wordHighlightBorder#6E7687
editor.wordHighlightStrongBackground#6E76871A
editor.wordHighlightStrongBorder#6E7687
editorBracketHighlight.foreground1#7225E4
editorBracketHighlight.foreground2#E425D7
editorBracketHighlight.foreground3#05CFE6
editorBracketHighlight.foreground4#2585E4
editorBracketHighlight.foreground5#B620AC
editorBracketHighlight.foreground6#04A2B4
editorBracketHighlight.unexpectedBracket.foreground#F50A51
editorBracketMatch.background#35DE954D
editorBracketMatch.border#04BE6D
editorBracketPairGuide.activeBackground1#7225E4
editorBracketPairGuide.activeBackground2#E425D7
editorBracketPairGuide.activeBackground3#05CFE6
editorBracketPairGuide.activeBackground4#2585E4
editorBracketPairGuide.activeBackground5#B620AC
editorBracketPairGuide.activeBackground6#04A2B4
editorCursor.foreground#FD8C53
editorError.foreground#F50A51
editorGroup.border#B2B6BD
editorGroup.dropBackground#6E768733
editorGroupHeader.border#0000
editorGroupHeader.tabsBackground#F4F5F5
editorGroupHeader.tabsBorder#B2B6BD
editorGutter.addedBackground#04D279
editorGutter.background#FFF
editorGutter.deletedBackground#F50A51
editorGutter.modifiedBackground#05E1FA
editorIndentGuide.activeBackground1#B2B6BD
editorIndentGuide.background1#D3D5D9
editorInfo.foreground#2B94FD
editorLineNumber.activeForeground#252B37
editorLineNumber.foreground#B2B6BD
editorOverviewRuler.background#0000
editorOverviewRuler.border#0000
editorStickyScroll.border#0000
editorStickyScroll.shadow#0B0E1333
editorSuggestWidget.focusHighlightForeground#6E7687
editorWarning.foreground#FDA92B
editorWhitespace.foreground#B2B6BD
editorWidget.background#FFF
editorWidget.border#6E7687
editorWidget.resizeBorder#6E7687
errorForeground#F50A51
focusBorder#6E7687
foreground#252B37
gitDecoration.addedResourceForeground#04BE6D
gitDecoration.conflictingResourceForeground#FEA072
gitDecoration.deletedResourceForeground#E1094A
gitDecoration.ignoredResourceForeground#8F96A3
gitDecoration.modifiedResourceForeground#05CFE6
gitDecoration.renamedResourceForeground#025A34
gitDecoration.stageDeletedResourceForeground#620420
gitDecoration.stageModifiedResourceForeground#025A64
gitDecoration.untrackedResourceForeground#025A34
input.background#FFF
input.border#B2B6BD
input.foreground#252B37
input.placeholderForeground#B2B6BD
inputOption.activeBackground#6E76874D
inputOption.activeBorder#6E7687
inputValidation.errorBorder#F50A51
inputValidation.infoBorder#2B94FD
inputValidation.warningBorder#FDA92B
list.activeSelectionBackground#D3D5D9
list.activeSelectionForeground#252B37
list.dropBackground#6E768733
list.focusBackground#6E768733
list.hoverBackground#D3D5D999
list.hoverForeground#252B37
list.inactiveFocusBackground#6E768733
list.inactiveFocusOutline#0000
list.inactiveSelectionBackground#D3D5D999
list.inactiveSelectionForeground#252B37
menu.selectionBackground#6E768766
menu.selectionBorder#6E7687
menubar.selectionBorder#0000
merge.border#0000
minimap.findMatchHighlight#6E76874D
notificationCenterHeader.background#FFF
notificationCenterHeader.foreground#6E7687
notificationLink.foreground#53A8FD
notifications.background#FFF
notifications.border#B2B6BD
notifications.foreground#252B37
notificationsErrorIcon.foreground#E1094A
notificationsInfoIcon.foreground#2585E4
notificationsWarningIcon.foreground#E49825
notificationToast.border#B2B6BD
panel.background#FFF
panel.border#B2B6BD
panelInput.border#B2B6BD
panelSection.dropBackground#6E768733
panelSectionHeader.background#F4F5F5
panelTitle.activeBorder#FD8C53
panelTitle.activeForeground#252B37
panelTitle.inactiveForeground#B2B6BD
peekViewResult.matchHighlightBackground#6E76874D
peekViewResult.selectionBackground#6E76874D
pickerGroup.border#B2B6BD
pickerGroup.foreground#252B37
progressBar.background#FD8C53
quickInput.background#FFF
quickInput.foreground#252B37
scrollbar.shadow#0B0E1366
scrollbarSlider.activeBackground#8F96A380
scrollbarSlider.background#8F96A333
scrollbarSlider.hoverBackground#8F96A366
settings.headerForeground#252B37
settings.modifiedItemIndicator#6E7687
sideBar.background#F4F5F5
sideBar.border#B2B6BD
sideBar.dropBackground#6E768733
sideBar.foreground#4F5869
sideBarActivityBarTop.border#0000
sideBarSectionHeader.background#F4F5F5
sideBarSectionHeader.border#0000
sideBarSectionHeader.foreground#252B37
sideBarStickyScroll.border#0000
sideBarStickyScroll.shadow#0B0E1366
sideBarTitle.background#0000
sideBarTitle.foreground#252B37
simpleFindWidget.sashBorder#6E7687
statusBar.background#4F5869
statusBar.border#393F4C
statusBar.debuggingBackground#B65220
statusBar.debuggingBorder#682F12
statusBar.debuggingForeground#FFF1EB
statusBar.focusBorder#0000
statusBar.foreground#B2B6BD
statusBar.noFolderBackground#039656
statusBar.noFolderBorder#025A34
statusBar.noFolderForeground#E5FBF1
statusBarItem.activeBackground#0000
statusBarItem.errorBackground#E1094A
statusBarItem.errorForeground#FEEBF1
statusBarItem.errorHoverForeground#FFF
statusBarItem.focusBorder#0000
statusBarItem.hoverForeground#FFF
statusBarItem.remoteBackground#6E7687
statusBarItem.remoteForeground#FFF
statusBarItem.remoteHoverBackground#0B0E1333
statusBarItem.remoteHoverForeground#FFF
statusBarItem.warningBackground#E49825
statusBarItem.warningForeground#FFF7EB
statusBarItem.warningHoverForeground#FFF
tab.activeBackground#FFF
tab.activeBorder#FFF
tab.activeBorderTop#FD8C53
tab.activeForeground#181D25
tab.activeModifiedBorder#6E7687
tab.border#B2B6BD
tab.dragAndDropBorder#FD8C53
tab.hoverBackground#FFF
tab.hoverForeground#252B37
tab.inactiveBackground#F4F5F5
tab.inactiveForeground#B2B6BD
tab.inactiveModifiedBorder#6E768799
tab.selectedBorderTop#FD8C53
tab.unfocusedActiveBackground#FFF
tab.unfocusedActiveBorder#FFF
tab.unfocusedActiveBorderTop#FD8C53
tab.unfocusedActiveModifiedBorder#6E768799
tab.unfocusedHoverBackground#FFF
tab.unfocusedHoverBorder#FFF
tab.unfocusedInactiveBackground#F4F5F5
tab.unfocusedInactiveModifiedBorder#6E768799
terminal.ansiBlack#393F4C
terminal.ansiBlue#2B94FD
terminal.ansiBrightBlack#4F5869
terminal.ansiBrightBlue#53A8FD
terminal.ansiBrightCyan#35E9FD
terminal.ansiBrightGreen#35DE95
terminal.ansiBrightMagenta#FD53F2
terminal.ansiBrightRed#F73B73
terminal.ansiBrightWhite#F4F5F5
terminal.ansiBrightYellow#FDB953
terminal.ansiCyan#05E1FA
terminal.ansiGreen#04D279
terminal.ansiMagenta#FD2BEF
terminal.ansiRed#F50A51
terminal.ansiWhite#D3D5D9
terminal.ansiYellow#FDA92B
terminal.background#FFF
terminal.border#B2B6BD
terminal.dropBackground#6E768733
terminal.foreground#4F5869
terminal.tab.activeBorder#FD712B
terminalCursor.foreground#FD8C53
terminalStickyScroll.border#0000
textBlockQuote.background#F4F5F5
textBlockQuote.border#D3D5D9
textCodeBlock.background#F4F5F5
textLink.activeForeground#2585E4
textLink.foreground#2B94FD
titleBar.activeBackground#F4F5F5
titleBar.activeForeground#252B37
titleBar.border#B2B6BD
titleBar.inactiveBackground#D3D5D9
titleBar.inactiveForeground#B2B6BD
toolbar.hoverOutline#0000
tree.inactiveIndentGuidesStroke#D3D5D9
tree.indentGuidesStroke#B2B6BD
welcomePage.buttonBackground#F4F5F5
welcomePage.buttonHoverBackground#D3D5D9
welcomePage.progress.foreground#6E7687
widget.shadow#B2B6BD

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#B2B6BD	—
keyword	#7225E4	—
storage.type	#7225E4	—
entity.name.function	#2585E4	—
constant.numeric	#E46525	—
string	#04BE6D	—
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	#E1094A	—
entity.name.type, entity.name.type.class	#FD2BEF	—
variable	#6E7687	—
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	#FDA92B	—
variable.parameter.url.css	#04BE6D	—
variable.other.less, variable.other.sass, variable.scss, meta.function.calc.css, source.sass variable.other	#FDA92B	—
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	#4F5869	—
variable.other.property, variable.other.object.property, variable.other.constant.property	#2585E4	—
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	#6E7687	—
keyword.operator.assignment, meta.property-value.css keyword.operator.less	#6E7687	—
keyword.operator.key.php	#72B8FECC	—
keyword.operator.expression.typeof, keyword.other.typeof, keyword.operator.expression.instanceof, keyword.operator.instanceof	#04A2B4	—
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	#6E7687	—
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	#6E7687	—
punctuation.accessor, punctuation.separator.period, punctuation.separator.dot-access, punctuation.separator.method, punctuation.other.period, punctuation.dot, meta.delimiter.property.period	#6E7687	bold
meta.parameters.js	#6E7687	—
support.constant.font-name	#04BE6D	—
support.constant.property-value.scss, support.constant.property-value.css, support.constant.vendored.property-value.css	#FD2BEF	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#2585E4	—
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	#2B94FD	italic
keyword.operator.negation.regexp, keyword.control.anchor.regexp, punctuation.definition.group.capture.regexp, keyword.operator.quantifier.regexp	#FDA92B	—
support.class	#2585E4	—
support.class.console, support.class.component	#F50A51	—
support.class.builtin	#2585E4	—
entity.name.class	#2585E4	—
meta.method.declaration	#2585E4	—
storage.type.function.arrow	#7225E4	—
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	#04A2B4	—
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	#7225E4	—
keyword.operator.expression.in, keyword.operator.expression.of	#E425D7	—
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	#E425D7	—
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	#E425D7	—
keyword.control.from, entity.other.keyframe-offset	#E425D7	—
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	#206BB6	—
support.function, meta.function-call, support.function.construct.output, invalid.deprecated.gradient.function.css, invalid.deprecated.function.css, support.function.console, support.function.dom	#04A2B4	—
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	#2585E4	—
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	#7225E4	—
keyword.control.default	#E425D7	—
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	#FD2BEF	—
entity.name.type.js, new.expr.ts	#2585E4	—
string, punctuation.definition.string.begin.html, punctuation.definition.string.end.html	#04BE6D	—
constant.language, constant.language.boolean, keyword.operator.expression.void, constant.language.json	#5C20B6	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	#E46525	—
beginning.punctuation.definition.quote	#2585E4	—
fenced_code.block.language	#E1094A	italic
entity.name.tag, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#B0073A	—
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	#8F96A3	—
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	#6E7687	—
meta.jsx.children	#6E7687	—
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	#6E7687	—
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	#6E7687	—
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	#6E7687	—
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	#2B94FDCC	—
entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name	#04A2B4	—
entity.other.attribute-name.class.mixin	#2585E4	—
entity.other.attribute-name.class.css, selector.sass, entity.other.attribute-name.parent-selector.css, meta.at-rule.extend.scss	#04BE6D	—
entity.other.attribute-name.pseudo-class.css, support.type.property-name.media.css, support.constant.media.css	#04A2B4	—
entity.other.attribute-name.pseudo-element.css	#E1094A	—
beginning.punctuation.definition.list, beginning.punctuation.definition.quote	#2585E4	—
string.other.link.title, string.other.link.description	#2585E4	—
string.regexp	#04BE6D	—
keyword.other	#E1094A	—
constant.character.escape	#04A2B4	—
invalid, invalid.illegal, invalid.illegal.expected-dictionary-separator.json, invalid.broken, invalid.deprecated	#B0073A	italic bold underline
source.json meta.structure.dictionary.json > string.quoted.json	#E1094A	—
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	#04BE6D	—
support.type.property-name.json	#206BB6	—
variable.other.global.safer.php, variable.other.global.php	#FDA92B	—
variable.language.self, variable.language.this, variable.language.super, variable.language.special.self.python, variable.language.dart, keyword.operator.delete, keyword.operator.expression.delete	#FD712B	italic bold
token.info-token	#206BB6	italic bold
token.warn-token	#B67A20	italic bold
token.error-token	#B0073A	italic bold
token.debug-token, keyword.other.debugger	#B620AC	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	#7225E4	—
punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc, keyword.control.at-rule.keyframes.css	#7225E4	—
support.module.node.js, support.type.object.module.js, support.type.object.module.ts, support.module.node.ts	#7225E4	—
markup.bold, punctuation.definition.bold	#FDA92B	—
comment.markup.link, punctuation.definition.comment, markup.quote	#B2B6BD	italic
entity.name.section, markup.heading, punctuation.definition.heading	#E1094A	—
markup.italic, punctuation.definition.italic	#FD2BEF	italic
markup.inline.raw	#04BE6D	—
markup.underline.link, markup.underline.link.image, punctuation.definition.metadata	#2B94FD	—
markup.inline.raw.string, punctuation.definition.raw, markup.fenced_code.block, markup.fenced_code.block punctuation, markup.raw.block	#7F2BFD	—
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}!`;
}