Vercel VSCode Theme

Name: Vercel VSCode Theme
Author: natemcgrady

Publisher: natemcgradyThemes in package: 1

Vercel theme for VSCode/Cursor based on ray.so

GitHub

VS Code preview

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

Vercel VSCode Theme — Vercel

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#000000
activityBar.foreground#eeeeee
activityBarBadge.background#0070f3
badge.background#0070f3
badge.foreground#ffffff
button.background#0070f3
button.foreground#ffffff
button.hoverBackground#0761d1
dropdown.background#000000
dropdown.border#3a3a3a
editor.background#000000
editor.foreground#eeeeee
editor.lineHighlightBackground#1a1a1a
editor.selectionBackground#1f3e70
editor.selectionHighlightBackground#1f3e7080
editorBracketHighlight.foreground1#eeeeee
editorBracketHighlight.foreground2#eeeeee
editorBracketHighlight.foreground3#eeeeee
editorBracketHighlight.foreground4#eeeeee
editorBracketHighlight.foreground5#eeeeee
editorBracketHighlight.foreground6#eeeeee
editorBracketHighlight.unexpectedBracket.foreground#eeeeee
editorBracketMatch.background#1f3e7080
editorBracketMatch.border#1f3e70
editorCursor.foreground#eeeeee
editorGroupHeader.tabsBackground#000000
editorGutter.background#000000
editorGutter.modifiedBackground#00cb50
editorIndentGuide.activeBackground#505050
editorIndentGuide.background#3a3a3a
editorLineNumber.activeForeground#eeeeee
editorLineNumber.foreground#a0a0a0
editorWhitespace.foreground#3a3a3a
gitDecoration.addedResourceForeground#00cb50
gitDecoration.modifiedResourceForeground#00cb50
gitDecoration.stageDeletedResourceForeground#ff4d8d
gitDecoration.stageModifiedResourceForeground#00cb50
gitDecoration.untrackedResourceForeground#00cb50
input.background#1a1a1a
input.border#3a3a3a
input.foreground#eeeeee
list.activeSelectionBackground#1f3e70
list.activeSelectionForeground#eeeeee
list.errorForeground#ff4d8d
list.hoverBackground#2a2a2a
list.inactiveSelectionBackground#2a2a2a
list.warningForeground#ffcc47
panel.background#000000
panel.border#1a1a1a
scrollbarSlider.activeBackground#666666
scrollbarSlider.background#3a3a3a80
scrollbarSlider.hoverBackground#505050
sideBar.background#000000
sideBar.border#1a1a1a
sideBar.foreground#eeeeee
sideBarSectionHeader.background#000000
sideBarTitle.foreground#eeeeee
statusBar.background#000000
statusBar.debuggingBackground#000000
statusBar.foreground#eeeeee
statusBar.noFolderBackground#000000
statusBarItem.remoteBackground#0070f3
statusBarItem.remoteForeground#ffffff
tab.activeBackground#000000
tab.activeForeground#eeeeee
tab.activeModifiedBorder#00cb50
tab.border#1a1a1a
tab.inactiveBackground#000000
tab.inactiveForeground#a0a0a0
tab.inactiveModifiedBorder#00cb50
terminal.ansiBlack#000000
terminal.ansiBlue#47A8FF
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#47A8FF
terminal.ansiBrightCyan#47A8FF
terminal.ansiBrightGreen#00CB50
terminal.ansiBrightMagenta#C473FC
terminal.ansiBrightRed#FF4D8D
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#FFCC47
terminal.ansiCyan#0070f3
terminal.ansiGreen#00CB50
terminal.ansiMagenta#C473FC
terminal.ansiRed#FF4D8D
terminal.ansiWhite#eeeeee
terminal.ansiYellow#FFCC47
terminal.background#000000
terminal.foreground#eeeeee
terminal.selectionBackground#1f3e70
terminalCursor.background#000000
terminalCursor.foreground#eeeeee
titleBar.activeBackground#000000
titleBar.activeForeground#eeeeee
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#a0a0a0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#a0a0a0	—
keyword, storage.modifier, storage.type, keyword.control	#ff4d8d
keyword.operator	#ff4d8d	—
string, string.quoted, punctuation.definition.string.begin, punctuation.definition.string.end	#00cb50	—
constant.character, variable.language.this	#A6B5FF	—
constant.language	#ffffff	—
variable.other.constant	#47a8ff	—
variable.other.readwrite	#eeeeee	—
variable.other.object	#47a8ff	—
variable.other.readwrite.alias	#eeeeee	—
entity.name.function, support.function, meta.function-call	#c473fc
variable.parameter	#eeeeee
entity.name.tag	#00cb50	—
support.class.component	#47a8ff	—
entity.other.attribute-name	#c473fc
string.regexp, string.interpolated	#00cb50	—
punctuation, meta.brace, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag	#eeeeee	—
constant.numeric, constant.numeric.decimal	#ffffff	—
support.variable.property, variable.other.property	#eeeeee	—
support.type.primitive, support.type	#47a8ff
entity.name.type.tsx, meta.type.annotation.tsx, meta.var-single-variable.expr.tsx, entity.name	#C473FC	—
punctuation.separator.key-value.tsx, meta.object.member.tsx, meta.objectliteral.tsx, meta.var.expr.tsx, source.tsx	#FF4D8D	—
meta.object-literal.key.tsx	#eeeeee	—
punctuation.definition.string.template.begin.tsx, punctuation.definition.string.template.end.tsx, string.template.tsx, meta.embedded.expression.tsx, meta.tag.attributes.tsx, meta.tag.tsx, meta.jsx.children.tsx, meta.block.tsx, meta.function.expression.tsx, meta.export.default.tsx, source.tsx	#00CB50	—
punctuation.definition.template-expression.begin.tsx, punctuation.definition.template-expression.end.tsx, meta.template.expression.tsx, string.template.tsx, meta.embedded.expression.tsx, meta.tag.attributes.tsx, meta.tag.tsx, meta.jsx.children.tsx, meta.block.tsx, meta.function.expression.tsx, meta.export.default.tsx, source.tsx	#FF4D8D	—
string.template.tsx, meta.embedded.expression.tsx, meta.tag.attributes.tsx, meta.tag.tsx, meta.jsx.children.tsx, meta.block.tsx, meta.function.expression.tsx, meta.export.default.tsx, source.tsx	#00CB50	—
variable.object.property.tsx, meta.definition.property.tsx, meta.field.declaration.tsx, meta.object.type.tsx, meta.type.declaration.tsx	#ffffff	—
markup.underline.link, string.other.link	#00cb50	—
markup.bold	#ff4d8d	bold
markup.italic	—	italic
markup.heading, entity.name.section	#c473fc	bold
markup.deleted	#ff8c85	—
markup.inserted	#70d9a8	—
invalid, invalid.illegal	#ff0000	—
meta.tag.sgml.doctype, meta.tag.metadata	#a0a0a0	—
support.type.property-name.json	#FF4D8D	—

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