Skip to main content
Home Theme VS Code halloween-is-coming dark theme for vscode. slight alteration of synthwave '84.
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 #171520 activityBar.foreground #ffffffCC activityBarBadge.background #f97e72 activityBarBadge.foreground #2a2139 badge.background #2a2139 badge.foreground #ffffff tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, string.quoted.docstring.multi.python, string.quoted.docstring.multi.python punctuation.definition.string.begin.python, string.quoted.docstring.multi.python punctuation.definition.string.end.python #848bbd italic string.quoted, string.template, punctuation.definition.string #ff8b39 — string.template meta.embedded.line #b6b1b1 — variable, entity.name.variable #ff7edb —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
halloween-is-coming — Halloween Is Coming (Dark)
breadcrumbPicker.background
#232530
button.background #614D85
debugToolBar.background #463465
diffEditor.insertedTextBackground #0beb9935
diffEditor.removedTextBackground #fe445035
dropdown.background #232530
dropdown.listBackground #2a2139
editor.background #16141e
editor.findMatchBackground #D18616bb
editor.findMatchHighlightBackground #D1861655
editor.findRangeHighlightBackground #34294f1a
editor.hoverHighlightBackground #463564
editor.lineHighlightBorder #7059AB66
editor.rangeHighlightBackground #49549539
editor.selectionBackground #ffffff20
editor.selectionHighlightBackground #ffffff20
editor.wordHighlightBackground #34294f88
editor.wordHighlightStrongBackground #34294f88
editorBracketMatch.background #34294f66
editorBracketMatch.border #495495
editorCodeLens.foreground #ffffff7c
editorCursor.background #241b2f
editorCursor.foreground #f97e72
editorError.foreground #fe4450
editorGroup.border #495495
editorGroup.dropBackground #4954954a
editorGroupHeader.tabsBackground #241b2f
editorGutter.addedBackground #206d4bd6
editorGutter.deletedBackground #fa2e46a4
editorGutter.modifiedBackground #b893ce8f
editorIndentGuide.activeBackground #A148AB80
editorIndentGuide.background #444251
editorLineNumber.activeForeground #ffffffcc
editorLineNumber.foreground #ffffff73
editorOverviewRuler.addedForeground #fb882a
editorOverviewRuler.border #34294fb3
editorOverviewRuler.deletedForeground #fe445099
editorOverviewRuler.errorForeground #fe4450dd
editorOverviewRuler.findMatchForeground #D1861699
editorOverviewRuler.modifiedForeground #b893ce99
editorOverviewRuler.warningForeground #fb882a
editorRuler.foreground #A148AB80
editorSuggestWidget.highlightForeground #f97e72
editorSuggestWidget.selectedBackground #ffffff36
editorWarning.foreground #fb882a
editorWidget.background #171520DC
editorWidget.border #ffffff22
editorWidget.resizeBorder #ffffff44
errorForeground #fe4450
extensionButton.prominentBackground #f97e72
extensionButton.prominentHoverBackground #ff7edb
focusBorder #1f212b
foreground #ffffff
gitDecoration.addedResourceForeground #fb882a
gitDecoration.deletedResourceForeground #fe4450
gitDecoration.ignoredResourceForeground #ffffff59
gitDecoration.modifiedResourceForeground #cea5ff
gitDecoration.untrackedResourceForeground #fb882a
input.background #2a2139
inputOption.activeBorder #ff7edb99
inputValidation.errorBackground #fe445080
inputValidation.errorBorder #fe445000
list.activeSelectionBackground #ffffff20
list.activeSelectionForeground #ffffff
list.dropBackground #34294f66
list.errorForeground #fe4450E6
list.focusBackground #ffffff20
list.focusForeground #ffffff
list.highlightForeground #f97e72
list.hoverBackground #37294d99
list.hoverForeground #ffffff
list.inactiveFocusBackground #2a213999
list.inactiveSelectionBackground #ffffff20
list.inactiveSelectionForeground #ffffff
list.warningForeground #fb882a
menu.background #463465
minimapGutter.addedBackground #09f7a099
minimapGutter.deletedBackground #fe4450
minimapGutter.modifiedBackground #cea5ff
panelTitle.activeBorder #f97e72
peekView.border #495495
peekViewEditor.background #232530
peekViewEditor.matchHighlightBackground #D18616bb
peekViewResult.background #232530
peekViewResult.matchHighlightBackground #D1861655
peekViewResult.selectionBackground #2a213980
peekViewTitle.background #232530
pickerGroup.foreground #f97e72ea
progressBar.background #f97e72
scrollbar.shadow #2a2139
scrollbarSlider.activeBackground #9d8bca20
scrollbarSlider.background #9d8bca30
scrollbarSlider.hoverBackground #9d8bca50
selection.background #ffffff20
sideBar.background #1b1423
sideBar.dropBackground #34294f4c
sideBar.foreground #ffffff99
sideBarSectionHeader.background #241b2f
sideBarSectionHeader.foreground #ffffffca
statusBar.background #241b2f
statusBar.debuggingBackground #f97e72
statusBar.debuggingForeground #08080f
statusBar.foreground #ffffff80
statusBar.noFolderBackground #241b2f
statusBarItem.prominentBackground #2a2139
statusBarItem.prominentHoverBackground #34294f
tab.activeBorder #880088
tab.border #241b2f00
tab.inactiveBackground #262335
terminal.ansiBlue #03edf9
terminal.ansiBrightBlue #03edf9
terminal.ansiBrightCyan #03edf9
terminal.ansiBrightGreen #72f1b8
terminal.ansiBrightMagenta #ff7edb
terminal.ansiBrightRed #fe4450
terminal.ansiBrightYellow #fede5d
terminal.ansiCyan #03edf9
terminal.ansiGreen #72f1b8
terminal.ansiMagenta #ff7edb
terminal.ansiRed #fe4450
terminal.ansiYellow #f3e70f
terminal.foreground #ffffff
terminal.selectionBackground #ffffff20
terminalCursor.background #ffffff
terminalCursor.foreground #03edf9
textLink.activeForeground #ffbe7e
textLink.foreground #ff7f30
titleBar.activeBackground #1f1729
titleBar.inactiveBackground #1d1526
walkThrough.embeddedEditorBackground #232530
widget.shadow #2a2139 variable.language #fe4450 bold
variable.parameter — italic
storage.type, storage.modifier #fede5d —
constant.language #f97e72 —
constant.character.escape #36f9f6 —
punctuation.definition.tag #36f9f6 —
entity.other.attribute-name #fede5d —
entity.other.attribute-name.html #fede5d italic
entity.name.type, meta.attribute.class.html #fe4450 —
entity.other.inherited-class #D50 —
entity.name.function, variable.function #36f9f6 —
keyword.control.export.js, keyword.control.import.js #72f1b8 —
constant.numeric.decimal.js #2EE2FA —
keyword.operator.new, keyword.operator.expression, keyword.operator.logical #fede5d —
keyword.other.unit #f97e72 —
meta.object-literal.key, support.type.property-name #ff7edb —
punctuation.separator.key-value #b6b1b1 —
punctuation.section.embedded #fede5d —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end #72f1b8 —
support.type.property-name.css, support.type.property-name.json #72f1b8 —
switch-block.expr.js #72f1b8 —
variable.other.constant.property.js, variable.other.property.js #2ee2fa —
constant.other.color #f97e72 —
support.constant.font-name #f97e72 —
entity.other.attribute-name.id #36f9f6 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #D50 —
support.function.misc.css #fe4450 —
markup.heading, entity.name.section #ff7edb —
text.html, keyword.operator.assignment #ffffffee —
markup.quote #b6b1b1cc italic
beginning.punctuation.definition.list #ff7edb —
markup.underline.link #D50 —
string.other.link.description #f97e72 —
meta.function-call.generic.python #36f9f6 —
variable.parameter.function-call.python #72f1b8 —
entity.name.variable.local.cs #ff7edb —
entity.name.variable.field.cs, entity.name.variable.property.cs #ff7edb —
constant.other.placeholder.c #72f1b8 italic
keyword.control.directive.include.c, keyword.control.directive.define.c #72f1b8 —
storage.modifier.c #fe4450 —
source.cpp keyword.operator #fede5d —
constant.other.placeholder.cpp #72f1b8 italic
keyword.control.directive.include.cpp, keyword.control.directive.define.cpp #72f1b8 —
storage.modifier.specifier.const.cpp #fe4450 —
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir #36f9f6 —
source.elixir entity.name.function #72f1b8 —
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir #36f9f6 —
source.elixir punctuation.definition.string #72f1b8 —
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir #72f1b8 —
source.elixir .punctuation.binary.elixir #ff7edb italic
entity.global.clojure #36f9f6 bold
storage.control.clojure #36f9f6 italic
meta.metadata.simple.clojure, meta.metadata.map.clojure #fe4450 italic
meta.quoted-expression.clojure — italic
meta.symbol.clojure #ff7edbff —
source.go meta.function-call.go #36f9f6 —
source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.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 #fede5d —
source.go storage.type, source.go keyword.struct.go, source.go keyword.interface.go #72f1b8 —
source.go constant.language.go, source.go constant.other.placeholder.go, source.go variable #2EE2FA —
markup.underline.link.markdown, markup.inline.raw.string.markdown #72f1b8 italic
string.other.link.title.markdown #fede5d —
markup.heading.markdown, entity.name.section.markdown #ff7edb bold
markup.italic.markdown #2EE2FA italic
markup.bold.markdown #2EE2FA bold
punctuation.definition.quote.begin.markdown, markup.quote.markdown #72f1b8 —
source.dart, source.python, source.scala #ff7edbff —
string.interpolated.single.dart #f97e72 —
variable.parameter.dart #72f1b8 —
constant.numeric.dart #2EE2FA —
variable.parameter.scala #2EE2FA —
meta.template.expression.scala #72f1b8 —
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 } !` ;
}
halloween-is-coming | Coding Theme