Skip to main content
Home Theme VS Code Benny's Theme My personal theme with Color Theme and Product Icons (Intellisense)
Benny's 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.
activityBar.activeBorder #00000000 activityBar.background #303030 activityBar.border #454545 activityBar.foreground #ffffff activityBarBadge.background #3584E4 breadcrumb.background #262626 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #5c6370 — meta.function-call.arguments #abb2bf — constant.other.color #a9b7c6 — invalid, invalid.illegal #FF5370 — keyword, storage.type, storage.modifier
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Benny's Theme — Benny's Theme Adwaita Dark
button.background
#3584E4
button.border #3584E4
button.hoverBackground #4990e7
commandCenter.background #444444
commandCenter.border #00000000
editor.background #1d1d1d
editorBracketMatch.background #45454520
editorBracketMatch.border #454545
editorGroup.border #454545
editorGroupHeader.border #454545
editorGroupHeader.tabsBackground #262626
editorGroupHeader.tabsBorder #454545
editorGutter.addedBackground #1F7F56
editorGutter.deletedBackground #A51D2D
editorGutter.modifiedBackground #1A5FB4
editorIndentGuide.activeBackground #45454599
editorIndentGuide.background #45454580
editorLineNumber.foreground #666666
editorRuler.foreground #45454580
focusBorder #5f7999
gitDecoration.addedResourceForeground #8FF0A4dd
gitDecoration.deletedResourceForeground #F66151dd
gitDecoration.ignoredResourceForeground #77767B
gitDecoration.modifiedResourceForeground #FFBE6Fdd
gitDecoration.renamedResourceForeground #8FF0A4dd
gitDecoration.stageDeletedResourceForeground #F66151dd
gitDecoration.stageModifiedResourceForeground #FFBE6Fdd
gitDecoration.untrackedResourceForeground #8FF0A4dd
input.background #3a3a3a
list.activeSelectionBackground #1B497E
list.activeSelectionForeground #ffffff
list.activeSelectionIconForeground #ffffff
list.focusHighlightForeground #ffffff
list.highlightForeground #ffffff
list.hoverBackground #333333
list.inactiveSelectionBackground #3a3a3a
panel.background #242424
panel.border #454545
panelSectionHeader.background #00000000
panelSectionHeader.border #454545
panelTitle.activeBorder #cccccc
panelTitle.activeForeground #cccccc
scrollbar.shadow #00000000
sideBar.background #242424
sideBar.border #454545
sideBar.foreground #cccccc
sideBarSectionHeader.background #00000000
sideBarSectionHeader.border #454545
statusBar.background #242424
statusBar.border #454545
statusBar.debuggingForeground #cccccc
statusBar.foreground #cccccc
statusBar.noFolderBackground #242424
statusBar.noFolderForeground #cccccc
statusBarItem.remoteBackground #242424
statusBarItem.remoteForeground #cccccc
tab.activeBackground #303030
tab.border #454545
tab.hoverBackground #363636
tab.inactiveBackground #262626
titleBar.activeBackground #303030
titleBar.border #454545
tree.indentGuidesStroke #45454599
widget.shadow #00000033
window.activeBorder #454545 keyword.control, constant.other.color, punctuation.separator.inheritance.php, punctuation.section.embedded, keyword.other.template, keyword.other.substitution #CC7832 —
meta.tag, punctuation.definition.tag #FFC66D —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #E8BF6A —
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method #FFC66D —
meta.block variable.other #f07178 —
support.other.variable, string.other.link #f07178 —
constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other #CC7832 —
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js #6A8759 —
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types #FFC66D —
*url*, *link*, *uri* — underline
keyword.operator.logical #abb2bf —
keyword.operator.bitwise #8888C6 —
keyword.operator.channel #8888C6 —
keyword.operator.assignment #abb2bf —
keyword.operator.arithmetic #abb2bf —
constant.character.escape #CC7832 —
variable.language #CC7832 —
variable.other.object #9876AA italic bold
block.scope.end,block.scope.begin #abb2bf —
keyword.other.unit #A5C261 —
token.error-token #f44747 —
token.debug-token #CC7832 —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end #CC7832 —
punctuation.definition.constant #CC7832 —
entity.other.attribute-name #CC7832 —
entity.other.attribute-name.id #FFC66D —
support.function.builtin #8888C6 —
support.type.property-name #BABABA —
support.constant.property-value #abb2bf —
support.constant.font-name #CC7832 —
string, string.quoted.double #6A8759 —
constant.other.symbol #8888C6 —
control.elements, keyword.operator.less #CC7832 —
keyword.other.special-method #CC7832 —
token.package.keyword #CC7832 —
entity.name.function, meta.require, support.function.any-method, variable.function #FFC66D —
entity.name.type.namespace #FFC66D —
support.class.builtin #9876AA italic bold
entity.name.class.identifier.namespace.type #FFC66D —
entity.name.namespace #FFC66D —
punctuation.definition.string.begin, punctuation.definition.string.end #6A8759 —
entity.other.inherited-class #FFC66D —
entity.name.function.preprocessor #4EADE5 —
string constant.other.placeholder #CC7832 —
meta.function.c, meta.function-call.c, meta.function-call.cpp, meta.function.cpp, entity.name.function.call.cpp #FFC66D —
entity.name.function, support.function.console #FFC66D —
variable.c, variable.other.constant.cpp, variable.cpp, source.cpp.arduino, variable.parameter.preprocessor.c, meta.parens.block.c, meta.block.c, variable.parameter.cpp, source.cpp, source.cpp.arduino, entity.name.variable.cpp, meta.body.function.definition.cpp, entity.name.variable.c #abb2bf —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #8888C6 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #CC7832 —
entity.name.type.cpp, meta.qualified_type.cpp, meta.function.definition.cpp, source.cpp, entity.name.type.class.templated.cpp #c3c3e4 —
keyword.operator.assignment.c, keyword.operator.comparison.c, keyword.operator.c, keyword.operator.increment.c, keyword.operator.decrement.c, keyword.operator.bitwise.shift.c, keyword.operator.assignment.cpp, keyword.operator.comparison.cpp, keyword.operator.cpp, keyword.operator.increment.cpp, keyword.operator.decrement.cpp, punctuation.terminator.statement.cpp #CC7832 —
meta.function.cpp #e06c75 —
keyword.control.directive.pragma.cpp, keyword.control.directive.include.cpp, punctuation.definition.directive.cpp, keyword.control.directive.include.c, punctuation.definition.directive.c, keyword.control.directive.define.cpp, keyword.control.directive.conditional.if.cpp, keyword.control.directive.conditional.ifdef.cpp, keyword.control.directive.endif.cpp, keyword.control.directive.define.c, keyword.control.directive.conditional.c, keyword.control.directive.conditional.ifndef.cpp #BBB529 —
punctuation.section.block.begin.bracket.curly.cpp, punctuation.section.block.end.bracket.curly.cpp, punctuation.terminator.statement.c, punctuation.section.block.begin.bracket.curly.c, punctuation.section.block.end.bracket.curly.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, entity.other.attribute-name.pragma.preprocessor.cpp, meta.tail.struct.cpp #abb2bf —
punctuation.separator.c, punctuation.separator.cpp, punctuation.separator.delimiter.comma.cpp, punctuation.terminator.statement.cpp, punctuation.terminator.statement.c, punctuation.separator.delimiter.c, punctuation.separator.pointer-access.c #CC7832 —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #8888C6 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #CC7832 —
variable.other.member.c, variable.other.member.cpp, variable.other.enummember.cpp #9876AA —
entity.name.type.c #FFC66D —
keyword.operator.bitwise.shift.cpp, keyword.operator.increment.cpp, keyword.operator.comparison.cpp, keyword.operator.assignment.cpp #abb2bf —
entity.name.namespace.cpp, entity.name.type.namespace.cpp #c3c3e4 —
keyword.operator.bitwise.shift.cpp #5F8C8A —
variable.other.object.access.cpp, variable.other.object.cpp, variable.other.object.access.c #9876AA —
punctuation.definition.comment.begin.documentation.cpp, punctuation.definition.comment.end.documentation.cpp, punctuation.definition.comment.begin.documentation.c, punctuation.definition.comment.end.documentation.c #629755 bold italic
storage.type.class.doxygen.c, storage.type.class.doxygen.cpp #629755 italic bold underline
meta.preprocessor.macro.cpp, entity.name.function.preprocessor.cpp #4EADE5 —
meta.preprocessor.macro.c #abb2bf —
keyword.operator.arithmetic.c, keyword.operator.increment.c, keyword.operator.decrement.c, keyword.operator.comparison.c, keyword.operator.assignment.c, keyword.operator.bitwise.shift.c, keyword.operator.bitwise.c, keyword.operator.logical.c, keyword.operator.assignment.compound.c, keyword.operator.c #abb2bf —
meta.function.parameters.c, meta.function.parameters.cpp, variable.parameter.probably.c, variable.parameter.probably.cpp #abb2bf —
entity.name.function.member.c #FFC66D —
variable.parameter.c #abb2bf —
punctuation.terminator.statement.cs, punctuation.separator.question-mark.cs, keyword.operator.arrow.cs, punctuation.separator.comma.cs #CC7832 —
keyword.operator.expression.await.cs, keyword.operator.expression.new.cs, keyword.operator.expression.as.cs, keyword.operator.expression.pattern.is.cs, keyword.operator.expression.pattern.combinator.not.cs, keyword.operator.null-conditional.cs #CC7832 —
function.parameter.cs, entity.name.variable.parameter.cs, variable.other.readwrite.cs, entity.name.variable.local.cs #abb2bf —
entity.name.variable.field.cs #abb2bf —
entity.name.label.cs #9876AA —
entity.name.type.namespace.cs #c3c3e4 —
variable.other.object.cs #abb2bf bold
variable.other.object.property.cs #9876AA italic
punctuation.definition.keyword.css #CC7832 —
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 #BABABA —
support.constant.property-value.scss,support.constant.property-value.css #A5C261 —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #8888C6 —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #A5C261 —
constant.other.color.rgb-value.hex.css,punctuation.definition.constant.css #6897BB —
variable.parameter.url.css #287BDE —
constant.other.unicode-range.css #E8BF6A —
punctuation.separator.list.comma.css,punctuation.terminator.rule.css #CC7832 —
support.type.vendored.property-name.css #8888C6 —
entity.other.attribute-name.class.css #E8BF6A —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #8888C6 —
source.sass keyword.control #CC7832 —
meta.property-name.css #abb2bf —
variable.css, variable.argument.css #9876AA —
entity.global.clojure #FFC66D —
meta.symbol.clojure #e06c75 —
constant.keyword.clojure #8888C6 —
meta.arguments.coffee, variable.parameter.function.coffee #e06c75 —
punctuation.terminator.dart, punctuation.comma.dart #CC7832 —
keyword.operator.logical, keyword.operator.closure.dart #CC7832 —
storage.type.annotation.dart #BBB529 —
entity.name.type.dart #BBB529 —
constant.character.escape.dart #CC7832 —
comment.block.documentation.dart #629755 bold italic
support.class.dart #FFC66D —
string.interpolated.expression.dart #CC7832 —
variable.parameter.dart #abb2bf —
source.dockerfile #abb2bf —
constant.language.symbol.elixir, constant.language.symbol.double-quoted.elixir #8888C6 —
variable.other.gdscript, variable.parameter.function.language.gdscript #abb2bf —
constant.language.gdscript #abb2bf bold
entity.name.function.decorator.gdscript #BBB529 —
keyword.operator.assignment.go — —
keyword.operator.arithmetic.go, keyword.operator.address.go — —
entity.name.type.go #A9B7C6 —
entity.name.package.go, entity.alias.import.go #AFBF7E —
support.function.go #FFC66D —
string.quoted.rune.go, constant.other.rune.go #6A8759 —
punctuation.other.comma.go, punctuation.terminator.go #CC7832 —
support.function.builtin.go #CC7832 —
variable.other.assignment.go, entity.name.variable #abb2bf —
entity.name.import.go #C3C3E4 —
storage.type.go, storage.type.string.go, storage.type.numeric.go, storage.type.boolean.go, storage.type.byte.go, storage.type.rune.go, storage.type.uintptr.go #8888C6 —
constant.language.go #9876AA —
constant.other.rune.go #629755 —
support.function.builtin.go #8888C6 —
storage.modifier.import.groovy #FFC66D —
meta.method.groovy #FFC66D —
meta.definition.variable.name.groovy #e06c75 —
meta.definition.class.inherited.classes.groovy #6A8759 —
variable.other.generic-type.haskell #CC7832 —
storage.type.haskell #CC7832 —
keyword.operator.hl7 #9876AA —
support.variable.semantic.hlsl #FFC66D —
support.type.texture.hlsl, support.type.sampler.hlsl, support.type.object.hlsl, support.type.object.rw.hlsl, support.type.fx.hlsl, support.type.object.hlsl #CC7832 —
storage.type.annotation.java, storage.type.object.array.java #FFC66D —
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,punctuation.bracket.angle.java,meta.method.body.java #abb2bf —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #FFC66D —
keyword.operator.instanceof.java #CC7832 —
meta.definition.variable.name.java #e06c75 —
token.variable.parameter.java, meta.method.body.java #abb2bf —
import.storage.java #FFC66D —
token.storage.type.java #FFC66D —
constant.other.enum.java #9876AA —
punctuation.definition.annotation.java, storage.type.annotation.java #BBB529 —
punctuation.terminator.java, punctuation.separator.delimiter.java #CC7832 —
storage.type.generic.java #507874 —
keyword.other.documentation.javadoc.java #5c6370 underline
variable.other.definition.java #9876AA —
punctuation.decorator.js, punctuation.decorator.ts #BBB529 —
support.module.node,support.type.object.module,support.module.node #FFC66D —
meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #9876AA —
support.variable.property,variable.other.property #9876AA —
support.constant.json #9876AA —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof, keyword.operator.logical.js, keyword.operator.logical.ts, punctuation.accessor.optional.js, punctuation.accessor.optional.ts #CC7832 —
support.type.object.console #e06c75 —
support.variable.property.process #CC7832 —
entity.name.function,support.function.console #FFC66D —
support.variable.property.js,variable.other.property.js #9876AA —
punctuation.separator.key-value #abb2bf —
keyword.operator.expression.import #FFC66D —
support.constant.math #9876AA —
support.constant.property.math #CC7832 —
variable.other.constant.js, variable.other.readwrite.js, variable.object.property.js, variable.other.constant.ts, variable.other.readwrite.ts, variable.object.property.ts #9876AA —
meta.definition.variable.js #9876AA —
comment.block.documentation #629755 italic
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc #629755 italic bold underline
variable.other.jsdoc,entity.name.type.instance.jsdoc #8A653E
punctuation.terminator.statement.js, punctuation.separator.parameter.js, punctuation.separator.comma.js, punctuation.terminator.statement.ts, punctuation.separator.parameter.ts, punctuation.separator.comma.ts #CC7832 —
meta.decorator.js #BBB529 —
support.type.object.dom #8888C6 —
support.variable.dom,support.variable.property.dom #e06c75 —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #abb2bf —
variable.other.class.js, variable.other.class.ts #FFC66D —
storage.type.function.arrow.js, #A9B7C6 —
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void #CC7832 —
source.json meta.structure.dictionary.json > string.quoted.json #e06c75 —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #e06c75 —
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation #6A8759 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #8888C6 —
support.type.property-name.json #9876AA —
support.type.property-name.json punctuation #9876AA —
function.parameter #abb2bf —
keyword.operator.module #CC7832 —
support.type.type.flowtype #FFC66D —
support.type.primitive #CC7832 —
meta.property.object #e06c75 —
variable.parameter.function.js #e06c75 —
keyword.other.template.begin #6A8759 —
keyword.other.template.end #6A8759 —
keyword.other.substitution.begin #6A8759 —
keyword.other.substitution.end #6A8759 —
keyword.operator.assignment #abb2bf —
meta.template.expression #abb2bf —
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
variable.parameter.js, variable.parameter.ts #abb2bf —
variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts #F07178 —
variable.other.readwrite.js #abb2bf —
variable.other.object.js #abb2bf italic bold
meta.scope.prerequisites.makefile #e06c75 —
punctuation.definition.variable.makefile #CC7832 —
variable.other.makefile #abb2bf —
support.function.error.makefile #CC7832 —
invalid.illegal.bad-ampersand.html #abb2bf —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #CC7832 —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #CC7832 —
comment markup.link #5c6370 —
markup.changed.diff #FFC66D —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #FFC66D —
markup.inserted.diff #6A8759 —
markup.deleted.diff #e06c75 —
markup.heading punctuation.definition.heading, entity.name.section #FFC66D —
keyword.other.unit #A5C261 —
markup.bold,todo.bold #CC7832 —
punctuation.definition.bold #FFC66D —
markup.italic, punctuation.definition.italic,todo.emphasis #CC7832 —
entity.name.section.markdown #9876AA —
punctuation.definition.heading.markdown #9876AA —
punctuation.definition.list.begin.markdown #CC7832 —
markup.heading.setext #abb2bf —
punctuation.definition.bold.markdown #CC7832 —
markup.inline.raw.markdown #6A8759 —
markup.inline.raw.string.markdown #808080 —
markup.fenced_code.block.markdown #808080 —
markup.raw.block.markdown #808080 —
punctuation.definition.list.markdown #e06c75 —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #287BDE —
string.other.link.description.title.markdown #808080 —
beginning.punctuation.definition.list.markdown #287BDE —
punctuation.definition.metadata.markdown #A9B7C6 —
markup.underline.link.markdown,markup.underline.link.image.markdown,punctuation.definition.link.markdown #287BDE —
string.other.link.title.markdown,string.other.link.description.markdown #287BDE —
constant.character.escape #CC7832 —
punctuation.section.embedded, variable.interpolation #e06c75 —
punctuation.section.embedded.begin,punctuation.section.embedded.end #CC7832 —
invalid.illegal.bad-ampersand.html #abb2bf —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #9876AA —
markup.quote.markdown #6A8759 —
markup.underline — underline
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #FFCB6B italic
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html #FFCB6B —
text.html, text.html.basic, text.html.jinja #abb2bf —
variable.other.class.php #e06c75 —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #CC7832 —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #CC7832 —
support.other.namespace.use.php,support.other.namespace.use-as.php,entity.other.alias.php,meta.interface.php #FFC66D —
keyword.operator.error-control.php #CC7832 —
keyword.operator.type.php #CC7832 —
punctuation.section.array.begin.php #abb2bf —
punctuation.section.array.end.php #abb2bf —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php, meta.other.type.phpdoc.php, keyword.other.array.phpdoc.php #FFC66D —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #FFC66D —
punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php,punctuation.definition.section.switch-block.start.bracket.curly.php,punctuation.definition.section.switch-block.begin.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php #abb2bf —
support.constant.core.rust #CC7832 —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #CC7832 —
entity.name.goto-label.php,support.other.php #FFC66D —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #8888C6 —
keyword.operator.regexp.php #6897BB —
keyword.operator.comparison.php #8888C6 —
keyword.operator.heredoc.php, keyword.operator.nowdoc.php #CC7832 —
support.other.namespace.php #abb2bf —
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php #BE5046 —
punctuation.terminator.expression.php, punctuation.separator.delimiter.php, punctuation.definition.variable.php, keyword.operator.string.php, keyword.operator.null-coalescing.php, keyword.operator.class.php #CC7832 —
variable.other.php #abb2bf —
keyword.operator.logical.php, keyword.operator.arithmetic.php, keyword.operator.comparison.php #abb2bf —
comment.block.documentation.phpdoc.php #629755 bold italic
keyword.other.phpdoc.php #629755 italic bold underline
variable.other.global.php, variable.other.global.safer.php #CC7832 —
constant.other.php, constant.other.class.php, support.constant.ext.php #9876AA —
support.function.construct.output.php #CC7832 —
support.class.builtin.php #8888C6 —
support.class.exception.php #FFC66D —
keyword.operator.type.php #CC7832 —
support.variable.magic.python #B200B2 —
keyword.operator.arithmetic.python, keyword.operator.assignment.python, keyword.operator.comparison.python #abb2bf —
variable.parameter.function.language.special.self.python #94558D —
variable.parameter.function.language.python #abb2bf —
variable.parameter.function-call.python #AA4926 —
support.type.python #8888C6 —
keyword.operator.logical.python #CC7832 —
variable.parameter.function.python #CC7832 —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #bfb2ab —
entity.name.function.decorator.python, punctuation.definition.decorator.python #BBB529 —
string.quoted.binary.single.python #A5C261 —
meta.function-call.generic.python #FFC66D —
constant.character.format.placeholder.other.python #CC7832 —
variable.language.special.self.python #94558D —
constant.other.caps.python #A9B7C6 —
string.quoted.docstring.multi.python #629755 italic bold
meta.function.decorator.python #FFC66D —
support.token.decorator.python,meta.function.decorator.identifier.python #8888C6 —
support.function.builtin.python #8888C6 —
constant.language.python #CC7832 —
punctuation.separator.arguments.python, punctuation.separator.annotation.result.python, punctuation.section.function.begin.python, punctuation.section.class.begin.python, punctuation.separator.colon.python, punctuation.separator.element.python, meta.function.parameters.python, punctuation.separator.parameters.python #CC7832 —
keyword.operator.unpacking.arguments.python, keyword.operator.unpacking.parameter.python #CC7832 —
entity.name.namespace #c3c3e4 —
constant.other.character-class.regexp #6897BB —
keyword.operator.quantifier.regexp #6897BB —
punctuation.definition.character-class.regexp #E8BF6A —
constant.other.character-class.range.regexp #6A8759 —
meta.group.regexp #A9B7C6 —
punctuation.definition.group.regexp #E8BF6A —
function.parameter.ruby, function.parameter.cs #abb2bf —
constant.language.symbol.ruby #8888C6 —
entity.name.function.macro.rust, entity.name.function.macro.rules.rust, meta.macro.rules.rust #4EADE5 —
punctuation.definition.attribute.rust, meta.attribute.rust #BBB529 —
entity.name.type.rust #9876AA —
keyword.operator.macro.dollar.rust, variable.other.metavariable.specifier.rust #4EADE5 —
variable.other.metavariable.name.rust #ffc66d —
entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust #20999D —
punctuation.semi.rust, punctuation.comma.rust, keyword.operator.question.rust, punctuation.definition.interpolation.rust #CC7832 —
meta.function.call.rust #9876AA —
constant.other.caps.rust #9876AA —
entity.name.type.result.rust #9876AA —
entity.name.type.numeric.rust #CC7832 —
constant.numeric.decimal.rust, constant.numeric.float.rust #6897BB —
variable.other.readwrite.rust, variable.other.rust, keyword.operator.assignment.rust #abb2bf —
entity.name.function.rust #ffc66d —
variable.other.rust, variable.parameter.rust #abb2bf —
keyword.other.fn.rust #CC7832 —
keyword.other.rust #CC7832 —
keyword.operator.comparison.rust, keyword.operator.math.rust, punctuation.brackets.angle.rust, keyword.operator.assignment.equal.rust #abb2bf —
punctuation.definition.string.rust, string.quoted.double.rust #6A8759 —
punctuation.section.embedded.rust #CC7832 —
keyword.operator.question.rust #CC7832 —
text.variable, text.bracketed #e06c75 —
constant.other.table-name.sql #abb2bf —
constant.other.database-name.sql #abb2bf —
support.type.swift, support.type.vb.asp #FFC66D —
constant.other.datetime-with-timezone.toml #abb2bf —
constant.other.boolean.toml #abb2bf —
punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison #e06c75 —
entity.name.function.xi #FFC66D —
entity.name.class.xi #8888C6 —
constant.character.character-class.regexp.xi #6897BB —
constant.regexp.xi #6897BB —
keyword.control.xi #8888C6 —
beginning.punctuation.definition.quote.markdown.xi #6A8759 —
beginning.punctuation.definition.list.markdown.xi #7f848e —
constant.character.xi #FFC66D —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #5c6370 —
punctuation.definition.block.sequence.item.yaml #abb2bf —
variable.other.alias.yaml #FFC66D —
string.unquoted.block.yaml, string.unquoted.plain.out.yaml #abb2bf —
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 } ! ` ;
}