Skip to main content
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 #161616 activityBarBadge.background #000000 breadcrumb.background #161616 editor.background #0f0f0f editor.foreground #eeffff editor.selectionBackground #4d992a85 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #5e778f — constant #e27e8d — entity #70e1e8 — invalid #d95468 — keyword
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
editorGroupHeader.tabsBackground
#161616
editorLineNumber.activeForeground #ffffff
sideBar.background #161616
sideBar.foreground #ffffff
sideBarTitle.foreground #bbbbbb
statusBar.background #d7ff52
statusBar.foreground #000000
titleBar.activeBackground #161616
#5ec4ff
storage.type.class.js #0097a1 —
punctuation.definition.parameters #68A1F0 —
variable.parameter, entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql #ebbf83 —
punctuation.definition.template-expression #68A1F0 —
storage.type.function.arrow #008B94 —
string, punctuation.definition.string #98d66f —
string.template, punctuation.definition.string.template #718CA1 —
support.class.component.js, support.class.component.jsx, support.class.component.ts, support.class.component.tsx #70e1e8 —
storage.modifier.async.tsx, storage.modifier.async.ts, storage.modifier.async.js, storage.modifier.async.jsx, keyword.operator.new.js, keyword.control.flow.js, keyword.control.flow.jsx, keyword.control.flow.ts, keyword.control.flow.tsx #5ec4ff italic
support.variable.property.dom, support.constant.math.js, support.constant.math.jsx, support.constant.math.ts, support.constant.math.jsx, support.class.console.js, support.class.console.jsx, support.class.console.ts, support.class.console.tsx #b7c5d3 —
source.css, source.stylus, source.scss, entity.other.attribute-name.class.css #68A1F0 —
punctuation.definition.constant.css #D95468 —
constant.other.color.rgb-value.hex.css #E27E8Dff —
support.type.property-name.css #B7C5D3 —
keyword.other.important.scss #b62d65 —
entity.other.attribute-name.pseudo-element.css #5EC4FF —
support.function.misc.scss #B7C5D3 —
entity.other.attribute-name.id.css, punctuation.definition.entity.css #68A1F0 —
entity.name.tag.css #68A1F0 —
source.css support, source.stylus support #B7C5D3 —
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant #e27e8d —
support.constant.property-value.css #68A1F0 —
keyword.other.unit.px.css, keyword.other.unit.percentage.css, constant.other.color.rgb-value.hex.css, keyword.other.unit.ms.css, keyword.other.unit.s.css, keyword.other.unit.vh.css, keyword.other.unit.vw.css, keyword.other.unit.deg.css #d95468 —
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string #718CA1 —
source.css variable, source.stylus variable #ebbf83 —
punctuation.definition.tag.end.html, punctuation.definition.tag.begin.html #68A1F0 —
entity.name.tag.block.any.html, meta.tag.block.any.html, entity.name.tag.inline.any.html, entity.name.tag.structure.any.html, meta.tag.inline.any.html, entity.name.tag.html, entity.name.tag.js, entity.name.tag.jsx, entity.name.tag.ts, entity.name.tag.tsx, meta.tag.js #008b94 —
punctuation.definition.string.begin, punctuation.definition.string.end #718CA1 —
source.js storage.type.function #008B94 —
variable.language, entity.name.type.class.js, entity.other.inherited-class.js, variable.language.this.ts, variable.language.this.java, variable.language.this.js #d98e48 —
entity.other.inherited-class.js, variable.other.readwrite.alias.js, meta.import.js, punctuation.accessor.js, punctuation.accessor.jsx, punctuation.accessor.ts, punctuation.accessor.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.readwrite.js, variable.other.readwrite.jsx #B7C5D3 —
variable.other.constant.js, variable.other.constant.js.jsx, variable.other.constant.ts, variable.other.constant.property.ts, variable.other.constant.property.js, variable.other.constant.property.tsx, variable.other.constant.tsx, support.constant.json.js, support.constant.json.ts, support.constant.json.tsx, variable.other.constant.object.js, variable.object.property.js, variable.object.property.jsx, variable.object.property.ts, variable.object.property.tsx #8BD49C —
variable.parameter.function.language.special.self.python #b62d65 —
storage.type.function.python #b62d65 —
meta.function-call.arguments.python #8bd49c —
meta.function-call.generic.python #008b94 —
source.json support #68A1F0 —
source.json string, source.json punctuation.definition.string, punctuation.definition.string.end.json, punctuation.definition.string.begin.json #B7C5D3 —
source.php entity #9effff —
variable.other.php, punctuation.definition.variable.php #ebbf83 —
entity.other.inherited-class.java #d98e48 —
storage.type.annotation.java, storage.type.annotation.ts, entity.name.type.ts #b7c5d3 italic
storage.type.java, support.type.primitive.ts, support.type.primitive.tsx, entity.name.type.ts, entity.name.type.tsx #008b94 italic
support.type.primitive.ts #33ced8 italic
storage.modifier.java, storage.modifier.ts, storage.modifier.js, storage.modifier.jsx #5ec4ff —
entity.name.type.class.java #d98e48 —
variable.language.java, meta.try.resources.java, variable.language.super.ts #b62d65 —
variable.other.definition.java, meta.try.resources.java #8bd49c —
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 } !` ;
}
Lights Off | Coding Theme