Duotoned

Name: Duotoned
Author: Tobias Timm

Publisher: Tobias TimmThemes in package: 2

Duotoned is an opinionated version of the duotone syntax for vscode

Open in VS Code GitHub

Color themes

VS Code preview

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

Duotoned — Duotoned - darkSEA

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#101922
activityBar.foreground#d6e9ff
activityBarBadge.background#32ae85
activityBarBadge.foreground#d6e9ff
badge.background#32ae85
badge.foreground#d6e9ff
breadcrumb.activeSelectionForeground#88b4e7
breadcrumb.focusForeground#d6e9ff
breadcrumb.foreground#c0c5cd
breadcrumbPicker.background#101922
button.background#32ae85
button.foreground#d6e9ff
button.hoverBackground#34febb
debugToolBar.background#32ae85
dropdown.background#030C3050
dropdown.foreground#d6e9ff
editor.background#1d262f
editor.findMatchHighlightBackground#42675a
editor.foreground#d6e9ff
editor.lineHighlightBackground#65737e30
editor.selectionBackground#32ae8575
editor.selectionHighlightBackground#32ae8575
editor.wordHighlightBackground#32ae8575
editor.wordHighlightStrongBackground#abb2bf26
editorCursor.foreground#b6bcc4
editorError.foreground#E15A60
editorGroup.border#181A1F
editorGroup.dropBackground#1c1f26
editorGroup.emptyBackground#181A1F
editorGroupHeader.tabsBackground#1c1f26
editorGroupHeader.tabsBorder#282c35
editorGutter.addedBackground#99C794
editorGutter.background#1d262f
editorGutter.deletedBackground#E15A60
editorGutter.modifiedBackground#88b4e7
editorHoverWidget.background#232830
editorHoverWidget.border#181A1F
editorIndentGuide.background#3B4048
editorLineNumber.foreground#495162
editorLink.activeForeground#42675a
editorMarkerNavigation.background#21252b
editorOverviewRuler.addedForeground#99C794
editorOverviewRuler.deletedForeground#E15A60
editorOverviewRuler.errorForeground#E15A60
editorOverviewRuler.infoForeground#6f7899
editorOverviewRuler.modifiedForeground#88b4e7
editorOverviewRuler.warningForeground#ffedcb
editorRuler.foreground#abb2bf26
editorSuggestWidget.background#21252B
editorSuggestWidget.border#181A1F
editorSuggestWidget.selectedBackground#2c313a
editorWhitespace.foreground#3B4048
editorWidget.background#21252B
extensionButton.prominentBackground#32ae85
extensionButton.prominentForeground#d4d4d4
extensionButton.prominentHoverBackground#42675a
focusBorder#32ae8575
gitDecoration.addedResourceForgeround#99C794
gitDecoration.conflictingResourceForeground#E15A60
gitDecoration.deletedResourceForeground#586f89
gitDecoration.ignoredResourceForeground#586f89
gitDecoration.modifiedResourceForeground#88b4e7
gitDecoration.untrackedResourceForeground#E15A60
input.background#1c1f26
input.border#32ae8575
list.activeSelectionBackground#65737e30
list.activeSelectionForeground#dfe1e8
list.focusBackground#65737e30
list.focusForeground#dfe1e8
list.highlightForeground#42675a
list.hoverBackground#65737e30
list.hoverForeground#c0c5cd
list.inactiveSelectionBackground#65737e30
list.inactiveSelectionForeground#dfe1e8
notificationCenterHeader.foreground#d4d4d4
notifications.background#282c35
notifications.border#181A1F
notifications.foreground#d4d4d4
panel.background#1d262f
panel.border#181A1F
peekView.border#32ae8575
peekViewEditor.matchHighlightBackground#29244b
peekViewEditor.matchHighlightBorder#32ae8590
peekViewTitle.background#1c1f26
peekViewTitleDescription.foreground#d4d4d4
peekViewTitleLabel.foreground#d4d4d4
pickerGroup.border#32ae8575
pickerGroup.foreground#42675a
progressBar.background#32ae8575
scrollbar.shadow#282c35
scrollbarSlider.activeBackground#32ae8575
scrollbarSlider.background#32ae8560
scrollbarSlider.hoverBackground#32ae8575
sideBar.background#101922
sideBar.border#232830
sideBar.foreground#d6e9ff75
sideBarSectionHeader.background#1c1f26
sideBarSectionHeader.foreground#c0c5cd
statusBar.background#092119
statusBar.debuggingBackground#32ae85
statusBar.debuggingBorder#32ae85
statusBar.debuggingForeground#d6e9ff
statusBar.foreground#9da5b4
statusBar.noFolderBackground#21252B
statusBarItem.hoverBackground#2c313a
tab.activeBackground#1d262f
tab.border#1c1f26
tab.inactiveBackground#1c1f26
titleBar.activeBackground#101922
titleBar.activeForeground#9da5b4
titleBar.inactiveBackground#101922
titleBar.inactiveForeground#6B717D
widget.shadow#282c35

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#586f89	italic
punctuation.decorator.js, punctuation.decorator.js.jsx, punctuation.decorator.ts, punctuation.decorator.tsx, meta.decorator.js meta.function-call.js entity.name.function.js, meta.decorator.js.jsx meta.function-call.js.jsx entity.name.function.js.jsx, meta.decorator.ts meta.function-call.ts entity.name.function.ts, meta.decorator.tsx meta.function-call.tsx entity.name.function.tsx	#88b4e7	—
meta.decorator.js meta.function-call.js entity.name.function.js, meta.decorator.js.jsx meta.function-call.js.jsx entity.name.function.js.jsx, meta.decorator.ts meta.function-call.ts entity.name.function.ts, meta.decorator.tsx meta.function-call.tsx entity.name.function.tsx	#32ae85	—
source.reason keyword.other, source.reason storage.type, source.reason support.class entity.name.class	#34febb	italic
source.reason markup.inserted constant.language support.property-value	#34febb	—
source.reason support.class entity.name.class	#d6e9ff	—
source.reason string.double	#34febb	—
source.reason keyword.control.less	#34febb	—
entity.name.variable	#d6e9ff	—
source.js meta.object-literal.key.js, source.js.jsx meta.object-literal.key.js.jsx, source.ts meta.object-literal.key.ts, source.tsx meta.object-literal.key.tsx, source.js variable.object.property.js, source.js.jsx variable.object.property.js.jsx, source.ts variable.object.property.ts, source.tsx variable.object.property.tsx	#5d8cc0	—
support.variable.property.js, support.variable.property.js.jsx, support.variable.property.ts, support.variable.property.tsx, support.variable.property.coffee, source.js support.variable.property, source.js.jsx support.variable.property, source.ts support.variable.property, source.tsx support.variable.property, source.coffee support.variable.property	#88b4e7	—
meta.block.js variable.other.constant.property.js, meta.block.js.jsx variable.other.constant.property.js.jsx, meta.block.ts variable.other.constant.property.ts, meta.block.tsx variable.other.constant.property.tsx, meta.block.coffee variable.other.constant.property.coffee	#34febb	—
meta.tag.attributes.js meta.var.expr.js keyword.operator.assignment.js, meta.tag.attributes.js.jsx meta.var.expr.js.jsx keyword.operator.assignment.js.jsx, meta.tag.attributes.tsx meta.var.expr.tsx keyword.operator.assignment.tsx	#34febb	—
meta.tag.attributes.js keyword.operator.assignment.js, meta.tag.attributes.js.jsx keyword.operator.assignment.js.jsx, meta.tag.attributes.tsx keyword.operator.assignment.tsx, meta.tag.any.html	#d6e9ff	—
source.js entity.name.function.tagged-template.js, source.js.jsx entity.name.function.tagged-template.js.jsx, source.ts entity.name.function.tagged-template.ts, source.tsx entity.name.function.tagged-template.tsx, source.coffee entity.name.function.tagged-template.coffee	#34febb	—
source.js entity.name.function.graphql, source.js.jsx entity.name.function.graphql, source.ts entity.name.function.graphql, source.tsx entity.name.function.graphql, source.coffee entity.name.function.graphql, entity.name.function.graphql	#34febb	—
source.js support.type.builtin.graphql, source.js.jsx support.type.builtin.graphql, source.ts support.type.builtin.graphql, source.tsx support.type.builtin.graphql, source.coffee support.type.builtin.graphql, keyword.operation.graphql, support.type.builtin.graphql	#34febb	italic
source.js meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.graphql, source.js.jsx meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.graphql, source.ts meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.graphql, source.tsx meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.graphql, source.coffee meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.graphql, meta.selectionset.graphql variable.graphql	#34febb	—
source.js meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql, source.js.jsx meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql, source.ts meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql, source.tsx meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql, source.coffee meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql, meta.selectionset.graphql meta.selectionset.graphql variable.graphql	#d6e9ff	—
entity.name.function.directive.graphql	#34febb	—
source.js meta.interface.js storage.type.interface.js, source.js.jsx meta.interface.js.jsx storage.type.interface.js.jsx, source.js meta.type.declaration.js storage.type.type.js, source.js.jsx meta.type.declaration.js.jsx storage.type.type.js.jsx, meta.type.flowtype.js variable.other.flowtype.js, meta.type.flowtype.js.jsx variable.other.flowtype.js.jsx, meta.flowtype.polymorph.js variable.other.flowtype.js, meta.flowtype.polymorph.js.jsx variable.other.flowtype.js.jsx	#34febb	italic
source.js meta.type.declaration.js meta.object.type.js meta.field.declaration.js meta.type.annotation.js meta.type.function.return.js support.type.primitive.js, source.js.jsx meta.type.declaration.js.jsx meta.object.type.js.jsx meta.field.declaration.js.jsx meta.type.annotation.js.jsx meta.type.function.return.js.jsx support.type.primitive.js.jsx, source.js meta.interface.js meta.field.declaration.js meta.type.annotation.js meta.type.function.return.js support.type.primitive.js, source.js.jsx meta.interface.js.jsx meta.field.declaration.js.jsx meta.type.annotation.js.jsx meta.type.function.return.js.jsx support.type.primitive.js.jsx	—	—
source.js meta.interface.js meta.field.declaration.js meta.type.annotation.js support.type.primitive.js, source.js.jsx meta.interface.js.jsx meta.field.declaration.js.jsx meta.type.annotation.js.jsx support.type.primitive.js.jsx, source.js meta.var.expr.js meta.var-single-variable.expr.js meta.type.annotation.js support.type.primitive.js, source.js.jsx meta.var.expr.js.jsx meta.var-single-variable.expr.js.jsx meta.type.annotation.js.jsx support.type.primitive.js.jsx, source.js meta.type.declaration.js meta.object.type.js meta.field.declaration.js meta.type.annotation.js support.type.primitive.js, source.js.jsx meta.type.declaration.js.jsx meta.object.type.js.jsx meta.field.declaration.js.jsx meta.type.annotation.js.jsx support.type.primitive.js.jsx, source.js meta.class.js meta.field.declaration.js meta.type.annotation.js support.type.primitive.js, source.js.jsx meta.class.js.jsx meta.field.declaration.js.jsx meta.type.annotation.js.jsx support.type.primitive.js.jsx, source.js meta.class.js meta.method.declaration.js meta.parameters.js meta.type.annotation.js support.type.primitive.js, source.js.jsx meta.class.js.jsx meta.method.declaration.js.jsx meta.parameters.js.jsx meta.type.annotation.js.jsx support.type.primitive.js.jsx, source.js meta.interface.js meta.field.declaration.js meta.type.annotation.js support.type.builtin.js, source.js.jsx meta.interface.js.jsx meta.field.declaration.js.jsx meta.type.annotation.js.jsx support.type.builtin.js.jsx, source.js meta.type.declaration.js meta.object.type.js meta.field.declaration.js meta.type.annotation.js support.type.builtin.js, source.js.jsx meta.type.declaration.js.jsx meta.object.type.js.jsx meta.field.declaration.js.jsx meta.type.annotation.js.jsx support.type.builtin.js.jsx	#34febb	—
source.js meta.interface.js meta.field.declaration.js meta.type.annotation.js entity.name.type.js, source.js.jsx meta.interface.js.jsx meta.field.declaration.js.jsx meta.type.annotation.js.jsx entity.name.type.js.jsx, source.js meta.type.declaration.js meta.object.type.js meta.field.declaration.js meta.type.annotation.js entity.name.type.js, source.js.jsx meta.type.declaration.js.jsx meta.object.type.js.jsx meta.field.declaration.js.jsx meta.type.annotation.js.jsx entity.name.type.js.jsx, source.js meta.class.js meta.field.declaration.js meta.type.annotation.js entity.name.type.js, source.js.jsx meta.class.js.jsx meta.field.declaration.js.jsx meta.type.annotation.js.jsx entity.name.type.js.jsx, source.js meta.var.expr.js meta.var-single-variable.expr.js meta.type.annotation.js entity.name.type.js, source.js.jsx meta.var.expr.js.jsx meta.var-single-variable.expr.js.jsx meta.type.annotation.js.jsx entity.name.type.js.jsx, source.js meta.class.js meta.method.declaration.js meta.parameters.js meta.type.annotation.js entity.name.type.js, source.js.jsx meta.class.js.jsx meta.method.declaration.js.jsx meta.parameters.js.jsx meta.type.annotation.js.jsx entity.name.type.js.jsx, source.js meta.type.declaration.js meta.type.parameters.js entity.name.type.js, source.js.jsx meta.type.declaration.js.jsx meta.type.parameters.js.jsx entity.name.type.js.jsx	#d6e9ff	—
source.ts meta.interface.ts storage.type.interface.ts, source.tsx meta.interface.tsx storage.type.interface.tsx, source.ts meta.type.declaration.ts storage.type.type.ts, source.tsx meta.type.declaration.tsx storage.type.type.tsx	#34febb	italic
source.ts meta.type.declaration.ts meta.object.type.ts meta.field.declaration.ts meta.type.annotation.ts meta.type.function.return.ts support.type.primitive.ts, source.tsx meta.type.declaration.tsx meta.object.type.tsx meta.field.declaration.tsx meta.type.annotation.tsx meta.type.function.return.tsx support.type.primitive.tsx, source.ts meta.interface.ts meta.field.declaration.ts meta.type.annotation.ts meta.type.function.return.ts support.type.primitive.ts, source.tsx meta.interface.tsx meta.field.declaration.tsx meta.type.annotation.tsx meta.type.function.return.tsx support.type.primitive.tsx	—	—
source.ts meta.interface.ts meta.field.declaration.ts meta.type.annotation.ts support.type.primitive.ts, source.tsx meta.interface.tsx meta.field.declaration.tsx meta.type.annotation.tsx support.type.primitive.tsx, source.ts meta.var.expr.ts meta.var-single-variable.expr.ts meta.type.annotation.ts support.type.primitive.ts, source.tsx meta.var.expr.tsx meta.var-single-variable.expr.tsx meta.type.annotation.tsx support.type.primitive.tsx, source.ts meta.type.declaration.ts meta.object.type.ts meta.field.declaration.ts meta.type.annotation.ts support.type.primitive.ts, source.tsx meta.type.declaration.tsx meta.object.type.tsx meta.field.declaration.tsx meta.type.annotation.tsx support.type.primitive.tsx, source.ts meta.class.ts meta.field.declaration.ts meta.type.annotation.ts support.type.primitive.ts, source.tsx meta.class.tsx meta.field.declaration.tsx meta.type.annotation.tsx support.type.primitive.tsx, source.ts meta.class.ts meta.method.declaration.ts meta.parameters.ts meta.type.annotation.ts support.type.primitive.ts, source.tsx meta.class.tsx meta.method.declaration.tsx meta.parameters.tsx meta.type.annotation.tsx support.type.primitive.tsx, source.ts meta.class.ts meta.type.annotation.ts support.type.primitive.ts, source.tsx meta.class.tsx meta.type.annotation.tsx support.type.primitive.tsx, source.ts meta.interface.ts meta.field.declaration.ts meta.type.annotation.ts support.type.builtin.ts, source.tsx meta.interface.tsx meta.field.declaration.tsx meta.type.annotation.tsx support.type.builtin.tsx	#34febb	—
source.ts meta.interface.ts meta.field.declaration.ts meta.type.annotation.ts entity.name.type.ts, source.tsx meta.interface.tsx meta.field.declaration.tsx meta.type.annotation.tsx entity.name.type.tsx, source.ts meta.type.declaration.ts meta.object.type.ts meta.field.declaration.ts meta.type.annotation.ts entity.name.type.ts, source.tsx meta.type.declaration.tsx meta.object.type.tsx meta.field.declaration.tsx meta.type.annotation.tsx entity.name.type.tsx, source.ts meta.class.ts meta.field.declaration.ts meta.type.annotation.ts entity.name.type.ts, source.tsx meta.class.tsx meta.field.declaration.tsx meta.type.annotation.tsx entity.name.type.tsx, source.ts meta.var.expr.ts meta.var-single-variable.expr.ts meta.type.annotation.ts entity.name.type.ts, source.tsx meta.var.expr.tsx meta.var-single-variable.expr.tsx meta.type.annotation.tsx entity.name.type.tsx, source.ts meta.class.ts meta.method.declaration.ts meta.parameters.ts meta.type.annotation.ts entity.name.type.ts, source.tsx meta.class.tsx meta.method.declaration.tsx meta.parameters.tsx meta.type.annotation.tsx entity.name.type.tsx, source.ts meta.type.declaration.ts meta.type.parameters.ts entity.name.type.ts, source.tsx meta.type.declaration.tsx meta.type.parameters.tsx entity.name.type.tsx, source.ts meta.class.ts meta.method.declaration.ts meta.parameters.ts meta.type.annotation.ts entity.name.type.ts, source.tsx meta.class.tsx meta.method.declaration.tsx meta.parameters.tsx meta.type.annotation.tsx entity.name.type.tsx, source.ts meta.var.expr.ts meta.type.annotation.ts entity.name.type.ts, source.tsx meta.var.expr.tsx meta.type.annotation.tsx entity.name.type.tsx, source.ts meta.var.expr.ts meta.arrow.ts meta.return.type.arrow.ts entity.name.type.ts, source.tsx meta.var.expr.tsx meta.arrow.tsx meta.return.type.arrow.tsx entity.name.type.tsx	#d6e9ff	—
keyword.type.cs	#A8A8E6	italic
source.cs storage.type.cs	#d6e9ff	—
meta.function.parameter.typehinted.php storage.type.php	#c9ccd8	—
source.go storage.type	#c9ccd8	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#c9ccd8	—
source.js keyword, source.js.jsx keyword, storage.type.js, storage.type.js.jsx, storage.type.function.js, storage.type.function.js.jsx, storage.modifier.js, storage.modifier.js.jsx, meta.type.flowtype.js support.type.type.flowtype.js, meta.type.flowtype.js.jsx support.type.type.flowtype.js.jsx, variable.other.flowtype.js, variable.other.flowtype.js.jsx, storage.type.extends.js, storage.type.extends.js.jsx, storage.type.function.js, storage.type.function.js.jsx, storage.type.class.js, storage.type.class.js.jsx, support.type.object.module.js, support.type.object.module.js.jsx, string.regexp.js keyword, string.regexp.js.jsx keyword, constant.language.import-export-all.js, constant.language.import-export-all.js.jsx, source.js meta.group.braces.curly.js keyword.other.substitution, source.js.jsx meta.group.braces.curly.js.jsx keyword.other.substitution, keyword.operator, source.js meta.class.js meta.method.declaration.js storage.type.property.js, source.js.jsx meta.class.js.jsx meta.method.declaration.js.jsx storage.type.property.js.jsx, source.js meta.class.js meta.method.declaration.js storage.modifier.async.js, source.js.jsx meta.class.js.jsx meta.method.declaration.js.jsx storage.modifier.async.js.jsx, source.js meta.class.js meta.method.declaration.js meta.block.js meta.function-call.js variable.language.super.js, source.js.jsx meta.class.js.jsx meta.method.declaration.js.jsx meta.block.js.jsx meta.function-call.js.jsx variable.language.super.js.jsx	#34febb	italic
source.coffee keyword, storage.type.coffee, storage.type.function.coffee, storage.modifier.coffee, meta.type.flowtype.coffee support.type.type.flowtype.coffee, variable.other.flowtype.coffee, storage.type.extends.coffee, storage.type.function.coffee, storage.type.class.coffee, support.type.object.module.coffee, string.regexp.coffee keyword, constant.language.import-export-all.coffee, source.coffee meta.group.braces.curly.coffee keyword.other.substitution, keyword.operator, source.coffee meta.class.coffee meta.method.declaration.coffee storage.type.property.coffee, source.coffee meta.class.coffee meta.method.declaration.coffee storage.modifier.async.coffee, source.coffee meta.class.coffee meta.method.declaration.coffee meta.block.coffee meta.function-call.coffee variable.language.super.coffee	#34febb	italic
keyword.operator.type.annotation, meta.brace.round, punctuation, meta.brace.curly.graphql, meta.brace.square, meta.brace.curly.coffee	#586f89	—
source.ts keyword, source.tsx keyword, source.ts storage.modifier, source.tsx storage.modifer, storage.type.ts, storage.type.tsx, storage.type.function.ts, storage.type.function.tsx, storage.type.extends.ts, storage.type.extends.tsx, storage.type.type.ts, storage.type.type.tsx, storage.type.interface.ts, storage.type.interface.tsx, storage.type.class.ts, storage.type.class.tsx, storage.modifier.ts, storage.modifier.tsx, string.regexp.ts keyword, string.regexp.tsx keyword, constant.language.import-export-all.ts, constant.language.import-export-all.tsx, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, source.ts meta.class.ts meta.method.declaration.ts storage.type.property.ts, source.tsx meta.class.tsx meta.method.declaration.tsx storage.type.property.tsx, source.ts meta.enum.declaration.ts storage.type.enum.ts, source.tsx meta.enum.declaration.tsx storage.type.enum.tsx	#34febb	italic
source.php keyword, storage.type.php, storage.type.function.php, storage.type.extends.php, storage.type.class.php, storage.modifier.php, source.php storage.modifier, storage.modifier.extends.php, storage.modifier.implements.php, source.php meta.group.braces.curly.php keyword.other.substitution, keyword.operator	#34febb	italic
source.dockerfile keyword	#34febb	italic
source.shell keyword	#34febb	italic
text.xml keyword	#34febb	italic
keyword.type.java	#A8A8E6	italic
source.java storage.type.java	#d6e9ff	—
source.java storage.type.generic.java	#34febb	—
source.java keyword, storage.modifier.java	#34febb	italic
meta.declaration.annotation.java storage.type.annotation.java	#A8A8E6	italic
meta.declaration.annotation.java constant.other.key.java	#d6e9ff	—
source.shell punctuation.definition.variable.shell	#34febb	—
source.go keyword, storage.modifier.go, storage.type.go, storage.type.primitive.go, storage.type.object.array.go	#34febb	italic
source.elixir keyword, storage.modifier.elixir, storage.type.elixir, storage.type.primitive.elixir, storage.type.object.array.elixir	#34febb	italic
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end	#d6e9ff	—
source.elixir.embedded variable.other.readwrite.module.elixir	#d6e9ff	—
source.elixir.embedded punctuation.section.embedded.elixir	#34febb	—
source.cs keyword, storage.modifier.cs, source.cs keyword.control.flow.break.cs	#34febb	italic
source.js support.function, source.js.jsx support.function, support.function.js, support.function.js.jsx, variable.function.js, variable.function.js.jsx, meta.function-call.js entity.name.function.js, meta.function-call.js.jsx entity.name.function.js.jsx, meta.method-call.static.js entity.name.function.js, meta.method-call.static.js.jsx entity.name.function.js.jsx, meta.class meta.group.braces.curly meta.function-call variable.function.js, meta.class meta.group.braces.curly meta.function-call variable.function.js.jsx, variable.function.constructor.js, variable.function.constructor.js.jsx, constant.language.import-export-all.js, constant.language.import-export-all.js.jsx, keyword.operator.arithmetic.js, keyword.operator.arithmetic.js.jsx	#32ae85	—
source.coffee support.function, support.function.coffee, variable.function.coffee, meta.function-call.coffee entity.name.function.coffee, meta.method-call.static.coffee entity.name.function.coffee, meta.class meta.group.braces.curly meta.function-call variable.function.coffee, variable.function.constructor.coffee, constant.language.import-export-all.coffee, keyword.operator.arithmetic.coffee	#32ae85	—
constant.language.import-export-all.js, constant.language.import-export-all.js.jsx, constant.language.import-export-all.ts, constant.language.import-export-all.tsx, constant.language.import-export-all.coffee	#d6e9ff	—
source.go support.function, support.function.go, variable.function.go, keyword.operator.arithmetic.go	#32ae85	—
source.groovy constant.other.key.groovy	#d6e9ff	—
source.ts support.function, source.tsx support.function, support.function.ts, support.function.tsx, meta.function-call.ts entity.name.function.ts, meta.function-call.tsx entity.name.function.tsx, meta.method-call.static.ts entity.name.function.ts, meta.method-call.static.tsx entity.name.function.tsx, meta.class meta.group.braces.curly meta.function-call variable.function.ts, meta.class meta.group.braces.curly meta.function-call variable.function.tsx, variable.function.constructor.ts, variable.function.constructor.tsx, constant.language.import-export-all.ts, constant.language.import-export-all.tsx, meta.var.expr.ts new.expr.ts entity.name.type.ts, meta.var.expr.tsx new.expr.tsx entity.name.type.tsx	#32ae85	—
source.php support.function, variable.function.php, meta.class meta.group.braces.curly meta.function-call variable.function.php, variable.function.constructor.php, meta.method-call.php entity.name.function.php, meta.method-call.static.php entity.name.function.php, meta.function-call.php entity.name.function.php, keyword.operator.arithmetic.php, support.function.construct.output.php, support.class.php, meta.function-call.php support.function.construct.php	#32ae85	—
source.shell support.function, keyword.operator.arithmetic.shell	#32ae85	—
text.xml variable.language	#d6e9ff	normal
source.java support.function, support.function.java, meta.function-call.java entity.name.function.java, meta.method-call.static.java entity.name.function.java, meta.method-call.java entity.name.function.java, meta.class meta.group.braces.curly meta.function-call variable.function.java, variable.function.constructor.java, keyword.operator.arithmetic.java, storage.modifier.import.java variable.language.wildcard.java	#32ae85	—
punctuation.definition.string, string.quoted.double.json	#34febb	—
source.css meta.property-name, source.css support.type.property-name.media, source.scss meta.property-name, source.scss support.type.property-name.media, source.stylus meta.property-name, source.stylus support.type.property-name.mediae	#5d8cc0	normal
source.css entity.other.attribute-name.pseudo-element, source.scss entity.other.attribute-name.pseudo-element, source.stylus entity.other.attribute-name.pseudo-element	#32ae85	italic
source.css punctuation.definition.entity, source.css punctuation.definition.keyword, source.css keyword.control.at-rule.media, source.scss punctuation.definition.entity, source.scss punctuation.definition.keyword, source.scss keyword.control.at-rule.media, source.stylus punctuation.definition.entity, source.stylus punctuation.definition.keyword, source.stylus keyword.control.at-rule.media	#d6e9ff	normal
source.css entity.other.attribute-name.pseudo-class.css, source.css entity.other.attribute-name.pseudo-element, source.scss entity.other.attribute-name.pseudo-element, source.scss entity.other.attribute-name.pseudo-class.css, source.stylus entity.other.attribute-name.pseudo-class.css, source.stylus entity.other.attribute-name.pseudo-element, source.css.less entity.other.attribute-name.pseudo-class.css, source.css.less entity.other.attribute-name.pseudo-element	#d6e9ff	italic
keyword.control.at-rule, keyword.control.at-rule.mixin.scss, keyword.control.at-rule.import.scss, keyword.control.at-rule.include.scss, keyword.control.at-rule.extend.scss, keyword.control.at-rule.extend.scss, keyword.control.if.scss, keyword.control.else.scss, punctuation.definition.keyword.stylus, keyword.control.stylus, source.stylus meta.selector.stylus, source.css.less meta.property-list.css entity.other.attribute-name.parent-selector.css punctuation.definition.entity.css	#34febb	italic
source.css.scss entity.name.function, source.css.stylus entity.name.function, source.stylus entity.name.function.stylus	#34febb	—
source.css.less keyword.control.logical.operator.less	#34febb	italic
source.css.scss meta.property-list.scss meta.property-value.scss variable.scss, source.css.less meta.property-list.css variable.other.less, source.css.less meta.property-list.css entity.other.attribute-name.class.mixin.css	#d6e9ff	—
source.css entity.other.attribute-name.pseudo-class.css punctuation.definition.entity.css, source.css.scss entity.other.attribute-name.pseudo-class.css punctuation.definition.entity.css, source.stylus entity.other.attribute-name.pseudo-class.css punctuation.definition.entity.css, source.css.less entity.other.attribute-name.pseudo-class.css punctuation.definition.entity.css, source.css entity.other.attribute-name.pseudo-element.css punctuation.definition.entity.css, source.css.less entity.other.attribute-name.pseudo-element.css punctuation.definition.entity.css, source.scss entity.other.attribute-name.pseudo-element.css punctuation.definition.entity.css, source.stylus entity.other.attribute-name.pseudo-element.css punctuation.definition.entity.css	#d6e9ff	normal
source.cs support.function, support.function.cs, meta.function-call.cs entity.name.function.cs, meta.method-call.static.cs entity.name.function.cs, meta.method-call.cs entity.name.function.cs, meta.class meta.group.braces.curly meta.function-call variable.function.cs, variable.function.constructor.cs, keyword.operator.arithmetic.cs, storage.modifier.import.cs variable.language.wildcard.cs	#32ae85	—
entity.name.section.group-title.ini	#34febb	normal
punctuation.separator.key-value.ini	#34febb	normal
keyword.other.definition.ini	#34febb	—
comment.line.number-sign.ini	#6F7899	italic
markup.heading.markdown	#34febb	normal
markup.quote.markdown	#d6e9ff	—
text.html.markdown comment.block.html	#586f89	italic
text.html.markdown meta.link.inline.markdown, text.html.markdown meta.image.inline.markdown, text.html.markdown markup.inline.raw.string.markdown	#34febb	—
meta.class.js entity.name.class, meta.class.js.jsx entity.name.class, meta.class.js entity.name.type.class, meta.class.js.jsx entity.name.type.class, meta.class meta.function-call variable.function.js, meta.class meta.function-call variable.function.js.jsx, source.js keyword.control.loop.js, source.js.jsx keyword.control.loop.js.jsx, storage.type.function.arrow.js, storage.type.function.arrow.js.jsx, tag.decorator.js entity.name.tag.js, tag.decorator.js.jsx entity.name.tag.js.jsx, source.js meta.interface.js entity.name.type.interface.js, source.js.jsx meta.interface.js.jsx entity.name.type.interface.js.jsx, source.js meta.type.declaration.js entity.name.type.js, source.js.jsx meta.type.declaration.js.jsx entity.name.type.js.jsx, source.js meta.definition.function.js entity.name.function.js, source.js.jsx meta.definition.function.js.jsx entity.name.function.js.jsx	#d6e9ff	—
meta.class.coffee entity.name.class, meta.class.coffee entity.name.type.class, meta.class meta.function-call variable.function.coffee, source.coffee keyword.control.loop.coffee, storage.type.function.arrow.coffee, tag.decorator.coffee entity.name.tag.coffee, source.coffee meta.interface.coffee entity.name.type.interface.coffee, source.coffee meta.type.declaration.coffee entity.name.type.coffee, source.coffee meta.definition.function.coffee entity.name.function.coffee	#d6e9ff	—
punctuation.decorator, entity.name.function.js, entity.name.function.js.jsx, entity.name.function.ts, entity.name.function.tsx, entity.name.function.coffee	#34febb	—
storage.type.function.arrow.js, storage.type.function.arrow.js.jsx, storage.type.function.arrow.ts, storage.type.function.arrow.tsx, storage.type.function.arrow.coffee, keyword.operator.assignment, keyword.operator.comparison	#34febb	—
entity.name.function.go, source.go keyword.control.loop.go	#d6e9ff	—
meta.class.ts entity.name.type.class, meta.class.tsx entity.name.type.class, meta.class meta.function-call variable.function.ts, meta.class meta.function-call variable.function.tsx, source.ts keyword.control.loop.ts, source.tsx keyword.control.loop.tsx, source.ts meta.interface.ts entity.name.type.interface.ts, source.tsx meta.interface.tsx entity.name.type.interface.tsx, source.ts meta.type.declaration.ts entity.name.type.ts, source.tsx meta.type.declaration.tsx entity.name.type.tsx	#d6e9ff	—
entity.name.function.php, meta.class.php entity.name.type.class, meta.class meta.function-call variable.function.php, source.php keyword.control.loop.php, storage.type.function.arrow.php, support.function.magic.php	#34febb	—
meta.method.identifier.java entity.name.function.java, meta.method.identifier.java storage.type.generic.java, meta.class meta.function-call variable.function.java, source.java keyword.control.loop.java, storage.type.function.arrow.java, meta.class.identifier.java entity.name.type.class.java	#d6e9ff	—
meta.method.identifier.cs entity.name.function.cs, meta.method.identifier.cs storage.type.generic.cs, meta.class meta.function-call variable.function.cs, source.cs keyword.control.loop.cs, storage.type.function.arrow.cs, meta.class.identifier.cs entity.name.type.class.cs, source.cs entity.name.function.cs, source.cs entity.name.type.class.cs	#d6e9ff	—
source.elixir entity.name.function.elixir, entity.name.type.module.elixir	#d6e9ff	—
meta.tag.preprocessor.xml punctuation.definition.tag.xml, meta.tag.sgml.doctype.xml punctuation.definition.tag.xml	#34febb	—
keyword.control.flow.js, keyword.control.flow.js.jsx, keyword.control.trycatch.js, keyword.control.trycatch.js.jsx, source.js meta.group.braces.curly.js keyword.control.loop.js, source.js.jsx meta.group.braces.curly.js.jsx keyword.control.loop.js.jsx, source.js meta.export.default.js keyword.control.default.js, source.js.jsx meta.export.default.js.jsx keyword.control.default.js.jsx, keyword.control.switch.js, keyword.control.switch.js.jsx	#34febb	—
keyword.control.flow.coffee, keyword.control.trycatch.coffee, source.coffee meta.group.braces.curly.coffee keyword.control.loop.coffee, source.coffee meta.export.default.coffee keyword.control.default.coffee, keyword.control.switch.coffee	#34febb	—
keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.trycatch.ts, keyword.control.trycatch.tsx, source.ts meta.group.braces.curly.ts keyword.control.loop.ts, source.tsx meta.group.braces.curly.tsx keyword.control.loop.tsx, source.ts meta.export.default.ts keyword.control.default.ts, source.tsx meta.export.default.tsx keyword.control.default.tsx, keyword.control.switch.ts, keyword.control.switch.tsx	#34febb	—
keyword.control.flow.php, keyword.control.trycatch.php, source.php meta.group.braces.curly.php keyword.control.loop.php, keyword.control.switch.php	#34febb	—
source.shell meta.scope.while-loop.shell keyword.control.shell, source.shell meta.scope.for-in-loop.shell keyword.control.shell	#34febb	italic
source.shell meta.scope.while-loop.shell meta.scope.if-block.shell keyword.control.shell, source.shell meta.scope.for-in-loop.shell meta.scope.if-block.shell keyword.control.shell	#34febb	italic
keyword.control.flow.java, keyword.control.trycatch.java, source.java meta.group.braces.curly.java keyword.control.loop.java, keyword.control.switch.java	#34febb	—
source.cs keyword.control.flow, keyword.control.trycatch.cs, source.cs meta.group.braces.curly.cs keyword.control.loop.cs, source.cs keyword.control.switch.cs	#34febb	—
keyword.control.elixir	#34febb	italic
keyword.control.java	#34febb	italic
meta.tag.preprocessor.xml	#34febb	—
meta.tag.preprocessor.xml entity.other.attribute-name	#c9ccd8	—
keyword.operator.assignment	#34febb	—
keyword.operator.logical.js, keyword.operator.logical.js.jsx	#34febb	—
keyword.operator.logical.coffee	#34febb	—
keyword.operator.logical.ts, keyword.operator.logical.tsx	#34febb	—
source.go keyword.operator.assignment.go	#34febb	normal
source.php keyword.operator, punctuation.separator.inheritance.php	#34febb	—
source.shell meta.scope.logical-expression.shell	#34febb	—
source.shell punctuation.definition.logical-expression.shell, source.shell variable.other, source.shell variable.other.normal.shell	#c9ccd8	normal
entity.name.tag support.class.component, meta.tag.other.html, meta.tag.other.js, meta.tag.other.js.jsx, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js.jsx, entity.name.tag.js, entity.name.tag, meta.tag.html	#d6e9ff	—
keyword.other.template.begin, keyword.other.template.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end	#32ae85	—
source.elixir string.quoted.double.elixir source.elixir.embedded.source punctuation.section.embedded.elixir	#34febb	—
source.elixir string.quoted.double.elixir source.elixir.embedded.source	#c9ccd8	—
string.quoted, string.interpolated	#34febb	—
constant.language, constant.numeric, support.constant, constant.character, constant.other.color, constant.other.symbol, constant.other.key, keyword.other.unit, variable.language.this	#34febb	—
markup.inserted	#99C794	—
markup.deleted	#E15A60	—
markup.changed	#BB80B3	—
url, link, uri	—	underline
constant.numeric.line-number.find-in-files - match	#AB7967	—
entity.name.filename.find-in-files	#99C794	—
token.info-token	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#f44747	—
token.debug-token	#b267e6	—
entity.other.attribute-name, entity.other.attribute-name.js, entity.other.attribute-name.js.jsx	#5d8cc0	—
entity.name.tag.doctype, meta.tag.sgml.doctype, meta.tag.sgml.doctype.html, markup.italic.markdown, markup.quote.markdown, support.type.primitive, entity.other.attribute-name, entity.name.tag.custom, source.js entity.other.attribute-name.js, source.js.jsx entity.other.attribute-name.js, ext.html.basic entity.other.attribute-name.html, source.js.jsx keyword.control.flow.js, support.type.property.css, support.function.basic_functions, variable.assignment.coffee, support.function.basic_functions, keyword.operator.type.annotation, assignment.coffee, italic, quote, type .function, type.function, storage.modifier.js, storage.modifier.js.jsx, storage.modifier.ts, storage.modifier.tsx, storage.modifier.php, storage.type.class, modifier, keyword.control.flow, source.shell keyword.control.shell, keyword.control.default, keyword.control.switch, this, support.type.builtin, variable.language.this.php	—	italic
meta.interface.ts variable.object.property, meta.interface.tsx variable.object.property, meta.type.declaration.ts variable.object.property, meta.type.declaration.tsx variable.object.property, meta.function.parameter.typehinted.php storage.type.php, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, source.js meta.group.braces.curly.js keyword.other.substitution, source.js.jsx meta.group.braces.curly.js.jsx keyword.other.substitution, keyword.operator.type.annotation, keyword.operator.type, keyword.operator.logical, source.php keyword.operator, variable.object.property.ts, variable.object.property.tsx, keyword.operator.class.php, support.function.basic_functions.php, keyword.operator.flowtype.other.js, keyword.operator.flowtype.other.js.jsx, source.shell keyword.operator, keyword.operator.ternary.js, keyword.operator.ternary.js.jsx, keyword.operator.ternary.ts, keyword.operator.ternary.tsx, source.reason keyword.operator, source.js meta.group.regexp keyword.operator, source.js.jsx meta.group.regexp keyword.operator, source.ts meta.group.regexp keyword.operator, source.tsx meta.group.regexp keyword.operator, string.regexp.js keyword.control.anchor.regexp, string.regexp.js.jsx keyword.control.anchor.regexp, string.regexp.ts keyword.control.anchor.regexp, string.regexp.tsx keyword.control.anchor.regexp, keyword.operator.other.elixir, keyword.operator.assignment.go	—	normal

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