Dark Modern But Better

Name: Dark Modern But Better
Author: sksieciunio

Publisher: sksieciunioThemes in package: 1

Basically dark modern theme but with changed coloring rules

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.activeBorder#0078D4
activityBar.background#181818
activityBar.border#2B2B2B
activityBar.foreground#D7D7D7
activityBar.inactiveForeground#868686

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#777	italic
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal	#d8d88a	—
variable, meta.definition.variable.name, support.variable, entity.name.variable	#d4d4d4	—
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator	#569cd6

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

Dark Modern But Better | Coding Theme