Boundless gray (Theme)

Name: Boundless gray (Theme)
Author: d3ciph3r3r

Publisher: d3ciph3r3rThemes in package: 2

Simple dark gray theme

Open in VS Code

Color themes

VS Code preview

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

Boundless gray (Theme) — Boundless Gray

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#282828
activityBarBadge.background#282828
breadcrumb.activeSelectionForeground#f07178
breadcrumb.focusForeground#f07178
breadcrumb.foreground#7C6F64
editor.background#282828
editor.foreground#BBB
editor.lineHighlightBackground#2b2b2b
editor.selectionBackground#30434c
editorBracketMatch.border#7C6F64
editorCursor.foreground#BBB
editorGroupHeader.tabsBackground#282828
editorGutter.background#282828
editorLineNumber.activeForeground#f07178
editorLineNumber.foreground#7C6F64
editorOverviewRuler.border#282828
editorRuler.foreground#282828
editorWhitespace.foreground#282828
gitDecoration.addedResourceForeground#ac8cff
gitDecoration.conflictingResourceForeground#f07178
gitDecoration.deletedResourceForeground#f07178
gitDecoration.modifiedResourceForeground#ac8cff
gitDecoration.untrackedResourceForeground#ac8cff
panel.background#282828
panel.border#282828
scrollbar.shadow#282828
scrollbarSlider.background#282828
sideBar.background#282828
sideBarSectionHeader.background#282828
sideBarSectionHeader.border#282828
sideBarTitle.foreground#BBB
statusBar.background#282828
tab.activeForeground#ffffff
tab.inactiveBackground#282828
tab.inactiveForeground#555555
terminal.ansiBlack#1d2021
terminal.ansiBlue#0d6678
terminal.ansiBrightBlack#665c54
terminal.ansiBrightBlue#0d6678
terminal.ansiBrightCyan#8ba59b
terminal.ansiBrightGreen#95c085
terminal.ansiBrightMagenta#8f4673
terminal.ansiBrightRed#fb543f
terminal.ansiBrightWhite#fdf4c1
terminal.ansiBrightYellow#fac03b
terminal.ansiCyan#8ba59b
terminal.ansiGreen#95c085
terminal.ansiMagenta#8f4673
terminal.ansiRed#a12211
terminal.ansiWhite#a89984
terminal.ansiYellow#fac03b
terminal.background#282828
terminal.foreground#bdae9a
terminalCursor.background#a89984
terminalCursor.foreground#a89984
titleBar.activeBackground#282828
titleBar.activeForeground#BBB
window.activeBorder#282828
window.inactiveBorder#282828

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
storage.type, storage.modifier, meta.tag, meta.tag.sgml, meta.use.php, punctuation, 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, keyword.control, keyword.other.template, keyword.other.substitution, keyword.other.unit, keyword.other, 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, source.sass keyword.control, entity.name, entity.name.tag, entity.other.attribute-name, entity.other.attribute-name.class, constant.character, constant.escape, constant.language, constant.other.color, markup.deleted.git_gutter, markup.changed.git_gutter, support.constant, support.type, support.class, support.orther.namespace.use.php, support.other.namespace.php, support.type.sys-types, variable.parameter, variable.language, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name, source.json meta.structure.dictionary.json support.type.property-name.json	#f07178	—
variable, variable.function, variable.import.parameter.js, variable.other.class.js, variable.function.constructor, entity.name.function, entity.other.inherited-class, entity.name.module.js, entity.name.method.js, meta.function-call, meta.block variable.other, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, meta.class-method.js entity.name.function.js, support.function, keyword.other.special-method, constant.other.symbol, constant.other.key, constant.character.escape, markup.heading, markup.inserted.git_gutter, string.regexp, 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	#BBB	—
string, string.other.link, string constant.other.placeholder, support.other.variable, constant.numeric, constant.other.color, meta.jsx.children.js	#9B96A8	—
comment, punctuation.definition.comment	#7C6F64	italic
invalid, invalid.illegal	#FFF	—
markup.inserted	#0af	—
markup.deleted	#0af	—
markup.changed	#0af	—
url, link, uri	—	underline
text.html.markdown, punctuation.definition.list_item.markdown	#BBB	—
text.html.markdown markup.inline.raw.markdown	#BBB	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#BBB	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#f07178	—
markup.italic	#f07178	italic
markup.bold, markup.bold string	#f07178	bold
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	#f07178	bold
markup.underline	#F78C6C	underline
markup.quote punctuation.definition.blockquote.markdown	#65737E	—
markup.quote	—	italic
string.other.link.title.markdown	#82AAFF	—
string.other.link.description.title.markdown	#9B96A8	—
constant.other.reference.link.markdown	#FFCB6B	—
markup.raw.block	#9B96A8	—
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}!`;
}