IntelliJ IDEA Darcula Theme

Name: IntelliJ IDEA Darcula Theme
Author: Dmitry Fisenko

Publisher: Dmitry FisenkoThemes in package: 1

Visual Studio Code theme based on IntelliJ IDEA Darcula theme

GitHub

VS Code preview

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

IntelliJ IDEA Darcula Theme — Darcula

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.activeBackground#3472ED
activityBar.background#3C3F41
activityBar.border#323232
activityBar.foreground#FFFFFF
activityBar.inactiveForeground#CED0D6
activityBarBadge.background#548AF7
activityBarBadge.foreground#CED0D6
badge.background#FF00001A
editor.background#2B2B2B
editor.foreground#CCCCCC
editor.lineHighlightBackground#FFFFFF0B
editor.selectionBackground#204182CC
editorGutter.background#FFFFFF0B
editorInlayHint.foreground#787878
editorInlayHint.typeForeground#787878
editorLineNumber.activeForeground#A4A3A3
editorLineNumber.foreground#606366
editorRuler.foreground#4D4D4D
editorSuggestWidget.background#303030
editorSuggestWidget.highlightForeground#CC6E2F
editorSuggestWidget.selectedBackground#204182CC
editorWhitespace.foreground#5A5A5A
list.hoverBackground#45494A
list.hoverForeground#BBBBBB
scrollbarSlider.activeBackground#595959
scrollbarSlider.background#494949
sideBar.background#3C3F41
sideBar.border#FFFFFF1A
sideBar.foreground#BBBBBB
sideBarSectionHeader.background#3C3F41
sideBarSectionHeader.border#323232
sideBarSectionHeader.foreground#BBBBBB
sideBarTitle.foreground#BBBBBB
statusBar.background#3C3F41
statusBar.border#464646
statusBar.foreground#CCCCCC
tab.activeBackground#4E5254
tab.activeBorder#4A88C7
tab.inactiveBackground#3C3F41
titleBar.activeBackground#3C3F41
titleBar.activeForeground#CCCCCC
titleBar.border#323232
titleBar.inactiveBackground#FFFFFF10
tree.inactiveIndentGuidesStroke#505355
tree.indentGuidesStroke#505355

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
invalid	#
entity	#a9b7c6
constant.numeric	#267dff
keyword	#597cc2
string	#807d6e	bold
comment.block,punctuation.definition.comment	#7a7a7a
comment.line	#7a7a7a
comment.documentation	#7a7a7a
punctuation	#597cc2
punctuation	#5c7ab8
constant	#828eba
entity.name.function	#d9af6c
constant.character.escape	#597cc2
invalid	#807d6e	bold
meta.tag	#66a6ff	bold
entity.other.attribute-name	#55ff
constant.character.entity	#55ff
variable.parameter.misc.css	#287bde
variable.other.less	#d0d0ff
variable.parameter.sass	#6d9cbe
entity.other.attribute-name.tag	#d0d0ff
comment.block.css	#bc9455
entity.other.attribute-name.html,text.html.derivative	#bababa
string.quoted.double.html	#4c84d9
punctuation.definition.tag.begin.html,punctuation.definition.tag.end.html	#e8bf6a
entity.name.tag.html	#e8bf6a
support.type.property-name.json	#828eba
string.quoted.double.json,punctuation.definition.string.begin.json,punctuation.definition.string.end.json	#807d6e	bold
punctuation.definition.dictionary.end.json,punctuation.definition.dictionary.begin.json,punctuation.definition.array.begin.json,punctuation.definition.array.end.json	#aeb5bd
constant.language.json	#597cc2
support.type.primitive.ts,support.type.builtin.ts,storage.modifier.ts,storage.type.class.ts,storage.type.ts,storage.type.property.ts,storage.modifier.async.ts,storage.type.interface.ts,storage.type.enum.ts,storage.type.type.ts,storage.type.function.ts,variable.language.this.ts	#597cc2
variable.parameter.ts,meta.import.ts variable.other.readwrite.alias.ts	#a9b7c6
support.type.primitive.tsx,support.type.builtin.tsx,storage.modifier.tsx,storage.type.class.tsx,storage.type.tsx,storage.type.property.tsx,storage.modifier.async.tsx,storage.type.interface.tsx,storage.type.enum.tsx,storage.type.type.tsx,storage.type.function.tsx,variable.language.this.tsx	#597cc2
variable.parameter.txs,meta.import.tsx variable.other.readwrite.alias.tsx	#a9b7c6
punctuation.definition.tag.begin.tsx,punctuation.definition.tag.end.tsx	#e8bf6a
entity.name.tag.tsx	#26BCA3
entity.other.attribute-name.tsx	#bababa
meta.tag.attributes.tsx keyword.operator.assignment.tsx	#807d6e
meta.object.member.tsx, meta.embedded.expression.tsx variable.other.property.tsx	#828eba
storage.type.function.arrow.tsx,punctuation.definition.binding-pattern.array.tsx,keyword.operator.assignment.tsx,keyword.operator.comparison.tsx,keyword.operator.logical.tsx,meta.brace.round.tsx,punctuation.definition.parameters.begin.tsx,punctuation.definition.parameters.end.tsx	#aeb5bd
constant.language.boolean.false.tsx,constant.language.boolean.true.tsx	#597cc2

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