Darcula Storm

Name: Darcula Storm
Author: Vonalbert

Publisher: VonalbertThemes in package: 1

A theme extension for VS Code based on PHPStorm's Darcula theme

Open in VS Code GitHub

VS Code preview

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

Darcula Storm — Darcula Storm

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#ffffff1a
activityBarBadge.background#4a88c7
badge.background#ffffff1a
editor.background#232525
editor.foreground#a9b7c6
editor.lineHighlightBackground#323232
editor.selectionBackground#214283
editorGutter.background#313335
editorLineNumber.activeForeground#a4a3a3
editorLineNumber.foreground#606366
editorSuggestWidget.background#303030
editorSuggestWidget.highlightForeground#cc6e2f
editorSuggestWidget.selectedBackground#204182cc
sideBar.background#3c3f41
sideBar.border#333436
sideBar.foreground#b6b4b3
sideBar.inactiveBackground#3c3f41
sideBarSectionHeader.background#3b4754
sideBarSectionHeader.border#333436
statusBar.background#313335
statusBar.border#333436
statusBar.foreground#a9b7c6
tab.activeBackground#ffffff1a
tab.activeBorder#4a88c7
tab.inactiveBackground#ffffff0b
titleBar.activeBackground#ffffff1a
titleBar.activeForeground#a9b7c6
titleBar.inactiveBackground#ffffff10

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#808080	—
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	—
constant.character.escape	#CC7832
expression.string, meta.template.expression, string.quoted.double punctuation.definition.variable.php, string.unquoted.heredoc punctuation.definition.string.php, string.unquoted.heredoc punctuation.definition.variable.php, string.quoted.double punctuation.definition.arguments.begin.bracket.round.php, string.quoted.double punctuation.definition.arguments.end.bracket.round.php, string.unquoted.heredoc punctuation.definition.arguments.begin.bracket.round.php, string.unquoted.heredoc punctuation.definition.arguments.end.bracket.round.php, string.quoted.double punctuation.section.array.begin.bracket.round.php, string.quoted.double punctuation.section.array.end.bracket.round.php, string.unquoted.heredoc punctuation.section.array.begin.php, string.unquoted.heredoc punctuation.section.array.end.php, string.quoted.template.js entity.name.type.instance.js, string.quoted.template.js variable.other.object.js, string.quoted.template.js punctuation.quasi.element.begin.js, string.quoted.template.js punctuation.quasi.element.end.js, string.quoted.template.js entity.quasi.element.js meta.brace.round.js, string.quoted.template.js variable.other.constant.js, string.quoted.template.js variable.other.readwrite.js	#a9b7c6	—
constant.numeric, constant.character.entity, constant.character.entity entity.name.tag.html, constant.other.color.rgb-value	#7A9EC2
constant.language, variable.language	#CC7832	—
constant.character, constant.other	#9E7BB0	italic
keyword, keyword.operator.new, keyword.operator.delete, keyword.operator.static, keyword.operator.this, keyword.operator.type, keyword.operator.expression, keyword.operator.typeof.js	#CC7832	—
punctuation.terminator.statement, punctuation.terminator.expression, punctuation.separator.delimiter, meta.delimiter.comma, punctuation.terminator.rule	#CC7832	—
storage, storage.type, storage.modifier, storage.arrow	#CC7832	—
storage.type.function.arrow	#a9b7c6	—
class.instance.constructor, support.function.constructor, new.expr entity.name.type, support.function, support.function.magic, entity.name.function, meta.method-call.php entity.name.function.php, meta.function.php entity.name.function.php	#FFC66D	—
support.function.construct.php, support.function.construct.output.php	#CC7832	—
meta.function-call entity.name.function	#a9b7c6	—
meta.type.annotation	#a9b7c6	—
variable.parameter, operator.rest.parameters	#a9b7c6	—
variable.property, variable.other.property, variable.other.object.property, variable.object.property, support.variable.property	#9E7BB0	—
support.type.object.console, support.type.object.dom	#9E7BB0	bold
quote.module	#6A8759	—
markup.heading	#CC7832	—
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end, entity.name.tag, punctuation.definition.tag.jsx	#FFC66D	—
entity.other.attribute-name	#bababa	—
JSXAttrs keyword.operator.assignment, text.html.twig meta.tag.block.any.html, text.html.twig meta.tag.inline.any.html	#6A8759	—
meta.object-literal.key, constant.other.object.key.js string.unquoted.js	#9E7BB0
constant.other.object.key.js string.quoted.double.js	—
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	#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	#629755	—
storage.type.class.jsdoc	#CC7832	—
keyword.other.phpdoc.php	#629755	bold
comment.block.documentation.phpdoc.php meta.other.type.phpdoc.php, comment.block.documentation.phpdoc.php meta.other.type.phpdoc.php keyword.other.type, comment.block.documentation.phpdoc.php keyword.other.array.phpdoc.php	#a9b7c6
constant.language.import-export-all	#a9b7c6	—
objectliteral.key.separator, punctuation.separator.key-value	#a9b7c6	—
ts.meta.entity.name.namespace,tsx.meta.entity.name.namespace	#a9b7c6	—
entity.name.type.class, entity.name.type.interface, entity.name.type.trait.php, entity.other.inherited-class	#a9b7c6	—
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, string.regexp constant.character, string.regexp constant.other	#6A8759
string.regexp punctuation.definition.string	#7A9EC2
string.regexp keyword.operator, string.regexp punctuation.definition	#CC7832
punctuation.definition.group.regexp, punctuation.definition.character-class.regexp	#FFC66D
string.regexp constant.character.escape	#CC7832	bold
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	—
source.css support.type.property-name, source.css support.type.vendored.property-name	#BABABA	—
property-list.property-value, property-list.constant, source.css keyword.other.unit	#A5C261	—
keyword.other.unit.percentage.css	#a9b7c6	—
support.type.property-name.variable.css,support.type.property-name.variable.scss,variable.scss	#7A9EC2	—
source.css entity.other.attribute-name.class punctuation.definition.entity, source.css entity.other.attribute-name.pseudo-class punctuation.definition.entity	#BABABA	—
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.function	#FFC66D	—
support.constant.property-value.css,support.constant.property-value.scss	#A5C261	—
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	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#f44747	—
token.debug-token	#b267e6	—
keyword.operator.logical.python	#CC7832	—
support.class.dart	#CC7832	—
variable.language.php, variable.other.php, variable.other.property.php, variable.language.this.php, string.quoted.double variable.other.php punctuation.definition.variable.php, string.unquoted.heredoc variable.other.php punctuation.definition.variable.php	#9E7BB0	—
variable.other.readwrite.perl	#9E7BB0	—
support.variable.property.php	#FFC66D	—
entity.name.type.namespace.php	#a9b7c6	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#CC7832	—
meta.attribute.php	#bbb529	—
meta.attribute.php punctuation.definition.arguments.begin.bracket.round.php, meta.attribute.php punctuation.definition.arguments.end.bracket.round.php, meta.attribute.php punctuation.section.array.begin.php, meta.attribute.php punctuation.section.array.end.php, meta.attribute.php support.class.php	#a9b7c6	—
meta.attribute.php punctuation.separator.delimiter.php	#CC7832	—
entity.name.variable.parameter.php, meta.function-call.php punctuation.separator.colon.php, meta.attribute.php punctuation.separator.colon.php	#467cda	—
punctuation.separator.property.twig, punctuation.section.tag.twig, variable.other.twig, variable.other.property.twig, support.function.twig, meta.tag.template.value.twig	#a9b7c6	—
keyword.operator.logical.twig, keyword.operator.comparison.twig	#CC7832	—

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