Skip to main content
Home Theme VS Code DangerDark A clean simple dark theme designed around python 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 #151515 activityBar.background #0d0d0d activityBar.border #8e8e8e00 activityBar.foreground #e63d3d activityBar.inactiveForeground #a7a7a760 activityBarBadge.background #e63d3d 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 #bababa — variable.other.generic-type.haskell #d30d4e — storage.type.haskell #6376e2 — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.foreground #ffffff
badge.background #e63d3d
badge.foreground #ffffff
breadcrumb.activeSelectionForeground #e0e0e0
breadcrumb.background #1f1f1f
breadcrumb.focusForeground #e0e0e0
breadcrumb.foreground #cccccccc
button.background #a73939
button.foreground #ffffff
button.hoverBackground #e63d3d
button.secondaryBackground #3a3d41
button.secondaryForeground #ffffff
button.secondaryHoverBackground #45494e
checkbox.background #3c3c3c
checkbox.border #00000000
checkbox.foreground #cccccc
debugExceptionWidget.background #333333
debugExceptionWidget.border #474747
debugToolBar.background #333333
debugToolBar.border #474747
diffEditor.border #444444
diffEditor.insertedTextBackground #92620733
diffEditor.removedTextBackground #a1272733
dropdown.background #3c3c3c
dropdown.border #00000000
dropdown.foreground #cccccc
editor.background #1f1f1f
editor.findMatchBackground #f3f3f338
editor.findMatchBorder #acacac2d
editor.findMatchHighlightBackground #b8b8b855
editor.findMatchHighlightBorder #dbdbdb57
editor.findRangeHighlightBackground #413a3a66
editor.findRangeHighlightBorder #ffffff00
editor.foldBackground #992b2b4d
editor.foreground #f7f7f7
editor.hoverHighlightBackground #8c8c8c66
editor.inactiveSelectionBackground #2e2e2e
editor.lineHighlightBackground #66686822
editor.lineHighlightBorder #545454
editor.rangeHighlightBackground #ffffff0b
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #a7a7a72e
editor.selectionHighlightBackground #add6ff26
editor.selectionHighlightBorder #d3d3d3
editor.wordHighlightBackground #fcfcfc3c
editor.wordHighlightStrongBackground #ffffff40
editor.wordHighlightStrongBorder #dbdbdb35
editorBracketMatch.background #0064001a
editorBracketMatch.border #888888
editorCodeLens.foreground #999999
editorCursor.background #000000
editorCursor.foreground #aeafad
editorError.background #B73A3400
editorError.border #ffffff00
editorError.foreground #b65947
editorGroup.border #686868
editorGroup.emptyBackground #1f1f1f
editorGroupHeader.border #fb6e0700
editorGroupHeader.tabsBackground #1b1b1b
editorGroupHeader.tabsBorder #fb6e0700
editorGutter.addedBackground #587c0c
editorGutter.background #1f1f1f
editorGutter.commentRangeForeground #c5c5c5
editorGutter.deletedBackground #94151b
editorGutter.foldingControlForeground #c5c5c5
editorGutter.modifiedBackground #0c7d9d
editorHoverWidget.background #1f1f1f
editorHoverWidget.border #414141
editorHoverWidget.foreground #cccccc
editorIndentGuide.activeBackground #646464
editorIndentGuide.background #4f4f4f
editorInfo.background #4490BF00
editorInfo.border #4490BF00
editorInfo.foreground #9b9b9b
editorLineNumber.activeForeground #c6c6c6
editorLineNumber.foreground #606060
editorLink.activeForeground #62acea
editorMarkerNavigation.background #171717
editorMarkerNavigationError.background #9d3131
editorMarkerNavigationInfo.background #5a5a5a
editorMarkerNavigationWarning.background #9f6a31
editorOverviewRuler.background #25252500
editorOverviewRuler.border #7f7f7f4d
editorRuler.foreground #5a5a5a
editorSuggestWidget.background #191919
editorSuggestWidget.border #454545
editorSuggestWidget.foreground #d4d4d4
editorSuggestWidget.highlightForeground #e0712f
editorSuggestWidget.selectedBackground #262525
editorWarning.background #A9904000
editorWarning.border #ffffff00
editorWarning.foreground #927b21
editorWhitespace.foreground #e3e4e229
editorWidget.background #252526
editorWidget.foreground #cccccc
editorWidget.resizeBorder #5F5F5F
focusBorder #343434
foreground #888888
gitDecoration.addedResourceForeground #81b88b
gitDecoration.conflictingResourceForeground #6c6cc4
gitDecoration.deletedResourceForeground #c74e39
gitDecoration.ignoredResourceForeground #8c8c8c
gitDecoration.modifiedResourceForeground #e2c08d
gitDecoration.stageDeletedResourceForeground #c74e39
gitDecoration.stageModifiedResourceForeground #e2c08d
gitDecoration.submoduleResourceForeground #8db9e2
gitDecoration.untrackedResourceForeground #73c991
icon.foreground #515151
input.background #3c3c3c
input.border #00000000
input.foreground #cccccc
input.placeholderForeground #a6a6a6
inputOption.activeBackground #e63d3d
inputOption.activeBorder #007acc00
inputOption.activeForeground #ffffff
list.activeSelectionBackground #30303097
list.activeSelectionForeground #db7f1c
list.dropBackground #262626
list.focusBackground #1b1a19
list.focusForeground #757575
list.highlightForeground #db7f1c
list.hoverBackground #232323
list.hoverForeground #e63d3d
list.inactiveSelectionBackground #626d8842
list.inactiveSelectionForeground #ffffff
listFilterWidget.background #212b43
listFilterWidget.noMatchesOutline #3b8dd57e
listFilterWidget.outline #40488c
menu.background #1d1d1f
menu.border #28282800
menu.foreground #cccccc
menu.selectionBackground #8a3a3a
menu.selectionBorder #00000000
menu.selectionForeground #ffffff
menu.separatorBackground #3f3929
menubar.selectionBackground #eef1f71e
menubar.selectionForeground #ffffff
merge.commonContentBackground #282828
merge.commonHeaderBackground #383838
merge.currentContentBackground #6b2020
merge.currentHeaderBackground #a12b2b
merge.incomingContentBackground #75490f
merge.incomingHeaderBackground #ab8438
minimap.background #1f1f1f
minimap.errorHighlight #b65947
minimap.findMatchHighlight #5a5a5a
minimap.selectionHighlight #8282822e
minimap.warningHighlight #927b21
minimapGutter.addedBackground #587c0c
minimapGutter.deletedBackground #94151b
minimapGutter.modifiedBackground #0c7d9d
notificationCenter.border #474747
notificationCenterHeader.background #303031
notificationCenterHeader.foreground #cccccc
notifications.background #171717
notifications.border #303031
notifications.foreground #cccccc
notificationsErrorIcon.foreground #f48771
notificationsInfoIcon.foreground #75beff
notificationsWarningIcon.foreground #cca700
notificationToast.border #b04646
panel.background #171717
panel.border #e63d3d
panelSection.border #343434
panelTitle.activeBorder #5a5a5a
panelTitle.activeForeground #e4e4e4
panelTitle.inactiveForeground #999999
peekView.border #b5b5b52e
peekViewEditor.background #181b1d
peekViewEditor.matchHighlightBackground #3d3d3d99
peekViewEditor.matchHighlightBorder #64646440
peekViewEditorGutter.background #181b1d
peekViewResult.background #252526
peekViewResult.fileForeground #ffffff
peekViewResult.lineForeground #b4b0b0
peekViewResult.matchHighlightBackground #5151514d
peekViewResult.selectionBackground #6b6b6b33
peekViewResult.selectionForeground #ffffff
peekViewTitle.background #1e1e1e
peekViewTitleDescription.foreground #ccccccb3
peekViewTitleLabel.foreground #ffffff
pickerGroup.border #3f3f46
pickerGroup.foreground #be9972
progressBar.background #e63d3d
scrollbar.shadow #000000
scrollbarSlider.activeBackground #bfbfbf66
scrollbarSlider.background #94949458
scrollbarSlider.hoverBackground #646464b3
selection.background #f5f7ff4a
settings.focusedRowBackground #ffffff07
settings.headerForeground #a7a7a7
sideBar.background #171717
sideBar.border #cccccc08
sideBar.dropBackground #262626
sideBar.foreground #cccccc
sideBarSectionHeader.background #212121
sideBarSectionHeader.border #fb6e0700
sideBarSectionHeader.foreground #ffffffe7
sideBarTitle.foreground #565656
statusBar.background #0d0d0de1
statusBar.border #414141
statusBar.debuggingBackground #e63d3d
statusBar.debuggingForeground #ffffff
statusBar.foreground #626262
statusBar.noFolderBackground #bc922d
statusBar.noFolderBorder #4b4b4b74
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #c9c9c925
statusBarItem.remoteBackground #171717
statusBarItem.remoteForeground #bcbcbc
tab.activeBackground #282828
tab.activeBorder #00000000
tab.activeBorderTop #00000000
tab.activeForeground #ffffff
tab.border #383838
tab.hoverBackground #d0d0d03f
tab.hoverBorder #d2d2d219
tab.hoverForeground #c9c9c9
tab.inactiveBackground #171717
tab.inactiveForeground #ffffff80
terminal.ansiBlack #000000
terminal.ansiBlue #c82424
terminal.ansiBrightBlack #666666
terminal.ansiBrightBlue #ea5c3b
terminal.ansiBrightCyan #dbae29
terminal.ansiBrightGreen #23d18b
terminal.ansiBrightMagenta #d670d6
terminal.ansiBrightRed #f14c4c
terminal.ansiBrightWhite #e5e5e5
terminal.ansiBrightYellow #f5f543
terminal.ansiCyan #e2af37
terminal.ansiGreen #0dbc79
terminal.ansiMagenta #bc3fbc
terminal.ansiRed #cd3131
terminal.ansiWhite #e5e5e5
terminal.ansiYellow #e5e510
terminal.border #343434
terminal.foreground #cccccc
terminal.selectionBackground #5a5a5a40
terminalCursor.background #5a5a5a
terminalCursor.foreground #ffffff
textLink.foreground #e2aa40
titleBar.activeBackground #171717
titleBar.activeForeground #cccccc
titleBar.border #84848454
titleBar.inactiveBackground #3c3c3c99
titleBar.inactiveForeground #cccccc99
tree.indentGuidesStroke #363636
walkThrough.embeddedEditorBackground #00000050
widget.shadow #0000005c #bababa
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #f7f7f7 —
variable.parameter.function.language.special.self.python #ff7038 —
storage.modifier.lifetime.rust #f7f7f7 —
support.function.std.rust #f2534b —
entity.name.lifetime.rust #ff7038 —
variable.language.rust #bababa —
support.constant.edge #d30d4e —
constant.other.character-class.regexp #bababa —
keyword.operator.quantifier.regexp #6376e2 —
punctuation.definition.string.begin,punctuation.definition.string.end #756b92 —
variable.parameter.function #f7f7f7 —
comment markup.link #666666 —
markup.changed.diff #ff7038 —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #f2534b —
markup.inserted.diff #756b92 —
markup.deleted.diff #bababa —
meta.function.c,meta.function.cpp #bababa —
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 #f7f7f7 —
punctuation.separator.key-value #f7f7f7 —
keyword.operator.expression.import #f2534b —
support.constant.math #ff7038 —
support.constant.property.math #6376e2 —
variable.other.constant #ff7038 —
storage.type.annotation.java, storage.type.object.array.java #ff7038 —
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 #f7f7f7 —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #ff7038 —
keyword.operator.instanceof.java #d30d4e —
meta.definition.variable.name.java #bababa —
keyword.operator.logical #ea6363 —
keyword.operator.bitwise #ea6363 —
keyword.operator.channel #ea6363 —
support.constant.property-value.scss,support.constant.property-value.css #6376e2 —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #ea6363 —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #6376e2 —
punctuation.separator.list.comma.css #f7f7f7 —
support.constant.color.w3c-standard-color-name.css #6376e2 —
support.type.vendored.property-name.css #ea6363 —
support.module.node,support.type.object.module,support.module.node #ff7038 —
entity.name.type.module #ff7038 —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #bababa —
support.constant.json #6376e2 —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #d30d4e —
support.type.object.console #bababa —
support.variable.property.process #6376e2 —
entity.name.function,support.function.console #f2534b —
keyword.operator.misc.rust #f7f7f7 —
keyword.operator.sigil.rust #d30d4e —
keyword.operator.delete #d30d4e —
support.type.object.dom #ea6363 —
support.variable.dom,support.variable.property.dom #bababa —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #ea6363 —
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 #d30d4e —
punctuation.separator.delimiter #f7f7f7 —
punctuation.separator.c,punctuation.separator.cpp #d30d4e —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #ea6363 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #d30d4e —
variable.parameter.function.language.python #6376e2 —
support.type.python #ea6363 —
keyword.operator.logical.python #d30d4e —
variable.parameter.function.python #6376e2 —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #f7f7f7 —
meta.function-call.generic.python #f2534b —
constant.character.format.placeholder.other.python #6376e2 —
keyword.operator.assignment.compound #d30d4e —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #ea6363 —
entity.name.namespace #ff7038 —
variable.language #ff7038 —
token.variable.parameter.java #f7f7f7 —
import.storage.java #ff7038 —
token.package.keyword #d30d4e —
entity.name.function, meta.require, support.function.any-method, variable.function #f2534b —
entity.name.type.namespace #ff7038 —
support.class, entity.name.type.class #ff7038 —
entity.name.class.identifier.namespace.type #ff7038 —
entity.name.class, variable.other.class.js, variable.other.class.ts #ff7038 —
variable.other.class.php #bababa —
control.elements, keyword.operator.less #6376e2 —
keyword.other.special-method #f2534b —
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 #d30d4e —
token.storage.type.java #ff7038 —
support.type.property-name #f7f7f7 —
support.constant.property-value #f7f7f7 —
support.constant.font-name #6376e2 —
entity.other.inherited-class #ff7038 —
constant.other.symbol #ea6363 —
punctuation.definition.constant #6376e2 —
entity.other.attribute-name #6376e2 —
entity.other.attribute-name.id #f2534b normal
entity.other.attribute-name.class.css #6376e2 normal
markup.heading punctuation.definition.heading, entity.name.section #f2534b —
keyword.other.unit #bababa —
markup.bold,todo.bold #6376e2 —
punctuation.definition.bold #ff7038 —
markup.italic, punctuation.definition.italic,todo.emphasis #d30d4e —
entity.name.section.markdown #bababa —
punctuation.definition.heading.markdown #bababa —
punctuation.definition.list.begin.markdown #bababa —
markup.heading.setext #f7f7f7 —
punctuation.definition.bold.markdown #6376e2 —
markup.inline.raw.markdown #756b92 —
markup.inline.raw.string.markdown #756b92 —
punctuation.definition.list.markdown #bababa —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #bababa —
beginning.punctuation.definition.list.markdown #bababa —
punctuation.definition.metadata.markdown #bababa —
markup.underline.link.markdown,markup.underline.link.image.markdown #d30d4e —
string.other.link.title.markdown,string.other.link.description.markdown #f2534b —
constant.character.escape #ea6363 —
punctuation.section.embedded, variable.interpolation #bababa —
punctuation.section.embedded.begin,punctuation.section.embedded.end #d30d4e —
invalid.illegal.bad-ampersand.html #f7f7f7 —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #bababa —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #bababa —
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 #756b92 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #ea6363 —
support.type.property-name.json #bababa —
support.type.property-name.json punctuation #bababa —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #d30d4e —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #d30d4e —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #ff7038 —
keyword.operator.error-control.php #d30d4e —
keyword.operator.type.php #d30d4e —
punctuation.section.array.begin.php #f7f7f7 —
punctuation.section.array.end.php #f7f7f7 —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #ff7038 —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #f2534b —
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 #f7f7f7 —
support.constant.core.rust #6376e2 —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #6376e2 —
entity.name.goto-label.php,support.other.php #f2534b —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #ea6363 —
keyword.operator.regexp.php #d30d4e —
keyword.operator.comparison.php #ea6363 —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #d30d4e —
meta.function.decorator.python #f2534b —
support.token.decorator.python,meta.function.decorator.identifier.python #ea6363 —
function.parameter #f7f7f7 —
function.parameter.ruby, function.parameter.cs #f7f7f7 —
constant.language.symbol.ruby #ea6363 —
inline-color-decoration rgb-value #6376e2 —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #ff7038 —
block.scope.end,block.scope.begin #f7f7f7 —
entity.name.variable.local.cs #bababa —
token.error-token #f44747 —
token.debug-token #d30d4e —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #d30d4e —
meta.template.expression #f7f7f7 —
keyword.operator.module #d30d4e —
support.type.type.flowtype #f2534b —
support.type.primitive #ff7038 —
meta.property.object #bababa —
variable.parameter.function.js #bababa —
keyword.other.template.begin #756b92 —
keyword.other.template.end #756b92 —
keyword.other.substitution.begin #756b92 —
keyword.other.substitution.end #756b92 —
keyword.operator.assignment #ea6363 —
keyword.operator.assignment.go #ff7038 —
keyword.operator.arithmetic.go, keyword.operator.address.go #d30d4e —
entity.name.package.go #ff7038 —
support.type.prelude.elm #ea6363 —
support.constant.elm #6376e2 —
punctuation.quasi.element #d30d4e —
constant.character.entity #bababa —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #ea6363 —
entity.global.clojure #ff7038 —
meta.symbol.clojure #bababa —
constant.keyword.clojure #ea6363 —
meta.arguments.coffee, variable.parameter.function.coffee #bababa —
meta.scope.prerequisites.makefile #bababa —
storage.modifier.import.groovy #ff7038 —
meta.method.groovy #f2534b —
meta.definition.variable.name.groovy #bababa —
meta.definition.class.inherited.classes.groovy #756b92 —
support.variable.semantic.hlsl #ff7038 —
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 #d30d4e —
text.variable, text.bracketed #bababa —
support.type.swift, support.type.vb.asp #ff7038 —
entity.name.function.xi #ff7038 —
entity.name.class.xi #ea6363 —
constant.character.character-class.regexp.xi #bababa —
constant.regexp.xi #d30d4e —
keyword.control.xi #ea6363 —
beginning.punctuation.definition.quote.markdown.xi #756b92 —
beginning.punctuation.definition.list.markdown.xi #666666 —
constant.character.xi #f2534b —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #666666 —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #ff7038 —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #bababa —
meta.brace.square #f7f7f7 —
comment, punctuation.definition.comment #666666 italic
markup.quote.markdown #666666 —
punctuation.definition.block.sequence.item.yaml #f7f7f7 —
constant.language.symbol.elixir #ea6363 —
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
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 } !` ;
}
DangerDark | Coding Theme