Skip to main content
Home Theme VS Code Late Night Dark Late Night Dark Theme for the boiz who are working around n' programming in the late dark night!
Late Night Dark | Coding Theme
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 #08082b activityBar.border #08082b60 activityBar.foreground #e5e7e9 activityBarBadge.background #e5e7e9 activityBarBadge.foreground #08082b badge.background #08082b30 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier #005892 — variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss — italic punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss #0E287F — constant.other.php #005892 —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Late Night Dark — Late Night Dark
badge.foreground
#e5e7e9
breadcrumb.activeSelectionForeground #e5e7e9
breadcrumb.background #08082b
breadcrumb.focusForeground #e5e7e9
breadcrumb.foreground #20a6ff
breadcrumbPicker.background #08082b
button.background #e5e7e950
button.hoverBackground #a6acb152
contrastBorder #e5e7e940
debugToolBar.background #08082b
diffEditor.insertedTextBackground #0E287F15
diffEditor.removedTextBackground #10009620
dropdown.background #08082b
dropdown.border #e5e7e910
editor.background #08082b
editor.findMatchBackground #08082b
editor.findMatchBorder #e5e7e9
editor.findMatchHighlightBackground #e5e7e993
editor.findMatchHighlightBorder #e5e7e930
editor.foreground #e5e7e9
editor.lineHighlightBackground #08082b50
editor.selectionBackground #aeb4b930
editor.selectionHighlightBackground #2223246b
editor.selectionHighlightBorder #7c8186f0
editorBracketMatch.background #08082b
editorBracketMatch.border #0058927f
editorCursor.foreground #a6acb1
editorError.foreground #10009670
editorGroup.border #08082b30
editorGroupHeader.tabsBackground #08082b
editorGutter.addedBackground #0E287F60
editorGutter.deletedBackground #10009660
editorGutter.modifiedBackground #e5e7e960
editorHoverWidget.background #08082b
editorHoverWidget.border #e5e7e910
editorIndentGuide.activeBackground #010142
editorIndentGuide.background #01014270
editorInfo.foreground #e5e7e970
editorLineNumber.activeForeground #e5e7e9
editorLineNumber.foreground #e5e7e9c0
editorLink.activeForeground #0098D1
editorMarkerNavigation.background #0098D105
editorOverviewRuler.border #08082b
editorOverviewRuler.errorForeground #10009640
editorOverviewRuler.findMatchForeground #e5e7e9
editorOverviewRuler.infoForeground #e5e7e940
editorOverviewRuler.warningForeground #00589270
editorRuler.foreground #010142
editorSuggestWidget.background #08082b
editorSuggestWidget.border #e5e7e910
editorSuggestWidget.foreground #0098D1
editorSuggestWidget.highlightForeground #005892
editorSuggestWidget.selectedBackground #e5e7e920
editorWarning.foreground #0E287F
editorWhitespace.foreground #0098D140
editorWidget.background #08082b
editorWidget.border #005892
editorWidget.resizeBorder #e5e7e9
extensionButton.prominentBackground #0E287F90
extensionButton.prominentHoverBackground #100096
focusBorder #e5e7e900
gitDecoration.conflictingResourceForeground #005892
gitDecoration.deletedResourceForeground #100096
gitDecoration.ignoredResourceForeground #e5e7e9
gitDecoration.modifiedResourceForeground #0099ff
gitDecoration.untrackedResourceForeground #e5e7e9
input.background #12007F
input.border #e5e7e910
input.foreground #0098D1
input.placeholderForeground #0098D160
inputOption.activeBackground #0098D130
inputOption.activeBorder #0098D130
inputValidation.errorBorder #10009650
inputValidation.infoBorder #e5e7e950
inputValidation.warningBorder #00589250
list.activeSelectionBackground #08082b
list.activeSelectionForeground #e5e7e9
list.focusBackground #12007F
list.focusForeground #e5e7e9
list.highlightForeground #e5e7e9
list.hoverBackground #010142
list.hoverForeground #e5e7e9
list.inactiveSelectionBackground #08082b30
list.inactiveSelectionForeground #e5e7e9
list.warningForeground #005892
listFilterWidget.background #08082b30
listFilterWidget.noMatchesOutline #08082b30
listFilterWidget.outline #08082b30
menu.background #08082bf8
menu.border #e5e7e950
menu.foreground #0098D1
menu.selectionBackground #12007F
menu.selectionBorder #08082b30
menu.selectionForeground #0098D1
menu.separatorBackground #0098D1
menubar.selectionBackground #12007F
menubar.selectionBorder #e5e7e950
menubar.selectionForeground #0098D1
minimap.background #0c0b50
minimapGutter.addedBackground #100096
minimapGutter.deletedBackground #005892
minimapGutter.modifiedBackground #0E287F
minimapSlider.activeBackground #0E287Fb0
minimapSlider.background #0E287F80
minimapSlider.hoverBackground #0E287Fa0
notificationLink.foreground #e5e7e9
notifications.background #070792
notifications.foreground #0098D1
panel.background #11115f
panel.border #08082b60
panelTitle.activeBorder #e5e7e9
panelTitle.activeForeground #e5e7e9
panelTitle.inactiveForeground #0098D1
peekView.border #08082b30
peekViewEditor.background #0098D105
peekViewEditor.matchHighlightBackground #e5e7e950
peekViewEditorGutter.background #0098D105
peekViewResult.background #0098D105
peekViewResult.matchHighlightBackground #e5e7e950
peekViewResult.selectionBackground #e5e7e970
peekViewTitle.background #0098D105
peekViewTitleDescription.foreground #0098D160
pickerGroup.foreground #e5e7e9
progressBar.background #e5e7e9
scrollbar.shadow #08082b00
scrollbarSlider.activeBackground #e5e7e9cc
scrollbarSlider.background #e5e7e9bb
scrollbarSlider.hoverBackground #e5e7e9ee
selection.background #05223db0
settings.checkboxBackground #08082b
settings.checkboxForeground #0098D1
settings.dropdownBackground #08082b
settings.dropdownForeground #0098D1
settings.headerForeground #e5e7e9
settings.modifiedItemIndicator #e5e7e9
settings.numberInputBackground #08082b
settings.numberInputForeground #0098D1
settings.textInputBackground #08082b
settings.textInputForeground #0098D1
sideBar.background #08082b
sideBar.border #e5e7e950
sideBar.foreground #e5e7e9
sideBarSectionHeader.background #08082b
sideBarSectionHeader.border #08082b60
sideBarSectionHeader.foreground #e5e7e9
sideBarTitle.foreground #0098D1
statusBar.background #383838
statusBar.border #08082b60
statusBar.debuggingBackground #005892
statusBar.debuggingForeground #e5e7e9
statusBar.foreground #e5e7e94f
statusBar.noFolderBackground #08082b
statusBarItem.hoverBackground #e5e7e920
statusBarItem.remoteBackground #e5e7e9
statusBarItem.remoteForeground #08082b
tab.activeBackground #e5e7e950
tab.activeBorder #e5e7e9
tab.activeForeground #e5e7e9
tab.activeModifiedBorder #e5e7e9
tab.border #08082b
tab.inactiveBackground #e5e7e920
tab.inactiveForeground #0098D1af
tab.unfocusedActiveBackground #e5e7e940
tab.unfocusedActiveBorder #e5e7e9
tab.unfocusedActiveForeground #0098D1
tab.unfocusedInactiveBackground #e5e7e910
tab.unfocusedInactiveForeground #0098D17f
terminal.ansiBlack #08082b
terminal.ansiBlue #e5e7e9
terminal.ansiBrightBlack #e5e7e9
terminal.ansiBrightBlue #e5e7e9
terminal.ansiBrightCyan #00ACD9
terminal.ansiBrightGreen #0E287F
terminal.ansiBrightMagenta #005892
terminal.ansiBrightRed #100096
terminal.ansiBrightWhite #e5e7e9
terminal.ansiBrightYellow #005892
terminal.ansiCyan #00ACD9
terminal.ansiGreen #0E287F
terminal.ansiMagenta #005892
terminal.ansiRed #100096
terminal.ansiWhite #e5e7e9
terminal.ansiYellow #005892
terminal.foreground #e5e7e9
terminal.selectionBackground #174f99
terminalCursor.background #a6acb1
terminalCursor.foreground #a6acb1
textLink.activeForeground #0098D1
textLink.foreground #e5e7e9
titleBar.activeBackground #08082b
titleBar.activeForeground #0098D1
titleBar.border #08082b60
titleBar.inactiveBackground #08082b
titleBar.inactiveForeground #e5e7e9
tree.indentGuidesStroke #010142
widget.shadow #08082b30 invalid, invalid.illegal #100096 —
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss #A7A8AF —
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js #0099ff —
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js #0098D1 —
punctuation.definition, string.quoted.single.scss #A7A8AF —
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html #6D6F7C —
text.html.derivative #A7A8AF —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #0098D1 —
entity.name.tag.html — bold
variable.parameter.js, variable.parameter.keyframe-list.css #005892 —
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js #0099ff
string, string.quoted.double.html, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, entity.name.function, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control #e5e7e9 —
punctuation.definition.string.begin.html, punctuation.definition.string.end.html #00ACD9 —
support.other.variable, string.other.link, markup.table #0098D1 —
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html #005892 —
variable.parameter.function.language.special, variable.parameter #100096 —
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js #0E287F
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name.html #005892 —
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name #0099ff —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #100096 —
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #e5e7e9 italic
entity.other.attribute-name, support.function #005892 —
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, entity.other.attribute-name.html, string.quoted.single.js, storage.type.function.js, meta.object-literal.key #0098D1 —
source.scss keyword.control #005892 —
constant.character.escape #00ACD9 —
*url*, *link*, *uri* — underline
source.js constant.other.object.key.js string.unquoted.label.js #0098D1 italic
support.type.property-name.json #0098D1 —
text.html.markdown, punctuation.definition.list_item.markdown #0098D1 —
text.html.markdown markup.inline.raw.markdown #005892 —
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown #e5e7e950 —
text.html.markdown meta.dummy.line-break — —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown #0099ff bold
markup.underline #e5e7e9 underline
markup.quote punctuation.definition.blockquote.markdown #e5e7e950 —
string.other.link.description.title.markdown #005892 —
constant.other.reference.link.markdown #005892 —
punctuation.definition.raw.markdown, punctuation.definition.markdown #00ACD9 —
variable.language.fenced.markdown #e5e7e9 —
meta.separator #A7A8AF bold
token.error-token #FF293B —
token.debug-token #00ACD9 —
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 } ! ` ;
}