Ether Themes — 50 WCAG-validated dark color themes, 496 React/Next.js/TypeScript snippets, and bundled Astro, Vue, Svelte, MDX, Angular, Kotlin, AIDL, ProGuard & Dotenv syntax highlighting for VS Code and Cursor.
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 |
|---|---|---|
| — | #E4E8F0 | — |
| invalid, invalid.illegal, invalid.unimplemented, invalid.deprecated | #E88090 | — |
| meta.embedded, meta.embedded.line, meta.embedded.block, meta.template.expression, meta.template.expression.js, meta.template.expression.ts, meta.template.expression.tsx, meta.template.expression.jsx, meta.embedded.expression.js, meta.embedded.expression.ts, meta.embedded.expression.tsx, meta.embedded.expression.jsx, meta.jsx.children.tsx, meta.jsx.children.jsx, meta.embedded.assembly, source.groovy.embedded, variable.legacy.builtin.python, string meta.image.inline.markdown | #E4E8F0 | — |
| comment, markup.quote.markdown, meta.diff | #535965 | italic |
| comment.block.documentation, comment.line.double-slash.documentation, comment.block.documentation.js, comment.block.documentation.ts, comment.block.documentation.tsx, comment.block.documentation.jsx, comment.block.documentation.java, comment.block.documentation.python, comment.block.documentation.php, comment.block.documentation.rust, comment.line.double-slash.documentation.cpp, comment.block.documentation.cpp, comment.line.number-sign.documentation | #535965 | italic |
| storage.type.class.doxygen, storage.type.class.doxygen.cpp, storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, punctuation.definition.inline.tag.jsdoc, keyword.operator.control.jsdoc | #C4B0FF | italic |
| entity.name.type.instance.jsdoc, constant.language.symbol-type.jsdoc, constant.language.access-type.jsdoc, entity.name.tag.inline.jsdoc, punctuation.definition.bracket.angle.begin.jsdoc, punctuation.definition.bracket.angle.end.jsdoc, meta.example.jsdoc | #F0D888 | — |
| variable.other.jsdoc, variable.parameter.jsdoc, variable.other.link.underline.jsdoc, constant.other.description.jsdoc, constant.other.email.link.underline.jsdoc | #90B4D0 | italic |
| string, string.tag, string.value, string.quoted, string.template, string.interpolated, string.regexp.character-class, text.html.php string, markup.inline.raw, punctuation.definition.string, punctuation.definition.markdown, text.html meta.embedded source.js string, text.html.php punctuation.definition.string, text.html meta.embedded source.js punctuation.definition.string, text.html punctuation.definition.string, text.html string, text.html.markdown string.quoted, text.xml string, text.xml punctuation.definition.string, meta.preprocessor.string, string.unquoted.heredoc, string.unquoted.heredoc.shell, string.quoted.double.shell, string.quoted.single.shell | #80D4B0 | — |
| constant.character.escape, constant.character, constant.other.option | #D0A0B8 | — |
| constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, meta.preprocessor.numeric, keyword.operator.plus.exponent, keyword.operator.minus.exponent | #E8D080 | — |
| source.css constant.numeric, source.css.scss constant.numeric, source.css.less constant.numeric, source.css keyword.other.unit, source.css.scss keyword.other.unit, source.css.less keyword.other.unit, keyword.other.unit.css, keyword.other.unit.scss, keyword.other.unit.px.css, keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.s.css, keyword.other.unit.ms.css, keyword.other.unit.fr.css, keyword.other.unit.ch.css, keyword.other.unit.deg.css, keyword.other.unit.vw.css, keyword.other.unit.vh.css, keyword.other.unit.percent.css, meta.property-value.scss constant.numeric.css, meta.property-value.media-query.scss constant.numeric.css | #e8a980 | — |
| variable.other.constant, variable.other.enummember, variable.other.constant.property, constant.language.boolean, constant.language.json, constant.language.null, constant.language.undefined | #68D8F0 | — |
| constant.language -constant.language.css -constant.language.scss -constant.language.less, constant.other.php, support.constant.ext.php, constant.other.class.php, support.constant.core.php, constant.other.caps.python, constant.character.entity.html, constant.character.entity.tsx, constant.character.entity.jsx, constant.sha.git-rebase, support.constant.math, support.constant.dom, support.constant.json, constant.other.placeholder, constant.character.graphql | #68D8F0 | — |
| support.type.primitive.ts, support.type.primitive.tsx, support.type.builtin.ts, support.type.builtin.tsx, support.type.builtin.js, support.type.builtin.jsx | #68D8F0 | — |
| variable.parameter, variable.parameter.ts, variable.parameter.tsx, meta.parameter, meta.definition.parameters, variable.parameter.function, variable.parameter.constructor, variable.parameter.cs, variable.parameter.java | #90B4D0 | — |
| storage.type.function.arrow, keyword.operator.arrow | #68D8F0 | — |
| meta.directive.svelte, keyword.control.directive.vue, entity.other.attribute-name.directive.vue | #C4B0FF | italic |
| keyword.control -keyword.control.at-rule, keyword.control.flow, keyword.control.import, keyword.control.module, keyword.control.loop, keyword.control.conditional, keyword.control.trycatch, keyword.control.switch, keyword.control.directive, keyword.control.import.cpp, keyword.other.using, keyword.other.directive, keyword.other.directive.using, keyword.other.operator, keyword.other.rust, keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.create.sql, keyword.operator.new, keyword.operator.delete, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike, keyword.operator.noexcept, keyword.control.heredoc-shell | #C4B0FF | italic |
| keyword, storage -storage.type.function.arrow, storage.modifier, storage.modifier.import, storage.modifier.package, storage.modifier.async, storage.modifier.rust, keyword.declaration, keyword.other.declaration, keyword.other.declaration.swift | #C4B0FF | italic |
| keyword.operator, entity.name.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.relational | #68D8F0 | — |
| variable, variable.other.readwrite, variable.other.member, variable.other.global, variable.other.local, variable.other.global.cs, variable.other.object, entity.name.variable, meta.definition.variable.name, support.variable, variable.argument.css, source.coffee.embedded, variable.other.assignment.shell, variable.other.normal.shell | #90B4D0 | — |
| meta.definition.variable.scss variable.scss, meta.definition.variable.sass variable.sass, variable.interpolation.scss, variable.interpolation.sass, variable.parameter.scss, meta.at-rule.mixin.scss variable, meta.at-rule.function.scss variable | #74cae4 | — |
| support.type.property-name.css.custom-property, support.type.vendored.property-name.css.custom-property, meta.property-list.css variable.other.property-name, meta.property-list.scss variable.other.property-name, meta.property-value.css variable.other.property-name, meta.property-value.scss variable.other.property-name, meta.property-value.scss variable.scss, meta.property-value.css variable.scss, meta.property-list.scss meta.property-value.scss variable.scss, variable.other.property-name.css | #70dee8 | — |
| meta.property-list.css meta.property-name support.type.property-name.css, meta.property-list.scss meta.property-name support.type.property-name.scss, meta.property-list.css meta.property-name support.type.property-name.scss, meta.property-list.scss meta.property-name support.type.property-name.css, meta.property-list.css meta.property-name.scss, meta.property-list.scss meta.property-name.scss, meta.property-list.css support.type.property-name.css, meta.property-list.scss support.type.property-name.css, meta.property-list.scss support.type.property-name.scss, meta.property-list.media-query.scss meta.property-name.media-query.scss, meta.property-list.media-query.scss support.type.property-name.media.css, support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.stylus, support.type.property-name.media.css, support.type.vendored.property-name.css, support.type.vendored.property-name.scss, support.type.vendored.property-name.less | #a8c3e8 | — |
| variable.language.this, variable.language.this.js, variable.language.special.self.python, variable.language.super, variable.language | #E88090 | italic |
| variable.other.object.property.js.jsx, variable.other.object.js, variable.other.property, variable.other.property.ts, variable.other.property.tsx | #E8D080 | — |
| meta.object-literal.key, meta.object-literal.key.ts, meta.object-literal.key.tsx, meta.object-literal.key.js, meta.structure.dictionary.key.python, meta.key-value.key | #E8D080 | — |
| entity.name.function -entity.name.function.scss -entity.name.function.keyframe.css -entity.name.function.keyframe.scss, entity.name.function.member, entity.name.function.call, entity.name.function.constructor, entity.name.function.destructor, entity.name.function.macro, entity.name.function.macro.rules, entity.name.function.preprocessor, entity.name.function.operator, entity.name.operator.custom-literal, meta.function-call, meta.function-call.generic, meta.function-call.generic.python, meta.function-call.php, support.function, support.function.builtin, support.function.magic.python, support.function.aggregate.sql, support.function.builtin.shell, support.function.construct, support.function.construct.php, support.constant.handlebars, source.php support.function, support.function.git-rebase, source.powershell variable.other.member | #A8C4E8 | — |
| punctuation.definition.decorator, punctuation.definition.annotation, entity.name.function.decorator, entity.name.function.decorator.python, punctuation.definition.decorator.python, storage.type.annotation | #A8C4E8 | italic underline |
| support.type -support.type.property-name, entity.name.type, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.struct, entity.name.type.union, entity.name.type.alias, entity.name.type.lifetime, entity.name.type.type-parameter, entity.name.type.parameter, entity.name.class, entity.name.namespace, entity.name.scope-resolution, entity.other.attribute, entity.name.fragment.graphql, support.class, support.class.builtin, support.class.php, support.type.object.js, support.type.object.ts, support.type.type-parameter, support.type.graphql, support.type.exception.python, source.js support.type, source.ts support.type, source.tsx support.type, meta.type.cast.expr, meta.type.new.expr, meta.type.parameters, punctuation.definition.typeparameters, punctuation.section.typeparameters, punctuation.separator.namespace.ruby, storage.type, storage.type.rust, storage.type.swift, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.primitive.java, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.numeric.go, storage.type.byte.go, storage.type.string.go, storage.type.boolean.go, storage.type.error.go, storage.type.rune.go, storage.type.uintptr.go, storage.type.struct, storage.modifier.lifetime | #F0D888 | italic |
| entity.other.inherited-class | #F0D888 | italic underline |
| support.class.component, support.class.component.tsx, support.class.component.jsx, support.class.component.ts, support.class.component.vue, entity.name.type.class.vue | #F0D888 | italic |
| entity.name.tag -entity.name.tag.css -entity.name.tag.scss -entity.name.tag.custom.css -entity.name.tag.custom.scss -entity.name.tag.reference.css -entity.name.tag.reference.scss -entity.name.tag.wildcard.css -entity.name.tag.wildcard.scss, entity.name.tag.jsx, entity.name.tag.tsx, entity.name.tag.html, entity.name.tag.astro, entity.name.tag.svelte, entity.name.tag.xml, entity.name.tag.namespace.tsx, entity.name.tag.namespace.jsx, punctuation.separator.namespace.tsx, punctuation.separator.namespace.jsx | #E88090 | — |
| source.css support.function, source.css.scss support.function, source.css.less support.function, support.function.misc.css, support.function.misc.scss, support.function.set.css, support.function.set.scss, support.function.transform.css, support.function.url.css, support.function.var.css | #9abdd6 | — |
| entity.name.tag.css, entity.name.tag.less, entity.name.tag.scss, entity.name.tag.stylus, source.css entity.name.tag.reference, meta.selector.css entity.name.tag.css, meta.selector.scss entity.name.tag.css, meta.rule.css entity.name.tag.css, meta.rule.scss entity.name.tag.css, meta.rules.css entity.name.tag.css, meta.rules.scss entity.name.tag.css | #e89380 | — |
| entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.html, entity.other.attribute-name.astro, entity.other.attribute-name.svelte, entity.other.attribute-name.html.vue, meta.attribute-with-value | #E8D080 | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss, entity.other.attribute-name.class.less, source.css entity.other.attribute-name.class, meta.selector.css entity.other.attribute-name.class.css, meta.selector.scss entity.other.attribute-name.class.css, meta.rule.css entity.other.attribute-name.class.css, meta.rule.scss entity.other.attribute-name.class.css | #f0dd88 | — |
| source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.parent-selector, entity.other.attribute-name.namespace.css, entity.other.attribute-name.wildcard.css, entity.other.attribute-name.placeholder.css, entity.other.attribute-name.scss, entity.other.attribute-name.attribute.css, entity.other.attribute-name.attribute.scss, meta.attribute-selector.scss entity.other.attribute-name.attribute.scss, meta.at-rule.keyframes.scss entity.other.attribute-name.scss | #70e8e6 | — |
| entity.other.attribute-name.id, entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss, source.css.less entity.other.attribute-name.id | #79d0df | — |
| support.constant.property-value, support.constant.property-value.css, support.constant.property-value.scss, meta.property-value.css support.constant.property-value.css, meta.property-value.scss support.constant.property-value.css, meta.property-value.css support.constant.property-value.scss, meta.property-value.scss support.constant.property-value.scss, meta.property-value.css support.constant.font-name, meta.property-value.scss support.constant.font-name, meta.property-value.media-query.scss support.constant.property-value.css, support.constant.media-type, support.constant.media, constant.language.css, constant.language.scss, constant.language.less, meta.property-value.css constant.language.css, meta.property-value.scss constant.language.scss, meta.property-list.media-query.scss meta.property-value.media-query.scss | #70e8d6 | — |
| meta.property-list.scss meta.property-value.scss, meta.property-list.css meta.property-value.css | #a6c5e8 | — |
| support.constant.color, constant.other.color, constant.other.color.rgb-value, constant.other.rgb-value, constant.other.color.hex.css, constant.other.color.hex.scss, constant.other.color.hex.less | #d0a0b9 | — |
| meta.property-value.scss variable, meta.property-value.css variable, meta.property-value.scss support.type.vendor-prefix, meta.property-value.css support.type.vendor-prefix, support.type.property-name.animation-name.css, support.type.property-name.animation-name.scss, support.type.property-name.transition-timing-function.css, support.type.property-name.transition-timing-function.scss, entity.name.function.keyframe.css, entity.name.function.keyframe.scss, entity.other.keyframe-name.css, entity.other.keyframe-name.scss | #d39dc2 | — |
| entity.other.keyframe-offset.css | #e8a980 | — |
| meta.at-rule.mixin.scss entity.name.function.scss, meta.at-rule.include.scss entity.name.function.scss, meta.at-rule.function.scss entity.name.function.scss, meta.at-rule.keyframes.scss entity.name.function.scss | #a8bbe8 | — |
| punctuation.definition.interpolation.begin.bracket.curly.scss, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.sass, punctuation.definition.interpolation.end.bracket.curly.sass | #d0a0c6 | — |
| keyword.control.at-rule, keyword.control.at-rule.css, keyword.control.at-rule.scss, meta.at-rule.use.scss keyword.control.at-rule.use.scss, meta.at-rule.include.scss keyword.control.at-rule.include.scss, meta.at-rule.mixin.scss keyword.control.at-rule.mixin.scss, meta.at-rule.media.scss keyword.control.at-rule.media.scss, meta.at-rule.keyframes.scss keyword.control.at-rule.keyframes.scss, meta.at-rule.import.scss keyword.control.at-rule.import.scss, meta.at-rule.forward.scss keyword.control.at-rule.forward.scss, meta.at-rule.function.scss keyword.control.at-rule.function.scss, meta.at-rule.extend.scss keyword.control.at-rule.extend.scss, keyword.control.at-rule.less, keyword.control.at-rule.sass, keyword.control.at-rule.charset, keyword.control.at-rule.media, keyword.control.at-rule.import, keyword.control.at-rule.use, keyword.control.at-rule.forward, keyword.control.at-rule.mixin, keyword.control.at-rule.include, keyword.control.at-rule.extend, keyword.control.at-rule.function, keyword.control.at-rule.mixin.scss, keyword.control.at-rule.include.scss, keyword.control.at-rule.use.scss, keyword.control.at-rule.forward.scss, keyword.control.at-rule.extend.scss, keyword.control.at-rule.function.scss, keyword.control.at-rule.media.scss, keyword.control.at-rule.import.scss, meta.at-rule.extend support.constant, meta.preprocessor | #c4abed | — |
| punctuation.definition.entity.css, punctuation.definition.entity.scss, punctuation.definition.entity.less | #535965 | — |
| punctuation.separator.key-value.css, punctuation.separator.key-value.scss, punctuation.terminator.rule.css, punctuation.terminator.rule.scss, punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css, punctuation.section.property-list.begin.bracket.curly.scss, punctuation.section.property-list.end.bracket.curly.scss, punctuation.section.block.begin.bracket.curly.css, punctuation.section.block.end.bracket.curly.css, punctuation.section.block.begin.bracket.curly.scss, punctuation.section.block.end.bracket.curly.scss | #535965 | — |
| meta.structure.dictionary.json support.type.property-name, entity.name.tag.yaml, keyword.key.toml, entity.name.section.toml, entity.name.section.yaml, entity.name.section.ini, entity.name.section.config, entity.name.section.markdown | #A8C4E8 | — |
| string.regexp, constant.regexp, meta.group.regexp | #68D8F0 | — |
| constant.character.character-class.regexp, constant.other.character-class.regexp, constant.other.character-class.set.regexp, constant.character.set.regexp | #E88090 | — |
| punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp, keyword.operator.quantifier.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp | #D0A0B8 | — |
| punctuation.definition.template-expression, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.definition.interpolation, punctuation.section.embedded, punctuation.section.embedded.begin, punctuation.section.embedded.end, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, punctuation.section.embedded.begin.ruby, punctuation.section.embedded.end.ruby, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, punctuation.section.embedded.begin.astro, punctuation.section.embedded.end.astro, punctuation.definition.generic.begin, punctuation.definition.generic.end | #D0A0B8 | — |
| punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.separator, punctuation.separator.dot, punctuation.separator.colon, punctuation.separator.delimiter, punctuation.terminator, punctuation.accessor, meta.brace, punctuation.section.block, punctuation.section.brackets, punctuation.section.parens, punctuation.section.array, punctuation.section.scope | #535965 | — |
| storage.modifier.import.java, storage.modifier.package.java, variable.language.wildcard.java | #C4B0FF | italic |
| keyword.soft.kotlin, keyword.hard.kotlin, keyword.hard.package.kotlin, keyword.hard.class.kotlin, keyword.hard.object.kotlin, keyword.hard.typealias.kotlin, keyword.hard.fun.kotlin, keyword.control.kotlin, storage.modifier.other.kotlin, storage.modifier.kotlin, storage.type.function.arrow.kotlin, keyword.operator.assignment.kotlin, keyword.operator.assignment.arithmetic.kotlin, keyword.operator.arithmetic.kotlin, keyword.operator.comparison.kotlin, keyword.operator.logical.kotlin, keyword.operator.increment-decrement.kotlin, keyword.operator.range.kotlin, keyword.operator.elvis.kotlin, keyword.operator.safe-access.kotlin, keyword.operator.not-null.kotlin, variable.language.wildcard.kotlin | #C4B0FF | italic |
| entity.name.type.annotation.kotlin, entity.name.type.annotation-site.kotlin, entity.name.type.annotation.compose.kotlin, entity.name.type.annotation.android.kotlin | #A8C4E8 | italic underline |
| variable.parameter.kotlin, variable.language.this.kotlin, variable.string-escape.kotlin | #90B4D0 | italic |
| entity.name.type.kotlin, entity.name.type.class.kotlin, entity.name.type.object.kotlin, entity.name.type.class.extension.kotlin, entity.name.function.declaration.kotlin, entity.name.function.call.kotlin, entity.name.function.reference.kotlin, entity.name.package.kotlin, meta.import.kotlin, meta.package.kotlin, meta.class.kotlin | #F0D888 | — |
| comment.line.double-slash.kotlin, comment.block.kotlin, comment.block.javadoc.kotlin, keyword.other.documentation.javadoc.kotlin | #535965 | italic |
| keyword.control.directive.proguard, keyword.control.keep.proguard, keyword.declaration.proguard, keyword.other.member.proguard, constant.character.wildcard.proguard, comment.line.number-sign.proguard | #C4B0FF | italic |
| storage.modifier.proguard, storage.type.primitive.proguard, storage.type.annotation.proguard, entity.name.type.class.proguard, entity.name.function.constructor.proguard, meta.rule.body.proguard | #F0D888 | — |
| keyword.aidl, storage.modifier.aidl, storage.type.constant.aidl, storage.type.interface.aidl, storage.type.parcelable.aidl, storage.type.enum.aidl, storage.type.union.aidl, storage.type.annotation.aidl | #C4B0FF | italic |
| entity.name.type.aidl, entity.name.type.interface.aidl, entity.name.type.parcelable.aidl, entity.name.type.enum.aidl, entity.name.type.union.aidl, entity.name.function.aidl, entity.name.constant.aidl, entity.name.namespace.aidl, support.class.aidl | #F0D888 | — |
| entity.name.label, entity.name.tag.goto, entity.name.goto-label | #E4E8F0 | — |
| markup.heading, punctuation.definition.heading.markdown, entity.name.section.markdown | #90B4D0 | bold italic |
| markup.bold, strong | #E8D080 | bold |
| markup.italic, emphasis | #C4B0FF | italic |
| markup.underline | #E4E8F0 | underline |
| markup.strikethrough | #E4E8F0 | strikethrough |
| markup.list | #E88090 | — |
| beginning.punctuation.definition.list.markdown, punctuation.definition.list.begin.markdown | #E8D080 | — |
| meta.link, meta.image | #90B4D0 | italic |
| markup.inserted | #80D4B0 | — |
| markup.deleted | #E88090 | — |
| markup.changed, meta.diff.header | #E8D080 | — |
| markup.fenced_code.block.markdown, markup.raw.block.markdown, markup.raw.inline.markdown, fenced_code.block.language, fenced_code.block.language.markdown | #E8D080 | — |
| punctuation.definition.metadata.markdown, punctuation.definition.string.end.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.quote.begin.markdown | #E4E8F0 | — |
| entity.other.attribute-name.class.jade, constant.name.attribute.tag.jade | #F0D888 | — |
| meta.property-list.css entity.name.tag.css, meta.property-list.scss entity.name.tag.css, meta.property-list.css entity.name.tag.scss, meta.property-list.scss entity.name.tag.scss, meta.property-list.css meta.property-name entity.name.tag.css, meta.property-list.scss meta.property-name entity.name.tag.css | #a8c3e8 | — |
| meta.property-value.css support.type.property-name.css, meta.property-value.scss support.type.property-name.css, meta.property-value.css support.type.property-name.scss, meta.property-value.scss support.type.property-name.scss, meta.property-value.css invalid.deprecated.color.system.css, meta.property-value.scss invalid.deprecated.color.system.css, meta.property-value.css invalid.deprecated.color.system.scss, meta.property-value.scss invalid.deprecated.color.system.scss, meta.property-value.scss support.type.property-name.transition-sub.css, meta.property-value.css support.type.property-name.transition-sub.css, support.type.property-name.transition-sub.css | #a6c5e8 | — |
| meta.attribute-selector.scss string.quoted.double.attribute-value.scss, meta.attribute-selector.scss string.quoted.single.attribute-value.scss, meta.attribute-selector.css string.quoted.double.attribute-value.css, meta.attribute-selector.css string.quoted.single.attribute-value.css | #70e8d6 | — |
| meta.attribute-selector.scss, meta.attribute-selector.css, punctuation.definition.attribute-selector.begin.bracket.square.css, punctuation.definition.attribute-selector.end.bracket.square.css, punctuation.definition.attribute-selector.begin.bracket.square.scss, punctuation.definition.attribute-selector.end.bracket.square.scss | #535965 | — |
| support.type.map.key.scss, support.type.map.key.sass | #a8c3e8 | — |
| source.css keyword.operator, source.css.scss keyword.operator, keyword.operator.css, keyword.operator.css.scss, keyword.operator.logical.scss, keyword.operator.comparison.scss, keyword.control.operator.css.scss | #535965 | — |
| entity.name.tag.custom.scss, entity.name.tag.custom.css, meta.property-list.scss entity.name.tag.custom.css, meta.property-list.scss entity.name.tag.custom.scss, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.css | #e89380 | — |
| entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent-selector.scss, entity.other.attribute-name.parent-selector-suffix.css, entity.other.attribute-name.parent.less, entity.name.tag.reference.scss, entity.name.tag.reference.css, meta.property-list.scss entity.name.tag.reference.scss, meta.property-list.scss entity.name.tag.reference.css | #70e8e6 | — |
| keyword.operator.combinator.css, keyword.operator.combinator.scss, entity.other.attribute-name.css | #535965 | — |
| entity.other.attribute-name.module.scss, punctuation.access.module.scss, punctuation.definition.wildcard.scss | #d39dc2 | — |
| variable.parameter.url.scss, variable.parameter.style-name.css, variable.parameter.style-name.scss | #d39dc2 | — |
| constant.other.scss, constant.other.css | #70e8d6 | — |
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}!`;
}