Skip to main content
Home Theme VS Code Overreacted Darkness Dark theme with syntax highlighting from overreacted.io
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.background #1e1e1e activityBar.dropBackground #ffffff1f activityBar.foreground #ffffff activityBar.inactiveForeground #ffffff99 activityBarBadge.background #007acc activityBarBadge.foreground #ffffff tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle meta.embedded, source.groovy.embedded #D4D4D4 — emphasis — italic strong — bold header #000080 — comment #6A9955 —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Overreacted Darkness — Overreacted Darkness
badge.background #343434
badge.foreground #ffffff
breadcrumb.activeSelectionForeground #e0e0e0
breadcrumb.background #1e1e1e
breadcrumb.focusForeground #e0e0e0
breadcrumb.foreground #cccccccc
breadcrumbPicker.background #212122
button.background #0e639c
button.foreground #ffffff
button.hoverBackground #1177bb
debugExceptionWidget.background #420b0d
debugExceptionWidget.border #a31515
debugToolBar.background #333333
descriptionForeground #ccccccb3
diffEditor.insertedTextBackground #c3e88d15
diffEditor.removedTextBackground #ff537010
dropdown.background #303030
dropdown.border #303030
dropdown.foreground #f0f0f0
editor.background #1a1a1a
editor.findMatchBackground #515c6a
editor.findMatchHighlightBackground #ea5c0055
editor.findRangeHighlightBackground #3a3d4166
editor.focusedStackFrameHighlightBackground #7abd7a4d
editor.foreground #d4d4d4
editor.hoverHighlightBackground #264f7840
editor.inactiveSelectionBackground #3a3d41
editor.lineHighlightBorder #282828
editor.rangeHighlightBackground #ffffff0b
editor.selectionBackground #264f78
editor.selectionHighlightBackground #add6ff26
editor.snippetFinalTabstopHighlightBorder #525252
editor.snippetTabstopHighlightBackground #7c7c7c4d
editor.stackFrameHighlightBackground #ffff0033
editor.wordHighlightBackground #575757b8
editor.wordHighlightStrongBackground #004972b8
editorBracketMatch.background #0064001a
editorBracketMatch.border #888888
editorCodeLens.foreground #999999
editorCursor.foreground #aeafad
editorError.foreground #ea4646
editorGroup.border #444444
editorGroup.dropBackground #53595d80
editorGroupHeader.noTabsBackground #1e1e1e
editorGroupHeader.tabsBackground #1e1e1e
editorGutter.addedBackground #587c0c
editorGutter.background #1a1a1a
editorGutter.commentRangeForeground #c5c5c5
editorGutter.deletedBackground #94151b
editorGutter.modifiedBackground #0c7d9d
editorHint.foreground #eeeeeeb3
editorHoverWidget.background #212122
editorHoverWidget.border #454545
editorIndentGuide.activeBackground #707070
editorIndentGuide.background #404040
editorInfo.foreground #008000
editorLineNumber.activeForeground #c6c6c6
editorLineNumber.foreground #858585
editorLink.activeForeground #4e94ce
editorMarkerNavigation.background #2d2d30
editorMarkerNavigationError.background #ea4646
editorMarkerNavigationInfo.background #008000
editorMarkerNavigationWarning.background #4d9e4d
editorOverviewRuler.addedForeground #007acc99
editorOverviewRuler.border #7f7f7f4d
editorOverviewRuler.bracketMatchForeground #a0a0a0
editorOverviewRuler.commonContentForeground #60606066
editorOverviewRuler.currentContentForeground #40c8ae80
editorOverviewRuler.deletedForeground #007acc99
editorOverviewRuler.errorForeground #ff1212b3
editorOverviewRuler.findMatchForeground #f6b94db3
editorOverviewRuler.incomingContentForeground #40a6ff80
editorOverviewRuler.infoForeground #121288b3
editorOverviewRuler.modifiedForeground #007acc99
editorOverviewRuler.rangeHighlightForeground #007acc99
editorOverviewRuler.selectionHighlightForeground #a0a0a0cc
editorOverviewRuler.warningForeground #128812b3
editorOverviewRuler.wordHighlightForeground #a0a0a0cc
editorOverviewRuler.wordHighlightStrongForeground #c0a0c0cc
editorPane.background #1e1e1e
editorRuler.foreground #5a5a5a
editorSuggestWidget.background #212122
editorSuggestWidget.border #454545
editorSuggestWidget.foreground #d4d4d4
editorSuggestWidget.highlightForeground #0097fb
editorSuggestWidget.selectedBackground #062f4a
editorUnnecessaryCode.opacity #000000aa
editorWarning.foreground #4d9e4d
editorWhitespace.foreground #e3e4e229
editorWidget.background #212122
editorWidget.border #454545
errorForeground #f48771
extensionButton.prominentBackground #327e36
extensionButton.prominentForeground #ffffff
extensionButton.prominentHoverBackground #28632b
focusBorder #333333
foreground #cccccc
gitDecoration.addedResourceForeground #81b88b
gitDecoration.conflictingResourceForeground #6c6cc4
gitDecoration.deletedResourceForeground #c74e39
gitDecoration.ignoredResourceForeground #8c8c8c
gitDecoration.modifiedResourceForeground #e2c08d
gitDecoration.submoduleResourceForeground #8db9e2
gitDecoration.untrackedResourceForeground #0097fb
input.background #1e1e1e
input.foreground #cccccc
input.placeholderForeground #a6a6a6
inputOption.activeBorder #333333
inputValidation.errorBackground #5a1d1d
inputValidation.errorBorder #be1100
inputValidation.infoBackground #063b49
inputValidation.infoBorder #007acc
inputValidation.warningBackground #352a05
inputValidation.warningBorder #b89500
list.activeSelectionBackground #094771
list.activeSelectionForeground #ffffff
list.dropBackground #383b3d
list.errorForeground #f88070
list.focusBackground #062f4a
list.highlightForeground #0097fb
list.hoverBackground #2a2d2e
list.inactiveFocusBackground #313135
list.inactiveSelectionBackground #37373d
list.invalidItemForeground #b89500
list.warningForeground #4d9e4d
menu.background #1a1a1a
menu.foreground #cccccc
menu.selectionBackground #094771
menu.selectionForeground #ffffff
menu.separatorBackground #bbbbbb
menubar.selectionBackground #ffffff1a
menubar.selectionForeground #cccccc
merge.commonContentBackground #60606029
merge.commonHeaderBackground #60606066
merge.currentContentBackground #40c8ae33
merge.currentHeaderBackground #40c8ae80
merge.incomingContentBackground #40a6ff33
merge.incomingHeaderBackground #40a6ff80
notificationCenterHeader.background #303031
notificationLink.foreground #3794ff
notifications.background #212122
notifications.border #303031
panel.background #1e1e1e
panel.border #80808059
panel.dropBackground #ffffff1f
panelTitle.activeBorder #80808059
panelTitle.activeForeground #e7e7e7
panelTitle.inactiveForeground #e7e7e799
peekView.border #007acc
peekViewEditor.background #001f33
peekViewEditor.matchHighlightBackground #ff8f0099
peekViewEditorGutter.background #001f33
peekViewResult.background #212122
peekViewResult.fileForeground #ffffff
peekViewResult.lineForeground #bbbbbb
peekViewResult.matchHighlightBackground #ea5c004d
peekViewResult.selectionBackground #3399ff33
peekViewResult.selectionForeground #ffffff
peekViewTitle.background #1e1e1e
peekViewTitleDescription.foreground #ccccccb3
peekViewTitleLabel.foreground #ffffff
pickerGroup.border #3f3f46
pickerGroup.foreground #3794ff
progressBar.background #0e70c0
scrollbar.shadow #000000
scrollbarSlider.activeBackground #bfbfbf66
scrollbarSlider.background #79797966
scrollbarSlider.hoverBackground #646464b3
settings.checkboxBackground #303030
settings.checkboxBorder #303030
settings.checkboxForeground #f0f0f0
settings.dropdownBackground #303030
settings.dropdownBorder #303030
settings.dropdownForeground #f0f0f0
settings.dropdownListBorder #454545
settings.headerForeground #e7e7e7
settings.modifiedItemIndicator #0c7d9d
settings.numberInputBackground #292929
settings.numberInputForeground #cccccc
settings.textInputBackground #292929
settings.textInputForeground #cccccc
sideBar.background #1e1e1e
sideBar.dropBackground #ffffff1f
sideBarSectionHeader.background #1e1e1e
sideBarTitle.foreground #bbbbbb
statusBar.background #1e1e1e
statusBar.debuggingBackground #cc6633
statusBar.debuggingForeground #ffffff
statusBar.foreground #cccccc
statusBar.noFolderBackground #68217a
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #ffffff2e
statusBarItem.hoverBackground #ffffff1f
statusBarItem.prominentBackground #388a34
statusBarItem.prominentHoverBackground #369432
tab.activeBackground #2a2a2a
tab.activeForeground #ffffff
tab.activeModifiedBorder #333333
tab.border #1a1a1a
tab.hoverBackground #1b1b1b
tab.inactiveBackground #1e1e1e
tab.inactiveForeground #ffffff80
tab.inactiveModifiedBorder #3399cc80
tab.unfocusedActiveForeground #ffffff80
tab.unfocusedActiveModifiedBorder #3399cc80
tab.unfocusedInactiveForeground #ffffff40
tab.unfocusedInactiveModifiedBorder #3399cc40
terminal.ansiBlack #000000
terminal.ansiBlue #2472c8
terminal.ansiBrightBlack #666666
terminal.ansiBrightBlue #3b8eea
terminal.ansiBrightCyan #29b8db
terminal.ansiBrightGreen #23d18b
terminal.ansiBrightMagenta #d670d6
terminal.ansiBrightRed #f14c4c
terminal.ansiBrightWhite #e5e5e5
terminal.ansiBrightYellow #f5f543
terminal.ansiCyan #11a8cd
terminal.ansiGreen #0dbc79
terminal.ansiMagenta #bc3fbc
terminal.ansiRed #cd3131
terminal.ansiWhite #e5e5e5
terminal.ansiYellow #e5e510
terminal.background #1e1e1e
terminal.border #80808059
terminal.foreground #cccccc
terminal.selectionBackground #ffffff40
textBlockQuote.background #7f7f7f1a
textBlockQuote.border #007acc80
textCodeBlock.background #0a0a0a66
textLink.activeForeground #3794ff
textLink.foreground #3794ff
textPreformat.foreground #d7ba7d
textSeparator.foreground #ffffff2e
titleBar.activeBackground #1e1e1e
titleBar.activeForeground #cccccc
titleBar.inactiveBackground #30303099
titleBar.inactiveForeground #cccccc99
widget.shadow #000000 constant.language #569cd6 —
entity.name.tag.css #d7ba7d —
entity.other.attribute-name #9cdcfe —
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 #d7ba7d —
markup.underline — underline
markup.heading #569cd6 bold
punctuation.definition.quote.begin.markdown #6A9955 —
punctuation.definition.list.begin.markdown #6796e6 —
markup.inline.raw #ce9178 —
punctuation.definition.tag #808080 —
meta.preprocessor #569cd6 —
meta.preprocessor.string #ce9178 —
meta.preprocessor.numeric #b5cea8 —
meta.structure.dictionary.key.python #9cdcfe —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #569cd6 —
meta.template.expression #d4d4d4 —
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded #9cdcfe —
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python #569cd6 —
keyword.other.unit #b5cea8 —
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php #569cd6 —
support.function.git-rebase #9cdcfe —
constant.sha.git-rebase #b5cea8 —
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java #d4d4d4 —
variable.language #569cd6 —
entity.name.function, support.function, support.constant.handlebars #DCDCAA —
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, 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 —
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class #4EC9B0 —
variable, meta.definition.variable.name, support.variable, entity.name.variable #9CDCFE —
meta.object-literal.key #9CDCFE —
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 —
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp #CE9178 —
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp #d16969 —
keyword.operator.or.regexp, keyword.control.anchor.regexp #DCDCAA —
keyword.operator.quantifier.regexp #d7ba7d —
constant.character #569cd6 —
constant.character.escape #d7ba7d —
token.error-token #f44747 —
token.debug-token #b267e6 —
string.quoted, variable.other.readwrite.js #ecc48d —
support.constant.math #addb67 —
constant.numeric, constant.character.numeric #ffa7c4
constant.language, punctuation.definition.constant, variable.other.constant #ffffff —
constant.character, constant.other #ffa7c4 —
constant.character.escape #ffa7c4 —
string.regexp, string.regexp keyword.other #5ca7e4 —
meta.function punctuation.separator.comma #c792ea —
punctuation.accessor, keyword #c792ea italic
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx #ffa7c4 italic
storage.type.function.arrow.js —
entity.name.class, meta.class entity.name.type.class #ffcb8b —
entity.other.inherited-class #addb67 —
punctuation.definition.tag, meta.tag #c792ea —
entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html #ffa7c4
entity.other.attribute-name #addb67 italic
entity.name.tag.custom #ffffff —
support.function, support.constant #ffa7c4 —
support.constant.meta.property-value #ffa7c4 —
support.type, support.class #addb67 —
support.variable.dom #addb67 —
invalid.deprecated #ffffff —
keyword.operator.relational #ffa7c4 italic
keyword.operator.assignment #ffa7c4 —
keyword.operator.arithmetic #ffa7c4 —
keyword.operator.bitwise #ffa7c4 —
keyword.operator.increment #ffa7c4 —
keyword.operator.ternary #ffa7c4 —
comment.line.double-slash #637777 —
constant.language.null #ff5874 —
meta.delimiter.period #c792ea italic
punctuation.definition.string #c792ea —
constant.language.boolean #ff5874 —
variable.parameter.function #ffa7c4
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag #80CBC4
meta.property-list entity.name.tag.reference #57eaf1 —
constant.other.color.rgb-value punctuation.definition.constant #ffa7c4 —
constant.other.color #FFEB95 —
keyword.other.unit #FFEB95 —
meta.selector #c792ea italic
entity.other.attribute-name.id #FAD430 —
meta.property-name #80CBC4 —
entity.name.tag.doctype, meta.tag.sgml.doctype #c792ea italic
punctuation.definition.parameters #c792ea —
keyword.control.operator #ffa7c4 —
keyword.operator.logical #c792ea
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property #ffffff —
variable.other.object.property #d7dbe0 italic
variable.other.object.js —
entity.name.function #82AAFF
keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx #ffa7c4 italic
keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts #c792ea
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control #ffa7c4 —
invalid.unimplemented #ffffff —
variable.language #ffa7c4 —
support.variable.property #ffa7c4 —
variable.function #ffffff —
variable.interpolation #ec5f67 —
meta.function-call #82AAFF —
punctuation.section.embedded #c792ea —
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, punctuation.terminator.statement, punctuation.definition.block, punctuation.separator.parameter, punctuation.separator.comma, punctuation.separator.key-value, meta.array #c792ea —
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list #c792ea —
string.template meta.template.expression #d3423e —
string.template punctuation.definition.string #d6deeb —
variable.assignment.coffee #31e1eb —
variable.parameter.function.coffee #d6deeb —
variable.assignment.coffee #ffa7c4 —
variable.other.readwrite.cs #d6deeb —
entity.name.type.class.cs, storage.type.cs #82AAFF —
entity.name.type.namespace.cs #B2CCD6 —
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css #ff6363
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass #ffa7c4 —
keyword.other.unit.css #FFEB95 —
meta.attribute-selector.css entity.other.attribute-name.attribute, variable.other.readwrite.js #ffa7c4 —
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir #82AAFF —
source.elixir entity.name.function #addb67 —
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir #82AAFF —
source.elixir punctuation.definition.string #addb67 —
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir #addb67 —
source.elixir .punctuation.binary.elixir #c792ea italic
source.go meta.function-call.go #DDDDDD —
source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go #c792ea italic
source.go constant.language.go, source.go constant.other.placeholder.go #ff5874 —
entity.other.attribute-name.id.html #addb67 —
punctuation.definition.tag.html #c792ea —
meta.tag.sgml.doctype.html #c792ea italic
meta.class entity.name.type.class.js #ffcb8b —
meta.method.declaration storage.type.js #ffa7c4 —
meta.js punctuation.definition.js #c792ea —
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc #5f7e97 —
variable.other.jsdoc, variable.other.phpdoc #78ccf0 —
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other #c792ea —
variable.parameter.function.js #7986E7 —
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx #d6deeb —
variable.js, variable.other.js #d6deeb —
entity.name.type.js, entity.name.type.module.js #ffcb8b
support.type.property-name.json #addb67 —
support.constant.json #addb67 —
meta.structure.dictionary.value.json string.quoted.double #c789d6 —
string.quoted.double.json punctuation.definition.string.json #80CBC4 —
meta.structure.dictionary.json meta.structure.dictionary.value constant.language #ff5874 —
variable.other.ruby #d6deeb —
entity.name.type.class.ruby #ecc48d —
constant.language.symbol.hashkey.ruby #ffa7c4 —
constant.language.symbol.ruby #ffa7c4 —
entity.name.tag.less #ffa7c4 —
keyword.other.unit.css #FFEB95 —
meta.attribute-selector.less entity.other.attribute-name.attribute #ffa7c4 —
markup.heading.markdown #82b1ff —
markup.italic.markdown #c792ea italic
markup.bold.markdown #addb67 bold
markup.quote.markdown #697098 italic
markup.inline.raw.markdown #80CBC4 —
markup.underline.link.markdown, markup.underline.link.image.markdown #ff869a —
string.other.link.title.markdown, string.other.link.description.markdown #d6deeb —
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string #82b1ff —
punctuation.definition.metadata.markdown #ffa7c4 —
beginning.punctuation.definition.list.markdown #82b1ff —
markup.inline.raw.string.markdown #addb67 —
variable.other.php, variable.other.property.php #bec5d4 —
support.class.php #ffcb8b —
meta.function-call.php punctuation #d6deeb —
variable.other.global.php #addb67 —
variable.other.global.php punctuation.definition.variable #addb67 —
constant.language.python #ff5874 —
variable.parameter.function.python, meta.function-call.arguments.python #82AAFF —
meta.function-call.python, meta.function-call.generic.python #B2CCD6 —
punctuation.python #d6deeb —
entity.name.function.decorator.python #addb67 —
source.python variable.language.special #8EACE3 —
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass #addb67 —
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable #ffa7c4 —
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable #bec5d4 —
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute #ffa7c4 —
entity.name.tag.scss, entity.name.tag.sass #ffa7c4 —
keyword.other.unit.scss, keyword.other.unit.sass #FFEB95 —
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts #d6deeb —
entity.name.type.ts, entity.name.type.tsx #ffcb8b —
support.class.node.ts, support.class.node.tsx #ffa7c4 —
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type #5f7e97 —
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block #c792ea —
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx #82AAFF —
meta.tag.js meta.jsx.children.tsx #82AAFF —
entity.name.tag.yaml #ffa7c4 —
variable.other.readwrite.js, variable.parameter #d7dbe0 —
support.class.component.js, support.class.component.tsx #ffa7c4
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx #d6deeb —
meta.class entity.name.type.class.tsx #ffcb8b —
entity.name.type.tsx, entity.name.type.module.tsx #ffcb8b —
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx #82AAFF —
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, meta.brace, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.relational, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.type, keyword.operator, keyword, punctuation.definintion.string, punctuation, variable.other.readwrite.js, storage.type, source.css, string.quoted —
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...
main*
Button.tsx
31
~/my-project
$
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 } ! ` ;
}
Overreacted Darkness | Coding Theme