mattcha

Name: mattcha
Author: suenryu

Publisher: suenryuThemes in package: 1

This is the matcha color theme.

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.

activityBar.background#1F2017
activityBar.border#302F31
activityBar.foreground#61674C
activityBar.inactiveForeground#41462F
activityBarBadge.background#748341
activityBarBadge.foreground#080805

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
constant.other.color, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby, constant.other.symbol.ruby punctuation.definition.constant.ruby, constant.other.symbol.ruby punctuation.definition.constant.ruby, entity.name.function.definition.special.constructor, entity.name.function.definition.special.member.destructor., entity.name.section, entity.name.type, entity.name.type.annotation.kotlin, entity.name.variable.parameter, keyword, keyword.control, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.default, keyword.function.go, keyword.operator, keyword.other.fn.rust, keyword.other.new, keyword.other.substitution, keyword.other.template, markdown.heading, markup punctuation.definition, markup.bold.markdown, markup.heading, markup.inline.raw punctuation.definition.raw, markup.list punctuation.definition, markup.list.bullet, markup.other.anchor, meta.function.parameters variable punctuation.definition.variable.php, meta.function.parameters variable.other, parameter.variable.function, punctuation.accessor, punctuation.bracket.angle, punctuation.definition.preprocessor, punctuation.section, punctuation.section.directive, punctuation.separator, punctuation.separator.hash.cs, punctuation.terminator, source.go keyword.operator, source.ruby punctuation.definition.variable, source.wsd keyword.other.activity, storage.type.annotation, storage.type.function.arrow, storage.type.function.coffee, storage.type.function.pug, storage.type.function.python, storage.type.generic.wildcard, storage.type.objc, support.function.builtin.rust, support.function.textbf, variable.parameter	—	bold
entity.name.lifetime.rust, fenced_code.block.language, markup.fenced_code punctuation.definition, markup.quote markup.bold, markup.quote punctuation.definition, meta.attribute.id entity.other.attribute-name, source.rust meta.attribute.rust, storage.modifier.lifetime.rust, text.html punctuation.section.embedded, variable.other.c

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

VS Code preview

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

mattcha — matcha

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#1F2017
activityBar.border#302F31
activityBar.foreground#61674C
activityBar.inactiveForeground#41462F
activityBarBadge.background#748341
activityBarBadge.foreground#080805

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
constant.other.color, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby, constant.other.symbol.ruby punctuation.definition.constant.ruby, constant.other.symbol.ruby punctuation.definition.constant.ruby, entity.name.function.definition.special.constructor, entity.name.function.definition.special.member.destructor., entity.name.section, entity.name.type, entity.name.type.annotation.kotlin, entity.name.variable.parameter, keyword, keyword.control, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.default, keyword.function.go, keyword.operator, keyword.other.fn.rust, keyword.other.new, keyword.other.substitution, keyword.other.template, markdown.heading, markup punctuation.definition, markup.bold.markdown, markup.heading, markup.inline.raw punctuation.definition.raw, markup.list punctuation.definition, markup.list.bullet, markup.other.anchor, meta.function.parameters variable punctuation.definition.variable.php, meta.function.parameters variable.other, parameter.variable.function, punctuation.accessor, punctuation.bracket.angle, punctuation.definition.preprocessor, punctuation.section, punctuation.section.directive, punctuation.separator, punctuation.separator.hash.cs, punctuation.terminator, source.go keyword.operator, source.ruby punctuation.definition.variable, source.wsd keyword.other.activity, storage.type.annotation, storage.type.function.arrow, storage.type.function.coffee, storage.type.function.pug, storage.type.function.python, storage.type.generic.wildcard, storage.type.objc, support.function.builtin.rust, support.function.textbf, variable.parameter	—	bold
entity.name.lifetime.rust, fenced_code.block.language, markup.fenced_code punctuation.definition, markup.quote markup.bold, markup.quote punctuation.definition, meta.attribute.id entity.other.attribute-name, source.rust meta.attribute.rust, storage.modifier.lifetime.rust, text.html punctuation.section.embedded, variable.other.c

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

abstract.definition.fsharp entity, abstract.definition.fsharp keyword, comment, comment.block.documentation storage.type.class, comment.block.documentation.phpdoc.php keyword, comment.block.documentation.scala keyword, comment.block.documentation.scala variable.parameter, comment.block.javadoc.java keyword, comment.block.javadoc.java variable.parameter.java, comment.line.roxygen.r keyword, comment.line.roxygen.r variable.parameter.r, constant.other.math, constant.other.placeholder, constant.other.symbol.hashkey.ruby, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby, constant.other.symbol.ruby, constant.other.table-name, entity.alias.import.go, entity.name.footnote, entity.name.scope-resolution.function.call, entity.name.type.kotlin, entity.name.type.numeric, entity.name.type.primitive, entity.other, function.anonymous keyword, keyword.control.clojure, keyword.control.export, keyword.control.inheritance.coffee, keyword.import, keyword.language.gherkin.feature.step, keyword.local.lua, keyword.operator.documentation.powershell, keyword.other.array.phpdoc.php, keyword.other.base.cs, keyword.other.capture-specifier, keyword.other.import, keyword.other.this.cs, keyword.package, keyword.type.cs, markup.block.open, markup.italic, markup.mark.constrained markup.mark, markup.quote, meta.import keyword.control, punctuation.definition.comment, sharing.modifier, source.apex keyword.type, source.clojure meta.symbol.dynamic, source.go storage.type, source.hlsl storage.type.basic, source.python support.type.python, source.r meta.function.r keyword.control.r, source.scala entity.name.class, source.swift keyword.other.declaration-specifier, source.swift support.type, source.vue meta.directive punctuation.separator.key-value, source.wsd keyword.control.diagram, storage.modifier, storage.type.built-in, storage.type.core.rust, storage.type.function.kotlin, storage.type.integral, storage.type.modifier, storage.type.php, storage.type.primitive, storage.type.scala, support.class.builtin, support.constant.vendored, support.function.builtin.go, support.function.textit, support.type.builtin, support.type.core.rust, support.type.julia, support.type.primitive, support.type.vendored, support.variable.swift, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, text.tex support.function.emph, variable.language, variable.other.field, variable.other.member, variable.other.member.c, variable.other.object.property, variable.other.property, variable.parameter.function.language.special

—

italic

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

mattcha | Coding Theme