Ultraedit light and dark color themes

Name: Ultraedit light and dark color themes
Author: Korand

Publisher: KorandThemes in package: 2

Ultraedit light and dark color themes for Visual Studio Code (JS, TS, PHP, HTML, SQL, JSON)

Open in VS Code GitHub

Color themes

VS Code preview

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

Ultraedit light and dark color themes — Ultraedit Dark

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#1A1A1A
editor.background#1E1E1E
editor.findMatchBackground#264F7890
editor.findMatchHighlightBackground#264F7800
editor.findMatchHighlightBorder#FFFFFF80
editor.findRangeHighlightBackground#264F7840
editor.foreground#D4D4D4
editor.inactiveSelectionBackground#264F7890
editor.lineHighlightBackground#2A2A1E
editor.selectionBackground#264F78
editor.selectionHighlightBackground#264F7880
editorGroupHeader.tabsBackground#2D2D2D
editorLineNumber.foreground#666666
editorUnnecessaryCode.opacity#00000070
list.activeSelectionBackground#4B83CD
list.activeSelectionForeground#EEEEEE
list.activeSelectionIconForeground#FFFFFF
list.focusHighlightForeground#FFFFFF
sideBar.background#252525
statusBar.background#333333
statusBar.foreground#CCCCCC
tab.activeBackground#1E1E1E
tab.activeBorder#1E1E1E
tab.activeForeground#D4D4D4
tab.border#444444
tab.inactiveBackground#2D2D2D
tab.inactiveForeground#888888
titleBar.activeBackground#2D2D2D
titleBar.activeForeground#CCCCCC
titleBar.border#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#4EC9B0	—
string	#AAAAAA	—
constant.numeric	#FF6060	—
support.function	#C08080	—
variable, meta.definition.variable entity.name.function	#FFB040	—
entity.name.type.class	—	bold
meta.function entity.name.function, meta.function support.function	—	bold
meta.function-call entity.name.function, meta.function-call support.function	—
variable.other.global, constant, support.constant, storage, keyword	#6699DD	—
constant.regexp	#6B9FDD	—
keyword.operator, storage.modifier	#50B050	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#C186B4	—
support.function.construct.php	—
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, entity.name.tag, entity.name.tag.block.any, entity.name.tag.inline.any	#6699DD	—
entity.other.attribute-name	#FF6060	—
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#6699DD	—
meta.property-value.css keyword.other.unit, meta.at-rule.media.header.css keyword.other.unit	#FF6060	—
meta.property-value.css support.constant, meta.property-value.css constant	#FFB040	—
meta.property-value.css support.function	—
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json	#AAAAAA	—
support.type.property-name.json	#FFB040	—
string.quoted.double.json	#AAAAAA	—
constant.numeric.json	#FF6060	—
constant.language.json	#6699DD	—
punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.definition.array.begin.json, punctuation.definition.array.end.json	#50B050	—
keyword.other.sql, keyword.other.create.sql, keyword.other.DML.sql, keyword.other.DML.II.sql, keyword.other.postgres, keyword.other.sql.postgres, keyword.control.postgres	#FFB040	—

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