Blueprint

Name: Blueprint
Author: giladgray

Publisher: giladgrayThemes in package: 1

Palantir Blueprint syntax theme for VS Code

Open in VS Code

VS Code preview

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

Blueprint — Blueprint

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#293742
badge.background#137CBD
button.background#137CBD
button.foreground#FFFFFF
button.hoverBackground#2B95D6
debugToolBar.background#A8225599
descriptionForeground#BFCCD6
diffEditor.insertedTextBackground#0D80504d
diffEditor.removedTextBackground#C230304d
editor.background#10161A
editor.findMatchBackground#1D7324
editor.findMatchHighlightBackground#1D73244d
editor.foreground#BFCCD6
editor.hoverHighlightBackground#394B59
editor.lineHighlightBackground#202B33
editor.selectionBackground#137CBD99
editor.selectionHighlightBackground#137CBD4d
editorBracketMatch.border#137CBD
editorCursor.foreground#F5F8FA
editorError.foreground#DB3737
editorGroupHeader.tabsBackground#182026
editorGroupHeader.tabsBorder#30404D
editorGutter.addedBackground#0D8050
editorGutter.deletedBackground#C23030
editorGutter.modifiedBackground#106BA3
editorHoverWidget.border#394B59
editorIndentGuide.background#293742
editorInfo.foreground#137CBD
editorLineNumber.foreground#394B59
editorLink.activeForeground#2B95D6
editorOverviewRuler.addedForeground#0D8050
editorOverviewRuler.border#30404D
editorOverviewRuler.deletedForeground#C23030
editorOverviewRuler.errorForeground#DB3737
editorOverviewRuler.infoForeground#106BA3
editorOverviewRuler.warningForeground#D9822B
editorRuler.foreground#293742
editorSuggestWidget.background#10161A
editorSuggestWidget.border#5642A6
editorSuggestWidget.highlightForeground#7157D9
editorSuggestWidget.selectedBackground#0E5A8A4d
editorWarning.foreground#D9822B
editorWidget.background#10161A
editorWidget.border#1D732499
errorForeground#DB3737
focusBorder#106BA3
foreground#BFCCD6
gitDecoration.conflictingResourceForeground#9179F2
gitDecoration.deletedResourceForeground#F55656
gitDecoration.ignoredResourceForeground#8A9BA8
gitDecoration.modifiedResourceForeground#F29D49
gitDecoration.untrackedResourceForeground#15B371
input.background#10161A4d
input.border#30404D
input.placeholderForeground#bfccd680
inputOption.activeBorder#2B95D6
inputValidation.errorBorder#DB3737
inputValidation.infoBorder#137CBD
inputValidation.warningBorder#D9822B
list.activeSelectionBackground#0E5A8A
list.activeSelectionForeground#FFFFFF
list.hoverBackground#202B33
list.inactiveSelectionBackground#0E5A8A4d
panel.border#30404D
panelTitle.activeBorder#137CBD
scrollbar.shadow#10161A
scrollbarSlider.activeBackground#73869499
scrollbarSlider.background#73869433
scrollbarSlider.hoverBackground#73869466
selection.background#2B95D6
sideBar.background#182026
sideBar.border#30404D
sideBarSectionHeader.background#202B33
statusBar.background#137CBD
statusBar.debuggingBackground#DB2C6F
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#7157D9
statusBarItem.prominentBackground#D9822B
statusBarItem.prominentHoverBackground#F29D49
tab.activeBackground#293742
tab.activeBorder#137CBD
tab.border#30404D
tab.inactiveBackground#202B33
welcomePage.buttonBackground#182026
welcomePage.buttonHoverBackground#202B33
widget.shadow#10161A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
punctuation, meta.brace, tag.assignment, markup.heading.name	#F5F8FA	—
comment, comment.line, punctuation.definition.comment	#738694	—
string, string.scss, punctuation.definition.string, markup.punctuation.quote	#B6D94C	—
constant.numeric, beginning.punctuation.definition.list	#F5498B	—
variable.object.property, variable.other.property, variable.other.constant.property, variable.other.object.property, support.variable.property, support.type.property-name	#BFCCD6	—
entity.name.function, support.function, entity.other.attribute-name.class.mixin, meta.decorator, meta.decorator variable, meta.link.inline, meta.function-call.generic	#2B95D6	—
variable, markup.inline.raw, punctuation.definition.variable.less	#00B3A4	—
variable.language, variable.legacy.builtin, support.class, support.module, support.type, support.variable, constant.character, constant.other, support.constant	#2EE6D6	—
constant.language	#AD99FF	—
entity.name.tag, entity.name.tag support.class.component, support.type.property-name.json, entity.other.attribute-name.pseudo-element	#29A634	—
keyword, keyword.control, storage, storage.type, storage.type punctuation, storage.modifier, markup.bold, punctuation.definition.bold, punctuation.definition.keyword	#A854A8	—
keyword.operator, entity.name.tag.reference, entity.other.attribute-name.parent-selector punctuation.definition, markup.italic, punctuation.definition.italic, punctuation.definition.interpolation, punctuation.definition.template-expression, punctuation.definition.typeparameters, punctuation.section.embedded	#C274C2	—
entity, punctuation.regex.group, markup.heading.punctuation	#F29D49	—
entity.name.type, entity.other.inherited-class, support.type.primitive, entity.other.attribute-name.pseudo-class	#F2B824	—
meta.type, meta.return.type, entity.name.type.interface, meta.interface entity.other.inherited-class	—	italic
meta.type keyword.control, meta.type storage.type.type	—

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