Skip to main content
Home Theme VS Code ShadowedNight 🌌 ShadowedNight: Embrace the mystery of the night with an elegant and immersive dark theme for a captivating coding experience. 🌃
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 #a17fce13 activityBar.activeBorder #9ec5ff activityBar.activeFocusBorder #baacfc activityBar.background #030204 activityBar.dropBorder #eebf7c activityBar.inactiveForeground #7e7c8f tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle invalid #F07171 — meta.embedded, source.groovy.embedded, meta.template.expression #aba8c2 — variable, punctuation.definition.variable, support.variable.property.dom, support.variable.dom, support.variable.property, punctuation.separator.parameter, string.interpolated.pug variable #aba8c2 — comment, punctuation.definition.comment #4a494e italic
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
ShadowedNight — ShadowedNight
activityBarBadge.background #008cff
activityBarBadge.foreground #ffffff
badge.background #b3e9c0
badge.foreground #000000
button.background #42d9ff
button.foreground #000000
button.hoverBackground #38b8d9
checkbox.background #13101e
diffEditor.insertedTextBackground #78BD6530
diffEditor.removedTextBackground #F0717135
dropdown.background #13101e
dropdown.border #191528
editor.background #1b1623
editor.findMatchBorder #eebf7c
editor.findMatchHighlightBackground #aba8c230
editor.foldBackground #17c0de30
editor.foreground #aba8c2
editor.lineHighlightBackground #13101e
editor.selectionBackground #ff4e6c3a
editorBracketMatch.background #08060c
editorBracketMatch.border #bb9661
editorCursor.background #000000
editorCursor.foreground #eebf7c
editorError.foreground #F07171
editorGroup.border #17111f
editorGroup.dropBackground #a47cee30
editorGroupHeader.noTabsBackground #13101e
editorGroupHeader.tabsBackground #13101e
editorGutter.addedBackground #78BD65
editorGutter.deletedBackground #F07171
editorGutter.modifiedBackground #60a8dc
editorHoverWidget.border #1b172b
editorIndentGuide.activeBackground #eebf7c
editorIndentGuide.background #1b172b
editorInfo.foreground #ff816b
editorLineNumber.activeForeground #7b69b0
editorLineNumber.foreground #362c54
editorLink.activeForeground #eebf7c
editorMarkerNavigation.background #0b0911
editorMarkerNavigationError.background #F07171
editorMarkerNavigationInfo.background #ff816b
editorMarkerNavigationWarning.background #FA8D3E
editorOverviewRuler.addedForeground #60a8dc
editorOverviewRuler.border #1b172b
editorOverviewRuler.bracketMatchForeground #eebf7c
editorOverviewRuler.deletedForeground #60a8dc
editorOverviewRuler.errorForeground #F07171
editorOverviewRuler.infoForeground #ff816b
editorOverviewRuler.modifiedForeground #60a8dc
editorOverviewRuler.selectionHighlightForeground #eebf7c
editorOverviewRuler.warningForeground #FA8D3E
editorPane.background #040407
editorRuler.foreground #1b172b
editorSuggestWidget.background #13101e
editorSuggestWidget.border #1b172b
editorSuggestWidget.highlightForeground #eebf7c
editorWarning.foreground #FA8D3E
editorWhitespace.foreground #2c2444
editorWidget.background #0b0911
editorWidget.resizeBorder #1b172b
errorForeground #F07171
extensionButton.prominentBackground #42d9ff
extensionButton.prominentForeground #000000
extensionButton.prominentHoverBackground #35adcc
focusBorder #4f45df
foreground #aba8c2
gitDecoration.addedResourceForeground #78BD65
gitDecoration.deletedResourceForeground #F07171
gitDecoration.modifiedResourceForeground #60a8dc
gitDecoration.stageDeletedResourceForeground #F07171
gitDecoration.stageModifiedResourceForeground #60a8dc
input.background #13101e
input.border #191528
inputValidation.errorBackground #F0717190
inputValidation.errorBorder #F07171
inputValidation.errorForeground #000000
inputValidation.infoBackground #ff816b90
inputValidation.infoBorder #ff816b
inputValidation.infoForeground #000000
inputValidation.warningBackground #FA8D3E90
inputValidation.warningBorder #FA8D3E
inputValidation.warningForeground #000000
list.activeSelectionBackground #eebf7c20
list.errorForeground #F07171
list.focusBackground #eebf7c30
list.highlightForeground #eebf7c
list.hoverBackground #161222
list.inactiveSelectionBackground #eebf7c25
list.warningForeground #FA8D3E
menu.background #0b0911
menu.foreground #aba8c2
menu.selectionBackground #db7ceedd
menu.selectionForeground #000000
menu.separatorBackground #2c2444
minimap.errorHighlight #F07171
minimap.selectionHighlight #eebf7c80
minimap.warningHighlight #FA8D3E
minimapGutter.addedBackground #78BD65
minimapGutter.deletedBackground #F07171
minimapGutter.modifiedBackground #60a8dc
notifications.background #0b0911
notificationsErrorIcon.foreground #F07171
notificationsInfoIcon.foreground #ff816b
notificationsWarningIcon.foreground #FA8D3E
panel.dropBorder #eebf7c
panelTitle.activeBorder #eebf7c
peekViewResult.background #13101e
peekViewTitle.background #0f0a14
pickerGroup.border #0b0911
pickerGroup.foreground #eebf7c
problemsErrorIcon.foreground #F07171
problemsInfoIcon.foreground #ff816b
problemsWarningIcon.foreground #FA8D3E
progressBar.background #eebf7c
scrollbar.shadow #000000
scrollbarSlider.activeBackground #2c244440
scrollbarSlider.background #3c315e50
scrollbarSlider.hoverBackground #4d3f7740
selection.background #61ff89
settings.modifiedItemIndicator #60a8dc
sideBar.background #0f0d17
sideBarSectionHeader.background #0f0d18
statusBar.background #030204
statusBarItem.hoverBackground #160f1d
statusBarItem.prominentBackground #eebf7c
statusBarItem.prominentForeground #000000
statusBarItem.prominentHoverBackground #d4ab6f
tab.activeBackground #0b0911
tab.activeBorder #eebf7c
tab.activeModifiedBorder #60a8dc
tab.border #1b172b
tab.hoverBackground #1b172b
tab.inactiveBackground #13101e
tab.lastPinnedBorder #eebf7c50
terminal.selectionBackground #eebf7c
terminalCursor.background #000000
terminalCursor.foreground #eebf7c
textLink.activeForeground #17c0de
textLink.foreground #ff386a
textPreformat.foreground #17c0de
textSeparator.foreground #0b0911
titleBar.activeBackground #13101e
titleBar.border #161323
titleBar.inactiveBackground #0b0911
widget.shadow #000000 string, punctuation.definition.string
constant.character.escape #ff386a —
keyword, constant.language.import-export-all #42d9ff —
entity.name.type, support.type.primitive, support.type.builtin, meta.type.annotation entity.name.type, meta.type.parameters entity.name.type #4db5ff —
keyword.control, storage, support.type, keyword.operator.expression, keyword.operator.new #ff386a —
entity.name.function, support.class, support.function, new.expr entity.name.type, entity.other.inherited-class #c678dd —
punctuation.definition.typeparameters, keyword.operator.type, keyword.operator.optional, punctuation.definition.template-expression, source.tsx punctuation.section.embedded, source.jsx punctuation.section.embedded #eebf7c —
constant.numeric, constant.language #b3e8ff —
variable.parameter, parameter.variable, meta.function.parameter variable, source.rust meta.type_params.rust #b3e8ff —
punctuation, meta.brace #737182 —
variable.language.this, variable.language.special.self #ff386a —
comment.block.documentation entity.name.type #eebf7c —
variable.language.super #17c0de —
meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype punctuation.definition.tag, meta.tag.metadata.doctype string, meta.tag.metadata.doctype entity.other.attribute-name.html, meta.tag.sgml.doctype #737182 —
variable.other.object #e5c07b —
entity.other.attribute-name #7bd8d3 —
entity.other.attribute-name.html #84ceff —
constant.character.entity, punctuation.definition.entity #b3e8ff —
entity.name.section.markdown, markup.heading.setext #42d9ff —
punctuation.definition.list #42d9ff —
meta.separator.markdown #42d9ff —
markup.inline.raw #ff386a —
meta.link punctuation.definition.string, meta.image punctuation.definition.string #737182 —
link, markup.underline.link, constant.other.reference.link.markdown #17c0de —
entity.name.tag.css, entity.name.tag.wildcard #757ff8 bold
entity.other.attribute-name.class, entity.other.attribute-name punctuation.definition.entity #42d9ff bold
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, constant.other.color #ff386a —
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity #17c0de —
source.css constant.numeric, source.less constant.numeric, source.scss constant.numeric #757ff8 —
meta.property-name, support.type.property-name #c7c7c7 —
meta.property-value, meta.property-value constant.other, support.constant.property-value #17c0de —
variable.parameter.url #b3e8ff —
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php #42d9ff —
entity.name.section #17c0de —
support.type.property-name.json #42d9ff —
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 } !` ;
}
ShadowedNight | Coding Theme