Vanta black
8 pure black themes with vivid colors and visible borders
8 pure black themes with vivid colors and visible borders
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 |
|---|---|---|
| variable, variable.other.readwrite, support.variable | #4FC1FF | — |
| meta.var.expr variable.other.readwrite, meta.var-single-variable variable.other.readwrite, variable.other.readwrite.alias | #79C0FF | — |
| meta.binding.pattern variable.object.variable, meta.destructuring variable.other.readwrite, meta.object-binding-pattern-variable variable.object.variable | #79C0FF | — |
| variable.parameter, meta.parameter | #56B6C2 | italic |
| meta.import variable.other.readwrite, meta.import variable.other, meta.named-exports variable.other, meta.named-imports variable.other | #E06C75 | — |
| meta.object-literal.key, meta.object.member meta.object-literal.key, string.unquoted.label | #56B6C2 | — |
| meta.property.object, variable.other.property, variable.other.object.property | #61AFEF | — |
| entity.name.function, meta.function-call entity.name.function, support.function | #61AFEF | — |
| comment, punctuation.definition.comment | #6A9955 | italic |
| string, punctuation.definition.string | #F0A070 | — |
| constant.character.escape, string source | #FFD580 | — |
| punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end | #FF79C6 | — |
| keyword, keyword.control, keyword.operator.new, keyword.operator.typeof, keyword.operator.void, keyword.operator.instanceof, keyword.operator.delete | #FF79C6 | — |
| keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.default | #BD93F9 | — |
| storage, storage.type, storage.modifier | #FF79C6 | — |
| constant.language, variable.language.this, variable.language.super, constant.language.boolean, constant.language.null, constant.language.undefined | #BD93F9 | — |
| constant.numeric | #50FA7B | — |
| variable.other.constant, variable.other.enummember | #CFE2FF | — |
| entity.name.function, support.function, meta.function-call.generic | #50FA7B | — |
| keyword.operator | #FF79C6 | — |
| punctuation | #F8F8F2 | — |
| punctuation.definition.block, punctuation.section.block, meta.brace.curly, meta.brace.square, meta.brace.round | #FFD700 | — |
| entity.name.type, entity.name.class, support.class, entity.name.type.class | #8BE9FD | — |
| entity.name.type.interface | #8BE9FD | italic |
| support.type, entity.name.type.parameter, entity.name.type.primitive | #8BE9FD | — |
| entity.name.namespace, entity.name.module | #8BE9FD | — |
| meta.decorator, meta.decorator punctuation.decorator, tag.decorator entity.name.tag | #FFB86C | — |
| storage.type.function.arrow | #FF79C6 | — |
| keyword.operator.spread, keyword.operator.rest | #FF79C6 | — |
| keyword.operator.optional | #FFB86C | — |
| keyword.operator.logical.nullish | #FFB86C | — |
| entity.name.type.alias.ts, entity.name.type.alias.tsx | #8BE9FD | — |
| support.type.utility.ts | #8BE9FD | — |
| meta.type.parameters, punctuation.definition.typeparameters | #FFB86C | — |
| storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, entity.name.type.instance.jsdoc, variable.other.jsdoc | #6272A4 | italic |
| string.quoted.double.block.python, string.quoted.single.block.python | #6A9955 | italic |
| meta.decorator.python, entity.name.function.decorator.python, punctuation.definition.decorator.python | #FFB86C | — |
| variable.language.special.self.python, variable.language.special.cls.python | #BD93F9 | italic |
| support.function.builtin.python | #50FA7B | — |
| support.type.python, support.class.python | #8BE9FD | — |
| variable.annotation.python, meta.function.annotation.python, meta.function.annotation.return.python | #8BE9FD | — |
| punctuation.section.f-expression.begin.python, punctuation.section.f-expression.end.python | #FF79C6 | — |
| support.variable.magic.python | #CFE2FF | — |
| keyword.package.go, keyword.import.go, keyword.other.package.go, keyword.other.import.go | #BD93F9 | — |
| entity.name.package.go | #8BE9FD | — |
| support.function.builtin.go | #50FA7B | — |
| support.type.predeclared.go, support.type.builtin.go | #8BE9FD | — |
| constant.language.go | #BD93F9 | — |
| string.quoted.raw.go | #FFD580 | — |
| keyword.operator.address.go, keyword.operator.pointer.go | #FF79C6 | — |
| support.type.property-name.json, meta.structure.dictionary.key.json string | #8BE9FD | — |
| meta.structure.dictionary.value.json string, string.quoted.double.json | #F0A070 | — |
| meta.structure.dictionary.value.json constant.numeric, constant.numeric.json | #50FA7B | — |
| constant.language.json | #BD93F9 | — |
| punctuation.definition.array.begin.json, punctuation.definition.array.end.json, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json | #FFD700 | — |
| markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown | #BD93F9 | bold |
| markup.heading.1.markdown, entity.name.section.markdown heading.1 | #FF79C6 | bold |
| markup.heading.2.markdown | #BD93F9 | bold |
| markup.heading.3.markdown | #8BE9FD | bold |
| markup.bold, punctuation.definition.bold | #FFB86C | bold |
| markup.italic, punctuation.definition.italic | #F0A070 | italic |
| markup.inline.raw.string, markup.fenced_code.block | #50FA7B | — |
| markup.underline.link, string.other.link | #8BE9FD | — |
| meta.link.inline.markdown | #FFB86C | — |
| markup.quote, punctuation.definition.blockquote.markdown | #6272A4 | italic |
| meta.separator.markdown | #44475A | — |
| string.regexp, constant.other.character-class.regexp, string.regexp keyword.operator | #FF5555 | — |
| punctuation.definition.group.regexp, meta.group.regexp | #FFB86C | — |
| constant.other.character-class.set.regexp, punctuation.definition.character-class.regexp | #50FA7B | — |
| keyword.operator.quantifier.regexp | #FF79C6 | — |
| support.function.builtin.shell, entity.name.command.shell | #50FA7B | — |
| variable.other.normal.shell, variable.other.bracket.shell, variable.other.special.shell | #8BE9FD | — |
| string.unquoted.argument.shell | #FFB86C | — |
| comment.line.shebang | #FF79C6 | italic |
| entity.name.lifetime.rust, storage.modifier.lifetime.rust, punctuation.definition.lifetime.rust | #FFB86C | — |
| entity.name.function.macro.rust, support.function.macro.rust | #50FA7B | — |
| meta.attribute.rust, entity.name.function.attribute.rust | #FFD580 | — |
| storage.modifier.unsafe.rust | #FF5555 | — |
| invalid.illegal, invalid.deprecated | #FF5555 | — |
| support.class.component.jsx, support.class.component.tsx, support.class.component.js, support.class.component.ts | #58C7FF | bold |
| entity.name.tag.html, entity.name.tag, entity.name.tag.tsx, entity.name.tag.jsx | #7AA2FF | — |
| punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, meta.tag punctuation.definition.tag | #82C7FF | — |
| entity.other.attribute-name, meta.tag.attributes entity.other.attribute-name | #8FEFAF | — |
| string.quoted.double.html, string.quoted.single.html, meta.attribute-with-value.html string | #F5C14B | — |
| meta.tag.sgml.doctype, entity.name.tag.doctype | #8899CC | — |
| entity.other.attribute-name.id, entity.other.attribute-name.id.html | #F0C070 | — |
| entity.other.attribute-name.class, entity.other.attribute-name.class.html | #92D6FF | — |
| entity.name.selector, meta.selector | #A9F0B3 | — |
| entity.other.attribute-name.id.css, meta.selector entity.other.attribute-name.id | #F0C070 | — |
| entity.other.attribute-name.class.css, meta.selector entity.other.attribute-name.class | #92D6FF | — |
| entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element | #FF91C4 | — |
| support.type.vendored.property-name, support.type.property-name.css, meta.property-name | #8FDEFF | — |
| support.constant.property-value, meta.property-value | #F7C68A | — |
| keyword.other.unit | #A9F0B3 | — |
| constant.other.color.rgb-value.hex.css, constant.other.color | #FFE380 | — |
| variable.css, variable.argument.css, variable.other.less, variable.scss, variable.sass | #C89CFF | — |
| keyword.control.at-rule, meta.at-rule keyword.control | #FF8EC6 | — |
| keyword.other.important.css | #FF7A7A | bold |
| entity.name.function.scss, support.function.misc.scss, keyword.control.at-rule.include.scss, keyword.control.at-rule.mixin.scss | #7EF0A6 | — |
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 |
|---|---|---|
| variable, variable.other.readwrite, support.variable | #60D4FF | — |
| meta.var.expr variable.other.readwrite, meta.var-single-variable variable.other.readwrite, variable.other.readwrite.alias | #88CCFF | — |
| meta.binding.pattern variable.object.variable, meta.destructuring variable.other.readwrite, meta.object-binding-pattern-variable variable.object.variable | #88CCFF | — |
| variable.parameter, meta.parameter | #60C8D0 | italic |
| meta.import variable.other.readwrite, meta.import variable.other, meta.named-exports variable.other, meta.named-imports variable.other | #FF7B86 | — |
| meta.object-literal.key, meta.object.member meta.object-literal.key, string.unquoted.label | #60CCDD | — |
| meta.property.object, variable.other.property, variable.other.object.property | #70C0FF | — |
| entity.name.function, meta.function-call entity.name.function, support.function | #70C0FF | — |
| comment, punctuation.definition.comment | #7ABB65 | italic |
| string, punctuation.definition.string | #FFC090 | — |
| constant.character.escape, string source | #FFE080 | — |
| punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end | #FF5EAC | — |
| keyword, keyword.control, keyword.operator.new, keyword.operator.typeof, keyword.operator.void, keyword.operator.instanceof, keyword.operator.delete | #FF5EAC | — |
| keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.default | #CF9FFF | — |
| storage, storage.type, storage.modifier | #FF5EAC | — |
| constant.language, variable.language.this, variable.language.super, constant.language.boolean, constant.language.null, constant.language.undefined | #CF9FFF | — |
| constant.numeric | #33FF66 | — |
| variable.other.constant, variable.other.enummember | #DDEEFF | — |
| entity.name.function, support.function, meta.function-call.generic | #33FF66 | — |
| keyword.operator | #FF5EAC | — |
| punctuation | #FFFFFF | — |
| punctuation.definition.block, punctuation.section.block, meta.brace.curly, meta.brace.square, meta.brace.round | #FFEE00 | — |
| entity.name.type, entity.name.class, support.class, entity.name.type.class | #5AF0FF | — |
| entity.name.type.interface | #5AF0FF | italic |
| support.type, entity.name.type.parameter, entity.name.type.primitive | #5AF0FF | — |
| entity.name.namespace, entity.name.module | #5AF0FF | — |
| meta.decorator, meta.decorator punctuation.decorator, tag.decorator entity.name.tag | #FFC27A | — |
| storage.type.function.arrow | #FF5EAC | — |
| keyword.operator.spread, keyword.operator.rest | #FF5EAC | — |
| keyword.operator.optional | #FFC27A | — |
| keyword.operator.logical.nullish | #FFC27A | — |
| entity.name.type.alias.ts, entity.name.type.alias.tsx | #5AF0FF | — |
| support.type.utility.ts | #5AF0FF | — |
| meta.type.parameters, punctuation.definition.typeparameters | #FFC27A | — |
| storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, entity.name.type.instance.jsdoc, variable.other.jsdoc | #7282B4 | italic |
| string.quoted.double.block.python, string.quoted.single.block.python | #7ABB65 | italic |
| meta.decorator.python, entity.name.function.decorator.python, punctuation.definition.decorator.python | #FFC27A | — |
| variable.language.special.self.python, variable.language.special.cls.python | #CF9FFF | italic |
| support.function.builtin.python | #33FF66 | — |
| support.type.python, support.class.python | #5AF0FF | — |
| variable.annotation.python, meta.function.annotation.python, meta.function.annotation.return.python | #5AF0FF | — |
| punctuation.section.f-expression.begin.python, punctuation.section.f-expression.end.python | #FF5EAC | — |
| support.variable.magic.python | #DDEEFF | — |
| keyword.package.go, keyword.import.go, keyword.other.package.go, keyword.other.import.go | #CF9FFF | — |
| entity.name.package.go | #5AF0FF | — |
| support.function.builtin.go | #33FF66 | — |
| support.type.predeclared.go, support.type.builtin.go | #5AF0FF | — |
| constant.language.go | #CF9FFF | — |
| string.quoted.raw.go | #FFE080 | — |
| keyword.operator.address.go, keyword.operator.pointer.go | #FF5EAC | — |
| support.type.property-name.json, meta.structure.dictionary.key.json string | #5AF0FF | — |
| meta.structure.dictionary.value.json string, string.quoted.double.json | #FFC090 | — |
| meta.structure.dictionary.value.json constant.numeric, constant.numeric.json | #33FF66 | — |
| constant.language.json | #CF9FFF | — |
| punctuation.definition.array.begin.json, punctuation.definition.array.end.json, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json | #FFEE00 | — |
| markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown | #CF9FFF | bold |
| markup.heading.1.markdown, entity.name.section.markdown heading.1 | #FF5EAC | bold |
| markup.heading.2.markdown | #CF9FFF | bold |
| markup.heading.3.markdown | #5AF0FF | bold |
| markup.bold, punctuation.definition.bold | #FFC27A | bold |
| markup.italic, punctuation.definition.italic | #FFC090 | italic |
| markup.inline.raw.string, markup.fenced_code.block | #33FF66 | — |
| markup.underline.link, string.other.link | #5AF0FF | — |
| meta.link.inline.markdown | #FFC27A | — |
| markup.quote, punctuation.definition.blockquote.markdown | #7282B4 | italic |
| meta.separator.markdown | #555870 | — |
| string.regexp, constant.other.character-class.regexp, string.regexp keyword.operator | #FF3333 | — |
| punctuation.definition.group.regexp, meta.group.regexp | #FFC27A | — |
| constant.other.character-class.set.regexp, punctuation.definition.character-class.regexp | #33FF66 | — |
| keyword.operator.quantifier.regexp | #FF5EAC | — |
| support.function.builtin.shell, entity.name.command.shell | #33FF66 | — |
| variable.other.normal.shell, variable.other.bracket.shell, variable.other.special.shell | #5AF0FF | — |
| string.unquoted.argument.shell | #FFC27A | — |
| comment.line.shebang | #FF5EAC | italic |
| entity.name.lifetime.rust, storage.modifier.lifetime.rust, punctuation.definition.lifetime.rust | #FFC27A | — |
| entity.name.function.macro.rust, support.function.macro.rust | #33FF66 | — |
| meta.attribute.rust, entity.name.function.attribute.rust | #FFE080 | — |
| storage.modifier.unsafe.rust | #FF3333 | — |
| invalid.illegal, invalid.deprecated | #FF3333 | — |
| support.class.component.jsx, support.class.component.tsx, support.class.component.js, support.class.component.ts | #58C7FF | bold |
| entity.name.tag.html, entity.name.tag, entity.name.tag.tsx, entity.name.tag.jsx | #7AA2FF | — |
| punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, meta.tag punctuation.definition.tag | #82C7FF | — |
| entity.other.attribute-name, meta.tag.attributes entity.other.attribute-name | #8FEFAF | — |
| string.quoted.double.html, string.quoted.single.html, meta.attribute-with-value.html string | #F5C14B | — |
| meta.tag.sgml.doctype, entity.name.tag.doctype | #8899CC | — |
| entity.other.attribute-name.id, entity.other.attribute-name.id.html | #F0C070 | — |
| entity.other.attribute-name.class, entity.other.attribute-name.class.html | #92D6FF | — |
| entity.name.selector, meta.selector | #A9F0B3 | — |
| entity.other.attribute-name.id.css, meta.selector entity.other.attribute-name.id | #F0C070 | — |
| entity.other.attribute-name.class.css, meta.selector entity.other.attribute-name.class | #92D6FF | — |
| entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element | #FF91C4 | — |
| support.type.vendored.property-name, support.type.property-name.css, meta.property-name | #8FDEFF | — |
| support.constant.property-value, meta.property-value | #F7C68A | — |
| keyword.other.unit | #A9F0B3 | — |
| constant.other.color.rgb-value.hex.css, constant.other.color | #FFE380 | — |
| variable.css, variable.argument.css, variable.other.less, variable.scss, variable.sass | #C89CFF | — |
| keyword.control.at-rule, meta.at-rule keyword.control | #FF8EC6 | — |
| keyword.other.important.css | #FF7A7A | bold |
| entity.name.function.scss, support.function.misc.scss, keyword.control.at-rule.include.scss, keyword.control.at-rule.mixin.scss | #7EF0A6 | — |
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 |
|---|---|---|
| variable, variable.other.readwrite, support.variable | #4FC1FF | — |
| meta.var.expr variable.other.readwrite, meta.var-single-variable variable.other.readwrite, variable.other.readwrite.alias | #79C0FF | — |
| meta.binding.pattern variable.object.variable, meta.destructuring variable.other.readwrite, meta.object-binding-pattern-variable variable.object.variable | #79C0FF | — |
| variable.parameter, meta.parameter | #56B6C2 | italic |
| meta.import variable.other.readwrite, meta.import variable.other, meta.named-exports variable.other, meta.named-imports variable.other | #E06C75 | — |
| meta.object-literal.key, meta.object.member meta.object-literal.key, string.unquoted.label | #56B6C2 | — |
| meta.property.object, variable.other.property, variable.other.object.property | #61AFEF | — |
| entity.name.function, meta.function-call entity.name.function, support.function | #61AFEF | — |
| comment, punctuation.definition.comment | #6A9955 | italic |
| string, punctuation.definition.string | #F0A070 | — |
| constant.character.escape, string source | #FFD580 | — |
| punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end | #FF79C6 | — |
| keyword, keyword.control, keyword.operator.new, keyword.operator.typeof, keyword.operator.void, keyword.operator.instanceof, keyword.operator.delete | #FF79C6 | — |
| keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.default | #BD93F9 | — |
| storage, storage.type, storage.modifier | #FF79C6 | — |
| constant.language, variable.language.this, variable.language.super, constant.language.boolean, constant.language.null, constant.language.undefined | #BD93F9 | — |
| constant.numeric | #50FA7B | — |
| variable.other.constant, variable.other.enummember | #CFE2FF | — |
| entity.name.function, support.function, meta.function-call.generic | #50FA7B | — |
| keyword.operator | #FF79C6 | — |
| punctuation | #F8F8F2 | — |
| punctuation.definition.block, punctuation.section.block, meta.brace.curly, meta.brace.square, meta.brace.round | #FFD700 | — |
| entity.name.type, entity.name.class, support.class, entity.name.type.class | #8BE9FD | — |
| entity.name.type.interface | #8BE9FD | italic |
| support.type, entity.name.type.parameter, entity.name.type.primitive | #8BE9FD | — |
| entity.name.namespace, entity.name.module | #8BE9FD | — |
| meta.decorator, meta.decorator punctuation.decorator, tag.decorator entity.name.tag | #FFB86C | — |
| storage.type.function.arrow | #FF79C6 | — |
| keyword.operator.spread, keyword.operator.rest | #FF79C6 | — |
| keyword.operator.optional | #FFB86C | — |
| keyword.operator.logical.nullish | #FFB86C | — |
| entity.name.type.alias.ts, entity.name.type.alias.tsx | #8BE9FD | — |
| support.type.utility.ts | #8BE9FD | — |
| meta.type.parameters, punctuation.definition.typeparameters | #FFB86C | — |
| storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, entity.name.type.instance.jsdoc, variable.other.jsdoc | #6272A4 | italic |
| string.quoted.double.block.python, string.quoted.single.block.python | #6A9955 | italic |
| meta.decorator.python, entity.name.function.decorator.python, punctuation.definition.decorator.python | #FFB86C | — |
| variable.language.special.self.python, variable.language.special.cls.python | #BD93F9 | italic |
| support.function.builtin.python | #50FA7B | — |
| support.type.python, support.class.python | #8BE9FD | — |
| variable.annotation.python, meta.function.annotation.python, meta.function.annotation.return.python | #8BE9FD | — |
| punctuation.section.f-expression.begin.python, punctuation.section.f-expression.end.python | #FF79C6 | — |
| support.variable.magic.python | #CFE2FF | — |
| keyword.package.go, keyword.import.go, keyword.other.package.go, keyword.other.import.go | #BD93F9 | — |
| entity.name.package.go | #8BE9FD | — |
| support.function.builtin.go | #50FA7B | — |
| support.type.predeclared.go, support.type.builtin.go | #8BE9FD | — |
| constant.language.go | #BD93F9 | — |
| string.quoted.raw.go | #FFD580 | — |
| keyword.operator.address.go, keyword.operator.pointer.go | #FF79C6 | — |
| support.type.property-name.json, meta.structure.dictionary.key.json string | #8BE9FD | — |
| meta.structure.dictionary.value.json string, string.quoted.double.json | #F0A070 | — |
| meta.structure.dictionary.value.json constant.numeric, constant.numeric.json | #50FA7B | — |
| constant.language.json | #BD93F9 | — |
| punctuation.definition.array.begin.json, punctuation.definition.array.end.json, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json | #FFD700 | — |
| markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown | #BD93F9 | bold |
| markup.heading.1.markdown, entity.name.section.markdown heading.1 | #FF79C6 | bold |
| markup.heading.2.markdown | #BD93F9 | bold |
| markup.heading.3.markdown | #8BE9FD | bold |
| markup.bold, punctuation.definition.bold | #FFB86C | bold |
| markup.italic, punctuation.definition.italic | #F0A070 | italic |
| markup.inline.raw.string, markup.fenced_code.block | #50FA7B | — |
| markup.underline.link, string.other.link | #8BE9FD | — |
| meta.link.inline.markdown | #FFB86C | — |
| markup.quote, punctuation.definition.blockquote.markdown | #6272A4 | italic |
| meta.separator.markdown | #44475A | — |
| string.regexp, constant.other.character-class.regexp, string.regexp keyword.operator | #FF5555 | — |
| punctuation.definition.group.regexp, meta.group.regexp | #FFB86C | — |
| constant.other.character-class.set.regexp, punctuation.definition.character-class.regexp | #50FA7B | — |
| keyword.operator.quantifier.regexp | #FF79C6 | — |
| support.function.builtin.shell, entity.name.command.shell | #50FA7B | — |
| variable.other.normal.shell, variable.other.bracket.shell, variable.other.special.shell | #8BE9FD | — |
| string.unquoted.argument.shell | #FFB86C | — |
| comment.line.shebang | #FF79C6 | italic |
| entity.name.lifetime.rust, storage.modifier.lifetime.rust, punctuation.definition.lifetime.rust | #FFB86C | — |
| entity.name.function.macro.rust, support.function.macro.rust | #50FA7B | — |
| meta.attribute.rust, entity.name.function.attribute.rust | #FFD580 | — |
| storage.modifier.unsafe.rust | #FF5555 | — |
| invalid.illegal, invalid.deprecated | #FF5555 | — |
| support.class.component.jsx, support.class.component.tsx, support.class.component.js, support.class.component.ts | #58C7FF | bold |
| entity.name.tag.html, entity.name.tag, entity.name.tag.tsx, entity.name.tag.jsx | #7AA2FF | — |
| punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, meta.tag punctuation.definition.tag | #82C7FF | — |
| entity.other.attribute-name, meta.tag.attributes entity.other.attribute-name | #8FEFAF | — |
| string.quoted.double.html, string.quoted.single.html, meta.attribute-with-value.html string | #F5C14B | — |
| meta.tag.sgml.doctype, entity.name.tag.doctype | #8899CC | — |
| entity.other.attribute-name.id, entity.other.attribute-name.id.html | #F0C070 | — |
| entity.other.attribute-name.class, entity.other.attribute-name.class.html | #92D6FF | — |
| entity.name.selector, meta.selector | #A9F0B3 | — |
| entity.other.attribute-name.id.css, meta.selector entity.other.attribute-name.id | #F0C070 | — |
| entity.other.attribute-name.class.css, meta.selector entity.other.attribute-name.class | #92D6FF | — |
| entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element | #FF91C4 | — |
| support.type.vendored.property-name, support.type.property-name.css, meta.property-name | #8FDEFF | — |
| support.constant.property-value, meta.property-value | #F7C68A | — |
| keyword.other.unit | #A9F0B3 | — |
| constant.other.color.rgb-value.hex.css, constant.other.color | #FFE380 | — |
| variable.css, variable.argument.css, variable.other.less, variable.scss, variable.sass | #C89CFF | — |
| keyword.control.at-rule, meta.at-rule keyword.control | #FF8EC6 | — |
| keyword.other.important.css | #FF7A7A | bold |
| entity.name.function.scss, support.function.misc.scss, keyword.control.at-rule.include.scss, keyword.control.at-rule.mixin.scss | #7EF0A6 | — |
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 |
|---|---|---|
| variable, variable.other.readwrite, support.variable | #70A8D0 | — |
| meta.var.expr variable.other.readwrite, meta.var-single-variable variable.other.readwrite, variable.other.readwrite.alias | #6898C0 | — |
| meta.binding.pattern variable.object.variable, meta.destructuring variable.other.readwrite, meta.object-binding-pattern-variable variable.object.variable | #6898C0 | — |
| variable.parameter, meta.parameter | #5A8898 | italic |
| meta.import variable.other.readwrite, meta.import variable.other, meta.named-exports variable.other, meta.named-imports variable.other | #D07858 | — |
| meta.object-literal.key, meta.object.member meta.object-literal.key, string.unquoted.label | #A09060 | — |
| meta.property.object, variable.other.property, variable.other.object.property | #C09050 | — |
| entity.name.function, meta.function-call entity.name.function, support.function | #C09050 | — |
| comment, punctuation.definition.comment | #7A7040 | italic |
| string, punctuation.definition.string | #E89060 | — |
| constant.character.escape, string source | #F0C858 | — |
| punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end | #E8886A | — |
| keyword, keyword.control, keyword.operator.new, keyword.operator.typeof, keyword.operator.void, keyword.operator.instanceof, keyword.operator.delete | #E8886A | — |
| keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.default | #D4906A | — |
| storage, storage.type, storage.modifier | #E8886A | — |
| constant.language, variable.language.this, variable.language.super, constant.language.boolean, constant.language.null, constant.language.undefined | #D4906A | — |
| constant.numeric | #D4C050 | — |
| variable.other.constant, variable.other.enummember | #EED8B8 | — |
| entity.name.function, support.function, meta.function-call.generic | #D4C050 | — |
| keyword.operator | #E8886A | — |
| punctuation | #F0E8D8 | — |
| punctuation.definition.block, punctuation.section.block, meta.brace.curly, meta.brace.square, meta.brace.round | #E8C840 | — |
| entity.name.type, entity.name.class, support.class, entity.name.type.class | #D4AA70 | — |
| entity.name.type.interface | #D4AA70 | italic |
| support.type, entity.name.type.parameter, entity.name.type.primitive | #D4AA70 | — |
| entity.name.namespace, entity.name.module | #D4AA70 | — |
| meta.decorator, meta.decorator punctuation.decorator, tag.decorator entity.name.tag | #F0A050 | — |
| storage.type.function.arrow | #E8886A | — |
| keyword.operator.spread, keyword.operator.rest | #E8886A | — |
| keyword.operator.optional | #F0A050 | — |
| keyword.operator.logical.nullish | #F0A050 | — |
| entity.name.type.alias.ts, entity.name.type.alias.tsx | #D4AA70 | — |
| support.type.utility.ts | #D4AA70 | — |
| meta.type.parameters, punctuation.definition.typeparameters | #F0A050 | — |
| storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, entity.name.type.instance.jsdoc, variable.other.jsdoc | #7A6848 | italic |
| string.quoted.double.block.python, string.quoted.single.block.python | #7A7040 | italic |
| meta.decorator.python, entity.name.function.decorator.python, punctuation.definition.decorator.python | #F0A050 | — |
| variable.language.special.self.python, variable.language.special.cls.python | #D4906A | italic |
| support.function.builtin.python | #D4C050 | — |
| support.type.python, support.class.python | #D4AA70 | — |
| variable.annotation.python, meta.function.annotation.python, meta.function.annotation.return.python | #D4AA70 | — |
| punctuation.section.f-expression.begin.python, punctuation.section.f-expression.end.python | #E8886A | — |
| support.variable.magic.python | #EED8B8 | — |
| keyword.package.go, keyword.import.go, keyword.other.package.go, keyword.other.import.go | #D4906A | — |
| entity.name.package.go | #D4AA70 | — |
| support.function.builtin.go | #D4C050 | — |
| support.type.predeclared.go, support.type.builtin.go | #D4AA70 | — |
| constant.language.go | #D4906A | — |
| string.quoted.raw.go | #F0C858 | — |
| keyword.operator.address.go, keyword.operator.pointer.go | #E8886A | — |
| support.type.property-name.json, meta.structure.dictionary.key.json string | #D4AA70 | — |
| meta.structure.dictionary.value.json string, string.quoted.double.json | #E89060 | — |
| meta.structure.dictionary.value.json constant.numeric, constant.numeric.json | #D4C050 | — |
| constant.language.json | #D4906A | — |
| punctuation.definition.array.begin.json, punctuation.definition.array.end.json, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json | #E8C840 | — |
| markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown | #D4906A | bold |
| markup.heading.1.markdown, entity.name.section.markdown heading.1 | #E8886A | bold |
| markup.heading.2.markdown | #D4906A | bold |
| markup.heading.3.markdown | #D4AA70 | bold |
| markup.bold, punctuation.definition.bold | #F0A050 | bold |
| markup.italic, punctuation.definition.italic | #E89060 | italic |
| markup.inline.raw.string, markup.fenced_code.block | #D4C050 | — |
| markup.underline.link, string.other.link | #D4AA70 | — |
| meta.link.inline.markdown | #F0A050 | — |
| markup.quote, punctuation.definition.blockquote.markdown | #7A6848 | italic |
| meta.separator.markdown | #504030 | — |
| string.regexp, constant.other.character-class.regexp, string.regexp keyword.operator | #E06050 | — |
| punctuation.definition.group.regexp, meta.group.regexp | #F0A050 | — |
| constant.other.character-class.set.regexp, punctuation.definition.character-class.regexp | #D4C050 | — |
| keyword.operator.quantifier.regexp | #E8886A | — |
| support.function.builtin.shell, entity.name.command.shell | #D4C050 | — |
| variable.other.normal.shell, variable.other.bracket.shell, variable.other.special.shell | #D4AA70 | — |
| string.unquoted.argument.shell | #F0A050 | — |
| comment.line.shebang | #E8886A | italic |
| entity.name.lifetime.rust, storage.modifier.lifetime.rust, punctuation.definition.lifetime.rust | #F0A050 | — |
| entity.name.function.macro.rust, support.function.macro.rust | #D4C050 | — |
| meta.attribute.rust, entity.name.function.attribute.rust | #F0C858 | — |
| storage.modifier.unsafe.rust | #E06050 | — |
| invalid.illegal, invalid.deprecated | #E06050 | — |
| support.class.component.jsx, support.class.component.tsx, support.class.component.js, support.class.component.ts | #58C7FF | bold |
| entity.name.tag.html, entity.name.tag, entity.name.tag.tsx, entity.name.tag.jsx | #7AA2FF | — |
| punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, meta.tag punctuation.definition.tag | #82C7FF | — |
| entity.other.attribute-name, meta.tag.attributes entity.other.attribute-name | #8FEFAF | — |
| string.quoted.double.html, string.quoted.single.html, meta.attribute-with-value.html string | #F5C14B | — |
| meta.tag.sgml.doctype, entity.name.tag.doctype | #8899CC | — |
| entity.other.attribute-name.id, entity.other.attribute-name.id.html | #F0C070 | — |
| entity.other.attribute-name.class, entity.other.attribute-name.class.html | #92D6FF | — |
| entity.name.selector, meta.selector | #A9F0B3 | — |
| entity.other.attribute-name.id.css, meta.selector entity.other.attribute-name.id | #F0C070 | — |
| entity.other.attribute-name.class.css, meta.selector entity.other.attribute-name.class | #92D6FF | — |
| entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element | #FF91C4 | — |
| support.type.vendored.property-name, support.type.property-name.css, meta.property-name | #8FDEFF | — |
| support.constant.property-value, meta.property-value | #F7C68A | — |
| keyword.other.unit | #A9F0B3 | — |
| constant.other.color.rgb-value.hex.css, constant.other.color | #FFE380 | — |
| variable.css, variable.argument.css, variable.other.less, variable.scss, variable.sass | #C89CFF | — |
| keyword.control.at-rule, meta.at-rule keyword.control | #FF8EC6 | — |
| keyword.other.important.css | #FF7A7A | bold |
| entity.name.function.scss, support.function.misc.scss, keyword.control.at-rule.include.scss, keyword.control.at-rule.mixin.scss | #7EF0A6 | — |
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}!`;
}
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}!`;
}