Material Arc

Name: Material Arc
Author: Martin Thorsen

Publisher: Martin ThorsenThemes in package: 1

A Material theme adapted for the Arc GTK theme

Open in VS Code GitHub

VS Code preview

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

Material Arc — Material Arc

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#383C4A
activityBar.border#0000
activityBar.foreground#D3DAE3D0
activityBarBadge.background#5294e2
activityBarBadge.foreground#fff
badge.background#5294e2
badge.foreground#fff
button.background#5294e2
button.foreground#fff
button.hoverBackground#6ca4e6
dropdown.background#252a33
dropdown.border#252a33
editor.background#2f343f
editor.foreground#D3DAE3D0
editor.lineHighlightBackground#21242c
editor.selectionBackground#5294e240
editor.selectionHighlightBorder#404552
editorCursor.foreground#5294e2
editorGroup.border#252a33
editorGroup.emptyBackground#383C4A
editorGroupHeader.border#252a33
editorGroupHeader.tabsBackground#383C4A
editorGroupHeader.tabsBorder#383C4A
editorHoverWidget.background#383C4A
editorHoverWidget.border#252a33
editorIndentGuide.activeBackground#383C4A
editorIndentGuide.background#323843
editorLineNumber.activeForeground#D3DAE3D0
editorLineNumber.foreground#D3DAE335
editorOverviewRuler.border#323843
editorRuler.foreground#383C4A
editorSuggestWidget.background#252a33
editorSuggestWidget.border#252a33
editorSuggestWidget.highlightForeground#79ace8
editorSuggestWidget.selectedBackground#383C4A
editorWhitespace.foreground#D3DAE335
editorWidget.background#2f343f
editorWidget.border#252a33
extensionButton.prominentBackground#5a8744
extensionButton.prominentHoverBackground#88C36A
focusBorder#404552
gitDecoration.ignoredResourceForeground#D3DAE370
input.background#404552
input.border#252a33
input.placeholderForeground#D3DAE380
inputOption.activeBackground#404552
inputOption.activeForeground#5294e2
list.activeSelectionBackground#404552
list.focusBackground#404552
list.highlightForeground#79ace8
list.hoverBackground#404552
list.inactiveSelectionBackground#383C4A
menu.selectionBackground#404552
panel.background#383C4A
panel.border#252a33
panelTitle.activeBorder#5294e2
peekView.border#252a33
peekViewEditor.background#252a33
peekViewResult.background#383C4A
peekViewResult.selectionBackground#383C4A
peekViewTitle.background#252a33
pickerGroup.border#404552
pickerGroup.foreground#5294e2
quickInput.foreground#95a1b1
scrollbarSlider.activeBackground#404552
scrollbarSlider.background#383C4A
scrollbarSlider.hoverBackground#404552
selection.background#5294e280
sideBar.background#383C4A
sideBar.border#252a33
sideBar.foreground#D3DAE3D0
sideBarSectionHeader.background#0000
statusBar.background#383C4A
statusBar.border#252a33
statusBar.foreground#D3DAE3D0
statusBar.noFolderBackground#383C4A
statusBarItem.hoverBackground#383C4A
statusBarItem.remoteBackground#0000
statusBarItem.remoteForeground#D3DAE3D0
tab.activeBackground#2f343f
tab.activeBorderTop#5294e2
tab.inactiveBackground#0000
terminal.ansiBlue#3465A4
terminal.ansiBrightBlue#729FCF
terminal.ansiBrightCyan#34E2E2
terminal.ansiBrightGreen#8AE234
terminal.ansiBrightMagenta#AD7FA8
terminal.ansiBrightRed#EF2929
terminal.ansiBrightYellow#FCE94F
terminal.ansiCyan#06989A
terminal.ansiGreen#4E9A06
terminal.ansiMagenta#75507B
terminal.ansiRed#CC0000
terminal.ansiWhite#D3DAE3
terminal.ansiYellow#C4A000
terminal.background#2f343f
terminal.border#0000
titleBar.activeBackground#2f343f
titleBar.border#252a33
titleBar.inactiveBackground#323843
titleBar.inactiveForeground#D3DAE3D0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
Keyword, Storage, comment, keyword.control, punctuation.definition.comment, punctuation.definition.block.tag.jsdoc, meta.other.type.phpdoc.php punctuation, entity.name.type.instance.jsdoc, punctuation.definition.bracket, variable.other.jsdoc, storage.type.class.jsdoc, comment.block.documentation.phpdoc.php keyword.other.phpdoc.php, comment.block.documentation.phpdoc.php punctuation.separator.inheritance.php, comment.block.documentation.phpdoc.php support.other.namespace.php, comment.block.documentation.phpdoc.php support.class, comment.block.documentation.phpdoc.php keyword.other, markup.italic, markup.quote markup.italic, markup.quote markup.italic punctuation.definition.italic.markdown, markup.quote markup.italic string, punctuation.definition.italic.markdown, variable.language, source.js constant.other.object.key.js string.unquoted.label.js, entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, support.type.vendored.property-name.css	—	italic
meta.separator, markup.bold, markup.bold string, punctuation.definition.bold.markdown, markup.bold markup.italic, markup.italic markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold, markup.quote markup.bold punctuation.definition.bold.markdown, markup.quote markup.bold string	—	bold
url, link, uri, markup.underline	—	underline
source.css entity.other.attribute-name	—
constant.other.color, meta.selector.css	#ffffff	—
variable, support.variable, support.variable.property.js, string constant.other.placeholder, meta.object-literal.key.js, text.html.markdown, punctuation.definition.list_item.markdown, markup.table	#edf0f4	—
meta.object-literal.key.js, 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, support.type	#D3DAE3D0	—
support.type.vendored.property-name.css, markup.quote, markup.quote markup.italic, markup.quote markup.italic punctuation.definition.italic.markdown, markup.quote markup.italic string, markup.quote markup.bold, markup.quote markup.bold punctuation.definition.bold.markdown, markup.quote markup.bold string	#D3DAE3A0	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown, text.html.markdown meta.dummy.line-break, markup.quote punctuation.definition.blockquote.markdown, variable.language.fenced.markdown, meta.separator, punctuation.definition.bracket, punctuation.definition.comment, comment, comment.block.documentation.js punctuation.definition.block.tag.jsdoc, comment.block.documentation.js entity.name.type.instance.jsdoc, comment.block.documentation.js storage.type.class.jsdoc, comment.block.documentation.js variable.other.jsdoc, comment.block.documentation.phpdoc.php punctuation, comment.block.documentation.phpdoc.php support, comment.block.documentation.phpdoc.php keyword	#D3DAE370	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted, markup.inserted.git_gutter, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#BD8	—
constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.array.literal.js, meta.brace.round.js, keyword.operator.class.php, keyword.operator.logical.js, string.regexp, constant.character.escape, markup.italic, punctuation.definition.italic.markdown	#8DF	—
keyword, keyword.control, keyword.other.phpdoc.php, keyword.other.function.use.php, storage.type, storage.modifier, markup.changed, markup.raw.block, invalid.deprecated, text.html.markdown markup.inline.raw.markdown, string.other.link.description.title.markdown, beginning.punctuation.definition.list.markdown	#C8E	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, entity.name.method.js, meta.class-method.js entity.name.function.js, variable.function.constructor, source.sass keyword.control, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, string.other.link.title.markdown	#8AF	—
constant.other.php, constant.other.class.php, meta.function.parameter.typehinted.php storage.type.php, entity.name, entity.other.attribute-name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, support.variable.dom.js, support.constant, constant.other.reference.link.markdown	#FC8	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, source.cpp meta.block variable.other, support.other.variable, string.other.link, markup.bold, markup.bold string, markup.bold markup.italic, markup.italic markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, punctuation.definition.bold.markdown	#E67	—
support.class.component.html, constant.numeric, constant.language, support.constant, variable.other.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other, meta.function.parameters.php variable, meta.function.closure.use.php variable, markdown.heading, markup.underline, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#E96	—
invalid, invalid.illegal, variable.parameter.function.language.special, entity.name.module.js, variable.import.parameter.js, variable.other.class.js, variable.language, markup.deleted, source.js constant.other.object.key.js string.unquoted.label.js	#F56	—

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