Umbra Theme

Name: Umbra Theme
Author: rinckodev

Publisher: rinckodevThemes in package: 1

This is a famost vscode theme?

Open in VS Code GitHub

VS Code preview

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

Umbra Theme — Umbra

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.activeBorder#244994
activityBar.background#17181C
activityBarBadge.background#244994
badge.background#244994
button.background#244994
button.hoverBackground#345EB1
dropdown.background#17181C
editor.background#202228
editor.selectionBackground#2449943e
editorGroupHeader.tabsBackground#17181C
editorUnnecessaryCode.opacity#ffffff65
extensionButton.background#244994
focusBorder#244994
input.background#202228
list.activeSelectionBackground#2449945b
list.hoverBackground#24272D
menu.background#202228e8
menu.selectionBackground#244994
menubar.selectionBackground#244994
quickInput.background#202228c6
selection.background#244994
settings.checkboxBackground#17181C
settings.dropdownBackground#17181C
settings.focusedRowBackground#1B1D22
settings.modifiedItemIndicator#545E7A
settings.numberInputBackground#17181C
settings.rowHoverBackground#1B1D22
settings.textInputBackground#17181C
sideBar.background#1B1D22
sideBarSectionHeader.background#202228
statusBar.background#17181C
statusBarItem.remoteBackground#17181C
tab.inactiveBackground#00000000
titleBar.activeBackground#121317
titleBar.inactiveBackground#121317

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
url, link, uri	—	underline
constant.language.undefined, constant.language.null	—	italic
constant.language.import-export-all, punctuation.definition.heading.markdown, markup.heading.markdown	—	bold
keyword.other	#6796E6	—
variable.other.constant, variable.other.enummember	#4FC1FF	—
variable, constant.other.placeholder, meta.embedded, support.type.property-name, meta.object-literal.key, entity.other.attribute-name.tsx, entity.other.attribute-name.localname.xml	#9CDCFE	—
storage, storage.type, storage.modifier, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, variable.language, keyword.control.new, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.new, keyword.operator.wordlike, keyword.other.definition.ini, constant.language, entity.name.tag.html, entity.name.tag.tsx, meta.selector.css, entity.name.section.markdown, punctuation.definition.heading.markdown, variable.other.assignment.shell, entity.name.tag.localname.xml	#569CD6	—
support.class, support.type, entity.name.type, entity.name.function.java, storage.type.annotation	#4EC9B0	—
meta.at-rule.header.css, entity.name.tag.css, 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, constant.character.escape, keyword.operator.quantifier.regexp	#D7BA7D	—
entity.name.function, support.function, keyword.control.anchor.regexp, keyword.operator.or.regexp	#DCDCAA	—
string, string.tag, string.value, punctuation.definition.group.regexp, punctuation.definition.character-class.regexp	#CE9178	—
string.regexp, constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp, meta.group.regexp	#D16969	—
invalid, invalid.illegal	#FF5370	—
keyword.control, keyword.other.import, keyword.other.package, keyword.operator.ternary, keyword.operator.logical	#C586C0	—
	#819b75	—
	#4b7354	—
constant.numeric	#B5CEA8	—
source.ini, keyword.operator.assignment	#D4D4D4	—
meta.jsx.children.tsx, meta.paragraph.markdown	#bdbdbd	—
comment, comment.line, comment.block	#545E7A
comment.block.documentation	#46618f	—
meta, meta.block, meta.class, punctuation.terminator.statement, punctuation.separator.key-value, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx	#7f8592	—
source.ignore	#5f626a	italic underline
punctuation.definition.typeparameters	#5f626a	—
string.other.link.title.markdown	#82AAFF	—
string.other.link.description.title.markdown	#C792EA	—
constant.other.reference.link.markdown	#FFCB6B	—
markup.raw.block	#C792EA	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#EEFFFF	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#EEFFFF	—

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