Skip to main content
Darcula VSCode | Coding Theme
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 #3c3f41 activityBar.border #2b2b2b activityBarBadge.background #007acc badge.background #ffffff1a editor.background #2b2b2b editor.foreground #cccccc tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment #707070 — keyword.operator,keyword.operator.logical,keyword.operator.relational,keyword.operator.assignment,keyword.operator.comparison,keyword.operator.ternary,keyword.operator.arithmetic,keyword.operator.spread #CCCCCC — string,string.character.escape,string.template.quoted,string.template.quoted.punctuation,string.template.quoted.punctuation.single,string.template.quoted.punctuation.double,string.type.declaration.annotation,string.template.quoted.punctuation.tag #6A8759 — punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
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}!`;
}
Darcula VSCode — Darcula VSCode
3
Open Editors fetchUser.ts index.ts README.md fetchUser.ts
index.ts
README.md
src main*
0 1
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Dark+
editor.lineHighlightBackground
#ffffff0b
editor.selectionBackground #204182cc
editor.snippetTabstopHighlightBackground #00000000
editorBracketMatch.background #2b2b2b
editorBracketMatch.border #626262
editorGroupHeader.tabsBackground #3c3f41
editorGutter.background #313335
editorIndentGuide.activeBackground #515151
editorIndentGuide.background #3c3f41
editorSuggestWidget.background #3c3f41
editorSuggestWidget.highlightForeground #cc6e2f
editorSuggestWidget.selectedBackground #204182cc
focusBorder #3c3f4100
list.activeSelectionBackground #2b2b2b
list.hoverBackground #313335
list.inactiveSelectionBackground #313335aa
menu.background #3c3f41
sideBar.background #3c3f41
sideBar.border #313335
statusBar.background #3c3f41
statusBar.border #2b2b2b
statusBar.foreground #cccccc
statusBar.noFolderBackground #3c3f41
tab.activeBackground #4e5254
tab.activeBorder #cccccc
tab.inactiveBackground #3c3f41
tab.inactiveForeground #ffffff55
titleBar.activeBackground #3c3f41
titleBar.activeForeground #cccccc
titleBar.border #515151
titleBar.inactiveBackground #3c3f41
#CC8242
expression.string,meta.template.expression #CCCCCC —
constant.language,variable.language #CC8242 —
constant.character, constant.other #9E7BB0 —
keyword,keyword.operator.new,keyword.operator.delete,keyword.operator.static,keyword.operator.this,keyword.operator.expression #CC8242 —
entity.name.type,meta.return.type,meta.type.annotation,meta.type.parameters,support.type.primitive #7A9EC2 —
storage,storage.type,storage.modifier,storage.arrow #CC8242 —
class.instance.constructor,new.expr entity.name.type #FFC66D —
support.function, entity.name.function #FFC66D —
annotation.meta.ts, annotation.meta.tsx #CCCCCC —
variable.parameter, operator.rest.parameters #CCCCCC —
variable.property,variable.other.property,variable.other.object.property,variable.object.property,support.variable.property #9E7BB0 —
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end, entity.name.tag #FFC66D —
entity.other.attribute-name #CCCCCC —
meta.object-literal.key #9E7BB0 —
storage.modifier.ts #CC8242 —
ts.cast.expr,ts.meta.entity.class.method.new.expr.cast,ts.meta.entity.type.name.new.expr.cast,ts.meta.entity.type.name.var-single-variable.annotation,tsx.cast.expr,tsx.meta.entity.class.method.new.expr.cast,tsx.meta.entity.type.name.new.expr.cast,tsx.meta.entity.type.name.var-single-variable.annotation #7A9EC2 —
ts.meta.type.support,ts.meta.type.entity.name,ts.meta.class.inherited-class,tsx.meta.type.support,tsx.meta.type.entity.name,tsx.meta.class.inherited-class,type-declaration,enum-declaration #7A9EC2 —
function-declaration,method-declaration,method-overload-declaration,type-fn-type-parameters #FFC66D —
comment.block.documentation #6A8759 —
storage.type.class.jsdoc #CC8242 —
constant.language.import-export-all #CCCCCC —
objectliteral.key.separator, punctuation.separator.key-value #CCCCCC —
ts.meta.entity.name.namespace,tsx.meta.entity.name.namespace #CCCCCC —
regex.character-class #CCCCCC —
entity.name.type.class #CCCCCC —
entity.other.inherited-class #7A9EC2 —
entity.name.type.instance.jsdoc #FFC66D —
yaml.entity.name,yaml.string.entity.name #CC8242 —
meta.brace.square.ts,block.support.module,block.support.type.module,block.support.function.variable,punctuation.definition.typeparameters.begin,punctuation.definition.typeparameters.end #CCCCCC —
punctuation.definition.group.regexp,punctuation.definition.character-class.regexp #FFC66D —
constant.other.character-class.regexp, constant.character.escape.ts #CCCCCC —
expr.regex.or.operator #CCCCCC —
string.template.tag,string.template.punctuation.tag,string.quoted.punctuation.tag,string.quoted.embedded.tag, string.quoted.double.tag #6A8759 —
tag.punctuation.begin.arrow.parameters.embedded,tag.punctuation.end.arrow.parameters.embedded #CCCCCC —
object-literal.object.member.key.field.other,object-literal.object.member.key.accessor,object-literal.object.member.key.array.brace.square #CCCCCC —
property-list.property-value,property-list.constant #A5C261 —
support.type.property-name.variable.css,support.type.property-name.variable.scss,variable.scss #7A9EC2 —
entity.other.attribute-name.class.css,entity.other.attribute-name.class.scss,entity.other.attribute-name.parent-selector-suffix.css,entity.other.attribute-name.parent-selector-suffix.scss #FFC66D —
property-list.property-value.rgb-value, keyword.other.unit.css,keyword.other.unit.scss #7A9EC2 —
property-list.property-value.function #FFC66D —
support.constant.property-value.css,support.constant.property-value.scss #A5C261 —
css.entity.name.tag,scss.entity.name.tag #CC8242 —
meta.selector.css, entity.attribute-name.id, entity.other.attribute-name.pseudo-class.css,entity.other.attribute-name.pseudo-element.css #FFC66D —
keyword.scss,keyword.css #CC8242 —
triple-slash.tag #CCCCCC italic
token.error-token #F44747 —
token.debug-token #B267E6 —
keyword.operator.logical.python #CC8242 —
support.class.dart #CC8242 —
variable.language.php, variable.other.php #9E7BB0 —
variable.other.readwrite.perl #9E7BB0 —
variable.other.property.php #CC8242 —
support.variable.property.php #FFC66D —
keyword, entity.name.tag.css #CC7832 —
punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, punctuation.definition.entity.begin.bracket.square.css, punctuation.definition.entity.end.bracket.square.css, support.type.property-name.json.comments #A9B7C6 —
entity.name.tag, entity.other.attribute-name.css, entity.other.attribute-name.id.css, entity.other.attribute-name.class.css, entity.name.function #E8BF6A —
support.constant.property-value.css, support.constant.vendored.property-value.css, support.function.calc.css, support.function.url.css, string.quoted.double.json.comments, meta.property-value.css #7A9EC2 —
keyword.other.unit.px.css, keyword.other.unit.vw.css, keyword.other.unit.vh.css, keyword.other.unit.percentage.css, keyword.other.unit.deg.css, keyword.other.unit.s.css, keyword.other.unit.em.css, keyword.other.unit.rem.css, support.function.construct.output.php, keyword.operator.logical.php #9E7BB0 —
text.html.php, text.html.derivative, entity.name.type.class, keyword.operator, keyword.operator.assignment, entity.other.attribute-name, source.css, punctuation.separator.key-value, source.js, keyword.operator.comparison, keyword.operator.logical, keyword.operator.arithmetic.js, variable.parameter.js #BABABA —
fetchUser.ts Button.tsx Modal.tsx hooks utils index.ts public package.json tsconfig.json README.md Outline 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
31
32
33
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}!`;
}
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 $