Skip to main content
DevPro theme | Coding Theme
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBarBadge.background #007acc editor.background #2e323b editor.findMatchBackground #ff000077 editor.findMatchBorder #fdae02ff editor.findMatchHighlightBackground #ae02fd77 editor.findMatchHighlightBorder #fdae02ff tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, comment.line.double-slash.js, comment.block.html, comment.block.handlebars #505050 — string, string.tag, string.value, meta.preprocessor.string #bbbbbb — variable, support.variable, meta.definition.variable.name #DCDCAA — entity.name.function, support.function, support.constant.handlebars #88C0D0 —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
DevPro theme — DevPro v2020
editor.findRangeHighlightBackground #fdae02
editor.findRangeHighlightBorder #ff0000ff
editor.foreground #bbbbbb
editor.hoverHighlightBackground #000000
editor.inactiveSelectionBackground #434c5ecc
editor.lineHighlightBackground #00000033
editor.lineHighlightBorder #00000044
editor.rangeHighlightBackground #520000
editor.selectionBackground #850000
editor.selectionForeground #ffffff
editor.selectionHighlightBackground #6b6b6b
editor.selectionHighlightBorder #7c7b7b
editor.wordHighlightBackground #ffffff00
editor.wordHighlightBorder #ffffff
editor.wordHighlightStrongBackground #ffffff00
editor.wordHighlightStrongBorder #ffffff
editorError.border #ff0000
editorError.foreground #ff000000
editorGutter.addedBackground #608b4e
editorGutter.deletedBackground #d16969
editorGutter.modifiedBackground #d7ba7d
editorIndentGuide.activeBackground #707070
editorIndentGuide.background #404040
editorInfo.foreground #9cdcfe
editorOverviewRuler.addedForeground #608b4e
editorOverviewRuler.deletedForeground #d16969
editorOverviewRuler.errorForeground #ff0000
editorOverviewRuler.infoForeground #d4d4d4
editorOverviewRuler.modifiedForeground #d7ba7d
editorOverviewRuler.warningForeground #d7ba7d
editorWarning.foreground #d7ba7d
gitDecoration.addedResourceForeground #608b4e
gitDecoration.conflictingResourceForeground #d16969
gitDecoration.deletedResourceForeground #d7ba7d
gitDecoration.ignoredResourceForeground #808080
gitDecoration.modifiedResourceForeground #608b4e
gitDecoration.untrackedResourceForeground #d7ba7d
list.dropBackground #383b3d
minimap.errorHighlight #ff0000
sideBarTitle.foreground #bbbbbb
terminal.ansiBlack #1e1e1e
terminal.ansiBlue #569cd6
terminal.ansiBrightBlack #808080
terminal.ansiBrightBlue #9cdcfe
terminal.ansiBrightCyan #4ec9b0
terminal.ansiBrightGreen #b5cea8
terminal.ansiBrightMagenta #c586c0
terminal.ansiBrightRed #d16969
terminal.ansiBrightWhite #808080
terminal.ansiBrightYellow #ce9178
terminal.ansiCyan #4ec9b0
terminal.ansiGreen #608b4e
terminal.ansiMagenta #c586c0
terminal.ansiRed #d16969
terminal.ansiWhite #d4d4d4
terminal.ansiYellow #d7ba7d
terminal.background #1e1e1e
terminal.foreground #d4d4d4
terminal.selectionBackground #add6ff26
terminalCursor.foreground #808080
tree.indentGuidesStroke #00ff00 keyword.control, keyword.operator
storage, storage.type, storage.modifier, constant.other.placeholder, keyword, keyword.control, meta.preprocessor, keyword.control.new, constant.language, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof #88e09e —
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy #4ec9b0 —
comment.block.js, comment.line.shebang.js, comment.line.number-sign.shebang.shell, comment.block.documentation.js, comment.block.go, comment.block.documentation.ts, comment.line.number-sign.ini, comment.line.number-sign.yaml #608b4e —
meta.tag.sgml.html, meta.tag.sgml.doctype.html, meta.tag.sgml.html punctuation.definition.tag.html, meta.structure.dictionary.json, punctuation.definition.array.begin.json, punctuation.definition.array.end.json, punctuation.separator.array.json, punctuation.terminator, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown, invalid.illegal.bad-comments-or-CDATA.html, punctuation.definition.italic.markdown, punctuation.definition.bold.markdown #505050 —
meta.embedded.block.sql #d4d4d4 —
constant.numeric, keyword.other.unit, meta.preprocessor.numeric #b5cea8 —
meta.selector, constant.character, constant.other.symbol, constant.character.escape #d7ba7d —
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class #4ec9b0 —
code-runner.output code-runner.running string, code-runner.running code-runner.done string #ce9178 italic
token.error-token #ff0000 —
token.debug-token #c586c0 —
support.function.C99.c, entity.name.function.c #dcdcaa —
comment.block.c, punctuation.terminator.statement.c #505050 —
string.quoted.single.c #d7ba7d —
meta.preprocessor.include.c string.quoted.other.lt-gt.include.c punctuation.definition.string.begin.c, meta.preprocessor.include.c string.quoted.other.lt-gt.include.c punctuation.definition.string.end.c #808080 —
punctuation.section.arguments.begin.bracket.round.c, punctuation.section.arguments.end.bracket.round.c, punctuation.section.parens.begin.bracket.round.c, punctuation.section.parens.end.bracket.round.c, punctuation.section.parameters.begin.bracket.round.c, punctuation.section.parameters.end.bracket.round.c, punctuation.separator.delimiter.c #d4d4d4 —
constant.other.variable.mac-classic.c, string.quoted.double.include.c, string.quoted.other.lt-gt.include.c, meta.preprocessor.include.c string.quoted.other.lt-gt.include.c #9cdcfe —
punctuation.separator.pointer-access.c, keyword.control.directive.include.c #c586c0 —
storage.type.c, support.type.mac-classic.c #4ec9b0 —
constant.other.placeholder.c, constant.language.c, keyword.operator.sizeof.c #569cd6 —
punctuation.separator.namespace.access.cpp #4ec9b0 —
source.cpp keyword.operator.bitwise.shift.c #569cd6 —
keyword.operator.macro.crystal — italic
string.regexp.group.crystal punctuation.definition.group.crystal #808080 —
punctuation.separator.variable.crystal, punctuation.separator.object.crystal, punctuation.definition.parameters.crystal #d4d4d4 —
source.crystal.embedded.source #9cdcfe —
punctuation.separator.method.crystal #c586c0 —
support.class.crystal, punctuation.separator.other.crystal #4ec9b0 —
variable.language.crystal, punctuation.section.embedded.crystal, punctuation.section.embedded.begin.crystal, punctuation.section.embedded.end.crystal, keyword.control.special-method.crystal, source.crystal punctuation.separator.key-value #569cd6 —
string.quoted.single.crystal, constant.other.symbol.crystal #d7ba7d —
entity.name.tag.localname.cs, punctuation.definition.tag.cs, punctuation.terminator.statement.cs, source.cs comment.block.documentation.cs punctuation.definition.comment.cs, source.cs comment.block.documentation.cs meta.tag.cs punctuation.separator.equals.cs #505050 —
string.bracers.round.cshtml, punctuation.curlybrace.open.cs, punctuation.curlybrace.close.cs, punctuation.squarebracket.open.cs, punctuation.squarebracket.close.cs #d4d4d4 —
entity.name.variable.property.cs, entity.name.variable.parameter.cs, entity.name.variable.field.cs, entity.name.variable.local.cs, meta.interpolation.cs variable.other.object.property.cs #9cdcfe —
keyword.type.cs, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs #4ec9b0 —
keyword.other.this.cs #569cd6 italic
keyword.other.new.cs, keyword.other.var.cs, keyword.other.as.cs, keyword.other.is.cs, keyword.other.base.cs, keyword.other.where.cs, keyword.other.typeof.cs, keyword.other.default.cs, keyword.operator.arrow.cs, keyword.other.namespace.cs, punctuation.separator.colon.cs, punctuation.separator.question-mark.cs, punctuation.definition.typeparameters.begin.cs, punctuation.definition.typeparameters.end.cs, punctuation.definition.interpolation.begin.cs, punctuation.definition.interpolation.end.cs #569cd6 —
keyword.other.get.cs, keyword.other.set.cs #dcdcaa —
meta.preprocessor.cs punctuation.separator.hash.cs, punctuation.accessor.cs, keyword.other.await.cs, keyword.operator.assignment.cs, keyword.operator.comparison.cs #c586c0 —
meta.property-list.scss, punctuation.terminator.rule.css, punctuation.terminator.rule.scss, punctuation.separator.key-value.css, punctuation.separator.list.comma.css, punctuation.section.property-list.begin.bracket.curly, punctuation.section.property-list.end.bracket.curly, punctuation.section.media.begin.bracket.curly, punctuation.section.media.end.bracket.curly, punctuation.section.keyframes.begin.bracket.curly.scss, punctuation.section.keyframes.end.bracket.curly.scss, source.css.scss meta.at-rule.keyframes.scss punctuation.section.keyframes.begin.scss, source.css.scss meta.at-rule.keyframes.scss punctuation.section.keyframes.end.scss, punctuation.section.supports.begin.bracket.curly, punctuation.section.supports.end.bracket.curly #505050 —
keyword.other.important.css, keyword.other.important.sass, keyword.other.important.scss, keyword.other.important.less, keyword.other.default.scss, keyword.other.default.sass — italic
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss, meta.at-rule.keyframes.stylus entity.other.attribute-name.stylus, meta.at-rule.keyframes.scss entity.other.attribute-name.scss #d7ba7d —
invalid.deprecated.color.system.css, punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, punctuation.definition.media-query.begin.bracket.round, punctuation.definition.media-query.end.bracket.round, punctuation.definition.pseudo-class.begin.bracket.round, punctuation.definition.pseudo-class.end.bracket.round, meta.property-value.scss, meta.property-name.scss, meta.at-rule.extend, meta.at-rule.extend.sass, meta.at-rule.extend.scss, punctuation.section.function.scss, punctuation.section.keyframes.begin.scss, punctuation.section.keyframes.end.scss, constant.other.scss #d4d4d4 —
entity.name.tag.css, keyword.other.important.css, keyword.other.default.scss, punctuation.definition.interpolation.begin.bracket.curly, punctuation.definition.interpolation.end.bracket.curly #569cd6 —
support.type.property-name.media.css, support.type.property-name, variable.css, variable.scss, variable.other.less, support.type.vendored.property-name.css, meta.at-rule.include.scss, support.constant.vendored.property-value.css #9cdcfe —
meta.attribute-selector.css #4ec9b0 —
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color #ce9178 —
entity.other.attribute-name.pseudo-element.css punctuation.definition.entity.css, meta.selector.css entity.other.attribute-name.pseudo-class.css punctuation.definition.entity.css, punctuation.definition.entity.begin.bracket.square.css, punctuation.definition.entity.end.bracket.square.css, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css #c586c0 —
punctuation.definition.keyword.stylus #c586c0 —
meta.interpolation.stylus #9cdcfe —
entity.other.attribute-name.parent-selector-suffix.stylus #d7ba7d —
meta.interpolation.stylus meta.brace.curly #569cd6 —
punctuation.semi-colon.css, meta.brace.curly.css #505050 —
constant.hex.css, meta.identifier.css #ce9178 —
constant.percentage.units.css, constant.length.units.css, entity.other.keyframe-offset.percentage.css #b5cea8 —
entity.name.tag.styledcss.js #4ec9b0 —
invalid.rainbow10 #c586c0 —
markup.bold.rainbow9 #007acc —
entity.name.type.rainbow8 #569cd6 —
constant.numeric.rainbow7 #9cdcfe —
variable.parameter.rainbow6 #4ec9b0 —
entity.name.function.rainbow3 #d7ba7d —
comment.wildcard.elixir, comment.unused.elixir #9cdcfe italic
punctuation.section.function.elixir #d4d4d4 —
parameter.variable.function.elixir, source.elixir.embedded.source, variable.other.readwrite.module.elixir, variable.other.anonymous.elixir #9cdcfe —
punctuation.separator.method.elixir #c586c0 —
meta.module.elixir, entity.name.type.module.elixir, variable.other.readwrite.module.elixir, variable.other.constant.elixir #4ec9b0 —
constant.other.symbol.elixir, punctuation.section.embedded.elixir, punctuation.definition.variable.elixir, variable.language.elixir, source.elixir.embedded.source punctuation.section.embedded.elixir #569cd6 —
constant.other.symbol.elixir, punctuation.definition.constant.elixir, support.function.variable.quoted.single.elixir #d7ba7d —
punctuation.section.embedded.elixir #4ec9b0 —
punctuation.definition.placeholder.erlang, constant.other.placeholder.erlang #d7ba7d —
punctuation.separator.parameters.erlang #d4d4d4 —
punctuation.section.directive.begin.erlang, punctuation.section.directive.end.erlang, punctuation.separator.module-function.erlang, punctuation.separator.record-field.erlang, punctuation.separator.list.erlang, keyword.operator.symbolic.erlang, punctuation.separator.clause-head-body.erlang #c586c0 —
punctuation.separator.clauses.erlang, punctuation.terminator.function.erlang #808080 —
punctuation.separator.function-arity.erlang, variable.language.omitted.erlang #569cd6 —
variable.other.erlang #9cdcfe —
keyword.operator.assignment.go, keyword.operator.arithmetic.go, keyword.operator.comparison.go, keyword.operator.address.go, keyword.operator.arithmetic.bitwise.go, punctuation.terminator.go, punctuation.other.colon.go, punctuation.other.period.go, keyword.control.gotemplate #c586c0 —
string.quoted.double.gotemplate #ce9178 —
source.go storage.type, storage.type.boolean.go, storage.type.byte.go, storage.type.numeric.go, storage.type.string.go, storage.type.error.go, storage.type.rune.go #4ec9b0 —
constant.other.rune.go, constant.character.escape.go, string.quoted.rune.go punctuation.definition.string.begin.go, string.quoted.rune.go punctuation.definition.string.end.go #d7ba7d —
constant.other.placeholder.go, variable.other.blank.go, keyword.operator.pointer.go, keyword.operator.address.go, keyword.operator.ellipsis.go #569cd6 —
punctuation.section.embedded.begin.gotemplate, punctuation.section.embedded.end.gotemplate #4ec9b0 —
entity.alias.import.go #9cdcfe —
entity.scalar.graphql, entity.name.fragment.graphql #4ec9b0 —
punctuation.or.graphql, punctuation.assignment.graphql #c586c0 —
graphql.description.SINGLELINE, string.block.description.graphql.DOCSTRING, string.description.graphql #608b4e —
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java #d4d4d4 —
punctuation.separator.period.java #c586c0 —
storage.type.builtin.kotlin, storage.type.builtin.collection.kotlin, entity.name.package.kotlin #4ec9b0 —
meta.template.expression.kotlin #9cdcfe —
keyword.hard.kotlin #c586c0 —
storage.type.scala, storage.type.primitive.scala, meta.colon.scala #4ec9b0 —
source.groovy.embedded.source #9cdcfe —
keyword.operator.assignment.groovy, keyword.operator.arithmetic.groovy, keyword.control.exception.groovy #c586c0 —
punctuation.section.embedded.groovy, constant.other.groovy #569cd6 —
meta.method.groovy #dcdcaa —
constant.character.escape.groovy #d7ba7d —
comment.block, comment.block.documentation.js, comment.block.documentation.js storage.type.class.jsdoc punctuation.definition.block.tag.jsdoc, comment.line.triple-slash.directive.ts, comment.block.documentation.ts, comment.line.shebang.js #7e7e7e —
comment.block.documentation.js storage.type.class.jsdoc punctuation.definition.block.tag.jsdoc, punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc, storage.type.class.jsdoc #608b4e italic
punctuation.definition.comment.js #404040 —
comment.line.double-slash.js, meta.embedded.expression.js source.js.jsx comment.block.js #505050 —
variable.language.this #569cd6 italic
constant.character.escape.js #d7ba7d —
keyword.other.template.begin.js, keyword.other.template.end.js, punctuation.definition.string.template.begin.js, punctuation.definition.string.template.begin.ts, punctuation.definition.string.template.end.js, punctuation.definition.string.template.end.ts #ce9178 —
punctuation.separator.key-value.js, punctuation.separator.key-value.ts, punctuation.definition.block.js, punctuation.definition.block.ts, punctuation.separator.comma.js, punctuation.separator.comma.ts, punctuation.separator.parameter, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, meta.brace.square.js, entity.quasi.element.js, comment.block.documentation.js keyword.operator.accessor.js, punctuation.definition.binding-pattern.object, meta.brace.square.ts #d4d4d4 —
new.expr.js, meta.arrow.js, keyword.operator.new.js, storage.type.extends.js, variable.language.super, storage.type.function.arrow.js, keyword.operator.spread, keyword.operator.rest, keyword.operator.module.all.js, meta.brace.angle.ts, meta.brace.angle.tsx, comment.line.triple-slash.directive.ts, punctuation.definition.tag.directive.ts, punctuation.definition.typeparameters.begin.ts, punctuation.definition.typeparameters.end.ts, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.begin.tsx, punctuation.definition.template-expression.end.tsx, punctuation.quasi.element.end.js, punctuation.quasi.element.begin.js, punctuation.section.embedded.coffee, punctuation.definition.binding-pattern.object #569cd6 —
meta.template.expression.js, meta.template.expression.ts, meta.brace.round.ts, meta.brace.round.js, meta.tag.without-attributes.js meta.jsx.children.js, meta.jsx.children.js #d4d4d4 —
support.function.js, meta.function-call.js support.function.js, entity.name.function.js, meta.function-call.js entity.name.function.js, variable.function.js, meta.function-call.method.with-arguments.js, keyword.control.require.ts, punctuation.decorator.js, punctuation.decorator.ts, meta.decorator.ts, meta.decorator.js, meta.decorator.ts variable.other.readwrite.ts, meta.decorator.js variable.other.readwrite.js #dcdcaa —
keyword.operator.js, punctuation.accessor.js, punctuation.accessor.ts, keyword.operator.typeof.js, keyword.operator.logical.js, keyword.operator.in.js, keyword.operator.arithmetic.js, keyword.operator.assignment.js, keyword.operator.comparison.js, keyword.operator.relational.js, keyword.operator.expression.of, keyword.operator.expression.in, punctuation.definition.section.case-statement #c586c0 —
string.unquoted.js, string.unquoted.label.js, meta.object-literal.key, meta.property.object.js, constant.other.object.key.js, constant.other.object.key string.quoted.double, meta.object-literal.key string.quoted.single, meta.object-literal.key string.quoted.double, string.quoted.single meta.object-literal.key, string.quoted.double meta.object-literal.key, meta.decorator.ts meta.objectliteral.ts meta.object.member.ts variable.other.readwrite.ts, meta.decorator.js meta.objectliteral.js meta.object.member.js variable.other.readwrite.js #9cdcfe —
keyword.operator.optional.ts, support.type.object.module.js, support.type.object.module.js.jsx, support.type.object.module keyword.operator.accessor, keyword.operator.type.annotation.ts, keyword.operator.type.annotation.tsx, keyword.operator.definiteassignment.ts, keyword.operator.definiteassignment.tsx, punctuation.type.flowtype, support.variable.dom, support.variable.object, support.variable.object.node, support.variable.object.process, support.variable.property.process #4ec9b0 —
support.type.primitive.ts, support.type.primitive.tsx #4ec9b0 —
punctuation.section.embedded.begin.js.jsx, punctuation.section.embedded.end.js.jsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, meta.tag.js meta.jsx.children.js meta.tag.js meta.jsx.children.js meta.embedded.expression.js punctuation.section.embedded.begin.js, meta.tag.js meta.jsx.children.js meta.tag.js meta.jsx.children.js meta.embedded.expression.js punctuation.section.embedded.end.js, meta.tag.js punctuation.section.embedded.begin.js, meta.tag.js punctuation.section.embedded.end.js, meta.tag.without-attributes.js punctuation.section.embedded.begin.js, meta.tag.without-attributes.js punctuation.section.embedded.end.js #4ec9b0 —
meta.component.decoration entity.name.label.ts #9cdcfe —
comment.line.number-sign.makefile #608b4e —
variable.other.makefile #9cdcfe —
variable.language.makefile #569cd6 —
entity.name.function.target.makefile, constant.character.escape.continuation.makefile #dcdcaa —
punctuation.separator.key-value.makefile, support.function.foreach.makefile, keyword.control.ifeq.makefile, keyword.control.endif.makefile, constant.character.escape.continuation.makefile #c586c0 —
storage.source.cmake #9cdcfe —
markup.underline — underline
markup.italic, emphasis — italic
markup.inline.raw #ce9178 —
fenced_code.block.language #4ec9b0 —
markup.italic.markdown #9cdcfe italic
markup.bold.markdown #569cd6 bold
meta.separator.markdown, entity.name.section.markdown, punctuation.definition.heading.markdown #c586c0 —
markup.quote.markdown #608b4e —
beginning.punctuation.definition.list.markdown, punctuation.definition.list.begin.markdown #6796e6 —
string.other.link.description.markdown, string.other.link.title.markdown #9cdcfe —
markup.underline.link.markdown, markup.underline.link.image.markdown #404040 —
markup.fenced_code.block.markdown punctuation.definition.markdown, punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.raw.markdown, beginning.punctuation.definition.quote.markdown, meta.link.reference.def.markdown punctuation.definition.constant.markdown, meta.link.reference.def.markdown punctuation.separator.key-value.markdown, meta.link.reference.markdown punctuation.definition.constant.begin.markdown, meta.link.reference.markdown punctuation.definition.constant.end.markdown, meta.image.reference.markdown punctuation.definition.constant.markdown, block-dollars, inline-dollars #303030 —
meta.link.reference.def.markdown constant.other.reference.link.markdown #569cd6 —
meta.link.reference.markdown constant.other.reference.link.markdown, meta.image.reference.markdown constant.other.reference.link.markdown #404040 italic
meta.link.reference.def.markdown markup.underline.link.markdown #ce9178 —
source.org comment.line, source.org punctuation.definition.comment, meta.link.inline.org punctuation.definition.string.begin.org, meta.link.inline.org punctuation.definition.string.end.org, meta.link.inline.org markup.underline.link.org #505050 —
string.quoted.docstring.multi.python, string.quoted.docstring.multi.python keyword.control.flow.python #608b4e —
variable.language.special.self.python, support.function.magic.python, support.variable.magic.python, storage.type.string.python, variable.parameter.function.language.special.self.python, meta.function.decorator.python support.type.python — italic
meta.function-call.arguments.python, keyword.operator.assignment.python, punctuation.separator.period.python, punctuation.separator.element.python, punctuation.separator.dict.python, punctuation.separator.parameters.python, punctuation.separator.arguments.python, punctuation.section.class.begin.python, punctuation.section.function.begin.python, punctuation.section.function.end.python, punctuation.definition.inheritance.begin.python, punctuation.definition.inheritance.end.python, punctuation.definition.parameters.begin.python, punctuation.definition.parameters.end.python, punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python, punctuation.definition.list.begin.python, punctuation.definition.list.end.python, punctuation.definition.dict.begin.python, punctuation.definition.dict.end.python, punctuation.parenthesis.begin.python, punctuation.parenthesis.end.python, punctuation.separator.dict.python, punctuation.section.function.begin.python, meta.function.parameters.begin.python, meta.function.parameters.end.python #d4d4d4 —
punctuation.section.function.begin.python, punctuation.section.class.begin.python, variable.language.special.self.python, variable.parameter.function.language.special.self.python, constant.character.format.placeholder.other.python, keyword.operator.unpacking.parameter.python, keyword.operator.unpacking.arguments.python #569cd6 —
meta.function-call.python, meta.function-call.generic.python, meta.function.decorator.python support.type.python #dcdcaa —
variable.parameter.function-call.python, meta.structure.dictionary.key.python, meta.function-call.arguments.python, meta.function.parameters.python, constant.other.caps.python #9cdcfe —
support.type.python, entity.name.type.class.python, punctuation.separator.annotation.python, punctuation.separator.annotation.result.python #4ec9b0 —
punctuation.separator.period.python, keyword.operator.comparison.python, keyword.operator.assignment.python, keyword.operator.logical.python, punctuation.separator.slice.python, punctuation.separator.colon.python #c586c0 —
constant.character.escape.python, string.quoted.binary.single.python #d7ba7d —
punctuation.definition.string.begin.ruby, punctuation.definition.string.end.ruby #ce9178 —
variable.other.ruby, variable.other.constant.ruby, constant.language.symbol.hashkey.ruby, constant.language.symbol.hashkey.parameter.function.ruby, variable.other.readwrite.instance.ruby punctuation.definition.variable.ruby #9cdcfe —
variable.other.readwrite.instance.ruby — italic
constant.character.escape.ruby, constant.other.symbol.ruby, constant.language.symbol.ruby, punctuation.definition.constant.ruby #d7ba7d —
variable.language.self.ruby #569cd6 italic
constant.other.symbol.hashkey.ruby, meta.embedded.line.ruby #d4d4d4 —
entity.name.function.ruby, support.function.kernel.ruby #dcdcaa —
variable.language.ruby, variable.other.readwrite.global.ruby, punctuation.definition.variable.ruby, punctuation.separator.inheritance.ruby, punctuation.section.embedded.begin.ruby, punctuation.section.embedded.end.ruby, variable.other.readwrite.global.pre-defined.ruby, string.quoted.double.interpolated.ruby punctuation.section.embedded.begin.ruby, string.quoted.double.interpolated.ruby punctuation.section.embedded.end.ruby, string.regexp.interpolated.ruby meta.embedded.line.ruby punctuation.section.embedded.begin.ruby, string.regexp.interpolated.ruby meta.embedded.line.ruby punctuation.section.embedded.end.ruby #569cd6 —
meta.class.ruby, support.class.ruby, entity.name.type.class.ruby, entity.other.inherited-class.ruby #4ec9b0 —
keyword.control.def.ruby, keyword.control.class.ruby, keyword.operator.other.ruby, keyword.operator.assignment.ruby, punctuation.separator.other.ruby, keyword.control.pseudo-method.ruby, keyword.operator.comparison.ruby, keyword.operator.arithmetic.ruby, punctuation.separator.method.ruby, constant.language.symbol.hashkey.ruby punctuation.definition.constant.hashkey.ruby, constant.language.symbol.hashkey.parameter.function.ruby punctuation.definition.constant.hashkey.ruby, source.ruby punctuation.separator.key-value #c586c0 —
punctuation.separator.namespace.ruby, punctuation.separator.object.ruby, punctuation.separator.arguments.ruby, punctuation.section.function.ruby, punctuation.section.scope.begin.ruby, punctuation.section.scope.end.ruby, punctuation.section.array.begin.ruby, punctuation.section.array.end.ruby #d4d4d4 —
punctuation.section.regexp.begin.ruby, punctuation.section.regexp.end.ruby, punctuation.definition.group.ruby, punctuation.definition.character-class.ruby, punctuation.definition.character-class.begin.ruby, punctuation.definition.character-class.end.ruby #808080 —
keyword.operator.quantifier.ruby, string.regexp.arbitrary-repetition.ruby #b5cea8 —
meta.section.attributes.plain.haml constant.other.symbol.ruby, meta.embedded.line.erb #9CDCFE —
text.html.erb punctuation.section.embedded.begin.erb, text.html.erb punctuation.section.embedded.end.erb #4ec9b0 —
keyword.language.gherkin.feature.step #c586c0 —
text.gherkin.feature entity.name.type.class.tsx #4ec9b0 —
entity.name.type.param.rust punctuation.other.comma.rust, keyword.operator.path.rust #d4d4d4 —
meta.attribute.rust, comment.line.documentation.rust #608b4e —
keyword.operator.misc.rust, keyword.operator.sigil.rust #c586c0 —
storage.modifier.lifetime.rust, entity.name.lifetime.rust, constant.other.placeholder.rust #9cdcfe —
string.quoted.single.rust, constant.character.rust #d7ba7d —
support.constant.core.rust, variable.language.ignored.rust #569cd6 —
variable.language.rust, variable.language.self.rust #569cd6 italic
entity.name.type.param.rust punctuation.definition.type.rust #808080 —
entity.name.type.rust, storage.type.core.rust, storage.class.std.rust, punctuation.separator.type.rust, keyword.operator.return-type.rust, meta.type_params.rust #4ec9b0 —
comment.punctuation.comma.swift #d4d4d4 —
keyword.statement.swift #c586c0 —
string-interpolation keyword.operator.swift, punctuation.section.embedded.begin.swift, punctuation.section.embedded.end.swift #569cd6 —
variable.language.self.swift, keyword.expressions-and-types.swift #569cd6 italic
meta.embedded.line.swift #9cdcfe —
meta.item.done.todo, meta.item.done.todo variable.priority.todo, meta.item.done.todo variable.other, meta.item.done.todo constant.numeric.date.todo, meta.item.done.todo string.quoted.single.todo, meta.item.done.todo string.quoted.double.todo #608b4e —
constant.numeric.date.todo #b5cea8 —
string.quoted.single.todo, string.quoted.double.todo #4ec9b0 —
meta.item.priority.a.todo #f44747 —
meta.item.priority.b.todo #d16969 —
meta.item.priority.c.todo #ce9178 —
meta.item.priority.d.todo #d7ba7d —
meta.item.priority.e.todo #dcdcaa —
entity.name.section.terraform #c586c0 —
keyword.other.section.begin.terraform, keyword.other.section.end.terraform, keyword.other.function.inline.terraform #dcdcaa —
storage.type.function.terraform, entity.tag.embedded.start.terraform, entity.tag.embedded.end.terraform #569cd6 —
entity.other.attribute-name.terraform, source.terraform.embedded.source #9cdcfe —
punctuation.definition.variable.begin.gitignore, punctuation.definition.variable.end.gitignore #505050 —
support.function.git-rebase #9cdcfe —
constant.sha.git-rebase #b5cea8 —
comment.line.number-sign.ini, punctuation.definition.entity.ini #505050 —
keyword.other.definition.ini #9cdcfe —
punctuation.separator.key-value.ini #c586c0 —
comment.line.number-sign.yaml, punctuation.separator.key-value.mapping.yaml #505050 —
constant.other.timestamp.yaml #b5cea8 —
punctuation.definition.sequence.begin.yaml, punctuation.definition.sequence.end.yaml, punctuation.definition.mapping.begin.yaml, punctuation.definition.mapping.end.yaml, punctuation.separator.sequence.yaml, punctuation.separator.mapping.yaml #d4d4d4 —
storage.type.tag-handle.yaml, meta.property.yaml, punctuation.definition.alias.yaml, keyword.control.flow.alias.yaml, variable.other.alias.yaml #4ec9b0 —
keyword.control.property.anchor.yaml, constant.language.merge.yaml, punctuation.definition.alias.yaml, keyword.control.flow.alias.yaml, support.other.directive.reserved.yaml, punctuation.definition.directive.begin.yaml #569cd6 —
constant.language.boolean.yaml, constant.language.null.yaml #569cd6 italic
entity.other.document.begin.yaml, entity.other.document.end.yaml, keyword.control.flow.block-scalar.literal.yaml, storage.modifier.chomping-indicator.yaml, punctuation.definition.block.sequence.item.yaml #c586c0 —
constant.other.datetime-with-timezone.toml #b5cea8 —
meta.tag.table.toml, punctuation.definition.keyValuePair.toml #c586c0 —
entity.other.attribute-name.table.array.toml, entity.other.attribute-name.table.toml, constant.other.boolean.toml #569cd6 —
source.toml, punctuation.definition.table.toml, punctuation.definition.array.toml, punctuation.definition.table.array.toml #808080 —
storage.type.function-type.lisp, constant.language.lisp #569cd6 —
keyword.constant.lisp #9cdcfe —
keyword.control.lisp #c586c0 —
constant.character.map.rhs.viml, constant.character.map.special.viml, constant.character.map.key.viml, constant.character.map.key.fn.viml, constant.character.map.viml #d7ba7d —
punctuation.definition.map.viml #505050 —
meta.preprocessor.haskell #608b4e —
storage.type.haskell, support.other.module.haskell #4ec9b0 —
keyword.control.new.dart #569cd6 —
punctuation.terminator.dart #505050 —
punctuation.dot.dart #c586c0 —
meta.declaration.dart #9cdcfe —
source.nginx constant.character.brace, source.nginx constant.character.paren #d4d4d4 —
source.nginx constant.character.brace, source.nginx constant.character.end #808080 —
support.function.built-in.smarty #c586c0 —
source.smarty punctuation.section.embedded.begin.smarty, source.smarty punctuation.section.embedded.end.smarty #808080 —
punctuation.definition.tag #808080 —
entity.other.attribute-name #9cdcfe —
punctuation.definition.string.begin.html, punctuation.definition.string.end.html #ce9178 —
entity.tag, entity.name.tag, string.interpolated.jade, support.constant.handlebars, keyword.annotation.handlebars, meta.function.block.start.handlebars, meta.function.block.end.handlebars, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, meta.tag.template.value.twig, punctuation.section.tag.twig #569cd6 —
text.html.basic meta.brace.round.js, text.html.basic meta.brace.square.js, text.html.basic punctuation.separator.comma.js, text.html.basic punctuation.definition.block.js, text.html.basic punctuation.definition.parameters.begin.js, text.html.basic punctuation.definition.parameters.end.js, text.html.jinja punctuation.definition.parameters.begin.js, text.html.jinja punctuation.definition.parameters.end.js, text.html.jinja meta.brace.round.js, text.html.jinja meta.brace.square.js, text.html.jinja punctuation.definition.block.js, text.html.jinja punctuation.separator.comma.js #d4d4d4 —
constant.character.entity.html #d7ba7d —
invalid.illegal.bad-angle-bracket.html #d4d4d4 —
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, meta.directive.vue, expression.embedded.vue, punctuation.definition.generic.begin.html, punctuation.definition.generic.end.html, punctuation.section.embedded.begin.smarty, punctuation.section.embedded.end.smarty #4ec9b0 —
string.interpolated.jade #4ec9b0 —
meta.control.flow.jade, meta.first-class.jade, storage.type.function.jade, storage.type.import.include.jade #c586c0 —
meta.function.block.start.handlebars, meta.function.block.end.handlebars, meta.function.block.start.handlebars support.constant.handlebars, meta.function.block.end.handlebars support.constant.handlebars #c586c0 —
support.constant.handlebars #4ec9b0 —
variable.parameter.handlebars #9cdcfe —
keyword.begin.tag.ejs #4ec9b0 —
text.html.ejs keyword.begin.tag.ejs meta.group.braces.round.js meta.brace.round.begin.js, text.html.ejs keyword.begin.tag.ejs meta.group.braces.round.js meta.brace.round.end.js, text.html.ejs keyword.begin.tag.ejs meta.group.braces.round.js, text.html.ejs meta.brace.round.js, text.html.ejs meta.brace.square.js, text.html.ejs punctuation.definition.parameters.begin.js, text.html.ejs punctuation.definition.parameters.end.js #d4d4d4 —
text.html.ejs keyword.operator.expression.typeof.js, text.html.ejs keyword.operator.expression.instanceof.js #c586c0 —
text.html.vue-html meta.brace.round.js #d4d4d4 —
text.html.vue-html meta.tag.other.html #808080 —
text.html.vue-html source.directive.vue punctuation.definition.string.begin.html, text.html.vue-html source.directive.vue punctuation.definition.string.end.html, meta.tag.inline.any.html meta.directive.vue entity.other.attribute-name.html, meta.directive.vue punctuation.separator.key-value.html, meta.directive.vue entity.other.attribute-name.html #4ec9b0 —
entity.other.jinja.delimiter.tag #606060 —
entity.other.jinja.delimiter.variable #4ec9b0 —
variable.other.jinja #9cdcfe —
variable.language.jinja #569cd6 —
punctuation.tag.liquid #606060 —
punctuation.output.liquid #4ec9b0 —
support.variable.liquid, support.class.liquid #9cdcfe —
punctuation.tag.liquid, keyword.operator.liquid, entity.name.tag.liquid #c586c0 —
keyword.operator.quantifier.regexp, keyword.operator.quantifier.regexp.js #b5cea8 —
string.regexp constant.character.escape.backslash.regexp #ce9178 —
constant.other.character-class.regexp #4ec9b0 —
keyword.control.anchor.regexp, constant.other.character-class.regexp #569cd6 —
punctuation.definition.group.regexp, punctuation.definition.character-class.regexp #909090 —
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 } ! ` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
fetchUser 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Problems1
Output
Debug Console
Terminal
Ports
~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project
main*
Button.tsx
31
$
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 } ! ` ;
}