Skip to main content
Home Theme VS Code Dark Blue Angel This theme has a dark blue background for night time and also has a nice contrast with the code being typed. Think one dark Pro with white variables. There is an italic version also
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 #000822 activityBar.border #08234a activityBar.foreground #5f7e97 activityBarBadge.background #44596b activityBarBadge.foreground #ffffff badge.background #5f7e97 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #858591 italic variable, string constant.other.placeholder #EEFFFF — constant.other.color #ffffff — invalid, invalid.illegal #FF5370 — keyword, storage.type, storage.modifier
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Dark Blue Angel — Dark Blue Angel
badge.foreground
#ffffff
breadcrumb.activeSelectionForeground #FFFFFF
breadcrumb.focusForeground #ffffff
breadcrumb.foreground #5f7e97
breadcrumbPicker.background #000822
button.background #061a35cc
button.foreground #ffffffcc
button.hoverBackground #10395bcc
contrastBorder #121b42
debugExceptionWidget.background #061a35
debugExceptionWidget.border #5f7e97
debugToolBar.background #061a35
diffEditor.insertedTextBackground #99b76d23
diffEditor.insertedTextBorder #c5e47833
diffEditor.removedTextBackground #ef535033
diffEditor.removedTextBorder #ef53504d
dropdown.background #061a35
dropdown.border #5f7e97
dropdown.foreground #ffffffcc
editor.background #061a35
editor.findMatchBackground #5f7e9779
editor.findMatchHighlightBackground #1085bb5d
editor.foreground #d6deeb
editor.hoverHighlightBackground #7e57c25a
editor.inactiveSelectionBackground #7e57c25a
editor.lineHighlightBackground #0003
editor.rangeHighlightBackground #7e57c25a
editor.selectionBackground #1d3b53
editor.selectionHighlightBackground #5f7e9779
editor.wordHighlightBackground #bbe0f633
editor.wordHighlightStrongBackground #a2bbf433
editorBracketMatch.background #5f7e974d
editorCodeLens.foreground #5e82ceb4
editorCursor.foreground #80a4c2
editorError.foreground #EF5350
editorGroup.border #102a44
editorGroup.dropBackground #577bc253
editorGroup.emptyBackground #061a35
editorGroupHeader.noTabsBackground #061a35
editorGroupHeader.tabsBackground #061a35
editorGroupHeader.tabsBorder #262A39
editorGutter.addedBackground #9CCC65
editorGutter.background #061a35
editorGutter.deletedBackground #EF5350
editorGutter.modifiedBackground #e2b93d
editorHoverWidget.background #061a35
editorHoverWidget.border #5f7e97
editorIndentGuide.activeBackground #7E97AC
editorIndentGuide.background #5e81ce52
editorLineNumber.activeForeground #a3c6e3
editorLineNumber.foreground #293b49
editorMarkerNavigation.background #0b2942
editorMarkerNavigationError.background #EF5350
editorMarkerNavigationWarning.background #FFCA28
editorOverviewRuler.commonContentForeground #7e57c2
editorOverviewRuler.currentContentForeground #7e57c2
editorOverviewRuler.incomingContentForeground #7e57c2
editorRuler.foreground #5e81ce52
editorSuggestWidget.background #2C3043
editorSuggestWidget.border #2B2F40
editorSuggestWidget.foreground #d6deeb
editorSuggestWidget.highlightForeground #ffffff
editorSuggestWidget.selectedBackground #5f7e97
editorWarning.foreground #b39554
editorWidget.background #021320
editorWidget.border #219fd544
errorForeground #EF5350
extensionButton.prominentBackground #7e57c2cc
extensionButton.prominentForeground #ffffffcc
extensionButton.prominentHoverBackground #7e57c2
focusBorder #121c42
foreground #d6deeb
gitDecoration.modifiedResourceForeground #a2bffc
input.background #0b253a
input.border #5f7e97
input.foreground #ffffffcc
input.placeholderForeground #5f7e97
inputOption.activeBorder #ffffffcc
inputValidation.errorBackground #AB0300F2
inputValidation.errorBorder #EF5350
inputValidation.infoBackground #00589EF2
inputValidation.infoBorder #64B5F6
inputValidation.warningBackground #675700F2
inputValidation.warningBorder #FFCA28
list.activeSelectionBackground #061a35
list.activeSelectionForeground #ffffff
list.dropBackground #35060f
list.focusBackground #010d18
list.focusForeground #ffffff
list.highlightForeground #ffffff
list.hoverBackground #061a35
list.hoverForeground #ffffff
list.inactiveSelectionBackground #061a35
list.inactiveSelectionForeground #fff
list.invalidItemForeground #975f94
merge.currentHeaderBackground #5f7e97
merge.incomingHeaderBackground #7e57c25a
notificationCenter.border #262a39
notificationLink.foreground #80CBC4
notifications.background #01111d
notifications.border #262a39
notifications.foreground #ffffffcc
notificationToast.border #262a39
panel.background #04152d
panel.border #323749
panelTitle.activeBorder #262A39
panelTitle.activeForeground #ffffff7c
panelTitle.inactiveForeground #d6deeb80
peekView.border #5f7e97
peekViewEditor.background #061a35
peekViewEditor.matchHighlightBackground #7e57c25a
peekViewResult.background #061a35
peekViewResult.fileForeground #5f7e97
peekViewResult.lineForeground #5f7e97
peekViewResult.matchHighlightBackground #ffffffcc
peekViewResult.selectionBackground #2E3250
peekViewResult.selectionForeground #5f7e97
peekViewTitle.background #061a35
peekViewTitleDescription.foreground #697098
peekViewTitleLabel.foreground #5f7e97
pickerGroup.border #061a35
pickerGroup.foreground #d1aaff
progressBar.background #577bc2
scrollbar.shadow #010b14
scrollbarSlider.activeBackground #084d8180
scrollbarSlider.background #084d8180
scrollbarSlider.hoverBackground #084d8180
selection.background #4373c2
sideBar.background #000822
sideBar.border #061a35
sideBar.foreground #8BADC1
sideBarSectionHeader.background #061a35
sideBarSectionHeader.foreground #ffffffad
sideBarTitle.foreground #5f7e97
statusBar.background #03011a
statusBar.border #262A39
statusBar.debuggingBackground #dc0c0c
statusBar.debuggingBorder #1F2330
statusBar.debuggingForeground #fff
statusBar.foreground #839ab0ef
statusBar.noFolderBackground #03011a
statusBar.noFolderBorder #25293A
statusBar.noFolderForeground #55697def
statusBarItem.activeBackground #202431
statusBarItem.hoverBackground #202431
statusBarItem.prominentBackground #202431
statusBarItem.prominentHoverBackground #202431
tab.activeBackground #01132b
tab.activeBorder #33437c
tab.activeForeground #d2dee7
tab.border #061a35
tab.inactiveBackground #061a35
tab.inactiveForeground #5f7e97
tab.unfocusedActiveBorder #262A39
tab.unfocusedActiveForeground #5f7e97
tab.unfocusedInactiveForeground #5f7e97
terminal.ansiBlack #061a35
terminal.ansiBlue #82AAFF
terminal.ansiBrightBlack #575656
terminal.ansiBrightBlue #82AAFF
terminal.ansiBrightCyan #7fdbca
terminal.ansiBrightGreen #22da6e
terminal.ansiBrightMagenta #C792EA
terminal.ansiBrightRed #EF5350
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #ffeb95
terminal.ansiCyan #21c7a8
terminal.ansiGreen #22da6e
terminal.ansiMagenta #C792EA
terminal.ansiRed #EF5350
terminal.ansiWhite #ffffff
terminal.ansiYellow #c5e478
terminal.background #000822
terminal.selectionBackground #1b90dd4d
terminalCursor.background #234d70
textCodeBlock.background #4f4f4f
titleBar.activeBackground #061a35
titleBar.activeForeground #eeefff
titleBar.inactiveBackground #03011a
walkThrough.embeddedEditorBackground #061a35
welcomePage.background #061a35
welcomePage.tileHoverBackground #061a35
widget.shadow #061a35 keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution #4b9ff8 —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #f07178 —
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method #9099fe —
meta.block variable.other #f07178 —
support.other.variable, string.other.link #f07178 —
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other #F78C6C —
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js #acd157 —
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 #f1be32 —
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 #99c9ff —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #FF5370 —
variable.language #FF5370 —
entity.name.method.js #99c9ff italic
meta.class-method.js entity.name.function.js, variable.function.constructor #99c9ff —
entity.other.attribute-name #dbb8ff —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #f1be32 italic
entity.other.attribute-name.class #f1be32 —
source.sass keyword.control #99c9ff —
constant.character.escape #89DDFF —
*url*, *link*, *uri* — underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #99c9ff italic
source.js constant.other.object.key.js string.unquoted.label.js #FF5370 italic
source.json meta.structure.dictionary.json support.type.property-name.json #dbb8ff —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #f1be32 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #F78C6C —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #FF5370 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #C17E70 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #99c9ff —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #f07178 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #dbb8ff —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #acd157 —
text.html.markdown, punctuation.definition.list_item.markdown #EEFFFF —
text.html.markdown markup.inline.raw.markdown #dbb8ff —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #65737E —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown #acd157 —
markup.italic #f07178 italic
markup.bold, markup.bold string #f07178 bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string #f07178 bold
markup.underline #F78C6C underline
markup.quote punctuation.definition.blockquote.markdown #65737E —
string.other.link.title.markdown #99c9ff —
string.other.link.description.title.markdown #dbb8ff —
constant.other.reference.link.markdown #f1be32 —
markup.raw.block.fenced.markdown #00000050 —
punctuation.definition.fenced.markdown #00000050 —
markup.inline.raw.string.markdown #89CA78 —
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end #EEFFFF —
variable.language.fenced.markdown #65737E —
meta.separator #65737E bold
entity.other.inherited-class #E5C07B —
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 } ! ` ;
}
Dark Blue Angel | Coding Theme