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.background #2f3133 editor.background #363539 editor.lineHighlightBackground #1672a72c editor.selectionHighlightBackground #29527e editor.selectionHighlightBorder #29527e editorGroup.dropBackground #363539 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle meta.function.method.with-arguments.ruby, constant.language.directive.module.http, constant.language.directive.module.main, constant.language.module.http.fastcgi, variable.other.positional.shell, support.type.property-name.json, variable.legacy.builtin.python, entity.name.type.class.ruby, variable.other.normal.shell, variable.other.property.php, variable.other.readwrite.js, variable.language.this.js, variable.other.block.ruby, support.constant.std.php, variable.other.object.js, variable.parameter.js, variable.other.php, constant.other.php, meta.module.ruby #9876AA — variable.other.constant.ruby #9876AA italic string.quoted.single.python, string.quoted.single.shell, string.quoted.double.json, string.quoted.single.ruby, string.quoted.single.scss, string.quoted.single.yaml, string.quoted.single.html, string.quoted.other.ruby, string.quoted.single.css, string.quoted.single.php, string.quoted.single.xml, string.quoted.single.js #6A8759
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Full Darcula Theme — Full Darcula Theme
editorGroup.emptyBackground #363539
editorGroupHeader.tabsBackground #3C3F41
editorGroupHeader.tabsBorder #4B4B4B
input.background #45494A
input.border #5C5D5E
menu.background #3C3F41
menu.foreground #BBBBBB
menu.selectionBackground #4B6EAF
menu.separatorBackground #515151
sideBar.background #3C3F41
sideBar.border #323232
sideBarSectionHeader.background #3B4754
sideBarSectionHeader.border #323232
sideBarSectionHeader.foreground #BBBBBB
sideBarTitle.foreground #BBBBBB
tab.activeBackground #515658
tab.activeBorder #439EB8
tab.activeBorderTop #515658
tab.activeForeground #C9C9C9
tab.border #4B4B4B
tab.inactiveBackground #3C3E3F
tab.inactiveForeground #C9C9C9 constant.language.symbol.hashkey.ruby, constant.language.symbol.ruby, meta.object-literal.key.js #6E9CBE —
punctuation.definition.array.begin.json.comments, punctuation.definition.array.end.json.comments, punctuation.definition.dictionary.begin.json, punctuation.definition.sequence.begin.yaml, punctuation.definition.dictionary.end.json, punctuation.definition.mapping.begin.yaml, punctuation.separator.array.json.comments, punctuation.definition.sequence.end.yaml, punctuation.definition.dict.begin.python, punctuation.definition.mapping.end.yaml, punctuation.definition.dict.end.python, meta.structure.dictionary.value.json, punctuation.separator.sequence.yaml, keyword.operator.assignment.python, punctuation.separator.colon.python, keyword.operator.comparison.python, keyword.operator.arithmetic.shell, punctuation.separator.dict.python, keyword.operator.comparison.ruby, punctuation.separator.key-value, keyword.operator.relational.js, keyword.operator.comparison.js, keyword.operator.logical.shell, keyword.operator.logical.js, constant.character.brace, constant.character.end, source.yaml #fff —
keyword.operator.assignment.augmented.ruby, punctuation.separator.inheritance.ruby, punctuation.section.embedded.begin.php, constant.language.module.http.rewrite, support.function.construct.output.php, punctuation.section.embedded.end.php, punctuation.separator.variable.ruby, keyword.control.pseudo-method.ruby, entity.other.attribute-name.id.css, constant.language.boolean.false.js, constant.language.boolean.true.js, keyword.control.start-block.ruby, keyword.operator.logical.python, support.function.construct.php, keyword.control.conditional.js, constant.language.boolean.ruby, constant.language.undefined.js, support.function.builtin.shell, keyword.operator.logical.php, keyword.control.foreach.php, variable.language.self.ruby, keyword.control.flow.python, keyword.control.module.ruby, constant.language.nil.ruby, keyword.control.endfor.php, keyword.control.class.ruby, constant.language.null.js, keyword.control.endif.php, storage.type.function.js, keyword.control.def.ruby, keyword.control.else.php, keyword.control.flow.js, keyword.control.die.php, keyword.operator.new.js, keyword.control.if.php, constant.language.json, keyword.control.shell, constant.language.php, entity.name.tag.haml, keyword.control.ruby, entity.name.tag.yaml, entity.name.tag.css, support.class.php, storage.type.js #CC7832 —
entity.other.inherited-class.module.first.ruby, keyword.other.special-method.ruby, keyword.control.import.python, entity.name.type.js, support.class.ruby #DA4939 —
meta.structure.array.json.comments, comment.line.number-sign.python, comment.line.number-sign.shell, comment.line.number-sign.ruby, comment.line.double-slash.php, comment.block.html, comment.block.css, comment.block.php, comment #808080 —
punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js, punctuation.terminator.statement.js, punctuation.section.scope.end.ruby, punctuation.definition.block.js, keyword.operator.assignment.js, string.unquoted.plain.out.yaml, variable.other.property.js, punctuation.accessor.js, meta.brace.square.js, meta.brace.round.js, source.python, source.nginx, source.ruby, source.php, text.haml #A9B7C6 —
punctuation.definition.tag.begin.html, entity.other.attribute-name.class.css, support.function.basic_functions.php, punctuation.definition.tag.end.html, meta.function-call.generic.python, support.function.builtin.python, support.constant.font-name.css, punctuation.definition.tag.xml, entity.name.tag.localname.xml, support.variable.property.js, support.function.console.js, entity.name.tag.class.haml, support.function.misc.css, entity.name.function.ruby, support.function.info.php, entity.name.function.php, entity.name.tag.id.haml, entity.name.function.js, entity.name.tag.html, support.function.js #FFC66D —
string.quoted.double.interpolated.ruby, string.quoted.double.shell, string.quoted.double.html, string.quoted.double.scss, string.quoted.double.yaml, string.quoted.double.css, string.quoted.double.php, string.quoted.double.xml, string.quoted.double.js #4B7B3D —
variable.other.readwrite.instance.ruby, variable.other.readwrite.class.ruby #D0D0FF —
support.constant.property-value.css, keyword.other.unit.percentage.css, constant.numeric.integer.yaml, constant.numeric.decimal.js, keyword.other.unit.rem.css, keyword.other.unit.px.css, keyword.other.unit.em.css, constant.numeric.json, constant.numeric.ruby, constant.numeric.css, constant.numeric.css, constant.numeric #A5C261 —
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 }!` ;
}
Full Darcula Theme | Coding Theme