Skip to main content
Home Theme VS Code Benny's Theme My personal theme with Color Theme and Product Icons (Intellisense)
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 #005cc5 activityBar.background #24292e activityBar.border #444d56 activityBar.foreground #e1e4e8 activityBar.inactiveForeground #6a737d activityBarBadge.background #0366d6 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 Benny's Theme | Coding Theme
activityBarBadge.foreground
#fff
badge.background #044289
badge.foreground #c8e1ff
breadcrumb.activeSelectionForeground #d1d5da
breadcrumb.focusForeground #e1e4e8
breadcrumb.foreground #959da5
breadcrumbPicker.background #2b3036
button.background #005cc5
button.foreground #e1e4e8
button.hoverBackground #2876cf
checkbox.background #444d56
checkbox.border #444d56
commandCenter.activeBorder #444d56
commandCenter.border #444d56
debugToolBar.background #2b3036
debugToolBar.border #444d56
descriptionForeground #959da5
diffEditor.border #444d56
diffEditor.insertedTextBackground #28a74530
diffEditor.removedTextBackground #d73a4930
dropdown.background #2f363d
dropdown.border #444d56
dropdown.foreground #e1e4e8
dropdown.listBackground #24292e
editor.background #24292e
editor.findMatchBackground #ffd33d44
editor.findMatchHighlightBackground #ffd33d22
editor.focusedStackFrameHighlightBackground #b808
editor.foldBackground #282e33
editor.foreground #e1e4e8
editor.inactiveSelectionBackground #3392FF22
editor.lineHighlightBackground #2b3036
editor.selectionBackground #3392FF44
editor.selectionHighlightBackground #17E5E633
editor.selectionHighlightBorder #17E5E600
editor.stackFrameHighlightBackground #a707
editor.wordHighlightBackground #17E5E600
editor.wordHighlightBorder #17E5E699
editor.wordHighlightStrongBackground #17E5E600
editor.wordHighlightStrongBorder #17E5E666
editorBracketMatch.background #17E5E650
editorBracketMatch.border #17E5E600
editorCursor.foreground #c8e1ff
editorGroup.border #444d56
editorGroupHeader.tabsBackground #1f2428
editorGroupHeader.tabsBorder #444d56
editorGutter.addedBackground #28a745
editorGutter.deletedBackground #ea4a5a
editorGutter.modifiedBackground #2188ff
editorIndentGuide.activeBackground1 #444d56
editorIndentGuide.background1 #2f363d
editorInlayHint.background #0377fc52
editorInlayHint.parameterBackground #0377fc52
editorInlayHint.typeBackground #0377fc52
editorLineNumber.activeForeground #e1e4e8
editorLineNumber.foreground #444d56
editorOverviewRuler.border #1b1f23
editorRuler.foreground #2f363d
editorWhitespace.foreground #444d56
editorWidget.background #1f2428
editorWidget.border #444d56
errorForeground #f97583
focusBorder #005cc5
foreground #d1d5da
gitDecoration.addedResourceForeground #34d058
gitDecoration.conflictingResourceForeground #ffab70
gitDecoration.deletedResourceForeground #ea4a5a
gitDecoration.ignoredResourceForeground #6a737d
gitDecoration.modifiedResourceForeground #79b8ff
gitDecoration.submoduleResourceForeground #6a737d
gitDecoration.untrackedResourceForeground #34d058
input.background #2f363d
input.border #444d56
input.foreground #e1e4e8
input.placeholderForeground #959da5
list.activeSelectionBackground #39414a
list.activeSelectionForeground #e1e4e8
list.focusBackground #044289
list.hoverBackground #282e34
list.hoverForeground #e1e4e8
list.inactiveFocusBackground #1d2d3e
list.inactiveSelectionBackground #282e34
list.inactiveSelectionForeground #e1e4e8
menu.border #444d56
merge.border #444d56
notebook.cellBorderColor #444d56
notebook.focusedEditorBorder #444d56
notificationCenter.border #444d56
notificationCenterHeader.background #24292e
notificationCenterHeader.foreground #959da5
notifications.background #2f363d
notifications.border #444d56
notifications.foreground #e1e4e8
notificationsErrorIcon.foreground #ea4a5a
notificationsInfoIcon.foreground #79b8ff
notificationsWarningIcon.foreground #ffab70
notificationToast.border #444d56
panel.background #1f2428
panel.border #444d56
panelInput.border #444d56
panelSection.border #444d56
panelTitle.activeBorder #005cc5
panelTitle.activeForeground #e1e4e8
panelTitle.inactiveForeground #959da5
peekView.border #444d56
peekViewEditor.background #1f242888
peekViewEditor.matchHighlightBackground #ffd33d33
peekViewResult.background #1f2428
peekViewResult.matchHighlightBackground #ffd33d33
pickerGroup.border #444d56
pickerGroup.foreground #e1e4e8
progressBar.background #0366d6
quickInput.background #24292e
quickInput.foreground #e1e4e8
scrollbar.shadow #0008
scrollbarSlider.activeBackground #6a737d88
scrollbarSlider.background #6a737d33
scrollbarSlider.hoverBackground #6a737d44
settings.headerForeground #e1e4e8
settings.modifiedItemIndicator #0366d6
sideBar.background #1f2428
sideBar.border #444d56
sideBar.foreground #d1d5da
sideBarSectionHeader.background #1f2428
sideBarSectionHeader.border #444d56
sideBarSectionHeader.foreground #e1e4e8
sideBarTitle.foreground #e1e4e8
statusBar.background #24292e
statusBar.border #444d56
statusBar.debuggingBackground #ffab70
statusBar.debuggingForeground #e1e4e8
statusBar.foreground #d1d5da
statusBar.noFolderBackground #24292e
statusBarItem.prominentBackground #282e34
tab.activeBackground #24292e
tab.activeBorder #24292e
tab.activeBorderTop #005cc5
tab.activeForeground #e1e4e8
tab.border #444d56
tab.hoverBackground #24292e
tab.inactiveBackground #1f2428
tab.inactiveForeground #959da5
tab.unfocusedActiveBorder #24292e
tab.unfocusedActiveBorderTop #ffab70
tab.unfocusedHoverBackground #24292e
terminal.border #444d56
terminal.foreground #d1d5da
terminal.tab.activeBorder #1f6feb
textBlockQuote.background #24292e
textBlockQuote.border #444d56
textCodeBlock.background #2f363d
textLink.activeForeground #c8e1ff
textLink.foreground #79b8ff
textPreformat.foreground #d1d5da
textSeparator.foreground #586069
titleBar.activeBackground #24292e
titleBar.activeForeground #e1e4e8
titleBar.border #444d56
titleBar.inactiveBackground #1f2428
titleBar.inactiveForeground #959da5
tree.indentGuidesStroke #2f363d
widget.border #444d56 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 } ! ` ;
}