JetBrains New UI Dark

Name: JetBrains New UI Dark
Author: tzraeq

Publisher: tzraeqThemes in package: 1

A VS Code theme inspired by IntelliJ IDEA New UI Dark, mainly tuned for Java.

GitHub

VS Code preview

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

colors

Workbench UI color keys from the theme JSON colors map.

actionBar.toggledBackground#383a49
activityBar.activeBackground#4f5156
activityBar.activeBorder#4f5156
activityBar.activeFocusBorder#4f5156
activityBar.background#2b2d30
activityBar.border#1e1f22

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#808080	—
punctuation.definition.comment.java, comment.block.javadoc.java, comment.line.number-sign.yaml	#5F826B	italic
comment.line.double-slash.java punctuation.definition.comment.java, comment.block.java punctuation.definition.comment.java, comment.line.double-slash.java, comment.block.java	#7A7E85
string.other.link.title.markdown, string.other.link.description.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown

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

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

JetBrains New UI Dark | Coding Theme