A

Name: A
Author: William Esz

Publisher: William EszThemes in package: 1

Soft syntax highlighting with colored backgrounds. Inspired by Flatwhite for Atom.

GitHub

VS Code preview

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

A — A

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#f3f3f3
activityBar.foreground#cacaca
activityBarBadge.background#f3f3f3
activityBarBadge.foreground#aaa
button.background#bbb
button.foreground#FFF
button.hoverBackground#bbb
editor.background#FFF
editor.foreground#495057
editor.lineHighlightBorder#00000000
editorGroup.border#f3f3f3
editorGroupHeader.tabsBackground#FFF
editorLineNumber.foreground#787C7F72
focusBorder#00000000
foreground#787C7F
list.activeSelectionBackground#dccedc
list.activeSelectionForeground#495057
notification.background#bbbbbb
notification.foreground#FFF
panel.border#f3f3f3
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#CED4DA90
scrollbarSlider.background#E9ECEF90
scrollbarSlider.hoverBackground#E9ECEF81
sideBar.background#f3f3f3
sideBarSectionHeader.background#E0E0E054
sideBarTitle.foreground#666666AA
statusBar.background#FFFFFFAA
statusBar.foreground#999999AA
statusBar.noFolderBackground#FFFFFFAA
statusBarItem.hoverBackground#F0F0F0AA
tab.activeForeground#495057DA
tab.border#f4f4f4
tab.inactiveBackground#00000000
tab.inactiveForeground#00000045
widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#181818E6	—
emphasis	—	italic
strong	—	bold
comment, punctuation.definition.comment	#BBBBBB	—
string	#81895d	—
constant.numeric	#5F8C7D	—
constant.language	#5f8c7d	—
variable.language	#5f8c7d	—
constant.character, constant.other	#5f8c7d	—
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color, support.type.vendored.property-name, support.type.property-name	#5f8c7d	—
meta.structure.dictionary.key.python, support.type.property-name.json	#5f8c7d	—
variable, meta.definition.variable.name, support.variable, variable.parameter	#343a40	—
variable.css, variable.scss, variable.other.less	#343a40	—
meta.object-literal.key, meta.object-literal.key entity.name.function	#343a40	—
keyword.control, keyword, keyword.operator.new	#73809F	—
storage.type, storage.modifier, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy	#9c739c	—
string.comment.buffered.block.jade, string.quoted.jade, string.interpolated.jade, string.unquoted.plain.in.yaml, string.unquoted.plain.out.yaml, string.unquoted.block.yaml, string.quoted.single.yaml, string.quoted.double.xml, string.quoted.single.xml, string.unquoted.cdata.xml, string.quoted.double.html, string.quoted.single.html, string.unquoted.html, string.quoted.single.handlebars, string.quoted.double.handlebars	#9c739c	—
entity.name.tag	#9c739c	—
entity.name.selector, meta.selector	#9c739c	—
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	#9c739c	—
constant.regexp, string.regexp	#6B4C6B	—
entity.other.attribute-name	#9c739c	—
support.function	#957F5F	—
punctuation.definition.string, punctuation.definition, punctuation.definition.string.template, punctuation.section.embedded, punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array, support.constant.handlebars, punctuation.definition.block.js, punctuation.definition.tag, punctuation.separator.comma.js, punctuation.separator, punctuation.terminator.statement.js, punctuation.accessor.js, punctuation.definition.group.regexp, punctuation.definition.group.capture.regexp, punctuation.terminator, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js, punctuation.separator.parameter.js, punctuation.definition.typeparameters.begin.js, punctuation.definition.typeparameters.end.js punctuation.separator.key-value.js, punctuation.comma, punctuation.decorator, punctuation.separator, punctuation.separator.parameter, punctuation.separator.key-value, punctuation.definition.string.begin.js, punctuation.definition.section.case-statement.js, punctuation.destructuring, punctuation.destructuring.js, punctuation.section, punctuation.definition.section, punctuation.definition.string.end.js, punctuation.definition.tag.directive.js, punctuation.decorator.js, punctuation.decorator, punctuation.definition.entity.js, punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js, punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, punctuation.definition.binding-pattern.array.js, punctuation.definition.binding-pattern.object.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.section.embedded.begin.metatag.php, punctuation.section.embedded.end.metatag.php, meta.brace.round.js, meta.brace.square.js, meta.brace	#957F5F	—
support.constant	#5f8c7d	—
meta.return-type, support.type, support.class, meta.class, entity.name.class, entity.name.type, entity.name.type.class	#957f5f	—
meta.return.type, meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class	#957f5f	—
invalid	#ffffff	—
invalid.deprecated	#000000	—
keyword.other.unit	#5F8C7D	—
entity.name.function, meta.require	#8C5D7BE6	—
keyword.operator, keyword.operator.expression	#73809F	—
storage.modifier.import.java, storage.modifier.package.java	#73809F	—

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