Jetbrains Dark Theme

Name: Jetbrains Dark Theme
Author: MoBalic

Publisher: MoBalicThemes in package: 1

A theme extension for Visual Studio Code based on Webstorm and Intellij IDE from Jetbrains.

GitHub

VS Code preview

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

Jetbrains Dark Theme — Jetbrains Dark Theme

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.

activityBarBadge.background#007acc
editor.background#2b2b2b
editor.foreground#a9b7c6
editor.inactiveSelectionBackground#3a3d41
editor.selectionHighlightBackground#add6ff26
editorIndentGuide.activeBackground#707070
editorIndentGuide.background#404040
input.placeholderForeground#a6a6a6
list.activeSelectionIconForeground#ffffff
list.dropBackground#383b3d
menu.background#303031
menu.foreground#cccccc
ports.iconRunningProcessForeground#369432
sideBarSectionHeader.background#00000000
sideBarSectionHeader.border#cccccc33
sideBarTitle.foreground#bbbbbb
statusBarItem.remoteBackground#16825d
statusBarItem.remoteForeground#ffffff
tab.lastPinnedBorder#cccccc33

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#808080	—
markup.fenced_code.block.markdown, markup.fenced_code.block.markdown support.function	#72737A	—
keyword, keyword.operator.new, variable.language.this, constant.character.escape, meta.namespace.declaration, punctuation.terminator.rule.css, punctuation.terminator.statement, punctuation.separator.comma, punctuation.separator.parameter, punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.key-value.json.comments, punctuation.separator.dictionary.pair.json, punctuation.separator.dictionary.pair.json.comments, punctuation.separator.array.json, punctuation.separator.array.json.comments, punctuation.separator.list.comma.css, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, constant.language, support.function.construct.php, punctuation.terminator.expression.php, storage.type, keyword.operator.or.regexp, constant.character.escape.backslash.regexp, storage.type.function, keyword.operator.expression.typeof, support.type.primitive, punctuation.terminator.rule, storage.modifier, punctuation.definition.keyword, punctuation.definition.block.begin.svelte, punctuation.definition.block.end.svelte, punctuation.section.embedded.begin.svelte, punctuation.section.embedded.end.svelte, meta.script.svelte entity.name.label, meta.script.svelte punctuation.separator.label, keyword.operator.redirect.shell, keyword.operator.list.shell, keyword.operator.expansion.shell, entity.name.tag.yaml, punctuation.definition.list.begin.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown, meta.directive.vue keyword.operator.expression.in.js, keyword.operator.nulltype.graphql, meta.at-rule.media keyword.operator.logical, entity.other.inherited-class.variant.twin, text.html.derivative punctuation.definition.block.ts, keyword.operator.expression, variable.other.env, support.type.builtin, meta.function.color.css, entity.name.type.terraform, entity.name.label.terraform, punctuation.comma.graphql	#CC7832
entity.name.function, support.function, support.constant.property-value.misc.css, entity.name.fragment.graphql, variable.fragment.graphql	#E8BF6A
meta.selector.css, support.function.misc.css, entity.name.tag, keyword.other.doctype.xml, meta.at-rule.header.css, punctuation.definition.tag, entity.other.attribute-name.class.tailwind, entity.other.attribute-name.css, entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss, markup.inline.raw.string.markdown, punctuation.definition.markdown, fenced_code.block.language, punctuation.definition.character-class.regexp, constant.other.character-class.regexp, punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, support.class.component, variable.parameter.keyframe-list, entity.other.keyframe-offset, support.constant.font-name.css, source.css entity.name.tag, entity.other.attribute-name.id punctuation.definition.entity, entity.other.attribute-name.pseudo-class	#E8BF6A
punctuation.decorator, meta.decorator entity.name.function	#BBB529
support.constant.property-value.css, meta.property-value.css, meta.property-value.css variable.parameter, meta.property-value.scss variable.parameter, meta.property-value.css keyword.other.unit, meta.property-value.scss keyword.other.unit, meta.property-value.media-query keyword.other.unit, meta.at-rule.media keyword.other.unit, meta.definition.variable.scss keyword.other.unit, punctuation.separator.key-value.svelte, punctuation.separator.key-value.html, string.unquoted.svelte, string.quoted.svelte, string.quoted.double.html, string.quoted.html, string.quoted.single.html, string.unquoted.html, meta.directive.vue punctuation.definition.string.begin.html, meta.directive.vue punctuation.definition.string.end.html, support.constant.media.css, support.constant.color.w3c-standard-color-name.css	#A5C261
variable.other.jsdoc, entity.name.type.instance.jsdoc, keyword.operator.assignment.jsdoc	#8A653B	italic
comment.block.documentation	#629755	italic
punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc	#629755	italic bold underline
string, string.regexp, constant.other.character-class.range.regexp, constant.other.character-class.set.regexp, meta.embedded.expression string.quoted, punctuation.definition.string.template.begin.twin, punctuation.definition.string.template.end.twin, support.constant.classname.twin, punctuation.section.embedded.short-css.begin.twin, punctuation.section.embedded.short-css.end.twin, entity.name.variable.css-value.twin, meta.attribute-selector, source.env, constant.numeric.env, meta.tag.attributes keyword.operator.assignment	#6A8759
markup.quote.markdown	#6A8759	italic
meta.type.parameters.ts, meta.type.parameters.tsx, meta.type.parameters.ts entity.name.type.ts, meta.type.parameters.tsx entity.name.type.tsx	#507874
constant.numeric, string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end, constant.other.color.rgb-value.hex.css, keyword.operator.quantifier.regexp	#6897BB
variable.scss	#6D9CBE
markup.underline.link.image.markdown, markup.underline.link.markdown	#589DF6
meta.object-literal.key, variable, variable.other.object.property, variable.other.constant.property, support.type.property-name, support.type.property-name.json.comments, punctuation.support.type.property-name.end.json.comments, punctuation.support.type.property-name.begin.json.comments, support.type.object.module, support.variable.property, meta.field.declaration.tsx entity.name.function.tsx, meta.tag.block.any.html meta.directive.vue variable.other.readwrite.js, entity.other.ng-binding-name	#9876AA
entity.other.ng-binding-name.ngFor.html, entity.other.ng-binding-name.ngForOf.html, entity.other.ng-binding-name.ngIf.html, entity.other.ng-binding-name.ngClass.html, entity.other.ng-binding-name.ngStyle.html	#9876AA	italic
support, support.constant.math, support.constant.dom, support.constant.json, support.class.builtin, markup.heading.markdown, constant.character.enum.graphql	#9876AA	italic bold
variable.parameter, variable.parameter.ts, variable.other.object, variable.other.constant, variable.other.readwrite, storage.type.function.arrow, keyword.operator, entity.name.type.ts, entity.name.type.class, entity.name.type.module, entity.name.type.interface, entity.name.type.alias, entity.name.type.enum, punctuation.definition.typeparameters, punctuation.definition.block, meta.brace.round, meta.brace.square, punctuation.definition.parameters, punctuation.accessor, punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, punctuation.section.array.begin.php, punctuation.section.array.end.php, punctuation.terminator.statement.php, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js, punctuation.separator.key-value.js, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, meta.var-single-variable.expr.tsx entity.name.type.tsx, meta.var-single-variable.expr.ts entity.name.type.ts, string.unquoted.plain.out.yaml, meta.directive.vue punctuation.separator.key-value.html, keyword.operator.logical.php, punctuation.separator.key-value, punctuation.definition.attribute-selector, keyword.control.flow.block-scalar.literal.yaml, string.unquoted.block.yaml, keyword.other.interpolation.begin, keyword.other.interpolation.end, meta.block.curly.misc.css, punctuation.definition.tag.prisma, string.unquoted.graphql, support.type.graphql, keyword.operator.spread.graphql, punctuation.colon.graphql, variable.parameter.graphql, support.type.enum.graphql	#A9B7C6
support.type.property-name.css, keyword.other.unit.percentage.css, entity.other.attribute-name.html, punctuation.definition.entity, meta.property-name.css, meta.property-list.scss entity.name.tag.css, entity.other.attribute-name, support.type.property-name.media.css, support.type.vendored.property-name, variable.language.svelte	#BABABA
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—
meta.property-list.scss entity.name.tag, variable.scss, variable, meta.property-name support.type.property-name.css, meta.at-rule.media.header.css, meta.selector, meta.property-value.css, meta.function.color.css, support.constant.mathematical-symbols.scss	#BABABA	—
	#9876AA	italic bold
support.type.property-name.css, support, support.type.property-name.css, keyword.operator.gradient.css, support.constant.font-name.css	#A5C261
meta.property-value.css variable.prop.css, keyword.other.unit.fr.css, source.css.scss meta.property-list.scss meta.property-value.scss support.type.property-name.css, meta.property-value.scss variable.scss, meta.property-value.css variable.argument.css	#E8BF6A
variable.other.property	#9876AA
storage.type.java, storage.type.object.array.java, meta.method-call.java entity.name.function.java, meta.method.java meta.method.body.java meta.definition.variable.java variable.other.definition.java, source.java meta.package.java storage.modifier.package.java, storage.modifier.import.java	#A9B7C6
variable.other.definition.java	#9876AA
meta.tag.custom entity.name.tag, support.class.component	#26BDA4
punctuation.section.embedded	#E8BF6A
variable.object.property	#9876AA
constant.language.import-export-all	#A9B7C6

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