Skip to main content
Home Theme VS Code Lunar VSCode Theme A minimalist VS Code theme that makes your code shine like the moon
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 #ffffff00 activityBar.background #100230 activityBar.border #000000 activityBar.foreground #ab93e0 activityBar.inactiveForeground #3f2871 activityBarBadge.background #5800e4 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 #af92ff — variable.other.generic-type.haskell #b2c2ff — storage.type.haskell #b2c2ff — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Lunar VSCode Theme — Lunar Dark Theme
activityBarBadge.foreground
#ffffff
badge.background #4d4d4d
badge.foreground #ffffff
breadcrumb.activeSelectionForeground #ad92d9
breadcrumb.background #00000000
breadcrumb.focusForeground #ad92d9
breadcrumb.foreground #ffffffcc
button.background #572f96
button.foreground #ffffff
button.hoverBackground #623ba3
button.secondaryBackground #3a3d41
button.secondaryForeground #ffffff
button.secondaryHoverBackground #45494e
checkbox.background #210056
checkbox.border #00000000
checkbox.foreground #cccccc
debugExceptionWidget.background #333333
debugExceptionWidget.border #474747
debugToolBar.background #333333
debugToolBar.border #474747
diffEditor.border #444444
diffEditor.insertedTextBackground #61b95544
diffEditor.removedTextBackground #ff000033
dropdown.background #210056
dropdown.border #00000000
dropdown.foreground #cccccc
editor.background #0a0019
editor.findMatchBackground #8753dd5a
editor.findMatchBorder #aa84ff
editor.findMatchHighlightBackground #8753dd78
editor.findMatchHighlightBorder #ffffff00
editor.findRangeHighlightBackground #59379126
editor.findRangeHighlightBorder #ffffff00
editor.foldBackground #264f784d
editor.foreground #ffffff
editor.hoverHighlightBackground #264f7840
editor.inactiveSelectionBackground #8753dd14
editor.lineHighlightBackground #ffffff0A
editor.lineHighlightBorder #282828
editor.rangeHighlightBackground #ffffff0b
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #8753dd4c
editor.selectionHighlightBackground #8753dd22
editor.selectionHighlightBorder #8753dd
editor.wordHighlightBackground #575757b8
editor.wordHighlightStrongBackground #5937919f
editorBracketMatch.background #0064001a
editorBracketMatch.border #888888
editorCodeLens.foreground #808080
editorCursor.background #000000
editorCursor.foreground #e8e8e8
editorError.background #B73A3400
editorError.border #ffffff00
editorError.foreground #f48771
editorGroup.border #000000
editorGroup.emptyBackground #0a0019
editorGroupHeader.border #000000
editorGroupHeader.tabsBackground #080019
editorGroupHeader.tabsBorder #6031c9
editorGutter.addedBackground #45e07b
editorGutter.background #060011
editorGutter.commentRangeForeground #9f9f9f
editorGutter.deletedBackground #ff000c
editorGutter.foldingControlForeground #9f9f9f
editorGutter.modifiedBackground #ff7c3b
editorHoverWidget.background #252526
editorHoverWidget.border #454545
editorHoverWidget.foreground #cccccc
editorIndentGuide.activeBackground #707070
editorIndentGuide.background #404040
editorInfo.background #1f1054
editorInfo.border #4490BF00
editorInfo.foreground #9580e2
editorLineNumber.activeForeground #8753dd
editorLineNumber.foreground #8c8c8c
editorLink.activeForeground #8468b2
editorMarkerNavigation.background #0d0421
editorMarkerNavigationError.background #d57460
editorMarkerNavigationInfo.background #6190ba
editorMarkerNavigationWarning.background #baa545
editorOverviewRuler.background #25252500
editorOverviewRuler.border #7f7f7f4d
editorRuler.foreground #5a5a5a
editorSuggestWidget.background #11002c
editorSuggestWidget.border #634c96
editorSuggestWidget.foreground #d4d4d4
editorSuggestWidget.highlightForeground #794bc4
editorSuggestWidget.selectedBackground #59379140
editorWarning.background #A9904000
editorWarning.border #ffffff00
editorWarning.foreground #cca700
editorWhitespace.foreground #e3e4e229
editorWidget.background #0e0024
editorWidget.foreground #cbcbcb
editorWidget.resizeBorder #5F5F5F
focusBorder #7e57bc
foreground #ffffff
gitDecoration.addedResourceForeground #02ff30
gitDecoration.conflictingResourceForeground #b3b3ff
gitDecoration.deletedResourceForeground #ff2600
gitDecoration.ignoredResourceForeground #8c8c8c
gitDecoration.modifiedResourceForeground #ff9900
gitDecoration.stageDeletedResourceForeground #c74e39
gitDecoration.stageModifiedResourceForeground #e2c08d
gitDecoration.submoduleResourceForeground #8db9e2
gitDecoration.untrackedResourceForeground #73c991
icon.foreground #ffffff
input.background #210056
input.border #00000000
input.foreground #cccccc
input.placeholderForeground #a6a6a6
inputOption.activeBackground #794bc44c
inputOption.activeBorder #007acc00
inputOption.activeForeground #ffffff
list.activeSelectionBackground #380f79
list.activeSelectionForeground #ffffff
list.dropBackground #ffffff00
list.focusBackground #794bc426
list.focusForeground #cccccc
list.highlightForeground #794bc4
list.hoverBackground #794bc485
list.hoverForeground #ffffff
list.inactiveSelectionBackground #794bc42e
list.inactiveSelectionForeground #adadad
listFilterWidget.background #794bc4
listFilterWidget.noMatchesOutline #be1100
listFilterWidget.outline #00000000
menu.background #11002c
menu.border #00000085
menu.foreground #cccccc
menu.selectionBackground #8753dd
menu.selectionBorder #00000000
menu.selectionForeground #ffffff
menu.separatorBackground #bbbbbb
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 #0a0019
minimap.errorHighlight #f48771
minimap.findMatchHighlight #8753dd5a
minimap.selectionHighlight #8753dd4c
minimap.warningHighlight #cca700
minimapGutter.addedBackground #45e07b
minimapGutter.deletedBackground #ff000c
minimapGutter.modifiedBackground #ff7c3b
notificationCenter.border #474747
notificationCenterHeader.background #303031
notificationCenterHeader.foreground #cccccc
notifications.background #11002e
notifications.border #303031
notifications.foreground #ececec
notificationsErrorIcon.foreground #ff7b61
notificationsInfoIcon.foreground #5fb1f9
notificationsWarningIcon.foreground #e8be00
notificationToast.border #4a1d94
panel.background #0d0421
panel.border #00000059
panelSection.border #80808059
panelTitle.activeBorder #e7e7e7
panelTitle.activeForeground #e7e7e7
panelTitle.inactiveForeground #e7e7e799
peekView.border #000000
peekViewEditor.background #22133b
peekViewEditor.matchHighlightBackground #a67cec5e
peekViewEditor.matchHighlightBorder #bfa0f2
peekViewEditorGutter.background #12012c
peekViewResult.background #0c041d
peekViewResult.fileForeground #ffffff
peekViewResult.lineForeground #bbbbbb
peekViewResult.matchHighlightBackground #794bc442
peekViewResult.selectionBackground #3399ff33
peekViewResult.selectionForeground #ffffff
peekViewTitle.background #0d0421
peekViewTitleDescription.foreground #ccccccb3
peekViewTitleLabel.foreground #ffffff
pickerGroup.border #44444b
pickerGroup.foreground #b68bff
progressBar.background #7d42de
scrollbar.shadow #737373
scrollbarSlider.activeBackground #bfbfbf66
scrollbarSlider.background #79797966
scrollbarSlider.hoverBackground #646464b3
selection.background #4c00c7
settings.focusedRowBackground #ffffff07
settings.headerForeground #ffffff
sideBar.background #0d0421
sideBar.border #000000
sideBar.dropBackground #ffffff00
sideBar.foreground #fbfbfb
sideBarSectionHeader.background #00000000
sideBarSectionHeader.border #00000033
sideBarSectionHeader.foreground #ffffff
sideBarTitle.foreground #ffffff
statusBar.background #0b0121
statusBar.border #0b0121
statusBar.debuggingBackground #0d047d
statusBar.debuggingForeground #ffffff
statusBar.foreground #ffffff
statusBar.noFolderBackground #0b0121
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #ffffff1f
statusBarItem.remoteBackground #6b42b0
statusBarItem.remoteForeground #ffffff
tab.activeBackground #320e68
tab.activeBorder #00000000
tab.activeBorderTop #00000000
tab.activeForeground #ffffff
tab.border #000000
tab.inactiveBackground #ffffff1e
tab.inactiveForeground #ffffff80
terminal.ansiBlack #474747
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 #80808059
terminal.foreground #cccccc
terminal.selectionBackground #ffffff40
terminalCursor.background #794bc4
terminalCursor.foreground #ffffff
textLink.foreground #a876f9
titleBar.activeBackground #0d0021
titleBar.activeForeground #ffffff
titleBar.border #00000000
titleBar.inactiveBackground #10002a
titleBar.inactiveForeground #ffffffbf
tree.indentGuidesStroke #794bc4
walkThrough.embeddedEditorBackground #00000050
widget.shadow #0000005c #af92ff
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #ffffff —
variable.parameter.function.language.special.self.python #af92ff —
storage.modifier.lifetime.rust #ffffff —
support.function.std.rust #d572cf —
entity.name.lifetime.rust #af92ff —
variable.language.rust #af92ff —
support.constant.edge #b2c2ff —
constant.other.character-class.regexp #af92ff —
keyword.operator.quantifier.regexp #b2c2ff —
punctuation.definition.string.begin,punctuation.definition.string.end #ddd5fb —
variable.parameter.function #ffffff —
comment markup.link #5a4b81 —
markup.changed.diff #af92ff —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #d572cf —
markup.inserted.diff #ddd5fb —
markup.deleted.diff #af92ff —
meta.function.c,meta.function.cpp #af92ff —
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 #d572cf —
support.constant.math #af92ff —
support.constant.property.math #b2c2ff —
variable.other.constant #af92ff —
storage.type.annotation.java, storage.type.object.array.java #af92ff —
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 #af92ff —
keyword.operator.instanceof.java #b2c2ff —
meta.definition.variable.name.java #af92ff —
keyword.operator.logical #23bbcb —
keyword.operator.bitwise #23bbcb —
keyword.operator.channel #23bbcb —
support.constant.property-value.scss,support.constant.property-value.css #b2c2ff —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #23bbcb —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #b2c2ff —
punctuation.separator.list.comma.css #ffffff —
support.constant.color.w3c-standard-color-name.css #b2c2ff —
support.type.vendored.property-name.css #23bbcb —
support.module.node,support.type.object.module,support.module.node #af92ff —
entity.name.type.module #af92ff —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #af92ff —
support.constant.json #b2c2ff —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #b2c2ff —
support.type.object.console #af92ff —
support.variable.property.process #b2c2ff —
entity.name.function,support.function.console #d572cf —
keyword.operator.misc.rust #ffffff —
keyword.operator.sigil.rust #b2c2ff —
keyword.operator.delete #b2c2ff —
support.type.object.dom #23bbcb —
support.variable.dom,support.variable.property.dom #af92ff —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #23bbcb —
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 #b2c2ff —
punctuation.separator.delimiter #ffffff —
punctuation.separator.c,punctuation.separator.cpp #b2c2ff —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #23bbcb —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #b2c2ff —
variable.parameter.function.language.python #b2c2ff —
support.type.python #23bbcb —
keyword.operator.logical.python #b2c2ff —
variable.parameter.function.python #b2c2ff —
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 #d572cf —
constant.character.format.placeholder.other.python #b2c2ff —
keyword.operator.assignment.compound #b2c2ff —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #23bbcb —
entity.name.namespace #af92ff —
variable.language #af92ff —
token.variable.parameter.java #ffffff —
import.storage.java #af92ff —
token.package.keyword #b2c2ff —
entity.name.function, meta.require, support.function.any-method, variable.function #d572cf —
entity.name.type.namespace #af92ff —
support.class, entity.name.type.class #af92ff —
entity.name.class.identifier.namespace.type #af92ff —
entity.name.class, variable.other.class.js, variable.other.class.ts #af92ff —
variable.other.class.php #af92ff —
control.elements, keyword.operator.less #b2c2ff —
keyword.other.special-method #d572cf —
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 #b2c2ff —
token.storage.type.java #af92ff —
support.type.property-name #ffffff —
support.constant.property-value #ffffff —
support.constant.font-name #b2c2ff —
entity.other.inherited-class #af92ff —
constant.other.symbol #23bbcb —
punctuation.definition.constant #b2c2ff —
entity.other.attribute-name #b2c2ff —
entity.other.attribute-name.id #d572cf —
entity.other.attribute-name.class.css #b2c2ff —
markup.heading punctuation.definition.heading, entity.name.section #d572cf —
keyword.other.unit #af92ff —
markup.bold,todo.bold #b2c2ff —
punctuation.definition.bold #af92ff —
markup.italic, punctuation.definition.italic,todo.emphasis #b2c2ff —
entity.name.section.markdown #af92ff —
punctuation.definition.heading.markdown #af92ff —
punctuation.definition.list.begin.markdown #af92ff —
markup.heading.setext #ffffff —
punctuation.definition.bold.markdown #b2c2ff —
markup.inline.raw.markdown #ddd5fb —
markup.inline.raw.string.markdown #ddd5fb —
punctuation.definition.list.markdown #af92ff —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #af92ff —
beginning.punctuation.definition.list.markdown #af92ff —
punctuation.definition.metadata.markdown #af92ff —
markup.underline.link.markdown,markup.underline.link.image.markdown #b2c2ff —
string.other.link.title.markdown,string.other.link.description.markdown #d572cf —
constant.character.escape #23bbcb —
punctuation.section.embedded, variable.interpolation #af92ff —
punctuation.section.embedded.begin,punctuation.section.embedded.end #b2c2ff —
invalid.illegal.bad-ampersand.html #ffffff —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #af92ff —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #af92ff —
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 #ddd5fb —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #23bbcb —
support.type.property-name.json #af92ff —
support.type.property-name.json punctuation #af92ff —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #b2c2ff —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #b2c2ff —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #af92ff —
keyword.operator.error-control.php #b2c2ff —
keyword.operator.type.php #b2c2ff —
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 #af92ff —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #d572cf —
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 #b2c2ff —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #b2c2ff —
entity.name.goto-label.php,support.other.php #d572cf —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #23bbcb —
keyword.operator.regexp.php #b2c2ff —
keyword.operator.comparison.php #23bbcb —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #b2c2ff —
meta.function.decorator.python #d572cf —
support.token.decorator.python,meta.function.decorator.identifier.python #23bbcb —
function.parameter #ffffff —
function.parameter.ruby, function.parameter.cs #ffffff —
constant.language.symbol.ruby #23bbcb —
inline-color-decoration rgb-value #b2c2ff —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #af92ff —
block.scope.end,block.scope.begin #ffffff —
entity.name.variable.local.cs #af92ff —
token.error-token #f44747 —
token.debug-token #b2c2ff —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #b2c2ff —
meta.template.expression #ffffff —
keyword.operator.module #b2c2ff —
support.type.type.flowtype #d572cf —
support.type.primitive #af92ff —
meta.property.object #af92ff —
variable.parameter.function.js #af92ff —
keyword.other.template.begin #ddd5fb —
keyword.other.template.end #ddd5fb —
keyword.other.substitution.begin #ddd5fb —
keyword.other.substitution.end #ddd5fb —
keyword.operator.assignment #23bbcb —
keyword.operator.assignment.go #af92ff —
keyword.operator.arithmetic.go, keyword.operator.address.go #b2c2ff —
entity.name.package.go #af92ff —
support.type.prelude.elm #23bbcb —
support.constant.elm #b2c2ff —
punctuation.quasi.element #b2c2ff —
constant.character.entity #af92ff —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #23bbcb —
entity.global.clojure #af92ff —
meta.symbol.clojure #af92ff —
constant.keyword.clojure #23bbcb —
meta.arguments.coffee, variable.parameter.function.coffee #af92ff —
meta.scope.prerequisites.makefile #af92ff —
storage.modifier.import.groovy #af92ff —
meta.method.groovy #d572cf —
meta.definition.variable.name.groovy #af92ff —
meta.definition.class.inherited.classes.groovy #ddd5fb —
support.variable.semantic.hlsl #af92ff —
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 #b2c2ff —
text.variable, text.bracketed #af92ff —
support.type.swift, support.type.vb.asp #af92ff —
entity.name.function.xi #af92ff —
entity.name.class.xi #23bbcb —
constant.character.character-class.regexp.xi #af92ff —
constant.regexp.xi #b2c2ff —
keyword.control.xi #23bbcb —
beginning.punctuation.definition.quote.markdown.xi #ddd5fb —
beginning.punctuation.definition.list.markdown.xi #5a4b81 —
constant.character.xi #d572cf —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #5a4b81 —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #af92ff —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #af92ff —
meta.brace.square #ffffff —
comment, punctuation.definition.comment #5a4b81 italic
markup.quote.markdown #5a4b81 —
punctuation.definition.block.sequence.item.yaml #ffffff —
constant.language.symbol.elixir #23bbcb —
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...
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 } !` ;
}
Lunar VSCode Theme | Coding Theme