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.
breadcrumb.background #242430 breadcrumb.foreground #cbcbda editor.background #1f1f29 editor.foreground #e1e1e2 editor.lineHighlightBackground #23262D editor.selectionBackground #222e42 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #5C6370 italic string.quoted.docstring.multi.python, string.quoted.docstring.multi.python keyword.control.flow.python #5C6370 italic meta.brace.round.begin, meta.brace.round.end, meta.brace.square.begin, meta.brace.square.end, meta.brace.curly.begin.js, meta.brace.curly.end.js, meta.group.braces.round.function.arguments #ABB2BF — string #f0c369 —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Mockingbird Theme — Mockingbird
editorCursor.foreground
#F7FFF7
editorLink.activeForeground #cf84e6
editorWhitespace.foreground #383C44
sideBar.background #242430
sideBar.border #1d1d27
sideBar.foreground #e1e1e2
sideBarSectionHeader.background #242430
sideBarSectionHeader.foreground #c2c2c4
sideBarTitle.foreground #c2c2c4
statusBar.background #242430
statusBar.foreground #e1e1e2
titleBar.activeBackground #1f1f29 string.detected-link #C678DD —
constant.numeric, constant.language, markdown.python.constant.numeric, constant.boolean #D5BF9D —
constant.character #56B6C2 —
constant.character.escape.backslash.regexp #98C379 —
constant.character.format.placeholder.other.python #D19A66 —
constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js #56B6C2 —
variable.other.object #FCA311 —
meta.property.object.js #D19A66 —
variable.other.class, meta.class.property variable.other.property #E06C75 —
variable.other, meta.class.object.property.js, meta.property.class variable.other.property.static #FFCAD4 —
variable.other.readwrite #cad4ff —
meta.group.braces variable.other.readwrite #ABB2BF —
variable.language, meta.class variable.other.readwrite #f3a683 —
variable.language.prototype #E06C75 —
python.support.magic.variable #E06C75 —
variable.function, entity.name.function, entity.name.function.arrow, meta.class-method.js entity.name.function.js, meta.method.property.js entity.name.function.js #75aef8 —
meta.function-call.generic.python #61AFEF —
meta.function.decorator.python #56B6C2 —
variable.function.constructor #E5C07B —
keyword.control, keyword.operator.new, keyword.operator.module, variable.language.super #f8a5c2 —
meta.preprocessor, entity.name.function.preprocessor #C678DD —
entity.name.function.preprocessor #E5C07B —
meta.namespace.identifier entity.name.type, entity.name.variable #E5C07B —
cs.meta.namespace.function.identifier.body.class.method #61AFEF —
storage.type.cs, storage.type.variable.cs #56B6C2 —
keyword, keyword.other.namespace, storage.modifier #C678DD —
keyword.operator.logical.python #C678DD —
keyword.other.substitution.begin, keyword.other.substitution.end #56B6C2 —
keyword.operator.accessor #ABB2BF —
keyword.operator, constant.other.color, punctuation.separator.key-value #56B6C2 —
keyword.regexp, keyword.operator.quantifier.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp #98C379 —
python.keyword.operator #56B6C2 —
entity.name.class, meta.class.extends variable.other.readwrite #E5C07B
entity.other.inherited-class #E5C07B italic underline
variable.parameter #b8dcf7 italic
variable.parameter.function.language.python #D19A66
entity.other.attribute-name.html, entity.other.attribute-name.js, entity.other.attribute-name.jsx #66d193 italic
selector.css.entity.other.attribute-name #E5C07B —
support.function, support.class support.function #56B6C2 italic
python.builtin.support.function #C678DD
python.meta.function-call.builtin.support.function, python.meta.type.support.function-call, python.meta.variable.function-call.legacy.builtin #E5C07B
meta.type.support.inheritance.python #56B6C2
entity.name.type.class.python #E5C07B —
support.type, support.class #E5C07B
css.property-list.property-name #56B6C2
invalid.deprecated #523D14 —
meta.structure.dictionary.json support.type.property-name #E06C75 —
meta.structure.dictionary.json string.quoted.double.json #98C379 —
meta.structure.dictionary.json string.quoted.double.detected-link #C678DD —
string.other.link.title.markdown, string.other.link.description.markdown, meta.paragraph.markdown entity.name.tag.inline.any #61AFEF —
markup.underline.link.markdown, markup.underline.link.image.markdown #C678DD —
markup.bold.markdown — bold
markup.fenced_code.block.markdown, markup.fenced.code.block.markdown, markup.raw.inline.markdown, markdown.block.raw #56B6C2 —
markup.fenced_code.block.markdown fenced_code.block.language, markup.fenced.code.block.markdown fenced.code.block.language #D19A66 —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown, punctuation.definition.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.raw.markdown, meta.paragraph.markdown punctuation.definition.tag #56B6C2 —
markdown.fenced_code.block.markdown constant.numeric, markdown.fenced.code.block.markdown constant.numeric, markdown.fenced_code.block.markdown constant.language, markdown.fenced.code.block.markdown constant.language #D19A66 —
markdown.block.fenced.code.string, markdown.block.fenced.code.string.quote #98C379 —
markup.fenced_code.block.markdown keyword.operator, markup.fenced_code.block.markdown keyword.operator.logical.python, markup.fenced.code.block.markdown keyword.operator, markup.fenced_code.block.markdown keyword.control, markup.fenced.code.block.markdown keyword.control, markup.fenced_code.block.markdown storage.type, markup.fenced_code.block.markdown storage.type.function.lambda, markdown.block.fenced.code.lambda.storage.type #61AFEF —
markdown.block.fenced.code.operator.assignment #ABB2BF —
markdown.block.variable.parameter #D19A66 —
meta.diff, meta.diff.header #75715E —
constant.numeric.line-number.find-in-files - match #AE81FFA0 —
entity.name.filename.find-in-files #E6DB74 —
jinja.statement.begin.sql, jinja.statement.end.sql #61AFEF —
jinja.expression.begin.sql, jinja.expression.end.sql #61AFEF —
jinja.keyword.control.sql #E06C75 —
jinja.operator.accessor.sql #61AFEF —
jinja.object.function.sql, jinja.object.property.sql, jinja.function.sql #56B6C2 —
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 }!` ;
}
Mockingbird Theme | Coding Theme