Dragan Color Theme
Publisher: Milad FathyThemes in package: 2
A Beautiful Dark Color Theme For VSCode
A Beautiful Dark Color Theme 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, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment | #4D595F | bold |
| comment, punctuation.definition.comment | #4D595F | bold |
| string, punctuation.definition.string | #21fd6b | — |
| constant.numeric | #F39C12 | — |
| keyword, keyword.control, storage.type, storage.modifier | #b267e6 | bold |
| entity.name.type, entity.name.class, support.type, support.class | #f859b1 | bold |
| entity.name.function, support.function, meta.function-call | #FED604 | bold |
| variable, meta.definition.variable | #00ffd9 | bold |
| variable.parameter | #00ffd9 | — |
| variable.other.property, meta.object-literal.key, support.type.property-name | #f15a4c | — |
| constant.language, constant.other | #2493fa | bold |
| constant.language.boolean.true | #46fc55 | — |
| constant.language.boolean.false | #ee1f18 | — |
| keyword.operator | #37E7AC | — |
| entity.name.tag, support.class.component | #00B2FF | bold |
| entity.other.attribute-name | #fed404ea | — |
| punctuation.separator, punctuation.terminator, punctuation.accessor | #aaa8a8ec | — |
| entity.name.tag | #00B2FF | — |
| entity.other.attribute-name | #fed404ea | — |
| entity.other.attribute-name.class.css | #c34ef1c7 | bold |
| entity.other.keyframe-offset.percentage.css, entity.other.keyframe-offset.css | #37E7AC | — |
| variable.parameter.keyframe-list.css | #FED604 | — |
| support.type.property-name.media.css | #F39C12 | — |
| support.function.misc.css | #F39C12 | — |
| support.function.calc.css | #F39C12 | — |
| support.function.gradient.css | #F39C12 | — |
| variable.css | #f15a4c | — |
| variable.argument.css | #f15a4c | — |
| meta.at-rule.media.header.css | #f15a4c | — |
| entity.other.attribute-name.pseudo-class.css | #d63384 | — |
| meta.tag.other, entity.name.tag.style, entity.name.tag.script, meta.tag.block.script, source.js.embedded punctuation.definition.tag.html, source.css.embedded punctuation.definition.tag.html | #1ab2f8 | — |
| text.html.derivative | #c5c5c5 | — |
| meta.tag.metadata.meta.void.html,punctuation.separator.key-value.html | #FED604 | — |
| meta.attribute.border.html | #FED604 | — |
| entity.other.attribute-name.id.html | #f64ab475 | — |
| punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end | #0587c4 | — |
| meta.tag string -source -punctuation, text source text meta.tag string -punctuation | #37E7AC | — |
| punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html | #D0B344 | — |
| meta.toc-list.id | #88F2AF | — |
| string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, string.quoted.double.handlebars | #37E7AC | — |
| support.type.property-name.css | #37E7AC | — |
| meta.property-list.css | #FED604 | — |
| entity.other.attribute-name.id.css | #CC6699 | bold |
| punctuation.separator.list.comma.css | #c5c5c5 | — |
| keyword.other.unit | #FED604 | — |
| entity.name.tag.css, meta.selector.css | #00B2FF | bold |
| keyword.control.at-rule.media.css | #ab54fd | — |
| constant.other.color.rgb-value.hex.css | #FED604 | — |
| meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css | #FED604 | — |
| support.constant.color.current.css | #FED604 | — |
| constant.numeric.css | #FED604 | — |
| punctuation.definition.string.begin.css,string.quoted.double.css,punctuation.definition.string.end.css,string.quoted.double.css | #FED604 | — |
| entity.other.attribute-name.css | #37E7AC | — |
| keyword.operator.pattern.css | #37E7AC | — |
| string.quoted.double.json | #21fd6b | — |
| support.type.property-name.json | #FED604 | — |
| punctuation.definition.string.end.json,punctuation.definition.string.begin.json | #21fd6b | — |
| constant.language.json | #f533db | — |
| constant.numeric.json | #f15a4c | — |
| source.shell | #f15a4c | — |
| string.unquoted.plain.out.yaml | #f15a4c | — |
| constant.language.boolean.yaml | #FED604 | — |
| constant.numeric.integer.yaml | #F39C12 | — |
| source.ignore | #F39C12 | — |
| string.quoted.single.js,punctuation.definition.string.end.js,punctuation.definition.string.begin.js | #21fd6b | — |
| string.quoted.double.js | #21fd6b | — |
| meta.object-literal.key.js | #f15a4c | — |
| keyword.control.default.js | #f15a4c | — |
| switch-block.expr.js | #f15a4c | — |
| meta.object.member.js | #E2E2E2EC | — |
| punctuation.separator.parameter.js | #E2E2E2EC | — |
| punctuation.definition.section.case-statement.js | #E2E2E2EC | — |
| storage.modifier.async.js,constant.language.null.js,constant.language.undefined.js | #2493fa | bold |
| constant.language.boolean.true.js | #46fc55 | — |
| constant.language.boolean.false.js | #ee1f18 | — |
| support.type.object.module.js | #F39C12 | — |
| punctuation.terminator.statement.js,punctuation.separator.comma.js | #aaa8a8ec | — |
| variable.other.readwrite.js,meta.definition.variable.js,meta.var-single-variable.expr.js | #00ffd9 | bold |
| variable.language.this.js, variable.language.this.ts | #f859b1 | bold |
| entity.other.inherited-class.js | #f859b1 | underline bold |
| support.class.builtin.js | #f859b1 | bold |
| variable.other.readwrite.alias.js,meta.var.expr.js | #FED604 | bold |
| variable.parameter.js | #00ffd9 | — |
| string.template.js,punctuation.definition.string.template.begin.js,punctuation.definition.string.template.end.js | #21fd6b | bold |
| meta.template.expression.js,punctuation.definition.template-expression.begin.js | #21fd6b | bold |
| comment.block.js, comment.line.double-slash.js | — | bold |
| punctuation.definition.template-expression.begin.js | #21fd6b | bold |
| keyword.control.import.js,meta.import.js, keyword.control.from.js | — | bold |
| punctuation.definition.template-expression.end.js | #4d595f | — |
| punctuation.definition.template-expression.begin.js | #4d595f | — |
| meta.embedded.line.js | #00ffd9 | — |
| meta.function-call.js,variable.other.object.js | #F39C12 | bold |
| entity.name.function.js,support.variable.property.js,variable.other.property.js | #FED604 | bold |
| storage.type.js,storage.type.function.js,storage.type.class.js,storage.type.function.arrow.js,storage.modifier.js,meta.class.js | #b267e6 | bold |
| entity.name.type.class.js | #f859b1 | — |
| constant.numeric.decimal.js | #F39C12 | — |
| punctuation.section.embedded.begin.php | #aa95f7 | bold |
| punctuation.section.embedded.end.php | #aa95f7 | bold |
| punctuation.definition.variable | #E26674 | bold |
| variable.other.php,variable.other.global.php,variable.other.property.php | #E26674 | bold |
| constant.numeric.decimal.php | #F39C12 | — |
| support.function.construct.output.php,meta.function-call.php,support.class.php | #F39C12 | bold |
| string.quoted.single.php,string.quoted.double.php | #21fd6b | — |
| support.attribute.builtin.php | #00ffd9 | — |
| constant.language.php | #FED604 | bold |
| storage.type.function.php,storage.type.php,meta.function.parameter.typehinted.php,storage.type.class.php,storage.modifier.php,storage.modifier.extends.php,storage.type.trait.php,storage.modifier.final.php | #b267e6 | bold |
| entity.name.function.php,support.function.constructor.php,support.function.magic.php,support.class.builtin.php | #FED604 | bold |
| storage.modifier.implements.php | #b267e6 | bold |
| entity.name.type.class.php,variable.language.this.php,entity.name.type.trait.php | #f859b1 | bold |
| entity.other.inherited-class.php | #f859b1 | bold underline |
| entity.other.alias.php | #f859b1 | bold |
| support.class.php,meta.use.php | #f859b1 | bold |
| variable.other.global.safer.php | #E26674 | bold |
| variable.other.class.php | #E26674 | bold |
| support.function.construct.php, meta.array.php | #F39C12 | bold |
| constant.other.class.php | #F39C12 | bold |
| constant.other.php | #F39C12 | bold |
| support.other.namespace.php | #fca420 | — |
| entity.name.type.namespace.php | #fca420 | — |
| keyword.other.sql, keyword | #b267e6 | — |
| support.function.table.sql, source.sql | #37E7AC | — |
| keyword.operator.comparison.sql, source.sql | #0C88FF | — |
| keyword.other.DML.sql | #f8ec40 | — |
| source.sql | #f44747 | — |
| storage.modifier.sql | #0C88FF | — |
| variable.scss | #CC6699 | — |
| meta.definition.variable.scss | #E26662 | — |
| source.css.scss | #CC6699 | — |
| punctuation.separator.key-value.scss,punctuation.terminator.rule.scss,punctuation.terminator.rule.css | #c8c8c8 | — |
| punctuation.definition.string.begin.scss,punctuation.definition.string.end.scss | #37E7AC | — |
| keyword.control.at-rule.include.scss | #B267E6 | — |
| keyword.control.at-rule.mixin.scss | #B267E6 | — |
| keyword.control.at-rule.use.scss | #B267E6 | — |
| entity.name.function.scss | #B267E6 | — |
| punctuation.section.property-list.begin.bracket.curly.scss,punctuation.section.property-list.end.bracket.curly.scss | #c8c8c8 | — |
| punctuation.definition.heading.markdown, markup.heading.markdown | #0C88FF | bold |
| markup.italic.markdown | #eb0cff | italic |
| punctuation.definition.bold.markdown,markup.bold.markdown | #db1c75 | bold |
| markup.quote.markdown | #41aeec | — |
| markup.underline.link.markdown,meta.link.inline.markdown | #1f22fa | — |
| markup.underline.link.markdown,meta.link.inline.markdown | #7538e6 | — |
| markup.list.unnumbered.markdown | #e6e336 | — |
| markup.list.numbered.markdown | #d3aa25 | — |
| markup.inline.raw.string.markdown | #eb6632 | — |
| comment | #4d595f | bold |
| markup.fenced_code.block.markdown | #b132eb | — |
| punctuation.separator.key-value.css | #c2c2c2 | — |
| markup.raw.block.markdown | #2c7233 | — |
| entity.name.function.mongodb | #fca420 | — |
| variable.other.object.property.mongodb | #fca420 | — |
| string.quoted.single.mongodb,string.quoted.double.mongodb | #21fd6b | — |
| variable.other.object.mongodb,meta.function-call.mongodb,support.function.mongodb | #FED604 | — |
| variable.other.property.mongodb, constant.numeric.decimal.mongodb | #fca420 | — |
| variable.other.constant.object.property.mongodb | #fca420 | — |
| variable.other.readwrite.mongodb,meta.object-literal.key.mongodb | #f44747 | — |
| punctuation.accessor.mongodb | #e6f0ee | — |
| string.quoted.single.ts,punctuation.definition.string.end.ts,punctuation.definition.string.begin.ts | #21fd6b | — |
| string.quoted.double.ts | #21fd6b | — |
| meta.object-literal.key.ts | #f15a4c | — |
| keyword.control.default.ts | #f15a4c | — |
| switch-block.expr.ts | #f15a4c | — |
| meta.object.member.ts | #E2E2E2EC | — |
| punctuation.separator.parameter.ts | #E2E2E2EC | — |
| punctuation.definition.section.case-statement.ts | #E2E2E2EC | — |
| constant.language.undefined.ts,storage.modifier.async.ts,constant.language.null.ts | #2493fa | bold |
| constant.language.boolean.true.ts | #46fc55 | — |
| constant.language.boolean.false.ts | #ee1f18 | — |
| support.type.object.module.ts | #F39C12 | — |
| punctuation.separator.parameter.ts,punctuation.terminator.statement.ts,punctuation.separator.comma.ts | #aaa8a8ec | — |
| variable.other.readwrite.ts,meta.definition.variable.ts,meta.var-single-variable.expr.ts | #00ffd9 | bold |
| variable.language.this.ts, keyword.operator.new.tsx | #f859b1 | bold |
| entity.other.inherited-class.ts | #f859b1 | underline bold |
| support.class.builtin.ts | #f859b1 | bold |
| variable.other.readwrite.alias.ts,meta.var.expr.ts | #FED604 | bold |
| variable.parameter.ts | #00ffd9 | — |
| string.template.ts,punctuation.definition.string.template.begin.ts,punctuation.definition.string.template.end.ts | #21fd6b | bold |
| meta.template.expression.ts,punctuation.definition.template-expression.begin.ts | #21fd6b | bold |
| comment.block.ts, comment.line.double-slash.ts | — | bold |
| punctuation.definition.template-expression.begin.ts | #21fd6b | bold |
| keyword.control.import.ts,meta.import.ts, keyword.control.from.ts | — | bold |
| punctuation.definition.template-expression.end.ts | #4d595f | — |
| punctuation.definition.template-expression.begin.ts | #4d595f | — |
| meta.embedded.line.ts | #00ffd9 | — |
| meta.function-call.ts,variable.other.object.ts | #F39C12 | bold |
| variable.other.enummember.ts,variable.object.property.ts,entity.name.function.ts,support.variable.property.ts,variable.other.property.ts | #FED604 | bold |
| punctuation.definition.typeparameters.end.ts, punctuation.definition.typeparameters.begin.ts, storage.modifier.ts, storage.type.ts,storage.type.function.ts,storage.type.class.ts,storage.type.function.arrow.ts,storage.modifier.ts,meta.class.ts, storage.type.interface.ts | #b267e6 | bold |
| entity.name.type.enum.ts,entity.name.type.class.ts, entity.name.type.interface.ts | #f859b1 | — |
| constant.numeric.decimal.ts | #F39C12 | — |
| storage.type.enum.ts, entity.name.type.ts,support.type.primitive.ts, support.type.builtin.ts | #f15a4c | — |
| punctuation.definition.tag.directive.ts | #0587c4 | — |
| variable.other.env | #FED604 | — |
| constant.language.env,source.env | #21fd6b | — |
| property.value.dotenv | #FED604 | — |
| keyword.operator.assignment.env | #00ffd9 | — |
| constant.numeric.env | #F39C12 | — |
| comment.line.number-sign.python | #4D595F | — |
| source.python | #00FFD9 | — |
| constant.numeric.dec.python | #F39C12 | — |
| constant.numeric.float.python | #e6e336 | — |
| string.quoted.single.python | #21FD6B | — |
| support.function.builtin.python, meta.function-call.python, entity.name.function.python, support.function.magic.python | #FED604 | — |
| punctuation.separator.dict.python, punctuation.separator.element.python | #B267E6 | — |
| keyword.control.flow.python, storage.type.function.python, storage.type.class.python | #B267E6 | — |
| entity.name.type.class.python | #F859B1 | — |
| keyword.operator.comparison.python, keyword.operator.bitwise.python | #2493fa | — |
| meta.function-call.arguments.python | #00FFD9 | — |
| meta.attribute.python | #f15a4c | — |
| constant.language.python | #f15a4c | — |
| punctuation.separator.colon.python, punctuation.separator.arguments.python | #B267E6 | — |
| entity.name.tag.vue, support.class.component.vue, meta.tag.other.html.vue | #f859b1 | bold |
| entity.other.attribute-name.directive.vue, meta.directive.vue, entity.other.attribute-name.vue | #b267e6 | italic bold |
| punctuation.definition.expression.begin.vue, punctuation.definition.expression.end.vue | #D0B344 | bold |
| entity.name.tag.script.vue, entity.name.tag.style.vue | #00B2FF | bold |
| support.class.component.tsx, entity.name.tag.tsx, meta.tag.tsx | #00B2FF | bold |
| support.class.component.tsx | #00B2FF | bold |
| entity.other.attribute-name.tsx | #fed404ea | — |
| support.function.react.tsx, meta.function-call.tsx | #FED604 | bold |
| punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, meta.jsx.children.tsx | #D0B344 | bold |
| entity.name.type.interface.tsx, entity.name.type.alias.tsx, entity.name.type.tsx | #f859b1 | bold |
| variable.other.readwrite.tsx, keyword.control.tsx, storage.type.tsx | #B267E6 | bold |
| keyword.control.cs, storage.modifier.cs, storage.type.cs, keyword.other.cs | #b267e6 | bold |
| variable.other.object.property.cs, variable.other.object.cs, keyword.operator.expression.query.where.cs, keyword.operator.expression.query.orderby.cs, keyword.operator.expression.query.select.cs | #f15a4c | bold |
| entity.name.type.class.cs, entity.name.type.interface.cs, entity.name.type.struct.cs, entity.name.type.delegate.cs, entity.name.type.enum.cs | #f859b1 | bold |
| entity.name.function.cs, meta.method.cs, meta.method-call.cs | #FED604 | bold |
| variable.other.readwrite.cs, variable.other.object.property.cs, variable.other.object.cs, entity.name.variable.property.cs | #00ffd9 | bold |
| constant.language.null.cs, constant.language.boolean.true.cs, constant.language.boolean.false.cs | #2493fa | bold |
| meta.attribute.cs, entity.name.type.attribute.cs | #37E7AC | — |
| entity.name.type.namespace.cs, keyword.other.using.cs | #fca420 | bold |
| punctuation.attribute-shorthand.event.html.vue, punctuation.decorator.ts | #FED404EA | bold |
| punctuation.section.block, punctuation.definition.block, punctuation.section.parameters, punctuation.definition.parameters, punctuation.section.arguments, punctuation.definition.arguments, punctuation.definition.list, punctuation.definition.array, meta.brace, punctuation.section.bracket | #aaa8a8ec | bold |
| storage.type.primitive.cpp, storage.type.primitive.cs, storage.type.built-in.cpp, storage.type.built-in.cs, entity.name.type.cpp, entity.name.type.cs | #b267e6 | bold |
| storage.modifier.cpp, storage.modifier.cs, keyword.control.cpp, keyword.control.cs, keyword.other.directive.cpp, entity.name.scope-resolution.parameter.cpp | #b267e6 | bold |
| entity.name.function.cpp, entity.name.function.cs, meta.function.cpp | #FED604 | bold |
| variable.other.cpp, variable.other.cs, variable.parameter.cpp, variable.parameter.cs, meta.body.struct.cpp | #00ffd9 | — |
| meta.preprocessor.cpp, keyword.control.directive.cpp, entity.name.namespace.cpp, storage.modifier.virtual.cs | #fca420 | bold |
| meta.body.class.cpp, meta.parens.cpp, meta.body.function.definition.cpp | #00ffd9 | bold |
| entity.name.scope-resolution.cpp, source.cs, punctuation.separator.hash.cs | #b267e6 | bold |
| entity.name.variable.field.cs, entity.name.variable.parameter.cs | #00ffd9 | bold |
| constant.language.boolean.false.cs | #ee1f18 | bold |
| constant.language.boolean.true.cs | #46fc55 | bold |
| keyword.type.int.cs | #fca420 | bold |
| keyword.type.string.cs | #46fc55 | bold |
| keyword.type.bool.cs, entity.name.variable.preprocessor.symbol.cs | #FED604 | bold |
| entity.name.namespace.rust | #fca420 | bold |
| source.rust | #b267e6 | bold |
| entity.name.type.rust | #2493fa | bold |
| source.ruby | #f859b1 | bold |
| source.dart | #2493fa | bold |
| source.kotlin | #f15a4c | bold |
| meta.block.kotlin | #2493fa | bold |
| source.java | #00ffd9 | bold |
| variable.other.object.property.java, variable.other.object.java | #2493fa | bold |
| meta.method.body.java | #fca420 | bold |
| variable.language.this.java | #f859b1 | bold |
| entity.other.inherited-class.java | #f859b1 | bold |
| emeta.class.body.java | #2493fa | bold |
| meta.paragraph.markdown | #c5c5c5 | bold |
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}!`;
}