Introducing the 'Dark Symphony' theme for VS Code, a professional and visually pleasing theme designed to enhance your coding experience. This theme features warm, eye-pleasing colors that create a cozy and inviting atmosphere, while also providing a high level of readability and contrast to improve
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 |
|---|---|---|
| punctuation.definition.comment, comment.block punctuation.definition.list.begin.markdown | #546E7A | — |
| comment | #E87D9D | — |
| entity.name.tag.localname.cs, comment.block.documentation.cs punctuation.definition.tag.cs, source.cs comment.block.documentation.cs meta.tag.cs punctuation.separator.equals.cs, punctuation.definition.block.tag.jsdoc | #546E7A | |
| punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc, variable.other.description.jsdoc, punctuation.definition.inline.tag.jsdoc, punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc | #546E7A | italic bold |
| comment.block.documentation.cs, entity.other.attribute-name.localname.cs | #6a828d | — |
| source.cs comment.block.documentation.cs meta.tag.cs string.quoted.double.cs, source.cs comment.block.documentation.cs meta.tag.cs string.quoted.double.cs punctuation.definition.string.begin.cs, source.cs comment.block.documentation.cs meta.tag.cs string.quoted.double.cs punctuation.definition.string.end.cs | #8A653B | — |
| invalid, invalid.illegal | #FF5370 | — |
| markup.deleted.git_gutter | #FFDA56 | — |
| markup.heading, markup.inserted.git_gutter | #3CAF59 | — |
| entity.other.inherited-class | #a9b7c6 | — |
| entity.other.attribute-name | #a9b7c6 | — |
| entity.other.attribute-name.class, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css | #FFCB6B | — |
| source.sass keyword.control | #82AAFF | — |
| markup.inserted | #C3E88D | — |
| markup.deleted | #FF5370 | — |
| markup.changed | #9D89B5 | — |
| *url*, *link*, *uri* | — | underline |
| tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js | #82AAFF | italic |
| source.js constant.other.object.key.js string.unquoted.label.js | #FF5370 | italic |
| text.html.markdown | #a9b7c6 | — |
| markup.inline.raw.string.markdown | #808080 | — |
| text.html.markdown markup.inline.raw.markdown | #9D89B5 | — |
| text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown | #65737E | — |
| markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown | #9D89B5 | — |
| markup.italic | — | italic |
| markup.bold, markup.bold string | — | bold |
| markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string | — | bold |
| markup.underline | — | underline |
| markup.strike | ||
| markup.quote punctuation.definition.blockquote.markdown | #65737E | — |
| markup.quote | italic | |
| markup.raw.block | #9D89B5 | — |
| markup.raw.block.fenced.markdown | #00000050 | — |
| markup.raw.block.fenced.markdown, variable.language.fenced.markdown | #EEFFFF | — |
| variable.language.fenced.markdown | #65737E | — |
| markup.table | #EEFFFF | — |
| token.info-token | #6796e6 | — |
| token.warn-token | #cd9731 | — |
| token.error-token | #f44747 | — |
| token.debug-token | #b267e6 | — |
| text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name | #a9b7c6 | |
| text.html.basic | #bababa | |
| storage.type.function.arrow | #a9b7c6 | |
| storage.modifier, storage.type | #CC7832#CC7832 | bold |
| storage.type.cs | #a9b7c6 | |
| constant.language.null, constant.language.undefined, constant.language.boolean, constant.language.json | #CC7832 | bold |
| constant.character, constant.escape | #a9b7c6 | — |
| constant.numeric | #6987bb | — |
| constant.other.symbol, constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js | #3CAF59 | — |
| constant.character.escape | #cc7832 | |
| constant.other.reference.link.markdown | #FFCB6B | — |
| constant.other.character-class.set.regexp, constant.other.character-class.regexp | #FFDA56 | — |
| constant.other.color | #CC7832 | bold |
| variable.function | #FFDA56 | — |
| variable, variable.other.property, variable.other.constant.property, variable.other.object.property, variable.other.readwrite.cs | #9D89B5 | — |
| variable.parameter, variable.other.constant, variable.other.object, variable.other.readwrite, support.variable.dom | #a9b7c6 | — |
| variable.import.parameter.js, variable.other.class.js | #FF5370 | — |
| variable.language | #CC7832 | bold |
| variable.function.constructor | #82AAFF | — |
| punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.section.embedded, punctuation.definition.list_item.markdown | #a9b7c6 | — |
| punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag, source.ts meta.decorator.ts meta.objectliteral.ts meta.object.member meta.template tag.open punctuation.definition.tag.begin, source.ts meta.decorator.ts meta.objectliteral.ts meta.object.member meta.#3CAF59template tag.open punctuation.definition.tag.end, source.ts meta.decorator.ts meta.objectliteral.ts meta.object.member meta.template tag.close punctuation.definition.tag.begin, source.ts meta.decorator.ts meta.objectliteral.ts meta.object.member meta.template tag.close punctuation.definition.tag.end | #E8BF6A | — |
| punctuation.definition.string.begin.json, punctuation.definition.string.end.json, punctuation.definition.string.begin, punctuation.definition.string.end | #3CAF59 | — |
| punctuation.separator.dictionary.key-value.json, punctuation.separator.array.json, punctuation.terminator.statement, punctuation.separator.comma, punctuation.definition.keyword | #cc7832 | |
| punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json | #9D89B5 | — |
| punctuation.definition.fenced.markdown | #00000050 | — |
| punctuation.section.class.end | #EEFFFF | — |
| punctuation.definition.group.no-capture.regexp, punctuation.definition.group.regexp, punctuation.decorator, punctuation.definition.character-class.regexp | #FFDA56 | — |
| string constant.other.placeholder | #9D89B5 | — |
| string.other.link | #f07178 | — |
| string | #3CAF59 | — |
| string.other.link.title.markdown, string.other.link.description.markdown | #82AAFF | — |
| string.other.link.description.title.markdown | #9D89B5 | — |
| string.quoted.double.html | #3CAF59 | |
| string.regexp | #3CAF59 | — |
| string.regexp keyword.other | #FFDA56 | — |
| entity.name.function.js.jsx | #77BC87 | — |
| entity.name.tag, entity.name.function, meta.decorator meta.function-call support.class | #FFDA56 | — |
| entity.name | #a9b7c6 | — |
| entity.name.module.js | #FF5370 | — |
| entity.name.method.js | #82AAFF | italic |
| meta.class-method.js entity.name.function.js | #82AAFF | — |
| entity.name.section.markdown, entity.name.variable.field.cs, entity.name.variable.property.cs | #9D89B5 | — |
| entity.name.tag.other.html, entity.name.tag.block.any.html, entity.name.tag.inline.any.html | #E8BF6A | |
| entity.other.attribute-name.localname.cs | #6a828d | underline |
| entity.name.tag.localname.xml | — | |
| support.class, support.orther.namespace.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, support.constant | #a9b7c6 | — |
| support.type.primitive, support.type.builtin, support.type.object.module.tsx | #cc7832 | bold |
| support.type, source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name | #a9b7c6 | — |
| support.function | #FFDA56 | — |
| support.other.variable | #f07178 | — |
| support.variable.property.dom, support.variable.property | #9D89B5 | — |
| keyword.other.unit, keyword.other, keyword.operator | #a9b7c6 | — |
| keyword.operator.quantifier.regexp | #6a9790 | — |
| keyword.other.using.cs, keyword.other.class.cs, keyword.other.new, keyword.other.await, keyword.other.namespace, keyword.type.cs, keyword.other.this, keyword.other.typeof, keyword.control, keyword.other.template, keyword.other.substitution, keyword.operator.new, keyword.operator.await, keyword.operator.expression.instanceof, keyword.operator.expression.typeof | #CC7832 | bold |
| keyword.other.get.cs, keyword.other.set.cs, keyword.other.special-method | #FFDA56 | — |
| markup.deleted.git_gutter, meta.function-call | #FFDA56 | — |
| source.json meta.structure.dictionary.json support.type.property-name.json | #9D89B5 | — |
| text.html.markdown meta.dummy.line-break | — | |
| meta.separator | #65737E | bold |
| meta.object-literal.key, meta.object.member.object-literal.key, source.ts meta.decorator.ts meta.objectliteral.ts meta.object.member | #9D89B5 | — |
| meta.tag.any.html, meta.brace, meta.use.php | #a9b7c6 | |
| meta.tag.block.any.html, meta.tag.inline.any.html, meta.tag.other.html | #bababa | |
| meta.tag | #CC7832 | — |
| meta.block variable.other | #a9b7c6 | — |
| support.constant.property-value.css, keyword.other.unit.px.css | #3CAF59 | — |
| variable.scss, constant.other.color.rgb-value.hex.css | #6897BB | |
| entity.name.tag.css, entity.name.tag.custom.scss, keyword.control.at-rule.include.scss, keyword.control.at-rule.media.scss, keyword.control.operator.css.scss, keyword.control.each.scss, keyword.control.at-rule.import.scss, keyword.control.if.scss, keyword.control.content.scss, keyword.control.else.scss, keyword.control.at-rule.mixin.scss, keyword.control.at-rule.extend.scss | #cc7832 | |
| entity.other.attribute-name.id.css, meta.property-value.scss, support.constant.font-name.css, support.type.map.key.scss | #FFDA56 | — |
| support.class.component.js.jsx, entity.name.tag.js.jsx | #FFDA56 | — |
| meta.jsx.children.js.jsx | #d4d4d4 | — |
| text.angular.html variable.other.readwrite.js, text.angular.html meta.directive.angular support.type.object.module.html, source.ts meta.decorator.ts meta.objectliteral.ts meta.object.member meta.template tag.open meta.tag.attribute-name entity.other.attribute-name | #FFDA56 | — |
| text.angular.html variable.other.object.ts, text.angular.html variable.other.object.js, source.ts meta.decorator.ts meta.objectliteral.ts meta.object.member meta.template tag.open meta.brace.curly variable.other.readwrite.ts, text.angular.html variable.other.readwrite.ts | #9D89B5 | — |
| source.ts meta.class.ts meta.decorator.ts meta.function-call.ts entity.name.function.ts, source.ts meta.class.ts meta.decorator.ts punctuation.decorator.ts, source.ts meta.decorator.ts meta.function-call.ts entity.name.function.ts, source.ts meta.decorator.ts punctuation.decorator.ts | #BBB529 | — |
| text.angular.html expression.angular-interpolation string.regexp.angular-interpolation.begin, text.angular.html expression.angular-interpolation string.regexp.angular-interpolation.end | #cc7832 | — |
| text.angular.html keyword.operator.expression | #cc7832 | bold |
| text.angular.html | #a9b7c6 | — |
| text.angular.html template.ng.tag meta.directive.angular constant.numeric.angular-directive, text.angular.html template.ng.tag meta.directive.angular string.regexp, text.angular.html template.ng.tag meta.directive.angular keyword.operator.entity.html | #b58990 | — |
| text.angular.html string.regexp | #dfd940 | — |
| text.angular.html template.ng.tag meta.directive.angular source.directive.angular entity.name.type.ts | #9D89B5 | — |
| text.angular.html meta.directive.angular source.directive.angular constant.numeric.decimal.js | #6987bb | — |
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}!`;
}