Handmade Dark

Name: Handmade Dark
Author: David A Burns

Publisher: David A BurnsThemes in package: 1

A dark mode theme inspired by Casey Muratoris editor theme in Handmade Hero youtube series

Open in VS Code GitHub

VS Code preview

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

Handmade Dark — Handmade 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#161616
activityBarBadge.background#161616
dropdown.background#161616
editor.background#161616
editor.foldBackground#161616
editor.foreground#cdaa7d
editorGroupHeader.tabsBackground#161616
editorInfo.background#161616
menu.background#161616
panel.background#161616
sideBar.background#161616
sideBar.dropBackground#161616
sideBarSectionHeader.background#161616
sideBarTitle.foreground#bbbbbb
statusBar.background#161616
tab.inactiveBackground#161616
terminal.background#161616
titleBar.activeBackground#161616

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable, variable.other, variable.function, variable.function.constructor, variable.other.class.js, variable.import.parameter.js, variable.parameter, variable.language, variable.language.fenced.markdown, keyword.operator, keyword.other.template, keyword.other.substitution, keyword.other.special-method, string constant.other.placeholder, constant.other.color, constant.language.json, punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.list_item.markdown, punctuation.section.embedded, punctuation.definition.fenced.markdown, punctuation.section.class.end, entity.name.function, entity.name, entity.name.module.js, entity.name.method.js, entity.name.type.struct.rust, entity.name.type.enum.rust, entity.other.attribute-name, entity.name.type.namespace, entity.name.type.class, meta.block, meta.tag, meta.function-call, meta.class-method.js entity.name.function.js, meta.use.php, markup.underline, markup.raw.block.fenced.markdown, markup.table, support.function, support.type, support.class, support.other.namespace.use.php, support.other.namespace.php, support.type.sys-types, markup.changed.git_gutter, source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, text.html.markdown, text.html.markdown markup.inline.raw.markdown, text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown, source.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#cdaa7d	—
variable.parameter.function-call	#b46b49	—
keyword, keyword.control, keyword.other.unit, keyword.other, storage.type, storage.modifier, entity.name.type, entity.name.tag, entity.other.attribute-name.class, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name, source.sass keyword.control, markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.bold, markup.bold string, meta.tag, meta.function.parameters.python, meta.function.call.rust, meta.attribute.rust, entity.name.function.decorator.python, punctuation.definition.decorator.python, support.type	#cd950c	—
string, string.regexp, string.other.link.title.markdown, string.other.link.description.title.markdown, string.quoted.double.cs, constant.numeric, constant.language, constant.character, constant.escape, constant.other.symbol, constant.other.key, constant.character.escape, constant.other.reference.link.markdown, support.constant, keyword.other.unit.suffix.floating-point, keyword.other.unit.hexadecimal, keyword.other.unit.binary, keyword.other.unit.octal, variable.language.self.rust, variable.language.super.rust, entity.other.inherited-class, punctuation.definition.string.begin, punctuation.definition.string.end, markup.heading, markup.inserted.git_gutter, markup.italic, markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote, markup.quote markup.bold string, markup.quote punctuation.definition.blockquote.markdown, markup.raw.block, markup.raw.block.fenced.markdown, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#6b8e23	—
comment, punctuation.definition.comment	#7f7f7f	—
invalid, invalid.illegal, markup.deleted.git_gutter, markup.deleted, support.other.variable, string.other.link, source.js constant.other.object.key.js string.unquoted.label.js	#FF5370	—
markup.inserted	#C3E88D	—
markup.changed	#C792EA	—
variable.language.fenced.markdown, meta.separator	#65737E	—
markup.bold, markup.bold string, markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	—	bold
comment, punctuation.definition.comment, entity.name.method.js, variable.language, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, source.js constant.other.object.key.js string.unquoted.label.js	—	italic
url, link, uri, markup.underline	—	underline

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