Skip to main content
Home Theme VS Code Moontallica Theme A dark theme that's all about neon colors in a deep, immersive and cyberpunk vibe. Based on Dracula, Omni Owl and 2077 themes.
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 #1d1641 activityBar.activeBorder #3e8efd activityBar.activeFocusBorder #3e8efd activityBar.background #030d22 activityBar.foreground #fb00be activityBarBadge.background #c832ff tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle emphasis — italic strong — bold header #c832ff — meta.diff, meta.diff.header #6272A4 — markup.inserted #50FA7B —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Moontallica Theme — Moontallica
activityBarBadge.foreground #ffffff
button.background #087eb4
button.foreground #ffffff
button.hoverBackground #008dce
descriptionForeground #ffffff
editor.background #030d22
editor.findMatchBackground #003496
editor.findMatchHighlightBackground #001288da
editor.foreground #fdfeff
editor.hoverHighlightBackground #004696
editor.lineHighlightBackground #1c1347
editor.selectionBackground #310072
editor.selectionHighlightBackground #35008b
editor.wordHighlightBackground #47008ad5
editor.wordHighlightStrongBackground #440083d5
editorCursor.foreground #fb00be
editorError.foreground ##ff0000
editorGroup.dropBackground #03153b
editorGroupHeader.noTabsBackground #03163f
editorGroupHeader.tabsBackground #030d22
editorHoverWidget.background #222858
editorHoverWidget.border #2d324e
editorIndentGuide.activeBackground #1d1641
editorIndentGuide.background #030d22
editorInfo.foreground #af21e7
editorLineNumber.activeForeground #3e8efd
editorLineNumber.foreground #3e8efd
editorRuler.foreground #11215e
editorWarning.foreground #fad46d
editorWidget.background #04112c
editorWidget.border #030f27
foreground #ffffff
gitDecoration.conflictingResourceForeground ##ff0000
gitDecoration.deletedResourceForeground #d800ca
gitDecoration.ignoredResourceForeground #1183b8
gitDecoration.modifiedResourceForeground #fdd81d
gitDecoration.untrackedResourceForeground #0097fc
input.background #0d0931
input.border #150f53
input.placeholderForeground #f3f3f3
inputOption.activeBorder #ffd400
list.activeSelectionBackground #073170
list.activeSelectionForeground #ffffff
list.dropBackground #063475
list.errorForeground ##ff0000
list.focusBackground #06306e
list.hoverBackground #0a2f66
list.inactiveSelectionBackground #161130
list.warningForeground #992293
panel.background #0e0952
panel.border #3e8efd
panel.dropBackground #fb00be
panelTitle.activeBorder #fb00be
panelTitle.activeForeground #fb00be
panelTitle.inactiveForeground #d600dd
peekView.border #ffd400
peekViewEditor.background #1971f770
peekViewEditor.matchHighlightBackground #120961
peekViewEditor.matchHighlightBorder #34006e
peekViewResult.background #1a1079
peekViewResult.selectionBackground #ffd400
peekViewTitle.background #372dc9
peekViewTitleDescription.foreground #348bee
progressBar.background #fa0dea
scrollbar.shadow #ff25ed57
scrollbarSlider.activeBackground #ff29944f
scrollbarSlider.background #fc309654
scrollbarSlider.hoverBackground #fb00be
sideBar.background #030d22
sideBar.border #3e8efd
sideBarSectionHeader.background #04112e
sideBarSectionHeader.foreground #3e8efd
statusBar.background #0a0631
statusBar.debuggingBackground #0a0631
statusBar.debuggingForeground #3e8efd
statusBar.foreground #3e8efd
statusBar.noFolderBackground #0a0631
statusBar.noFolderForeground #3e8efd
tab.activeBackground #1d1641
tab.activeBorder #171033
tab.activeBorderTop #3e8efd
tab.activeForeground #f9faff
tab.border #171033
tab.inactiveBackground #141138
tab.inactiveForeground #3e8efd
terminal.ansiBlack #747474
terminal.ansiBlue #c832ff
terminal.ansiBrightBlack #747474
terminal.ansiBrightBlue #c832ff
terminal.ansiBrightCyan #55ffe1
terminal.ansiBrightGreen #372dc9
terminal.ansiBrightMagenta #fb00be
terminal.ansiBrightRed ##ff0000
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #ffd400
terminal.ansiCyan #55ffe1
terminal.ansiGreen #372dc9
terminal.ansiMagenta #fb00be
terminal.ansiRed ##ff0000
terminal.ansiWhite #ffffff
terminal.ansiYellow #ffd400
terminal.background #030d22
terminal.foreground #ffffff
titleBar.activeBackground #1d1641 invalid #ff0000 underline italic
invalid.deprecated #F8F8F2 underline italic
entity.name.filename #F1FA8C —
markup.underline — underline
markup.heading #c832ff bold
markup.italic #F1FA8C italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext #3e8efd —
markup.inline.raw, markup.raw.restructuredtext #50FA7B —
markup.underline.link, markup.underline.link.image #3e8efd —
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title #fb00be —
entity.name.directive.restructuredtext, markup.quote #F1FA8C italic
meta.separator.markdown #6272A4 —
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown #50FA7B —
punctuation.definition.constant.restructuredtext #c832ff —
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end #c832ff —
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end #F8F8F2 —
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end #F1FA8C —
entity.name.type.class, entity.name.class #3e8efd normal
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special #c832ff italic
entity.other.inherited-class #3e8efd italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment #6272A4 —
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class #fb00be —
comment.block.documentation entity.name.type #3e8efd italic
comment.block.documentation entity.name.type punctuation.definition.bracket #3e8efd —
comment.block.documentation variable #FFB86C italic
constant, variable.other.constant #c832ff —
constant.character.escape, constant.character.string.escape, constant.regexp #fb00be —
entity.other.attribute-name.parent-selector #fb00be —
entity.other.attribute-name #50FA7B italic
entity.name.function, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix #50FA7B —
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter #FFB86C italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property #50FA7B italic
meta.decorator variable.other.object #50FA7B —
keyword, punctuation.definition.keyword #fb00be —
keyword.control.new, keyword.operator.new — bold
support.function.magic, support.variable, variable.other.predefined #c832ff regular
support.function, support.type.property-name — regular
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation #fb00be —
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor #F8F8F2 —
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile #fb00be —
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml #3e8efd —
constant.other.date, constant.other.timestamp #FFB86C —
variable.other.alias.yaml #50FA7B italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def #fb00be regular
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml #3e8efd italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type #FFB86C —
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp #F1FA8C —
punctuation.definition.group.capture.regexp #fb00be —
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end #ff0000 —
punctuation.definition.character-class.regexp #3e8efd —
punctuation.definition.group.regexp #FFB86C —
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp #ff0000 —
meta.assertion.look-ahead.regexp #50FA7B —
punctuation.definition.string.begin, punctuation.definition.string.end #E9F284 —
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end #3e8efd —
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape #6272A4 —
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx #F8F8F2 —
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable #FFB86C italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable #F8F8F2 normal
meta.selectionset.graphql variable #F1FA8C —
meta.selectionset.graphql meta.arguments variable #F8F8F2 —
entity.name.fragment.graphql, variable.fragment.graphql #3e8efd —
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell #F8F8F2 —
source.shell variable.other #c832ff —
support.constant #c832ff normal
meta.scope.prerequisites.makefile #F1FA8C —
meta.attribute-selector.scss #F1FA8C —
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss #F8F8F2 —
meta.preprocessor.haskell #6272A4 —
markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file, markup.deleted.diff, markup.inserted.diff, comment, punctuation.accessor, storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx, entity.name.function, entity.other.attribute-name, keyword.operator.relational, meta.delimiter.period, meta.selector, entity.name.tag.doctype, meta.tag.sgml.doctype, variable.other.object.property, entity.name.function, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, italic, quote, source.elixir .punctuation.binary.elixir, source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go, meta.tag.sgml.doctype.html, variable.other.object.js, markup.italic.markdown, markup.quote.markdown, keyword.control — italic
constant.numeric, constant.character.numeric, storage.type.function.arrow.js, storage.type.function.arrow.js, entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html, keyword.operator, variable.parameter.function, support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag, keyword.operator.logical, variable.other.object.js, keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts, entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css, entity.name.type.js, entity.name.type.module.js, support.class.component.js, support.class.component.tsx, meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, meta.brace, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.relational, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.type, keyword.operator, keyword, punctuation.definition.string, punctuation, variable.other.readwrite.js, storage.type, source.css, string.quoted —
markup.heading, markup.bold, markup.italic, markup.underline, markup.quote, markup.list, markup.inline.raw, markup.fenced_code.block.markdown, markup.underline.link, markup.bold.markdown, markup.italic.markdown, markup.raw.block, meta.separator.markdown — —
Markdown Highlighting with Specific Headings — —
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 } !` ;
}
Moontallica Theme | Coding Theme