Skip to main content
Home Theme VS Code Node Express Theme Node Express - A sophisticated dark theme optimized for Node.js and Express development
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 #151A15 activityBar.foreground #FFFFFF activityBarBadge.background #3C873A activityBarBadge.foreground #FFFFFF button.background #2E7D32 button.foreground #FFFFFF tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle keyword.control.js, storage.type.js, keyword.operator.expression.js #8BC34A bold entity.name.function.js, support.function.js #66BB6A italic meta.function-call.js support.function.js #81C784 bold support.variable.object.node #7CB342 — string.quoted.single.js, string.quoted.double.js
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Node Express Theme — Node Express Dark Professional
button.hoverBackground
#388E3C
dropdown.background #151A15
dropdown.border #1A321A
dropdown.foreground #FFFFFF
editor.background #101410
editor.foreground #D0E0D0
editor.inactiveSelectionBackground #1B5E2030
editor.lineHighlightBackground #1A241A
editor.selectionBackground #2E7D3240
editorCursor.foreground #8BC34A
editorGroupHeader.tabsBackground #151A15
editorWhitespace.foreground #1B2A1B
input.background #151A15
input.border #1A321A
input.foreground #FFFFFF
inputOption.activeBorder #8BC34A
minimap.background #10141080
minimapSlider.activeBackground #2E7D3260
minimapSlider.background #1A241A40
minimapSlider.hoverBackground #1A241A60
panel.background #101410
panelTitle.activeForeground #FFFFFF
panelTitle.inactiveForeground #FFFFFF80
scrollbarSlider.activeBackground #388E3C60
scrollbarSlider.background #1A241A70
scrollbarSlider.hoverBackground #2E7D3240
sideBar.background #181D18
sideBar.foreground #FFFFFF
sideBarSectionHeader.background #151A15
sideBarTitle.foreground #FFFFFF
statusBar.background #2E7D32
statusBar.foreground #FFFFFF
statusBarItem.hoverBackground #388E3C
statusBarItem.remoteBackground #151A15
tab.activeBackground #101410
tab.activeForeground #FFFFFF
tab.border #151A15
tab.inactiveBackground #151A15
tab.inactiveForeground #FFFFFF80
terminal.ansiBlue #42A5F5
terminal.ansiBrightBlue #64B5F6
terminal.ansiBrightCyan #4DD0E1
terminal.ansiBrightGreen #9CCC65
terminal.ansiBrightMagenta #CE93D8
terminal.ansiBrightRed #EF5350
terminal.ansiBrightWhite #E4F1E4
terminal.ansiBrightYellow #FFEE58
terminal.ansiCyan #26C6DA
terminal.ansiGreen #8BC34A
terminal.ansiMagenta #BA68C8
terminal.ansiRed #F44336
terminal.ansiYellow #FFEB3B
terminal.background #101410
terminal.foreground #D0E0D0
titleBar.activeBackground #121512
titleBar.activeForeground #FFFFFF
titleBar.inactiveBackground #12151299
titleBar.inactiveForeground #FFFFFF99 constant.numeric.js #9CB590 —
comment.line.double-slash.js, comment.block.js #4C7A40 italic
comment, punctuation.definition.comment #546E7A italic
variable, string constant.other.placeholder #EEFFFF —
constant.other.color #ffffff —
invalid, invalid.illegal #FF5370 —
keyword, storage.type, storage.modifier #C792EA —
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 #89DDFF —
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 #7CB342 bold
meta.block variable.other #8BC34A —
support.other.variable, string.other.link #FF8A65 —
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 #C3E88D —
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types #FFCB6B —
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 #B2CCD6 —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #FF5370 —
variable.language #FF5370 italic
entity.name.method.js #82AAFF italic
meta.class-method.js entity.name.function.js, variable.function.constructor #FF9E80 —
entity.other.attribute-name #FF8A65 —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #FFAB91 italic
entity.other.attribute-name.class #FFCB6B —
source.sass keyword.control #82AAFF —
constant.character.escape #89DDFF —
*url*, *link*, *uri* — underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #82AAFF 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 #A5D6A7 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #81C784 —
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 #82AAFF —
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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #C792EA —
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 #C3E88D —
text.html.markdown, punctuation.definition.list_item.markdown #EEFFFF —
text.html.markdown markup.inline.raw.markdown #C792EA —
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 #C3E88D —
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 #82AAFF —
string.other.link.description.title.markdown #C792EA —
constant.other.reference.link.markdown #FFCB6B —
markup.raw.block.fenced.markdown #00000050 —
punctuation.definition.fenced.markdown #00000050 —
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end #EEFFFF —
variable.language.fenced.markdown #65737E —
meta.separator #65737E bold
entity.name.type.class.php, entity.name.function.php #FF7043 bold
support.other.namespace.php #FFAB91 —
constant.other.inline-data.html, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php #FF5722 bold
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*
Node Express Theme | Coding Theme
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 } ! ` ;
}