Skip to main content
Home Theme VS Code Midnight Nebula Dusk Inferno A theme that combines the syntax highlighting of "Nebula Inferno" and the editor colors of "Midnight Dusk"
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 #16151c activityBar.foreground #dd3c74 activityBar.inactiveForeground #ffffff66 activityBarBadge.background #dd3c74 activityBarBadge.foreground #ffffff badge.background #4d4d4d 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.
Midnight Nebula Dusk Inferno — Midnight Nebula Dusk Inferno
badge.foreground
#ffffff
breadcrumb.activeSelectionForeground #e0e0e0
breadcrumb.background #201f26
breadcrumb.focusForeground #e0e0e0
breadcrumb.foreground #cccccccc
button.background #dd3c74
button.foreground #ffffff
button.hoverBackground #ad2856
button.secondaryBackground #403e4c
button.secondaryForeground #ffffff
button.secondaryHoverBackground #2c2a34
checkbox.background #26252d
checkbox.border #00000000
checkbox.foreground #cccccc
debugExceptionWidget.background #333333
debugExceptionWidget.border #474747
debugToolBar.background #333333
debugToolBar.border #474747
diffEditor.border #444444
diffEditor.insertedTextBackground #9bb95533
diffEditor.removedTextBackground #ff000033
dropdown.background #26252d
dropdown.border #00000000
dropdown.foreground #cccccc
editor.background #1b1a21
editor.findMatchBackground #515c6a
editor.findMatchBorder #74879f
editor.findMatchHighlightBackground #35543a
editor.findMatchHighlightBorder #ffffff00
editor.findRangeHighlightBackground #3a3d4166
editor.findRangeHighlightBorder #ffffff00
editor.foldBackground #264f784d
editor.foreground #bab9be
editor.hoverHighlightBackground #264f7840
editor.inactiveSelectionBackground #34222e
editor.lineHighlightBackground #ffffff0A
editor.lineHighlightBorder #00000000
editor.rangeHighlightBackground #ffffff0b
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #432b3b
editor.selectionHighlightBackground #add6ff26
editor.selectionHighlightBorder #495F77
editor.wordHighlightBackground #575757b8
editor.wordHighlightStrongBackground #004972b8
editorBracketMatch.background #0064001a
editorBracketMatch.border #888888
editorCodeLens.foreground #999999
editorCursor.background #000000
editorCursor.foreground #f7f9fb
editorError.background #B73A3400
editorError.border #ffffff00
editorError.foreground #f48771
editorGroup.border #444444
editorGroup.emptyBackground #1b1a21
editorGroupHeader.tabsBackground #201f26
editorGroupHeader.tabsBorder #00000000
editorGutter.addedBackground #587c0c
editorGutter.background #1b1a21
editorGutter.commentRangeForeground #c5c5c5
editorGutter.deletedBackground #94151b
editorGutter.foldingControlForeground #c5c5c5
editorGutter.modifiedBackground #0c7d9d
editorHoverWidget.background #0f0e13
editorHoverWidget.border #45454500
editorHoverWidget.foreground #cccccc
editorIndentGuide.activeBackground #3e3c43
editorIndentGuide.background #3e3c43
editorInfo.background #4490bf00
editorInfo.border #4490BF00
editorInfo.foreground #75beff
editorLineNumber.activeForeground #f9a3c1
editorLineNumber.foreground #c5c3d1
editorLink.activeForeground #4e94ce
editorMarkerNavigation.background #2d2d30
editorMarkerNavigationError.background #f48771
editorMarkerNavigationInfo.background #75beff
editorMarkerNavigationWarning.background #cca700
editorOverviewRuler.background #25252500
editorOverviewRuler.border #7f7f7f4d
editorRuler.foreground #5a5a5a00
editorSuggestWidget.background #0f0e13
editorSuggestWidget.border #45454500
editorSuggestWidget.foreground #d4d4d4
editorSuggestWidget.highlightForeground #dd3c74
editorSuggestWidget.selectedBackground #34222e
editorWarning.background #A9904000
editorWarning.border #ffffff00
editorWarning.foreground #cca700
editorWhitespace.foreground #e3e4e229
editorWidget.background #0f0e13
editorWidget.foreground #cccccc
editorWidget.resizeBorder #5F5F5F
focusBorder #dd3c74
foreground #cccccc
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 #cccccc
input.background #26252d
input.border #00000000
input.foreground #cccccc
input.placeholderForeground #a6a6a6
inputOption.activeBackground #007fd466
inputOption.activeBorder #007acc00
inputOption.activeForeground #ffffff
list.activeSelectionBackground #422434
list.activeSelectionForeground #ffffff
list.dropBackground #383b3d
list.focusBackground #062f4a
list.focusForeground #cccccc
list.highlightForeground #0097fb
list.hoverBackground #34222e
list.hoverForeground #cccccc
list.inactiveSelectionBackground #34222e
list.inactiveSelectionForeground #cccccc
listFilterWidget.background #653723
listFilterWidget.noMatchesOutline #be1100
listFilterWidget.outline #00000000
menu.background #0f0e13
menu.border #00000000
menu.foreground #cccccc
menu.selectionBackground #dd3c74
menu.selectionBorder #00000000
menu.selectionForeground #ffffff
menu.separatorBackground #26252d
menubar.selectionBackground #ffffff1a
menubar.selectionForeground #cccccc
merge.commonContentBackground #282828
merge.commonHeaderBackground #383838
merge.currentContentBackground #27403B
merge.currentHeaderBackground #367366
merge.incomingContentBackground #28384B
merge.incomingHeaderBackground #395F8F
minimap.background #1b1a21
minimap.errorHighlight #f48771
minimap.findMatchHighlight #515c6a
minimap.selectionHighlight #432b3b
minimap.warningHighlight #cca700
minimapGutter.addedBackground #587c0c
minimapGutter.deletedBackground #94151b
minimapGutter.modifiedBackground #0c7d9d
notificationCenter.border #0f0e13
notificationCenterHeader.background #0f0e13
notificationCenterHeader.foreground #cccccc
notifications.background #0f0e13
notifications.border #00000000
notifications.foreground #cccccc
notificationsErrorIcon.foreground #f48771
notificationsInfoIcon.foreground #75beff
notificationsWarningIcon.foreground #cca700
notificationToast.border #47474734
panel.background #201f26
panel.border #80808000
panelSection.border #80808000
panelTitle.activeBorder #dd3c74
panelTitle.activeForeground #e7e7e7
panelTitle.inactiveForeground #e7e7e799
peekView.border #007acc
peekViewEditor.background #001f33
peekViewEditor.matchHighlightBackground #ff8f0099
peekViewEditor.matchHighlightBorder #ee931e
peekViewEditorGutter.background #001f33
peekViewResult.background #252526
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 #26252d
pickerGroup.foreground #0097fb
progressBar.background #dd3c74
scrollbar.shadow #000000
scrollbarSlider.activeBackground #bfbfbf66
scrollbarSlider.background #79797966
scrollbarSlider.hoverBackground #646464b3
selection.background #256aa7
settings.focusedRowBackground #ffffff07
settings.headerForeground #cccccc
sideBar.background #201f26
sideBar.border #00000000
sideBar.dropBackground #383b3d
sideBar.foreground #cccccc
sideBarSectionHeader.background #00000000
sideBarSectionHeader.border #cccccc00
sideBarSectionHeader.foreground #ffffff
sideBarTitle.foreground #bbbbbb
statusBar.background #16151c
statusBar.border #ff000000
statusBar.debuggingBackground #16151c
statusBar.debuggingForeground #ffffff
statusBar.foreground #ffffff80
statusBar.noFolderBackground #16151c
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #34222e
statusBarItem.remoteBackground #16825d
statusBarItem.remoteForeground #ffffff
tab.activeBackground #34222e
tab.activeBorder #dd3c7400
tab.activeBorderTop #dd3c74
tab.activeForeground #ffffff
tab.border #25252600
tab.inactiveBackground #201f26
tab.inactiveForeground #ffffff80
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.border #80808000
terminal.foreground #cccccc
terminal.selectionBackground #dd3c743e
terminalCursor.background #0087FF
terminalCursor.foreground #ffffff
textLink.foreground #3794ff
titleBar.activeBackground #16151c
titleBar.activeForeground #cccccc
titleBar.border #00000000
titleBar.inactiveBackground #16151cd3
titleBar.inactiveForeground #cccccc99
tree.indentGuidesStroke #585858
walkThrough.embeddedEditorBackground #00000050
widget.shadow #000000 constant.language #569CD6 —
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent #B5CEA8 —
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.scss #D7BA7D —
markup.underline — underline
markup.heading #569CD6 bold
markup.strikethrough — strikethrough
punctuation.definition.quote.begin.markdown #6A9955 —
punctuation.definition.list.begin.markdown #6796E6 —
markup.inline.raw #CE9178 —
punctuation.definition.tag #808080 —
meta.preprocessor, entity.name.function.preprocessor #569CD6 —
meta.preprocessor.string #CE9178 —
meta.preprocessor.numeric #B5CEA8 —
meta.structure.dictionary.key.python #9CDCFE —
storage.modifier, keyword.operator.noexcept #569CD6 —
string, meta.embedded.assembly #CE9178 —
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.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike #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, source.powershell variable.other.member, entity.name.operator.custom-literal #DCDCAA —
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, 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 —
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator #C586C0 —
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder #9CDCFE —
variable.other.constant, variable.other.enummember #4FC1FF —
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 —
entity.name.label #C8C8C8 —
entity.other.inherited-class, storage.type.java, storage.type.primitive.java, storage.type.object.array.java, storage.type.generic.java, entity.name.type, variable.language, support.class, support.type, storage.type, type #81BCFF
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, keyword.control.anchor.regexp, storage.type, storage.modifier.package.java, storage.type.struct, storage.type.function, storage.type.class, keyword.operator.logical.and.media.css, keyword.operator.logical.not.media.css, keyword.operator.logical.only.media.css, keyword.cs, keyword.function.go, keyword.import.go, keyword.const.go, keyword.var.go, keyword.interface.go, keyword.struct.go, keyword.other.using.directive.cpp, keyword.other, keyword.control, keyword #838DFF
variable.other.enummember, variable.other.constant, entity.name.variable.local, support.type.property-name.json, entity.name.namespace, constant.other.key.java, meta.use.rust, constant.other.caps.rust, variable.css, keyword.operator.combinator.css, variable #58CAFF
string, support.constant.property-value, support.constant.font-name, support.constant.vendored.property-value.css #38E3D8
constant.character.escape #4ECFA9
meta.interpolation.rust, constant.other.placeholder.c #66DCA7
meta.brace, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python, punctuation.definition.parameters.begin.python, punctuation.definition.parameters.end.python, punctuation.parenthesis.open.cs, punctuation.parenthesis.close.cs, punctuation.definition.typeparameters.begin.cs, punctuation.definition.typeparameters.end.cs, punctuation.squarebracket.open.cs, punctuation.squarebracket.close.cs, punctuation.definition.begin.bracket.round.go, punctuation.definition.end.bracket.round.go, punctuation.section.parameters.begin.bracket.round, punctuation.section.parameters.end.bracket.round, punctuation.definition.begin.bracket.square, punctuation.definition.end.bracket.square, punctuation.definition.logical-expression.shell, punctuation.brackets.round.rust, punctuation.definition.parameters.ruby, punctuation.section.function.ruby #C387F4
punctuation.definition.block, punctuation.definition.binding-pattern.array, punctuation.curlybrace.open.cs, punctuation.curlybrace.close.cs, punctuation.section.block.begin.bracket.curly, punctuation.section.block.end.bracket.curly, punctuation.definition.begin.bracket.curly.go, punctuation.definition.end.bracket.curly.go, punctuation.brackets.curly.rust, 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 #B59DC2
string.regexp, keyword.operator.or.regexp #7982FF
keyword.operator.quantifier.regexp, constant.character.escape.backslash.regexp #cd81ff
constant.other.character-class.regexp, constant.other.character-class.range.regexp, constant.other.character-class.set.regexp #A297FF
punctuation.definition.group.regexp, punctuation.definition.character-class.regexp #A781FF
storage.modifier, keyword.other.import.java, keyword.other.package.java #7883FF
punctuation.decorator, punctuation.definition.annotation.java, punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc, keyword.other.documentation.javadoc.java #8F8FFF
keyword.operator.namespace.rust, punctuation.semi.rust, punctuation.comma.rust #ACACAC
keyword.operator.arrow.fat.rust, keyword.operator.arrow.skinny.rust, punctuation.separator.pointer-access.cpp, punctuation.separator.annotation.result.python #7171C2
entity.name.tag.html, entity.name.tag.block.any.html, entity.name.tag.template.html, entity.name.tag.style.html, entity.name.tag.script.html, entity.name.tag.svelte, entity.name.tag.css, entity.name.tag.localname.xml #767CEA
entity.other.attribute-name.html, entity.other.attribute-name.svelte, entity.other.attribute-name.class.css, entity.other.attribute-name.localname.xml #6F95F7
text.html.derivative, text.svelte, meta.template.svelte, text.html.vue-html, meta.paragraph.markdown, text.xml #DCDBE5
punctuation.separator.key-value.html, punctuation.separator.key-value.svelte, meta.tag.xml #AAAAAA
string.quoted.double.html, string.quoted.single.html, string.quoted.svelte, entity.other.attribute-name, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css, string.quoted.double.xml, string.quoted.single.xml #B694F1
support.type.property-name.css, support.type.property-name.media.css, support.type.vendored.property-name, meta.property-name.css #7CC4EB
keyword.other.unit #F499CA
keyword.control.at-rule #ff7a9b
entity.other.attribute-name.id.css #5DB5E4
entity.other.keyframe-offset.css, entity.other.keyframe-offset.percentage.css, constant.other.color.rgb-value, support.constant.color.w3c-standard-color-name.css, support.constant.media.css #FFA496
string.other.link.title.markdown, string.other.link.description.markdown #97D2FF
punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown, constant.language #9294FF
meta.link.inline.markdown, markup.underline.link.image.markdown #ABEBED
markup.heading #DC9FF2 bold
punctuation.definition.list.begin.markdown #88EFD5
markup.deleted.diff #FF6C8E
markup.inserted.diff #97F1C7
markup.fenced_code.block.markdown #F1C79D italic
fenced_code.block.language.markdown #F9E28F
markup.inline.raw.string.markdown #C3C0FF
markup.bold.markdown #B8B7E5 bold
markup.italic.markdown #D0ACFF italic
markup.strikethrough.markdown #97A1F7 strikethrough
meta.separator.markdown #A06BF5 bold
storage.type.annotation.java, keyword.operator.expression, support.function, entity.name.function, entity.name.function.preprocessor, function #70A2FF
storage.modifier.import.java, constant.language.import-export-all, variable.language.wildcard.java, entity.name.tag.wildcard #7F98F1
token.error-token #F44747 —
token.debug-token #B267E6 —
meta.assertion.look-behind.regexp, meta.assertion.look-ahead.regexp, meta.assertion.negative-look-behind.regexp, meta.assertion.negative-look-ahead.regexp, entity.other.inherited-class, storage.type.java, storage.type.primitive.java, storage.type.object.array.java, storage.type.generic.java, entity.name.type, variable.language, support.class, support.type, storage.type, type #81BCFF
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, keyword.control.anchor.regexp, storage.type, storage.modifier.package.java, storage.type.struct, storage.type.function, storage.type.class, keyword.operator.logical.and.media.css, keyword.operator.logical.not.media.css, keyword.operator.logical.only.media.css, keyword.cs, keyword.function.go, keyword.import.go, keyword.const.go, keyword.var.go, keyword.interface.go, keyword.struct.go, keyword.other.using.directive.cpp, keyword.other, keyword.control, keyword #838DFF
entity.other.attribute-name.tsx, entity.other.attribute-name.jsx, entity.name.variable.local, support.type.property-name.json, entity.name.namespace, constant.other.key.java, meta.use.rust, constant.other.caps.rust, variable.css, keyword.operator.combinator.css, variable #58CAFF
string, support.constant.property-value, support.constant.font-name, support.constant.vendored.property-value.css #38E3D8
constant.character.escape #4ECFA9
meta.interpolation.rust, constant.other.placeholder.c #66DCA7
meta.brace, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python, punctuation.definition.parameters.begin.python, punctuation.definition.parameters.end.python, punctuation.parenthesis.open.cs, punctuation.parenthesis.close.cs, punctuation.definition.typeparameters.begin.cs, punctuation.definition.typeparameters.end.cs, punctuation.squarebracket.open.cs, punctuation.squarebracket.close.cs, punctuation.definition.begin.bracket.round.go, punctuation.definition.end.bracket.round.go, punctuation.section.parameters.begin.bracket.round, punctuation.section.parameters.end.bracket.round, punctuation.definition.begin.bracket.square, punctuation.definition.end.bracket.square, punctuation.definition.logical-expression.shell, punctuation.brackets.round.rust, punctuation.definition.parameters.ruby, punctuation.section.function.ruby #C387F4
punctuation.definition.block, punctuation.definition.binding-pattern.array, punctuation.curlybrace.open.cs, punctuation.curlybrace.close.cs, punctuation.section.block.begin.bracket.curly, punctuation.section.block.end.bracket.curly, punctuation.definition.begin.bracket.curly.go, punctuation.definition.end.bracket.curly.go, punctuation.brackets.curly.rust, 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 #B59DC2
string.regexp, keyword.operator.or.regexp #7982FF
keyword.operator.quantifier.regexp, constant.character.escape.backslash.regexp #CD81FF
constant.other.character-class.regexp, constant.other.character-class.range.regexp, constant.other.character-class.set.regexp #A297FF
punctuation.definition.group.regexp, punctuation.definition.character-class.regexp #A781FF
storage.modifier, keyword.other.import.java, keyword.other.package.java #7883FF
punctuation.decorator, punctuation.definition.annotation.java, punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc, keyword.other.documentation.javadoc.java #8F8FFF
keyword.operator.namespace.rust, punctuation.semi.rust, punctuation.comma.rust #ACACAC
keyword.operator.arrow.fat.rust, keyword.operator.arrow.skinny.rust, punctuation.separator.pointer-access.cpp, punctuation.separator.annotation.result.python #7171C2
entity.name.tag.directive.ts, entity.name.tag.html, entity.name.tag.block.any.html, entity.name.tag.template.html, entity.name.tag.style.html, entity.name.tag.script.html, entity.name.tag.svelte, entity.name.tag.css, entity.name.tag.localname.xml #767CEA
entity.other.attribute-name.directive.ts, entity.name.tag.yaml, entity.other.attribute-name.html, entity.other.attribute-name.svelte, entity.other.attribute-name.class.css, entity.other.attribute-name.localname.xml #6F95F7
text.html.derivative, text.svelte, meta.template.svelte, text.html.vue-html, meta.paragraph.markdown, text.xml #DCDBE5
punctuation.separator.key-value.html, punctuation.separator.key-value.svelte, meta.tag.xml #AAAAAA
string.unquoted.plain.out.yaml, string.quoted.double.yaml, string.quoted.double.html, string.quoted.single.html, string.quoted.svelte, entity.other.attribute-name, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css, string.quoted.double.xml, string.quoted.single.xml #B694F1
support.type.property-name.css, support.type.property-name.media.css, support.type.vendored.property-name, meta.property-name.css #7CC4EB
keyword.other.unit #F499CA
keyword.control.at-rule #FF7A9B
entity.other.attribute-name.id.css #5DB5E4
entity.other.keyframe-offset.css, entity.other.keyframe-offset.percentage.css, constant.other.color.rgb-value, support.constant.color.w3c-standard-color-name.css, support.constant.media.css #FFA496
string.other.link.title.markdown, string.other.link.description.markdown #97D2FF
punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown, constant.language #9294FF
meta.link.inline.markdown, markup.underline.link.image.markdown #ABEBED
markup.heading #DC9FF2 bold
punctuation.definition.list.begin.markdown #88EFD5
markup.deleted.diff #FF6C8E
markup.inserted.diff #97F1C7
markup.fenced_code.block.markdown #F1C79D italic
fenced_code.block.language.markdown #F9E28F
markup.inline.raw.string.markdown #C3C0FF
markup.bold.markdown #B8B7E5 bold
markup.italic.markdown #D0ACFF italic
markup.strikethrough.markdown #97A1F7 strikethrough
meta.separator.markdown #A06BF5 bold
entity.name.tag.tsx, entity.name.tag.jsx, storage.type.annotation.java, keyword.operator.expression, support.function, entity.name.function, entity.name.function.preprocessor, function #70A2FF
storage.modifier.import.java, constant.language.import-export-all, variable.language.wildcard.java, entity.name.tag.wildcard #7F98F1
punctuation.definition.comment #77777F —
meta.embedded.assembly #FFA87A —
keyword - keyword.operator #F87070 —
entity.name.class #FF81AF —
entity.name.function #FF92EF —
entity.name.variable #FF84C1 —
meta.assertion.look-behind.regexp, meta.assertion.look-ahead.regexp, meta.assertion.negative-look-behind.regexp, meta.assertion.negative-look-ahead.regexp, entity.other.inherited-class, storage.type.java, storage.type.primitive.java, storage.type.object.array.java, storage.type.generic.java, entity.name.type, variable.language, support.class, support.type, storage.type, type #FF81AF
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, keyword.control.anchor.regexp, storage.type, storage.modifier.package.java, storage.type.struct, storage.type.function, storage.type.class, keyword.operator.logical.and.media.css, keyword.operator.logical.not.media.css, keyword.operator.logical.only.media.css, keyword.cs, keyword.function.go, keyword.import.go, keyword.const.go, keyword.var.go, keyword.interface.go, keyword.struct.go, keyword.other.using.directive.cpp, keyword.other, keyword.control, keyword #FC8181
variable.other.enummember, variable.other.constant, entity.other.attribute-name.tsx, entity.other.attribute-name.jsx, entity.name.variable.local, support.type.property-name.json, entity.name.namespace, constant.other.key.java, meta.use.rust, constant.other.caps.rust, variable.css, keyword.operator.combinator.css, variable #FF84C1
string, support.constant.property-value, support.constant.font-name, support.constant.vendored.property-value.css #FFA87A
constant.character.escape #F3B46B
meta.interpolation.rust, constant.other.placeholder.c #F0D37D
meta.brace, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python, punctuation.definition.parameters.begin.python, punctuation.definition.parameters.end.python, punctuation.parenthesis.open.cs, punctuation.parenthesis.close.cs, punctuation.definition.typeparameters.begin.cs, punctuation.definition.typeparameters.end.cs, punctuation.squarebracket.open.cs, punctuation.squarebracket.close.cs, punctuation.definition.begin.bracket.round.go, punctuation.definition.end.bracket.round.go, punctuation.section.parameters.begin.bracket.round, punctuation.section.parameters.end.bracket.round, punctuation.definition.begin.bracket.square, punctuation.definition.end.bracket.square, punctuation.definition.logical-expression.shell, punctuation.brackets.round.rust, punctuation.definition.parameters.ruby, punctuation.section.function.ruby #CA87F4
punctuation.definition.block, punctuation.definition.binding-pattern.array, punctuation.curlybrace.open.cs, punctuation.curlybrace.close.cs, punctuation.section.block.begin.bracket.curly, punctuation.section.block.end.bracket.curly, punctuation.definition.begin.bracket.curly.go, punctuation.definition.end.bracket.curly.go, punctuation.brackets.curly.rust, 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 #C09DC2
string.regexp, keyword.operator.or.regexp #A879FF
keyword.operator.quantifier.regexp, constant.character.escape.backslash.regexp #F581FF
constant.other.character-class.regexp, constant.other.character-class.range.regexp, constant.other.character-class.set.regexp #D297FF
punctuation.definition.group.regexp, punctuation.definition.character-class.regexp #CB81FF
storage.modifier, keyword.other.import.java, keyword.other.package.java #FF7ECE
punctuation.decorator, punctuation.definition.annotation.java, punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc, keyword.other.documentation.javadoc.java #D28FFF
keyword.operator.namespace.rust, punctuation.semi.rust, punctuation.comma.rust #ACACAC
keyword.operator.arrow.fat.rust, keyword.operator.arrow.skinny.rust, punctuation.separator.pointer-access.cpp, punctuation.separator.annotation.result.python #9C71C2
entity.name.tag.directive.ts, entity.name.tag.html, entity.name.tag.block.any.html, entity.name.tag.template.html, entity.name.tag.style.html, entity.name.tag.script.html, entity.name.tag.svelte, entity.name.tag.css, entity.name.tag.localname.xml #D776EA
entity.other.attribute-name.directive.ts, entity.name.tag.yaml, entity.other.attribute-name.html, entity.other.attribute-name.svelte, entity.other.attribute-name.class.css, entity.other.attribute-name.localname.xml #C56FF7
text.html.markdown, text.html.derivative, text.svelte, meta.template.svelte, text.html.vue-html, meta.paragraph.markdown, text.xml #C9C9D2
punctuation.separator.key-value.html, punctuation.separator.key-value.svelte, meta.tag.xml #AAAAAA
string.unquoted.plain.out.yaml, string.quoted.double.yaml, string.quoted.double.html, string.quoted.single.html, string.quoted.svelte, entity.other.attribute-name, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css, string.quoted.double.xml, string.quoted.single.xml #B694F1
support.type.property-name.css, support.type.property-name.media.css, support.type.vendored.property-name, meta.property-name.css #EB7CDE
keyword.other.unit, punctuation.definition.quote.begin.markdown #F89172
keyword.control.at-rule #FD6288
entity.other.attribute-name.id.css #C18FFF
entity.other.keyframe-offset.css, entity.other.keyframe-offset.percentage.css, constant.other.color.rgb-value, support.constant.color.w3c-standard-color-name.css, support.constant.media.css #FF96B0
string.other.link.title.markdown, string.other.link.description.markdown #C297FF
punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown #9294FF
meta.link.inline.markdown, markup.underline.link.image.markdown #EDABEB
markup.heading #F29FAE bold
punctuation.definition.list.begin.markdown #EFB888
markup.deleted.diff #FF6C8E
markup.inserted.diff #97F1C7
markup.fenced_code.block.markdown #FC9D9D italic
fenced_code.block.language.markdown #F9B28F
markup.inline.raw.string.markdown #FFC0C0
markup.bold.markdown #F6B3CF bold
markup.italic.markdown #F9ACFF italic
markup.strikethrough.markdown #D997F7 strikethrough
meta.separator.markdown #F56B9B bold
entity.name.tag.tsx, entity.name.tag.jsx, storage.type.annotation.java, keyword.operator.expression, support.function, entity.name.function, entity.name.function.preprocessor, function #FF92EF
storage.modifier.import.java, constant.language.import-export-all, variable.language.wildcard.java, entity.name.tag.wildcard #7F98F1
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 } !` ;
}
Midnight Nebula Dusk Inferno | Coding Theme