Duotoned
Publisher: Tobias TimmThemes in package: 2
Duotoned is an opinionated version of the duotone syntax for vscode
Duotoned is an opinionated version of the duotone syntax for vscode
Full workbench mockup using this variant's colors and tokenColors.
Loading...
Workbench UI color keys from the theme JSON colors map.
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #6c6783 | italic |
| source.reason keyword.other, source.reason storage.type, source.reason support.class entity.name.class | #ffcc99 | italic |
| source.reason markup.inserted constant.language support.property-value | #9b87fd | — |
| source.reason support.class entity.name.class | #EBEBFF | — |
| source.reason string.double | #ffa852 | — |
| source.reason keyword.control.less | #ffcc99 | — |
| 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 | #9b87fd | — |
| 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 | #ffa852 | — |
| 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 | #9b87fd | — |
| 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 | #ffcc99 | — |
| 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 | #eeebff | — |
| entity.name.variable | #eeebff | — |
| 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 | #9b87fd | — |
| 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 | #9b87fd | — |
| 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 | #ffcc99 | 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 | #9b87fd | — |
| 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 | #eeebff | — |
| entity.name.function.directive.graphql | #ffa852 | — |
| 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 | #ffcc99 | 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 | #ffcc99 | — |
| 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 | #EBEBFF | — |
| 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 | #ffcc99 | 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 | #ffba76 | — |
| 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 | #EBEBFF | — |
| keyword.type.cs | #A8A8E6 | italic |
| source.cs storage.type.cs | #EBEBFF | — |
| 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 | #ffcc99 | 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 | #ffcc99 | italic |
| keyword.operator.type.annotation, meta.brace.round, punctuation, meta.brace.curly.graphql, meta.brace.square, meta.brace.curly.coffee | #6c6783 | — |
| 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 | #ffcc99 | 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 | #ffcc99 | italic |
| source.dockerfile keyword | #ffcc99 | italic |
| source.shell keyword | #ffcc99 | italic |
| text.xml keyword | #ffcc99 | italic |
| keyword.type.java | #A8A8E6 | italic |
| source.java storage.type.java | #EBEBFF | — |
| source.java storage.type.generic.java | #ffcc99 | — |
| source.java keyword, storage.modifier.java | #ffcc99 | italic |
| meta.declaration.annotation.java storage.type.annotation.java | #A8A8E6 | italic |
| meta.declaration.annotation.java constant.other.key.java | #EBEBFF | — |
| source.shell punctuation.definition.variable.shell | #ffcc99 | — |
| source.go keyword, storage.modifier.go, storage.type.go, storage.type.primitive.go, storage.type.object.array.go | #ffcc99 | italic |
| source.elixir keyword, storage.modifier.elixir, storage.type.elixir, storage.type.primitive.elixir, storage.type.object.array.elixir | #ffcc99 | italic |
| punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end | #EBEBFF | — |
| source.elixir.embedded variable.other.readwrite.module.elixir | #EBEBFF | — |
| source.elixir.embedded punctuation.section.embedded.elixir | #ffcc99 | — |
| source.cs keyword, storage.modifier.cs, source.cs keyword.control.flow.break.cs | #ffcc99 | 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 | #846BFF | — |
| 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 | #846BFF | — |
| 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 | #eeebff | — |
| source.go support.function, support.function.go, variable.function.go, keyword.operator.arithmetic.go | #846BFF | — |
| source.groovy constant.other.key.groovy | #EBEBFF | — |
| 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 | #846BFF | — |
| 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 | #846BFF | — |
| source.shell support.function, keyword.operator.arithmetic.shell | #846BFF | — |
| text.xml variable.language | #EBEBFF | 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 | #846BFF | — |
| punctuation.definition.string, string.quoted.double.json | #ffba76 | — |
| 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 | #9b87fd | 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 | #846BFF | 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 | #eeebff | 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 | #EBEBFF | 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 | #ffcc99 | italic |
| source.css.scss entity.name.function, source.css.stylus entity.name.function, source.stylus entity.name.function.stylus | #ffcc99 | — |
| source.css.less keyword.control.logical.operator.less | #ffcc99 | 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 | #EBEBFF | — |
| 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 | #EBEBFF | 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 | #846BFF | — |
| entity.name.section.group-title.ini | #ffcc99 | normal |
| punctuation.separator.key-value.ini | #ffcc99 | normal |
| keyword.other.definition.ini | #ffcc99 | — |
| comment.line.number-sign.ini | #6F7899 | italic |
| markup.heading.markdown | #ffcc99 | normal |
| markup.quote.markdown | #EBEBFF | — |
| text.html.markdown comment.block.html | #6c6783 | italic |
| text.html.markdown meta.link.inline.markdown, text.html.markdown meta.image.inline.markdown, text.html.markdown markup.inline.raw.string.markdown | #ffba76 | — |
| 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 | #EBEBFF | — |
| 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 | #EBEBFF | — |
| punctuation.decorator, entity.name.function.js, entity.name.function.js.jsx, entity.name.function.ts, entity.name.function.tsx, entity.name.function.coffee | #9b87fd | — |
| 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 | #ffa852 | — |
| entity.name.function.go, source.go keyword.control.loop.go | #EBEBFF | — |
| 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 | #EBEBFF | — |
| 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 | #ffcc99 | — |
| 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 | #EBEBFF | — |
| 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 | #EBEBFF | — |
| source.elixir entity.name.function.elixir, entity.name.type.module.elixir | #EBEBFF | — |
| meta.tag.preprocessor.xml punctuation.definition.tag.xml, meta.tag.sgml.doctype.xml punctuation.definition.tag.xml | #ffcc99 | — |
| 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 | #ffcc99 | — |
| 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 | #ffcc99 | — |
| 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 | #ffcc99 | — |
| keyword.control.flow.php, keyword.control.trycatch.php, source.php meta.group.braces.curly.php keyword.control.loop.php, keyword.control.switch.php | #ffcc99 | — |
| source.shell meta.scope.while-loop.shell keyword.control.shell, source.shell meta.scope.for-in-loop.shell keyword.control.shell | #ffcc99 | 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 | #ffcc99 | italic |
| keyword.control.flow.java, keyword.control.trycatch.java, source.java meta.group.braces.curly.java keyword.control.loop.java, keyword.control.switch.java | #ffcc99 | — |
| 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 | #ffcc99 | — |
| keyword.control.elixir | #ffcc99 | italic |
| keyword.control.java | #ffcc99 | italic |
| meta.tag.preprocessor.xml | #ffcc99 | — |
| meta.tag.preprocessor.xml entity.other.attribute-name | #c9ccd8 | — |
| keyword.operator.assignment | #ffcc99 | — |
| keyword.operator.logical.js, keyword.operator.logical.js.jsx | #ffcc99 | — |
| keyword.operator.logical.coffee | #ffcc99 | — |
| keyword.operator.logical.ts, keyword.operator.logical.tsx | #ffcc99 | — |
| source.go keyword.operator.assignment.go | #ffcc99 | normal |
| source.php keyword.operator, punctuation.separator.inheritance.php | #ffcc99 | — |
| source.shell meta.scope.logical-expression.shell | #ffcc99 | — |
| 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 | #eeebff | — |
| keyword.other.template.begin, keyword.other.template.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end | #846BFF | — |
| source.elixir string.quoted.double.elixir source.elixir.embedded.source punctuation.section.embedded.elixir | #ffcc99 | — |
| source.elixir string.quoted.double.elixir source.elixir.embedded.source | #c9ccd8 | — |
| string.quoted, string.interpolated | #ffba76 | — |
| constant.language, constant.numeric, support.constant, constant.character, constant.other.color, constant.other.symbol, constant.other.key, keyword.other.unit, variable.language.this | #ffcc99 | — |
| 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 | #ffcc99 | — |
| 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 |
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...
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}!`;
}
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}!`;
}