Gray Gray Gray

Name: Gray Gray Gray
Author: kendama1980

Publisher: kendama1980Themes in package: 1

A gray color theme for Visual Studio Code

Open in VS Code GitHub

VS Code preview

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

Gray Gray Gray — graygraygray

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

badge.background#0060F0
badge.foreground#FFFFFF
breadcrumb.focusForeground#0000FF
breadcrumb.foreground#000000
contrastActiveBorder#0000FF
contrastBorder#000000
editor.background#C4C2C0
editor.findMatchBackground#FFFF00
editor.findMatchHighlightBackground#F0F0B0
editor.findRangeHighlightBackground#D0E0F0
editor.foldBackground#00D0A0
editor.foreground#000000
editor.lineHighlightBackground#D0E0F0
editor.selectionBackground#40A0F0
editor.selectionHighlightBackground#D0E0F0
editorBracketMatch.background#00D0A0
editorGroup.border#000000
editorGutter.background#B4B2B0
editorIndentGuide.background#606060
editorOverviewRuler.bracketMatchForeground#00A080
editorOverviewRuler.findMatchForeground#FFFF00
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.foreground#000000
editorSuggestWidget.selectedBackground#40A0F0
editorWhitespace.foreground#808080
focusBorder#0000FF
list.hoverBackground#B0B0B0
menu.foreground#000000
minimap.background#B4B2B0
minimap.findMatchHighlight#FFFF00
panel.border#000000
sideBar.background#D4D2D0
sideBar.foreground#000000
sideBarSectionHeader.background#C0C0D0
tab.activeForeground#000000
tab.border#000000
tab.unfocusedActiveBackground#E0E0E0
terminal.ansiBlack#000000
terminal.ansiBlue#0000C0
terminal.ansiBrightBlack#505050
terminal.ansiBrightBlue#2080F0
terminal.ansiBrightCyan#80F0F0
terminal.ansiBrightGreen#80F080
terminal.ansiBrightMagenta#F060F0
terminal.ansiBrightRed#F04040
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#F0F060
terminal.ansiCyan#00B0B0
terminal.ansiGreen#008000
terminal.ansiMagenta#B000B0
terminal.ansiRed#C00000
terminal.ansiWhite#FFFFE0
terminal.ansiYellow#808000
titleBar.border#000000
tree.indentGuidesStroke#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
entity.name, entity.other.inherited-class, storage.type.built-in	#0020A0	—
storage.type.built-in	—	bold
entity.name.function, entity.name.label, entity.name.section, entity.name.tag	#0060A0
entity.name.function.operator	#000000
variable, variable.parameter, variable.function, variable.language	#000000	—
variable.language	—	bold
constant, constant.numeric, constant.language, keyword.other.unit	#500080
constant.language, constant.character.escape	—	bold
storage.type	#0000B0	bold
storage.modifier, storage.control, entity.other.attribute-name	#008080	bold
entity.other.attribute-name	—
support	#000000	—
keyword, keyword.control, keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.logical, keyword.operator.new, keyword.operator.delete, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.noexcept, keyword.operator.wordlike, keyword.operator.word, keyword.declaration, markup.heading, punctuation.definition.markdown	#0000B0	bold
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.logical	—
punctuation.definition.bracket, punctuation.definition.begin.bracket.square, punctuation.definition.end.bracket.square, punctuation.section.angle-brackets, punctuation.section.block.begin.bracket.curly, punctuation.section.block.end.bracket.curly, punctuation.section.parens.begin.bracket.round, punctuation.section.parens.end.bracket.round, punctuation.section.parameters.begin.bracket.round, punctuation.section.parameters.end.bracket.round, punctuation.section.arguments.begin.bracket.round, punctuation.section.arguments.end.bracket.round, storage.modifier.array.bracket.square, keyword.operator.delete.array.bracket, keyword.operator.comparison, punctuation.definition.tag	#0000FF	bold
punctuation.separator, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, punctuation.separator.annotation, punctuation.separator.delimiter	#D000D0	bold
string, fenced_code.block.language, markup.fenced_code.block, markup.inline.raw	#E03000	—
comment, markup.quote	#008000	italic
markup.list	#A000A0	—
markup.bold	—	bold
markup.italic	—	italic
markup.underline.link, meta.link, punctuation.definition.link, string.other.link	#0000FF	underline
invalid, invalid.deprecated	#000000	—

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