Darcula Mono

Name: Darcula Mono
Author: killidia

Publisher: killidiaThemes in package: 1

Darcula theme like JetBrains Mono website

GitHub

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Darcula Mono — Darcula Mono

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#1a1b1e
activityBarBadge.background#007acc
badge.background#167dffcc
editor.background#1a1b1e
editor.foreground#a9b7c6
editor.lineHighlightBackground#1a1b1e
editor.selectionBackground#167dff4d
editorGroupHeader.tabsBackground#1a1b1e
editorGroupHeader.tabsBorder#ffffff0d
editorGutter.background#1a1b1e
editorIndentGuide.activeBackground#ffffff33
editorIndentGuide.background#ffffff0d
editorLineNumber.activeForeground#ffffff
editorLineNumber.foreground#ffffff33
editorSuggestWidget.background#1a1b1e
editorSuggestWidget.highlightForeground#cc7832
editorSuggestWidget.selectedBackground#167dff4d
menu.background#1a1b1e
sideBar.background#1a1b1e
sideBar.border#ffffff0d
sideBarSectionHeader.background#1a1b1e
statusBar.background#1a1b1e
statusBar.foreground#a9b7c6
tab.activeBackground#1a1b1e
tab.activeBorder#167dffcc
tab.inactiveBackground#1a1b1e
titleBar.activeBackground#1a1b1e
titleBar.activeForeground#ffffff
titleBar.inactiveBackground#1a1b1e
tree.indentGuidesStroke#ffffff33

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#ffffff4d	—
keyword.operator,keyword.operator.logical,keyword.operator.relational,keyword.operator.assignment,keyword.operator.comparison,keyword.operator.ternary,keyword.operator.arithmetic,keyword.operator.spread	#a9b7c6	—
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	#cc7832	—
expression.string,meta.template.expression	#a9b7c6	—
constant.numeric	#6897bb	—
constant.language,variable.language	#cc7832	—
constant.character, constant.other	#9876aa	—
keyword,keyword.operator.new,keyword.operator.delete,keyword.operator.static,keyword.operator.this,keyword.operator.expression	#cc7832	—
entity.name.type,meta.return.type,meta.type.annotation,meta.type.parameters,support.type.primitive	#6897bb	—
storage,storage.type,storage.modifier,storage.arrow	#cc7832	—
class.instance.constructor,new.expr entity.name.type	#ffc66d	—
support.function, entity.name.function	#ffc66d	—
annotation.meta.ts, annotation.meta.tsx	#a9b7c6	—
variable.parameter, operator.rest.parameters	#a9b7c6	—
variable.property,variable.other.property,variable.other.object.property,variable.object.property,support.variable.property	#9876aa	—
quote.module	#6a8759	—
markup.heading	#cc7832	—
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end, entity.name.tag	#ffc66d	—
entity.other.attribute-name	#a9b7c6	—
meta.object-literal.key	#9876aa	—
storage.modifier.ts	#cc7832	—
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	#20999d	—
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	#20999d	—
function-declaration,method-declaration,method-overload-declaration,type-fn-type-parameters	#ffc66d	—
comment.block.documentation	#ffffff4d	—
storage.type.class.jsdoc	#cc7832	—
constant.language.import-export-all	#a9b7c6	—
objectliteral.key.separator, punctuation.separator.key-value	#a9b7c6	—
regex	—	italic
ts.meta.entity.name.namespace,tsx.meta.entity.name.namespace	#a9b7c6	—
regex.character-class	#a9b7c6	—
entity.name.type.class	#a9b7c6	—
entity.other.inherited-class	#20999d	—
entity.name.type.instance.jsdoc	#ffc66d	—
yaml.entity.name,yaml.string.entity.name	#cc7832	—
yaml.string.out	#a9b7c6	—
meta.brace.square.ts,block.support.module,block.support.type.module,block.support.function.variable,punctuation.definition.typeparameters.begin,punctuation.definition.typeparameters.end	#a9b7c6	—
string.regexp	#cc7832	—
punctuation.definition.group.regexp,punctuation.definition.character-class.regexp	#ffc66d	—
constant.other.character-class.regexp, constant.character.escape.ts	#a9b7c6	—
expr.regex.or.operator	#a9b7c6	—
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	#a9b7c6	—
object-literal.object.member.key.field.other,object-literal.object.member.key.accessor,object-literal.object.member.key.array.brace.square	#a9b7c6	—
property-list.property-value,property-list.constant	#afbf7e	—
support.type.property-name.variable.css,support.type.property-name.variable.scss,variable.scss	#20999d	—
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	#20999d	—
property-list.property-value.function	#ffc66d	—
support.constant.property-value.css,support.constant.property-value.scss	#afbf7e	—
css.entity.name.tag,scss.entity.name.tag	#cc7832	—
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	#cc7832	—
triple-slash.tag	#a9b7c6	italic
token.info-token	#6897bb	—
token.warn-token	#f3c033	—
token.error-token	#ef341e	—
token.debug-token	#9876aa	—
keyword.operator.logical.python	#cc7832	—
support.class.dart	#cc7832	—
variable.language.php, variable.other.php	#9876aa	—
variable.other.readwrite.perl	#9876aa	—
variable.other.property.php	#cc7832	—
support.variable.property.php	#ffc66d	—

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}!`;
}