Skip to main content
Home Theme VS Code CYBERDARK THEME This extension was initially created for my own personal use, to minimize common color distraction fatigue while coding, yet designed to be aesthetically pleasing, focusing on optimal readability of the code syntax.
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 #00000000 activityBar.background #0a0a0a activityBar.border #00000000 activityBar.foreground #e41838 activityBar.inactiveForeground #414141 activityBarBadge.background #e41838 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 #f1fa8c — variable.other.generic-type.haskell #f54d6d — storage.type.haskell #76d0e4 — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
CYBERDARK THEME — CYBERDARK THEME
activityBarBadge.foreground #ffffff
badge.background #e41838
badge.foreground #ffffff
breadcrumb.activeSelectionForeground #ffffff
breadcrumb.background #414141
breadcrumb.focusForeground #ffffff
breadcrumb.foreground #c7c7c7
button.background #414141
button.foreground #ffffff
button.hoverBackground #e41838
button.secondaryBackground #414141
button.secondaryForeground #ffffff
button.secondaryHoverBackground #e41838
checkbox.background #000000
checkbox.border #00000000
checkbox.foreground #c7c7c7
debugExceptionWidget.background #000000
debugExceptionWidget.border #414141
debugToolBar.background #000000
debugToolBar.border #414141
diffEditor.border #e41838
diffEditor.insertedTextBackground #00baff06
diffEditor.insertedTextBorder #ff000000
diffEditor.removedTextBackground #ff10100a
diffEditor.removedTextBorder #96353500
dropdown.background #000000
dropdown.border #00000000
dropdown.foreground #c7c7c7
editor.background #0a0a0a
editor.findMatchBackground #414141
editor.findMatchBorder #c7c7c700
editor.findMatchHighlightBackground #41414178
editor.findMatchHighlightBorder #00000000
editor.findRangeHighlightBackground #ffffff06
editor.findRangeHighlightBorder #00000000
editor.foldBackground #000000
editor.foreground #ffffff
editor.hoverHighlightBackground #ffffff15
editor.inactiveSelectionBackground #e6e6e618
editor.lineHighlightBackground #ffffff0a
editor.lineHighlightBorder #414141
editor.rangeHighlightBackground #000000
editor.rangeHighlightBorder #414141
editor.selectionBackground #e6e6e618
editor.selectionHighlightBackground #41414178
editor.selectionHighlightBorder #00000000
editor.wordHighlightBackground #575757b8
editor.wordHighlightStrongBackground #3e4041b8
editorBracketHighlight.foreground1 #f8f8f2
editorBracketHighlight.foreground2 #f54d6d
editorBracketHighlight.foreground3 #52a5b8
editorBracketHighlight.foreground4 #9be680
editorBracketHighlight.foreground5 #b18de6
editorBracketHighlight.foreground6 #f1fa8c
editorBracketMatch.background #00000000
editorBracketMatch.border #414141
editorCodeLens.foreground #c7c7c7
editorCursor.background #000000
editorCursor.foreground #c7c7c7
editorError.background #00000000
editorError.border #e41838
editorError.foreground #00000000
editorGroup.border #e41838
editorGroup.emptyBackground #0a0a0a
editorGroupHeader.border #000000
editorGroupHeader.tabsBackground #00000000
editorGroupHeader.tabsBorder #00000000
editorGutter.addedBackground #81b88b
editorGutter.background #0a0a0a
editorGutter.commentRangeForeground #ffffff
editorGutter.deletedBackground #cb3f3f
editorGutter.foldingControlForeground #ffffff
editorGutter.modifiedBackground #1399ba
editorHoverWidget.background #000000
editorHoverWidget.border #414141
editorHoverWidget.foreground #c7c7c7
editorIndentGuide.activeBackground #c7c7c7
editorIndentGuide.background #414141
editorInfo.background #00000000
editorInfo.border #75cbff
editorInfo.foreground #00000000
editorLineNumber.activeForeground #ffffff
editorLineNumber.foreground #414141
editorLink.activeForeground #ffffff
editorMarkerNavigation.background #000000
editorMarkerNavigationError.background #e41838
editorMarkerNavigationInfo.background #75cbff
editorMarkerNavigationWarning.background #ffa700
editorOverviewRuler.background #00000000
editorOverviewRuler.border #000000
editorRuler.foreground #414141
editorSuggestWidget.background #000000
editorSuggestWidget.border #414141
editorSuggestWidget.foreground #c7c7c7
editorSuggestWidget.highlightForeground #e41838
editorSuggestWidget.selectedBackground #414141
editorWarning.background #a9904000
editorWarning.border #ffa700
editorWarning.foreground #00000000
editorWhitespace.foreground #414141
editorWidget.background #0a0a0a
editorWidget.foreground #c7c7c789
editorWidget.resizeBorder #414141
focusBorder #00000000
foreground #c7c7c7
gitDecoration.addedResourceForeground #81b88b
gitDecoration.conflictingResourceForeground #d9d490
gitDecoration.deletedResourceForeground #cb3f3f
gitDecoration.ignoredResourceForeground #606060
gitDecoration.modifiedResourceForeground #1399ba
gitDecoration.stageDeletedResourceForeground #cb3f3f
gitDecoration.stageModifiedResourceForeground #1399ba
gitDecoration.submoduleResourceForeground #8db9e2
gitDecoration.untrackedResourceForeground #73c991
icon.foreground #c7c7c7
input.background #000000
input.border #00000000
input.foreground #c7c7c7
input.placeholderForeground #414141
inputOption.activeBackground #e41838
inputOption.activeBorder #00000000
inputOption.activeForeground #ffffff
list.activeSelectionBackground #414141
list.activeSelectionForeground #ffffff
list.dropBackground #00000000
list.focusBackground #414141
list.focusForeground #ffffff
list.highlightForeground #e41838
list.hoverBackground #414141
list.hoverForeground #ffffff
list.inactiveSelectionBackground #414141
list.inactiveSelectionForeground #ffffff
listFilterWidget.background #000000
listFilterWidget.noMatchesOutline #e41838
listFilterWidget.outline #414141
menu.background #0a0a0a
menu.border #00000000
menu.foreground #c7c7c7
menu.selectionBackground #e41838
menu.selectionBorder #00000000
menu.selectionForeground #ffffff
menu.separatorBackground #414141
menubar.selectionBackground #414141
menubar.selectionBorder #00000000
menubar.selectionForeground #ffffff
merge.commonContentBackground #492C7B
merge.commonHeaderBackground #7B47E1
merge.currentContentBackground #174841
merge.currentHeaderBackground #158472
merge.incomingContentBackground #243A5E
merge.incomingHeaderBackground #3365AE
minimap.background #0a0a0a
minimap.errorHighlight #00000000
minimap.findMatchHighlight #414141
minimap.selectionHighlight #e6e6e618
minimap.warningHighlight #00000000
minimapGutter.addedBackground #81b88b
minimapGutter.deletedBackground #cb3f3f
minimapGutter.modifiedBackground #1399ba
notificationCenter.border #414141
notificationCenterHeader.background #414141
notificationCenterHeader.foreground #fbfbfb
notifications.background #000000
notifications.border #414141
notifications.foreground #c7c7c7
notificationsErrorIcon.foreground #e41838
notificationsInfoIcon.foreground #75cbff
notificationsWarningIcon.foreground #ffa700
notificationToast.border #414141
panel.background #0a0a0a
panel.border #e41838
panelSection.border #e41838
panelTitle.activeBorder #e41838
panelTitle.activeForeground #c7c7c7
panelTitle.inactiveForeground #414141
peekView.border #e41838
peekViewEditor.background #101010
peekViewEditor.matchHighlightBackground #000000
peekViewEditor.matchHighlightBorder #c7c7c700
peekViewEditorGutter.background #101010
peekViewResult.background #000000
peekViewResult.fileForeground #c7c7c7
peekViewResult.lineForeground #c7c7c7
peekViewResult.matchHighlightBackground #e41838
peekViewResult.selectionBackground #414141
peekViewResult.selectionForeground #ffffff
peekViewTitle.background #000000
peekViewTitleDescription.foreground #c7c7c7
peekViewTitleLabel.foreground #ffffff
pickerGroup.border #000000
pickerGroup.foreground #c7c7c789
progressBar.background #e41838
scrollbar.shadow #00000000
scrollbarSlider.activeBackground #414141
scrollbarSlider.background #41414181
scrollbarSlider.hoverBackground #414141bd
selection.background #414141
settings.focusedRowBackground #ffffff07
settings.headerForeground #c7c7c7
sideBar.background #0a0a0a
sideBar.border #000000fb
sideBar.dropBackground #00000000
sideBar.foreground #c7c7c7
sideBarSectionHeader.background #414141
sideBarSectionHeader.border #000000
sideBarSectionHeader.foreground #c7c7c7
sideBarTitle.foreground #ffffff
statusBar.background #000000
statusBar.border #ffffff00
statusBar.debuggingBackground #e41838
statusBar.debuggingBorder #00000000
statusBar.debuggingForeground #ffffff
statusBar.foreground #c7c7c7
statusBar.noFolderBackground #4f5175
statusBar.noFolderBorder #00000000
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #383838
statusBarItem.remoteBackground #e41838
statusBarItem.remoteForeground #ffffff
tab.activeBackground #414141
tab.activeBorder #ffffff00
tab.activeBorderTop #e41838
tab.activeForeground #ffffff
tab.border #414141
tab.hoverBackground #414141
tab.hoverBorder #ffffff00
tab.hoverForeground #ffffff
tab.inactiveBackground #000000
tab.inactiveForeground #c7c7c7
terminal.ansiBlack #2e2e2e
terminal.ansiBlue #3278c4
terminal.ansiBrightBlack #4f4f4f
terminal.ansiBrightBlue #278dfd
terminal.ansiBrightCyan #1dbee6
terminal.ansiBrightGreen #37d595
terminal.ansiBrightMagenta #ec38ec
terminal.ansiBrightRed #fb1b1b
terminal.ansiBrightWhite #9d9d9d
terminal.ansiBrightYellow #ffd843
terminal.ansiCyan #1399ba
terminal.ansiGreen #179967
terminal.ansiMagenta #b654b6
terminal.ansiRed #cb3f3f
terminal.ansiWhite #eeeeee
terminal.ansiYellow #d9d490
terminal.border #e41838
terminal.foreground #949494
terminal.selectionBackground #e6e6e618
terminalCursor.background #414141
terminalCursor.foreground #c7c7c7
textLink.foreground #e41838
titleBar.activeBackground #0a0a0a
titleBar.activeForeground #c7c7c7
titleBar.border #00000000
titleBar.inactiveBackground #000000
titleBar.inactiveForeground #414141
tree.indentGuidesStroke #414141
walkThrough.embeddedEditorBackground #00000050
widget.shadow #000000 #f1fa8c
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #ffffff —
variable.parameter.function.language.special.self.python #52a5b8 —
storage.modifier.lifetime.rust #ffffff —
support.function.std.rust #b18de6 —
entity.name.lifetime.rust #52a5b8 —
variable.language.rust #f1fa8c —
support.constant.edge #f54d6d —
constant.other.character-class.regexp #f1fa8c —
keyword.operator.quantifier.regexp #76d0e4 —
punctuation.definition.string.begin,punctuation.definition.string.end #6272a4 —
variable.parameter.function #ffffff —
comment markup.link #414141 —
markup.changed.diff #52a5b8 —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #b18de6 —
markup.inserted.diff #6272a4 —
markup.deleted.diff #f1fa8c —
meta.function.c,meta.function.cpp #f1fa8c —
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 #ffffff —
punctuation.separator.key-value #ffffff —
keyword.operator.expression.import #b18de6 —
support.constant.math #52a5b8 —
support.constant.property.math #C7C7C7 —
variable.other.constant #52a5b8 —
storage.type.annotation.java, storage.type.object.array.java #52a5b8 —
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 #ffffff —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #52a5b8 —
keyword.operator.instanceof.java #f54d6d —
meta.definition.variable.name.java #f1fa8c —
keyword.operator.logical #9be680 —
keyword.operator.bitwise #9be680 —
keyword.operator.channel #9be680 —
support.constant.property-value.scss,support.constant.property-value.css #C7C7C7 —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #9be680 —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #76d0e4 —
punctuation.separator.list.comma.css #ffffff —
support.constant.color.w3c-standard-color-name.css #76d0e4 —
support.type.vendored.property-name.css #C7C7C7 —
support.module.node,support.type.object.module,support.module.node #52a5b8 —
entity.name.type.module #52a5b8 —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #f1fa8c —
support.constant.json #76d0e4 —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #f54d6d —
support.type.object.console #f1fa8c —
support.variable.property.process #76d0e4 —
entity.name.function,support.function.console #b18de6 —
keyword.operator.misc.rust #ffffff —
keyword.operator.sigil.rust #f54d6d —
keyword.operator.delete #f54d6d —
support.type.object.dom #9be680 —
support.variable.dom,support.variable.property.dom #f1fa8c —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #9be680 —
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 #f54d6d —
punctuation.separator.delimiter #ffffff —
punctuation.separator.c,punctuation.separator.cpp #f54d6d —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #9be680 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #f54d6d —
variable.parameter.function.language.python #76d0e4 —
support.type.python #9be680 —
keyword.operator.logical.python #f54d6d —
variable.parameter.function.python #76d0e4 —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #ffffff —
meta.function-call.generic.python #b18de6 —
constant.character.format.placeholder.other.python #76d0e4 —
keyword.operator.assignment.compound #f54d6d —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #9be680 —
entity.name.namespace #52a5b8 —
variable.language #52a5b8 —
token.variable.parameter.java #ffffff —
import.storage.java #52a5b8 —
token.package.keyword #f54d6d —
entity.name.function, meta.require, support.function.any-method, variable.function #b18de6 —
entity.name.type.namespace #52a5b8 —
support.class, entity.name.type.class #52a5b8 —
entity.name.class.identifier.namespace.type #52a5b8 —
entity.name.class, variable.other.class.js, variable.other.class.ts #52a5b8 —
variable.other.class.php #f1fa8c —
control.elements, keyword.operator.less #76d0e4 —
keyword.other.special-method #b18de6 —
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 #f54d6d —
token.storage.type.java #52a5b8 —
support.type.property-name #C7C7C7 —
support.constant.property-value #C7C7C7 —
support.constant.font-name #76d0e4 —
entity.other.inherited-class #52a5b8 —
constant.other.symbol #9be680 —
punctuation.definition.constant #76d0e4 —
entity.other.attribute-name #76d0e4 —
entity.other.attribute-name.id #b18de6 bold
entity.other.attribute-name.class.css #76d0e4 bold
markup.heading punctuation.definition.heading, entity.name.section #b18de6 —
keyword.other.unit #f1fa8c —
markup.bold,todo.bold #76d0e4 —
punctuation.definition.bold #52a5b8 —
markup.italic, punctuation.definition.italic,todo.emphasis #f54d6d —
entity.name.section.markdown #f1fa8c —
punctuation.definition.heading.markdown #f1fa8c —
punctuation.definition.list.begin.markdown #f1fa8c —
markup.heading.setext #ffffff —
punctuation.definition.bold.markdown #76d0e4 —
markup.inline.raw.markdown #6272a4 —
markup.inline.raw.string.markdown #6272a4 —
punctuation.definition.list.markdown #f1fa8c —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #f1fa8c —
beginning.punctuation.definition.list.markdown #f1fa8c —
punctuation.definition.metadata.markdown #f1fa8c —
markup.underline.link.markdown,markup.underline.link.image.markdown #f54d6d —
string.other.link.title.markdown,string.other.link.description.markdown #b18de6 —
constant.character.escape #9be680 —
punctuation.section.embedded, variable.interpolation #f1fa8c —
punctuation.section.embedded.begin,punctuation.section.embedded.end #f54d6d —
invalid.illegal.bad-ampersand.html #ffffff —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #f1fa8c —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #f1fa8c —
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 #6272a4 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #9be680 —
support.type.property-name.json #f1fa8c —
support.type.property-name.json punctuation #C7C7C7 —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #f54d6d —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #f54d6d —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #52a5b8 —
keyword.operator.error-control.php #f54d6d —
keyword.operator.type.php #f54d6d —
punctuation.section.array.begin.php #ffffff —
punctuation.section.array.end.php #ffffff —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #52a5b8 —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #b18de6 —
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 #ffffff —
support.constant.core.rust #76d0e4 —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #76d0e4 —
entity.name.goto-label.php,support.other.php #b18de6 —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #9be680 —
keyword.operator.regexp.php #f54d6d —
keyword.operator.comparison.php #9be680 —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #f54d6d —
meta.function.decorator.python #b18de6 —
support.token.decorator.python,meta.function.decorator.identifier.python #9be680 —
function.parameter #ffffff —
function.parameter.ruby, function.parameter.cs #ffffff —
constant.language.symbol.ruby #9be680 —
inline-color-decoration rgb-value #76d0e4 —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #52a5b8 —
block.scope.end,block.scope.begin #ffffff —
entity.name.variable.local.cs #f1fa8c —
token.error-token #f44747 —
token.debug-token #f54d6d —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #f54d6d —
meta.template.expression #ffffff —
keyword.operator.module #f54d6d —
support.type.type.flowtype #b18de6 —
support.type.primitive #52a5b8 —
meta.property.object #C7C7C7 —
variable.parameter.function.js #f1fa8c —
keyword.other.template.begin #6272a4 —
keyword.other.template.end #6272a4 —
keyword.other.substitution.begin #6272a4 —
keyword.other.substitution.end #6272a4 —
keyword.operator.assignment #9be680 —
keyword.operator.assignment.go #52a5b8 —
keyword.operator.arithmetic.go, keyword.operator.address.go #f54d6d —
entity.name.package.go #52a5b8 —
support.type.prelude.elm #9be680 —
support.constant.elm #76d0e4 —
punctuation.quasi.element #f54d6d —
constant.character.entity #f1fa8c —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #9be680 —
entity.global.clojure #52a5b8 —
meta.symbol.clojure #f1fa8c —
constant.keyword.clojure #9be680 —
meta.arguments.coffee, variable.parameter.function.coffee #f1fa8c —
meta.scope.prerequisites.makefile #f1fa8c —
storage.modifier.import.groovy #52a5b8 —
meta.method.groovy #b18de6 —
meta.definition.variable.name.groovy #f1fa8c —
meta.definition.class.inherited.classes.groovy #6272a4 —
support.variable.semantic.hlsl #52a5b8 —
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 #f54d6d —
text.variable, text.bracketed #f1fa8c —
support.type.swift, support.type.vb.asp #52a5b8 —
entity.name.function.xi #52a5b8 —
entity.name.class.xi #9be680 —
constant.character.character-class.regexp.xi #C7C7C7 —
constant.regexp.xi #f54d6d —
keyword.control.xi #9be680 —
beginning.punctuation.definition.quote.markdown.xi #6272a4 —
beginning.punctuation.definition.list.markdown.xi #414141 —
constant.character.xi #b18de6 —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #414141 —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #52a5b8 —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #f1fa8c —
meta.brace.square #ffffff —
comment, punctuation.definition.comment #414141 italic bold
markup.quote.markdown #414141 —
punctuation.definition.block.sequence.item.yaml #ffffff —
constant.language.symbol.elixir #9be680 —
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 bold
comment.line.double-slash,comment.block.documentation — italic bold
keyword.control.import.python,keyword.control.flow.python — italic bold
markup.italic.markdown — italic bold
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 } !` ;
}
CYBERDARK THEME | Coding Theme