Skip to main content
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.activeBackground #6f5d5d activityBar.background #000000 activityBar.border #6f1a1a activityBar.foreground #9b0000 activityBar.inactiveForeground #6affff66 activityBarBadge.background #80f09c tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle 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 #0004f9 — variable.other.generic-type.haskell #c200c9 — storage.type.haskell #ff7c00 — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
ULTRA BRIGHT+ — ULTRA BRIGHT+
activityBarBadge.foreground
#492268
badge.background #ff0000
badge.foreground #ffffff
breadcrumb.activeSelectionForeground #ff0000
breadcrumb.background #a9a9a9
breadcrumb.focusForeground #ff0000
breadcrumb.foreground #38ff00cc
button.background #0099ff
button.foreground #00ff40
button.hoverBackground #000000
button.secondaryBackground #000000
button.secondaryForeground #ff0000
button.secondaryHoverBackground #ffffff
checkbox.background #e0f8ff
checkbox.border #ff000000
checkbox.foreground #38ff00
debugExceptionWidget.background #beafaf
debugExceptionWidget.border #ff0000
debugToolBar.background #beafaf
debugToolBar.border #ff0000
diffEditor.border #ff0000
diffEditor.insertedTextBackground #3b472033
diffEditor.insertedTextBorder #ffffff00
diffEditor.removedTextBackground #e68a8a33
dropdown.background #e0f8ff
dropdown.border #ff000000
dropdown.foreground #38ff00
editor.background #ffffff
editor.findMatchBackground #131311
editor.findMatchBorder #657900
editor.findMatchHighlightBackground #1f0f0455
editor.findMatchHighlightBorder #ff000000
editor.findRangeHighlightBackground #c7acac4d
editor.findRangeHighlightBorder #00000000
editor.foldBackground #57abff4d
editor.foreground #4946a7
editor.hoverHighlightBackground #0080ff26
editor.inactiveSelectionBackground #72a0cf
editor.lineHighlightBackground #5144441c
editor.lineHighlightBorder #b8b8b88f
editor.rangeHighlightBackground #000000
editor.rangeHighlightBorder #ff0000
editor.selectionBackground #88abcf
editor.selectionHighlightBackground #0080ff80
editor.selectionHighlightBorder #000000
editor.wordHighlightBackground #7390ff40
editor.wordHighlightBorder #490c0c
editor.wordHighlightStrongBackground #79b4db40
editor.wordHighlightStrongBorder #ecbdbdc9
editorBracketMatch.background #625dff20
editorBracketMatch.border #b4b4b4
editorCodeLens.foreground #ff5a5a85
editorCursor.background #ff0000
editorCursor.foreground #9d6d6d
editorError.background #6d1a1608
editorError.border #fd000000
editorError.foreground #ff1600
editorGroup.border #000000
editorGroup.emptyBackground #ffffff
editorGroupHeader.border #ff0000
editorGroupHeader.tabsBackground #c697ff
editorGroupHeader.tabsBorder #ff0000
editorGutter.addedBackground #008a19
editorGutter.background #cfcfcf
editorGutter.commentRangeForeground #77c900
editorGutter.deletedBackground #c7a1a3c5
editorGutter.foldingControlForeground #77c900
editorGutter.modifiedBackground #66afe0
editorHoverWidget.background #000000
editorHoverWidget.border #ff0000
editorHoverWidget.foreground #ffffff
editorIndentGuide.activeBackground #00ff10
editorIndentGuide.background #00ffdb
editorInfo.background #4490bf16
editorInfo.border #4490bf0a
editorInfo.foreground #3aa2ff87
editorLineNumber.activeForeground #0038ff
editorLineNumber.foreground #000000
editorLink.activeForeground #580d8c
editorMarkerNavigation.background #ead7d7
editorMarkerNavigationError.background #ff8377b1
editorMarkerNavigationInfo.background #a2bacf
editorMarkerNavigationWarning.background #000000
editorOverviewRuler.background #ff000000
editorOverviewRuler.border #b08d8d24
editorRuler.foreground #ffffff
editorSuggestWidget.background #ffe3e3
editorSuggestWidget.border #cf0000
editorSuggestWidget.foreground #2c1d1d
editorSuggestWidget.highlightForeground #0088ff
editorSuggestWidget.selectedBackground #20ff00
editorWarning.background #ffc20010
editorWarning.border #ff000000
editorWarning.foreground #a96f00
editorWhitespace.foreground #ffffff33
editorWidget.background #000000
editorWidget.foreground #ff2525
editorWidget.resizeBorder #ff0000
focusBorder #18557d
foreground #2c002b
gitDecoration.addedResourceForeground #adff00
gitDecoration.conflictingResourceForeground #ff0000
gitDecoration.deletedResourceForeground #0000001c
gitDecoration.ignoredResourceForeground #8e8e9081
gitDecoration.modifiedResourceForeground #ffa313
gitDecoration.stageDeletedResourceForeground #312d3f95
gitDecoration.stageModifiedResourceForeground #ffcb79
gitDecoration.submoduleResourceForeground #a5b9cf
gitDecoration.untrackedResourceForeground #098209
icon.foreground #2c002b
input.background #e0f8ff
input.border #ff000000
input.foreground #38ff00
input.placeholderForeground #ff0000
inputOption.activeBackground #007dd133
inputOption.activeBorder #ff000000
inputOption.activeForeground #ffef00
list.activeSelectionBackground #79a7d5
list.activeSelectionForeground #14ff00
list.dropBackground #edf3f9
list.focusBackground #880000
list.focusForeground #afff00
list.highlightForeground #2499ff
list.hoverBackground #008828
list.hoverForeground #8bff00
list.inactiveSelectionBackground #bfc9ff
list.inactiveSelectionForeground #00ff10
listFilterWidget.background #8a8a8a
listFilterWidget.noMatchesOutline #ff0000
listFilterWidget.outline #44ff5900
menu.background #e6dddd
menu.border #ff000085
menu.foreground #ff0000
menu.selectionBackground #6f90b2
menu.selectionBorder #ff000000
menu.selectionForeground #00ff1c
menu.separatorBackground #ff0000
menubar.selectionBackground #ff6e6e1a
menubar.selectionBorder #ff0000
menubar.selectionForeground #ff0000
merge.commonContentBackground #fff1f1
merge.commonHeaderBackground #fddddd
merge.currentContentBackground #e1fff9
merge.currentHeaderBackground #A4E3D6
merge.incomingContentBackground #eef6ff
merge.incomingHeaderBackground #97c2f5
minimap.background #ffffff
minimap.errorHighlight #ff1600
minimap.findMatchHighlight #131311
minimap.selectionHighlight #88abcf
minimap.warningHighlight #a96f00
minimapGutter.addedBackground #008a19
minimapGutter.deletedBackground #c7a1a3c5
minimapGutter.modifiedBackground #66afe0
notificationCenter.border #ff0000
notificationCenterHeader.background #ceffe5
notificationCenterHeader.foreground #000000
notifications.background #000000
notifications.border #ff0000
notifications.foreground #a30000
notificationsErrorIcon.foreground #ff1600
notificationsInfoIcon.foreground #75beff
notificationsWarningIcon.foreground #e9a700
notificationToast.border #ff0000
panel.background #000000
panel.border #ffffff59
panelSection.border #ff000059
panelTitle.activeBorder #ffffff
panelTitle.activeForeground #20ff00
panelTitle.inactiveForeground #fff9f9bf
peekView.border #0099ff
peekViewEditor.background #f3faff
peekViewEditor.matchHighlightBackground #ffe100de
peekViewEditor.matchHighlightBorder #dbc417
peekViewEditorGutter.background #cfe2ee
peekViewResult.background #e8e8e8
peekViewResult.fileForeground #1f7500
peekViewResult.lineForeground #0000ff
peekViewResult.matchHighlightBackground #ff64004d
peekViewResult.selectionBackground #d9ffba33
peekViewResult.selectionForeground #50ff00
peekViewTitle.background #c1ffd6
peekViewTitleDescription.foreground #5e9f00e6
peekViewTitleLabel.foreground #5c801e
pickerGroup.border #0022ff
pickerGroup.foreground #0088ff
progressBar.background #5d9d00
scrollbar.shadow #dddddd
scrollbarSlider.activeBackground #00770799
scrollbarSlider.background #00000066
scrollbarSlider.hoverBackground #2cff00b3
selection.background #d9e1e8
settings.focusedRowBackground #ffffff07
settings.headerForeground #2c002b
sideBar.background #a7a6a6
sideBar.border #6b6900
sideBar.dropBackground #edf3f9
sideBar.foreground #5e0000
sideBarSectionHeader.background #68663c00
sideBarSectionHeader.border #de000030
sideBarSectionHeader.foreground #4e926c
sideBarTitle.foreground #5580ff
statusBar.background #94bfdb
statusBar.border #000000
statusBar.debuggingBackground #9d9d9d
statusBar.debuggingBorder #000000
statusBar.debuggingForeground #000000
statusBar.foreground #630077
statusBar.noFolderBackground #a9a9a9
statusBar.noFolderBorder #000000
statusBar.noFolderForeground #900000
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #d344441f
statusBarItem.remoteBackground #45ab88
statusBarItem.remoteForeground #ff0000
tab.activeBackground #5c662b
tab.activeBorder #74ff0000
tab.activeBorderTop #4400ff00
tab.activeForeground #00ff1c
tab.border #fb0000
tab.hoverBackground #004b01
tab.hoverBorder #08ff00
tab.hoverForeground #ff0000
tab.inactiveBackground #000000
tab.inactiveForeground #0082a9b3
terminal.ansiBlack #ffffff
terminal.ansiBlue #00448e
terminal.ansiBrightBlack #f2e6e6
terminal.ansiBrightBlue #007aff
terminal.ansiBrightCyan #00cdff
terminal.ansiBrightGreen #00ff00
terminal.ansiBrightMagenta #ff00ff
terminal.ansiBrightRed #ff0000
terminal.ansiBrightWhite #b89696
terminal.ansiBrightYellow #f8ff00
terminal.ansiCyan #0094b8
terminal.ansiGreen #007700
terminal.ansiMagenta #a100a1
terminal.ansiRed #ba0000
terminal.ansiWhite #dbc9c9
terminal.ansiYellow #949800
terminal.border #ff000059
terminal.foreground #ffffff
terminal.selectionBackground #80808040
terminalCursor.background #40464b
terminalCursor.foreground #2cff00
textLink.foreground #75bcec
titleBar.activeBackground #8a7d8a
titleBar.activeForeground #05a0a7
titleBar.border #ff000000
titleBar.inactiveBackground #a9a9a999
titleBar.inactiveForeground #008c9b99
tree.indentGuidesStroke #9bff8d
walkThrough.embeddedEditorBackground #00000050
widget.shadow #ff000029 #0004f9
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #4946a7 —
variable.parameter.function.language.special.self.python #ff8300 —
storage.modifier.lifetime.rust #4946a7 —
support.function.std.rust #46bfd3 —
entity.name.lifetime.rust #ff8300 —
variable.language.rust #0004f9 —
support.constant.edge #c200c9 —
constant.other.character-class.regexp #0004f9 —
keyword.operator.quantifier.regexp #ff7c00 —
punctuation.definition.string.begin,punctuation.definition.string.end #6ab4b0 —
variable.parameter.function #4946a7 —
comment markup.link #97baff —
markup.changed.diff #ff8300 —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #46bfd3 —
markup.inserted.diff #6ab4b0 —
markup.deleted.diff #0004f9 —
meta.function.c,meta.function.cpp #0004f9 —
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 #4946a7 —
punctuation.separator.key-value #4946a7 —
keyword.operator.expression.import #46bfd3 —
support.constant.math #ff8300 —
support.constant.property.math #ff7c00 —
variable.other.constant #ff8300 —
storage.type.annotation.java, storage.type.object.array.java #ff8300 —
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,punctuation.definition.annotation.java,meta.method.body.java #4946a7 —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #ff8300 —
keyword.operator.instanceof.java #c200c9 —
meta.definition.variable.name.java #0004f9 —
keyword.operator.logical #8c9000 —
keyword.operator.bitwise #8c9000 —
keyword.operator.channel #8c9000 —
support.constant.property-value.scss,support.constant.property-value.css #ff7c00 —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #8c9000 —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #ff7c00 —
punctuation.separator.list.comma.css #4946a7 —
support.constant.color.w3c-standard-color-name.css #ff7c00 —
support.type.vendored.property-name.css #8c9000 —
support.module.node,support.type.object.module,support.module.node #ff8300 —
entity.name.type.module #ff8300 —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #0004f9 —
support.constant.json #ff7c00 —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #c200c9 —
support.type.object.console #0004f9 —
support.variable.property.process #ff7c00 —
entity.name.function,support.function.console #46bfd3 —
keyword.operator.misc.rust #4946a7 —
keyword.operator.sigil.rust #c200c9 —
keyword.operator.delete #c200c9 —
support.type.object.dom #8c9000 —
support.variable.dom,support.variable.property.dom #0004f9 —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #8c9000 —
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,keyword.operator.bitwise.shift.cpp #c200c9 —
punctuation.separator.delimiter #4946a7 —
punctuation.separator.c,punctuation.separator.cpp #c200c9 —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #8c9000 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #c200c9 —
variable.parameter.function.language.python #ff7c00 —
support.type.python #8c9000 —
keyword.operator.logical.python #c200c9 —
variable.parameter.function.python #ff7c00 —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #4946a7 —
meta.function-call.generic.python #46bfd3 —
constant.character.format.placeholder.other.python #ff7c00 —
keyword.operator.assignment.compound #c200c9 —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #8c9000 —
entity.name.namespace #ff8300 —
variable.language #ff8300 —
token.variable.parameter.java #4946a7 —
import.storage.java #ff8300 —
token.package.keyword #c200c9 —
entity.name.function, meta.require, support.function.any-method, variable.function #46bfd3 —
entity.name.type.namespace #ff8300 —
support.class, entity.name.type.class #ff8300 —
entity.name.class.identifier.namespace.type #ff8300 —
entity.name.class, variable.other.class.js, variable.other.class.ts #ff8300 —
variable.other.class.php #0004f9 —
control.elements, keyword.operator.less #ff7c00 —
keyword.other.special-method #46bfd3 —
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 #c200c9 —
token.storage.type.java #ff8300 —
support.type.property-name #4946a7 —
support.constant.property-value #4946a7 —
support.constant.font-name #ff7c00 —
entity.other.inherited-class #ff8300 —
constant.other.symbol #8c9000 —
punctuation.definition.constant #ff7c00 —
entity.other.attribute-name #ff7c00 —
entity.other.attribute-name.id #46bfd3 bold
entity.other.attribute-name.class.css #ff7c00 bold
markup.heading punctuation.definition.heading, entity.name.section #46bfd3 —
keyword.other.unit #0004f9 —
markup.bold,todo.bold #ff7c00 —
punctuation.definition.bold #ff8300 —
markup.italic, punctuation.definition.italic,todo.emphasis #c200c9 —
entity.name.section.markdown #0004f9 —
punctuation.definition.heading.markdown #0004f9 —
punctuation.definition.list.begin.markdown #0004f9 —
markup.heading.setext #4946a7 —
punctuation.definition.bold.markdown #ff7c00 —
markup.inline.raw.markdown #6ab4b0 —
markup.inline.raw.string.markdown #6ab4b0 —
punctuation.definition.list.markdown #0004f9 —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #0004f9 —
beginning.punctuation.definition.list.markdown #0004f9 —
punctuation.definition.metadata.markdown #0004f9 —
markup.underline.link.markdown,markup.underline.link.image.markdown #c200c9 —
string.other.link.title.markdown,string.other.link.description.markdown #46bfd3 —
constant.character.escape #8c9000 —
punctuation.section.embedded, variable.interpolation #0004f9 —
punctuation.section.embedded.begin,punctuation.section.embedded.end #c200c9 —
invalid.illegal.bad-ampersand.html #4946a7 —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #0004f9 —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #0004f9 —
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 #6ab4b0 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #8c9000 —
support.type.property-name.json #0004f9 —
support.type.property-name.json punctuation #0004f9 —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #c200c9 —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #c200c9 —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #ff8300 —
keyword.operator.error-control.php #c200c9 —
keyword.operator.type.php #c200c9 —
punctuation.section.array.begin.php #4946a7 —
punctuation.section.array.end.php #4946a7 —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #ff8300 —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #46bfd3 —
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 #4946a7 —
support.constant.core.rust #ff7c00 —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #ff7c00 —
entity.name.goto-label.php,support.other.php #46bfd3 —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #8c9000 —
keyword.operator.regexp.php #c200c9 —
keyword.operator.comparison.php #8c9000 —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #c200c9 —
meta.function.decorator.python #46bfd3 —
support.token.decorator.python,meta.function.decorator.identifier.python #8c9000 —
function.parameter #4946a7 —
function.parameter.ruby, function.parameter.cs #4946a7 —
constant.language.symbol.ruby #8c9000 —
inline-color-decoration rgb-value #ff7c00 —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #ff8300 —
block.scope.end,block.scope.begin #4946a7 —
entity.name.variable.local.cs #0004f9 —
token.error-token #f44747 —
token.debug-token #c200c9 —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #c200c9 —
meta.template.expression #4946a7 —
keyword.operator.module #c200c9 —
support.type.type.flowtype #46bfd3 —
support.type.primitive #ff8300 —
meta.property.object #0004f9 —
variable.parameter.function.js #0004f9 —
keyword.other.template.begin #6ab4b0 —
keyword.other.template.end #6ab4b0 —
keyword.other.substitution.begin #6ab4b0 —
keyword.other.substitution.end #6ab4b0 —
keyword.operator.assignment #8c9000 —
keyword.operator.assignment.go #ff8300 —
keyword.operator.arithmetic.go, keyword.operator.address.go #c200c9 —
entity.name.package.go #ff8300 —
support.type.prelude.elm #8c9000 —
support.constant.elm #ff7c00 —
punctuation.quasi.element #c200c9 —
constant.character.entity #0004f9 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #8c9000 —
entity.global.clojure #ff8300 —
meta.symbol.clojure #0004f9 —
constant.keyword.clojure #8c9000 —
meta.arguments.coffee, variable.parameter.function.coffee #0004f9 —
meta.scope.prerequisites.makefile #0004f9 —
storage.modifier.import.groovy #ff8300 —
meta.method.groovy #46bfd3 —
meta.definition.variable.name.groovy #0004f9 —
meta.definition.class.inherited.classes.groovy #6ab4b0 —
support.variable.semantic.hlsl #ff8300 —
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 #c200c9 —
text.variable, text.bracketed #0004f9 —
support.type.swift, support.type.vb.asp #ff8300 —
entity.name.function.xi #ff8300 —
entity.name.class.xi #8c9000 —
constant.character.character-class.regexp.xi #0004f9 —
constant.regexp.xi #c200c9 —
keyword.control.xi #8c9000 —
beginning.punctuation.definition.quote.markdown.xi #6ab4b0 —
beginning.punctuation.definition.list.markdown.xi #97baff —
constant.character.xi #46bfd3 —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #97baff —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #ff8300 —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #0004f9 —
meta.brace.square #4946a7 —
comment, punctuation.definition.comment #97baff italic
markup.quote.markdown #97baff —
punctuation.definition.block.sequence.item.yaml #4946a7 —
constant.language.symbol.elixir #8c9000 —
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.super — italic
comment.line.double-slash,comment.block.documentation — italic
keyword.control.import.python,keyword.control.flow.python — italic
markup.italic.markdown — italic
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
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...
main*
Button.tsx
fetchUser
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 } !` ;
}
ULTRA BRIGHT+ | Coding Theme