Grey Theme

Name: Grey Theme
Author: Patrick Danilevici

Publisher: Patrick DanileviciThemes in package: 1

A grey theme for VS Code

Open in VS Code GitHub

VS Code preview

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

Grey Theme — Grey Theme

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#303032
activityBar.border#30303260
activityBar.foreground#ABABB0
activityBarBadge.background#B3B3B5
activityBarBadge.foreground#303032
badge.background#30303230
badge.foreground#8D8D91
breadcrumb.activeSelectionForeground#8D8D91
breadcrumb.background#303032
breadcrumb.focusForeground#ABABB0
breadcrumb.foreground#A0A0A3
breadcrumbPicker.background#303032
button.background#8D8D9150
contrastBorder#8D8D9140
debugToolBar.background#303032
diffEditor.insertedTextBackground#ECECED15
diffEditor.removedTextBackground#FFFFFF20
dropdown.background#303032
dropdown.border#C8C8CF10
editor.background#222222
editor.findMatchBackground#303032
editor.findMatchBorder#8D8D91
editor.findMatchHighlightBackground#8D8D9193
editor.findMatchHighlightBorder#C8C8CF30
editor.foreground#ABABB0
editor.lineHighlightBackground#30303250
editor.selectionBackground#B3B3B530
editor.selectionHighlightBackground#8D8D916b
editor.selectionHighlightBorder#B3B3B5f0
editorBracketMatch.background#303032
editorBracketMatch.border#D9D9DA7f
editorCursor.foreground#D9D9DA
editorError.foreground#FFFFFF70
editorGroup.border#30303230
editorGroupHeader.tabsBackground#303032
editorGutter.addedBackground#ECECED60
editorGutter.deletedBackground#FFFFFF60
editorGutter.modifiedBackground#B3B3B560
editorHoverWidget.background#303032
editorHoverWidget.border#C8C8CF10
editorIndentGuide.activeBackground#555558
editorIndentGuide.background#55555870
editorInfo.foreground#B3B3B570
editorLineNumber.activeForeground#B3B3B5
editorLineNumber.foreground#8D8D91c0
editorLink.activeForeground#ABABB0
editorMarkerNavigation.background#ABABB005
editorOverviewRuler.border#303032
editorOverviewRuler.errorForeground#FFFFFF40
editorOverviewRuler.findMatchForeground#8D8D91
editorOverviewRuler.infoForeground#B3B3B540
editorOverviewRuler.warningForeground#D9D9DA70
editorRuler.foreground#555558
editorSuggestWidget.background#303032
editorSuggestWidget.border#C8C8CF10
editorSuggestWidget.foreground#ABABB0
editorSuggestWidget.highlightForeground#D9D9DA
editorSuggestWidget.selectedBackground#8D8D9120
editorWarning.foreground#ECECED
editorWhitespace.foreground#ABABB040
editorWidget.background#303032
editorWidget.border#D9D9DA
editorWidget.resizeBorder#8D8D91
extensionButton.prominentBackground#ECECED90
extensionButton.prominentHoverBackground#FFFFFF
focusBorder#C8C8CF00
gitDecoration.conflictingResourceForeground#D9D9DA
gitDecoration.deletedResourceForeground#FFFFFF
gitDecoration.ignoredResourceForeground#8D8D91
gitDecoration.modifiedResourceForeground#A0A0A3
gitDecoration.untrackedResourceForeground#B3B3B5
input.background#434345
input.border#C8C8CF10
input.foreground#ABABB0
input.placeholderForeground#ABABB060
inputOption.activeBackground#ABABB030
inputOption.activeBorder#ABABB030
inputValidation.errorBorder#FFFFFF50
inputValidation.infoBorder#B3B3B550
inputValidation.warningBorder#D9D9DA50
list.activeSelectionBackground#303032
list.activeSelectionForeground#8D8D91
list.focusBackground#434345
list.focusForeground#B3B3B5
list.highlightForeground#8D8D91
list.hoverBackground#555558
list.hoverForeground#C8C8CF
list.inactiveSelectionBackground#9c9c9c46
list.inactiveSelectionForeground#8D8D91
list.warningForeground#D9D9DA
listFilterWidget.background#30303230
listFilterWidget.noMatchesOutline#30303230
listFilterWidget.outline#30303230
menu.background#303032f8
menu.border#8D8D9150
menu.foreground#ABABB0
menu.selectionBackground#434345
menu.selectionBorder#30303230
menu.selectionForeground#ABABB0
menu.separatorBackground#ABABB0
menubar.selectionBackground#434345
menubar.selectionBorder#8D8D9150
menubar.selectionForeground#ABABB0
minimap.background#303032
minimapGutter.addedBackground#272626
minimapGutter.deletedBackground#D9D9DA
minimapGutter.modifiedBackground#ECECED
minimapSlider.activeBackground#ECECEDb0
minimapSlider.background#a5a5a580
minimapSlider.hoverBackground#bbbbbba0
notificationLink.foreground#8D8D91
notifications.background#303032
notifications.foreground#ABABB0
panel.background#303032
panel.border#30303260
panelTitle.activeBorder#8D8D91
panelTitle.activeForeground#C8C8CF
panelTitle.inactiveForeground#ABABB0
peekView.border#30303230
peekViewEditor.background#ABABB005
peekViewEditor.matchHighlightBackground#8D8D9150
peekViewEditorGutter.background#ABABB005
peekViewResult.background#ABABB005
peekViewResult.matchHighlightBackground#8D8D9150
peekViewResult.selectionBackground#8D8D9170
peekViewTitle.background#ABABB005
peekViewTitleDescription.foreground#ABABB060
pickerGroup.foreground#8D8D91
progressBar.background#8D8D91
scrollbar.shadow#30303200
scrollbarSlider.activeBackground#8D8D91cc
scrollbarSlider.background#8D8D91bb
scrollbarSlider.hoverBackground#8D8D91ee
selection.background#8D8D91
settings.checkboxBackground#303032
settings.checkboxForeground#ABABB0
settings.dropdownBackground#303032
settings.dropdownForeground#ABABB0
settings.headerForeground#8D8D91
settings.modifiedItemIndicator#8D8D91
settings.numberInputBackground#303032
settings.numberInputForeground#ABABB0
settings.textInputBackground#303032
settings.textInputForeground#ABABB0
sideBar.background#303032
sideBar.border#8D8D9150
sideBar.foreground#B3B3B5
sideBarSectionHeader.background#303032
sideBarSectionHeader.border#30303260
sideBarSectionHeader.foreground#B3B3B5
sideBarTitle.foreground#ABABB0
statusBar.background#000000
statusBar.border#30303260
statusBar.debuggingBackground#D9D9DA
statusBar.debuggingForeground#C8C8CF
statusBar.foreground#D9D9DA
statusBar.noFolderBackground#303032
statusBarItem.hoverBackground#8D8D9120
statusBarItem.remoteBackground#8D8D91
statusBarItem.remoteForeground#303032
tab.activeBackground#8D8D9150
tab.activeBorder#8D8D91
tab.activeForeground#C8C8CF
tab.activeModifiedBorder#8D8D91
tab.border#303032
tab.inactiveBackground#8D8D9120
tab.inactiveForeground#ABABB0af
tab.unfocusedActiveBackground#8D8D9140
tab.unfocusedActiveBorder#8D8D91
tab.unfocusedActiveForeground#ABABB0
tab.unfocusedInactiveBackground#8D8D9110
tab.unfocusedInactiveForeground#ABABB07f
terminal.ansiBlack#303032
terminal.ansiBlue#B3B3B5
terminal.ansiBrightBlack#8D8D91
terminal.ansiBrightBlue#B3B3B5
terminal.ansiBrightCyan#C6C6C8
terminal.ansiBrightGreen#ECECED
terminal.ansiBrightMagenta#D9D9DA
terminal.ansiBrightRed#FFFFFF
terminal.ansiBrightWhite#C8C8CF
terminal.ansiBrightYellow#D9D9DA
terminal.ansiCyan#C6C6C8
terminal.ansiGreen#ECECED
terminal.ansiMagenta#D9D9DA
terminal.ansiRed#FFFFFF
terminal.ansiWhite#C8C8CF
terminal.ansiYellow#D9D9DA
terminalCursor.background#303032
terminalCursor.foreground#D9D9DA
textLink.activeForeground#ABABB0
textLink.foreground#8D8D91
titleBar.activeBackground#303032
titleBar.activeForeground#ABABB0
titleBar.border#30303260
titleBar.inactiveBackground#303032
titleBar.inactiveForeground#8D8D91
tree.indentGuidesStroke#555558
widget.shadow#30303230

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#757474	italic
variable, string constant.other.placeholder	#EEFFFF	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#FF5370	—
keyword, storage.type, storage.modifier	#C792EA	—
keyword.control, 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	#d1d3d4	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#f07178	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#82AAFF	—
meta.block variable.other	#f07178	—
support.other.variable, string.other.link	#f07178	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#F78C6C	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#C3E88D	—
support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#FFCB6B	—
support.type	#B2CCD6	—
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	#B2CCD6	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#FF5370	—
variable.language	#FF5370	italic
entity.name.method.js	#82AAFF	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#82AAFF	—
entity.other.attribute-name	#C792EA	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#FFCB6B	italic
entity.other.attribute-name.class	#FFCB6B	—
source.sass keyword.control	#82AAFF	—
markup.inserted	#C3E88D	—
markup.deleted	#FF5370	—
markup.changed	#C792EA	—
string.regexp	#89DDFF	—
constant.character.escape	#89DDFF	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#82AAFF	italic
source.js constant.other.object.key.js string.unquoted.label.js	#FF5370	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#C792EA	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FFCB6B	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#F78C6C	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FF5370	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C17E70	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#82AAFF	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f07178	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C792EA	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C3E88D	—
text.html.markdown, punctuation.definition.list_item.markdown	#EEFFFF	—
text.html.markdown markup.inline.raw.markdown	#C792EA	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#65737E	—
punctuation.definition.heading.markdown, markup.heading.markdown	#e7e7e7de	bold
meta.paragraph.markdown, text.html.markdown	#c7c2c2	—
markup.italic	#fffefed7	italic
markup.bold, markup.bold string	#c5c5c5	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	#C792EA	—
string.other.link.description.markdown.citation	#c198db	bold
string.unquoted.plain.out.yaml	#2dd6b7	—
string.unquoted.block.yaml, meta.embedded.block.frontmatter	#D5DBB3	—
constant.language.boolean.yaml, meta.embedded.block.frontmatter	#D4AF37	—
string.quoted.double.yaml, meta.embedded.block.frontmatter	#D4AF37	—
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	#e0e0e0	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#EEFFFF	—
keyword.control.preamble.latex, meta.preamble.latex	#3fce4b	—
text.tex.latex	#b0b1b0	—
meta.citation.latex, constant.other.reference.citation.latex	#e78224
keyword.control.cite.latex	#e23804	—
meta.function.section.chapter.latex	#2be724	bold
meta.function.section.section.latex, meta.function.section.subsection.latex	#1dd117	—
markup.italic.emph.latex	#b0b1b0	italic
entity.name.footnote.latex	#b0b1b0	italic
variable.parameter.function.latex	#e97c00	—
meta.function.environment.general.latex	#08e900	—
support.function.be.latex	#08e900	—
meta.function.environment.general.latex	#b3b4b3	—

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