Acme Theme

Name: Acme Theme
Author: Zayn Ali

Publisher: Zayn AliThemes in package: 1

A Dark Theme For Web Artisans

Open in VS Code GitHub

VS Code preview

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

Acme Theme — Acme 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.

activityBar.background#1A1B20
dropdown.background#0b0b0d
dropdown.border#0b0b0d00
editor.background#1A1B20
editor.foreground#D1D1D1
editor.lineHighlightBackground#00000030
editor.selectionBackground#61616140
editorCursor.foreground#67809F
editorGroupHeader.tabsBackground#121317
editorIndentGuide.background#42424260
editorWhitespace.foreground#3B3A32
input.background#0b0b0d
list.activeSelectionBackground#61616150
list.hoverBackground#61616120
list.inactiveSelectionBackground#61616150
panel.background#0b0b0d
panel.border#0b0b0d
panelTitle.activeBorder#0b0b0d
scrollbarSlider.background#0b0b0d80
sideBar.background#222329
sideBar.foreground#bdc3c7
sideBarSectionHeader.background#61616130
statusBar.background#121317
statusBar.foreground#7f8c8d
tab.activeBackground#1A1B20
tab.activeForeground#ecf0f1
tab.border#121317
tab.inactiveBackground#121317
tab.inactiveForeground#7f8c8d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#D1D1D1	—
punctuation.definition.comment	—	regular
comment	#444444	italic
invalid.illegal.bad-comments-or-CDATA.html	#1A1B20	—
punctuation.terminator.expression, punctuation.terminator.statement	#D1D1D1	regular
string, meta.string-contents.quoted.single, meta.string-contents.quoted.double	#85604E	regular
punctuation.definition.string, keyword.other.template.begin.js, keyword.other.template.end.js	#85604E80	regular
keyword.other.substitution.begin, keyword.other.substitution.end, keyword.other.substitution, punctuation.definition.expression	#7C7200	regular
constant.numeric	#1ABC9C	regular
keyword	#4D4F5B	bold
keyword.operator	#4ECDC4	bold
keyword.operator.logical	#C40058	bold
string.regexp.single-quoted, string.regexp.double-quoted	#67809F	regular
constant.character.escape, string.regexp, keyword.operator.regexp	#7C7200	regular
constant.language	#C40058	regular
variable.language	#999999	regular
variable.other	#D1D1D1	regular
constant.character, constant.other	#E90A13	regular
support.constant	#E90A13	regular
storage	#4D4F5B	bold
storage.type	#717486	bold
storage.type.function	#4D4F5B	italic
support.class, entity.name.class, entity.name.type.class	#CD122C	regular
support.type, support.class	#CD122C	regular
entity.other.inherited-class	#1ABC9C	italic bold
punctuation.separator	#D1D1D1	regular
entity.name.function, variable.function	#CD122C	regular
support.function	#D24D57	regular
variable.parameter	#FFFFFF	italic
punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag	#4ECDC4	regular
entity.name.tag	#CD122C	regular
entity.other.attribute-name	#67809F	regular
punctuation.separator.key-value, meta.tag.preprocessor	#4ECDC4	regular
punctuation.definition.group, punctuation.definition.group.begin, punctuation.definition.group.end, punctuation.section.function, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.definition.parameters, meta.brace.round.begin, meta.brace.round.end, meta.brace.round, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.arguments, meta.group.braces.round.function.arguments, punctuation.section.group.begin, punctuation.section.group.end, punctuation.section.arguments.begin, punctuation.section.arguments.end, punctuation.section.parameters.begin, punctuation.section.parameters.end	#4ECDC4	regular
punctuation.definition.dictionary.begin, punctuation.definition.dictionary.end, punctuation.definition.dictionary, punctuation.definition.class.body.begin, punctuation.definition.class.body.end, punctuation.definition.class.body, meta.brace.curly.begin, meta.brace.curly.end, meta.brace.curly, punctuation.definition.block, punctuation.section.scope, punctuation.section.block, punctuation.section.block.begin, punctuation.section.block.end	#4ECDC4	regular
punctuation.definition.array.begin, punctuation.definition.array.end, punctuation.definition.array, meta.group.braces.square, meta.brace.square.begin, meta.brace.square.end, meta.brace.square, punctuation.section.array.begin, punctuation.section.array.end, punctuation.section.array, punctuation.definition.brackets.js, punctuation.section.list.begin, punctuation.section.list.end	#7C7200	regular
punctuation.accessor	#4ECDC4	bold
punctuation.section.embedded	#E90A13	regular
punctuation.separator.dictionary.key-value, punctuation.separator.dictionary.pair	#999999	regular
variable.parameter.function	#67809F	italic
meta.function-call.arguments	#FFFFFF	regular
meta.function-call	#CD122C	regular
meta.diff, meta.diff.header	#75715E	—
markup.deleted	#00A8C6	—
markup.inserted	#A6E22E	—
markup.changed	#E6DB74	—
constant.numeric.line-number.find-in-files - match	#8FBE00A0	—
entity.name.filename.find-in-files	#E6DB74	—
sublimelinter.mark.warning	#DDB700	—
sublimelinter.mark.error	#D02000	—
sublimelinter.gutter-mark	#FFFFFF	—
meta.tag.sgml.doctype.html	#4D4F5B	—
constant.other.inline-data.html	#717486	—
punctuation.separator.key-value.html	#999999	—
keyword.doctype.xml	#CD122C	—
variable.documentroot.xml	#4D4F5B	—
meta.tag.sgml.doctype.xml	#1ABC9C	—
punctuation.separator.key-value.xml	#999999	—
entity.other.attribute-name.id	#1ABC9C	—
entity.other.attribute-name.class	#D24D57	—
entity.other.attribute-name.attribute	#67809F	—
punctuation.separator.operator, keyword.operator.attribute-selector	#4ECDC4	bold
punctuation.definition.entity, meta.attribute-selector, punctuation.section.attribute.css	#C40058	—
punctuation.section.property-list	#4ECDC4	—
support.type.property-name	#717486	regular
support.type.vendor-prefix, meta.property-name	#D1D1D1	bold
support.constant.property-value, support.constant.color.w3c-special-color-keyword	#7C7200	—
constant.numeric	#1ABC9C	—
punctuation.separator.key-value, punctuation.terminator.rule	#999999	—
keyword.other.unit	#67809F	—
keyword.other.important	#CD122C	—
entity.other.attribute-name.pseudo-class	#4ECDC4	—
entity.other.attribute-name.pseudo-element	#67809F	—
constant.other.color.rgb-value	#1ABC9C	—
support.constant.color.w3c-standard-color-name, support.constant.color	#CCBB00	—
variable.parameter.url	#999999	italic
variable.scss	#D1D1D1	—
support.function.misc.scss	#CD122C	—
entity.name.tag.reference.scss	#CD122C	bold
meta.property-list.scss	#4ECDC4	—
meta.at-rule.import.scss	#85604E	—
string.quoted.double.json	#85604E	—
variable.other.readwrite.js	#FFFFFF	—
meta.group.braces.square.js	#D1D1D1	—
keyword.generator.asterisk.js	#C40058	—
storage.type.function.arrow.js	#C40058	bold
variable.language.this.js	#F62459	bold italic
keyword.operator.module.js	#4D4F5B	—
keyword.operator.spread.js	#C40058	—
variable.language.super.js	#C40058	—
keyword.operator.new.js	#717486	—
support.type.object.dom.js	#717486	bold
meta.instance.constructor, entity.name.type.new.js, variable.other.constant.js, support.class.builtin.js, variable.other.class.js	#CD122C	—
variable.other.object.js	#FFFFFF	—
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js, punctuation.definition.generic.begin.html, punctuation.definition.generic.end.html	#67809F	—
meta.property.object.js	#D1D1D1	—
punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx	#7C7200	—
meta.jsx.js, meta.jsx.children.js, tag.open.js, tag.close.js	#D1D1D1	—
keyword.operator.assignment.jsx	#999999	regular
meta.flowtype.polymorph	#D1D1D1	—
punctuation.section.flowtype.begin, punctuation.section.flowtype.end, punctuation.section.flowtype	#999999	—
variable.other.flowtype	#7C7200	—
variable.language.this.ts	#F62459	bold italic
storage.type.function.arrow.ts	—	bold
meta.type.annotation.ts, entity.name.type.ts	#E90A13	bold
punctuation.definition.binding-pattern.object.ts	#7C7200	—
punctuation.definition.typeparameters.begin.ts, punctuation.definition.typeparameters.end.ts	#999999	—
punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts	#67809F	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#E90A13	—
keyword.other.phpdoc	#999999	—
punctuation.definition.variable.php	#999999	—
support.function.magic.php	#67809F	—
constant.class.php	#67809F	—
keyword.other.phpdoc.php	#999999	—
keyword.operator.key.php	#4D4F5B	—
meta.group.php	#D1D1D1	regular
meta.function.return-type.php	#C40058	—
keyword.other.namespace.php, keyword.other.use-as.php, keyword.other.use.php	#4D4F5B	bold
support.other.namespace.php	#ffffff	—
entity.name.namespace.php	#67809F	—
meta.use.php	#CD122C	—
punctuation.separator.namespace.php	#999999	—
punctuation.section.embedded.begin.blade, punctuation.section.embedded.end.blade	#E90A13	—
punctuation.section.embedded.ignore.begin.blade, punctuation.section.embedded.ignore.end.blade	#C40058	—
variable.other.readwrite.instance.ruby	#FFFFFF	—
keyword.other.special-method.ruby	#717486	—
constant.other.symbol.ruby	#1ABC9C	—
punctuation.separator.inheritance.ruby	#717486	bold
keyword.control.pseudo-method.ruby	#D24D57	regular
punctuation.separator.method.ruby	#4ECDC4	bold
source.ruby.embedded.source	#D1D1D1	—
variable.parameter.python	#67809F	—
punctuation.section.function.begin.python	#FFFFFF	—
keyword.other.template.begin.env, keyword.other.template.end.env, keyword.other.template	#7C7200	regular

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