Primer Light

Name: Primer Light
Author: Andrew Markle

Publisher: Andrew MarkleThemes in package: 1

This is a port of the primer light theme from sublime text.

GitHub

VS Code preview

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

Primer Light — Primer Light

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.

activityBar.background#f5f5f5
activityBar.border#ddd
activityBar.foreground#333
activityBarBadge.background#ddd
activityBarBadge.foreground#333
badge.background#3d82c6
badge.foreground#fff
button.background#3d82c6
button.foreground#fff
button.hoverBackground#064e93
debugToolBar.background#fff
diffEditor.insertedTextBackground#e6ffec
diffEditor.removedTextBackground#ffdce0
dropdown.background#fff
dropdown.border#ddd
dropdown.foreground#333
editor.background#fff
editor.findMatchBackground#fff78a7e
editor.findMatchHighlightBackground#fff78a7e
editor.findRangeHighlightBackground#fff78a7e
editor.foreground#333
editor.hoverHighlightBackground#fff78a7e
editor.lineHighlightBackground#F0F5FA
editor.lineHighlightBorder#F0F5FA
editor.rangeHighlightBackground#fff78a7e
editor.selectionBackground#acd5ff
editor.selectionHighlightBackground#e9f4ff
editorBracketMatch.background#F0F5FA
editorBracketMatch.border#e8e8e8
editorCodeLens.foreground#0366d6
editorCursor.background#333
editorCursor.foreground#333
editorError.border#fff
editorError.foreground#d21d00
editorGhostText.border#3d82c6
editorGhostText.foreground#3d82c6
editorGroup.border#ddd
editorGutter.addedBackground#A1DF8A
editorGutter.deletedBackground#EB5368
editorGutter.modifiedBackground#F0C36F
editorHoverWidget.background#fff
editorHoverWidget.border#ddd
editorInfo.border#fff
editorInfo.foreground#deb800
editorLineNumber.foreground#b3b3b3
editorLink.activeForeground#0366d6
editorOverviewRuler.addedForeground#A1DF8A
editorOverviewRuler.border#ddd
editorOverviewRuler.deletedForeground#EB5368
editorOverviewRuler.errorForeground#d21d00
editorOverviewRuler.infoForeground#deb800
editorOverviewRuler.modifiedForeground#5F7387
editorOverviewRuler.warningForeground#deb800
editorRuler.foreground#e8e8e8
editorSuggestWidget.background#fff
editorSuggestWidget.border#ddd
editorSuggestWidget.foreground#333
editorSuggestWidget.highlightForeground#3d82c6
editorSuggestWidget.selectedBackground#acd5ff
editorWarning.border#fff
editorWarning.foreground#deb800
editorWhitespace.foreground#ececec7b
editorWidget.background#fff
editorWidget.border#ddd
extensionButton.prominentBackground#3d82c6
extensionButton.prominentForeground#fff
extensionButton.prominentHoverBackground#3d82c6
focusBorder#ddd
foreground#333
gitDecoration.conflictingResourceForeground#f66a0a
gitDecoration.deletedResourceForeground#d21d00
gitDecoration.ignoredResourceForeground#2f363d
gitDecoration.modifiedResourceForeground#333
gitDecoration.untrackedResourceForeground#444d56
input.background#fff
input.border#ddd
input.foreground#333
input.placeholderForeground#ddd
inputOption.activeBorder#ddd
inputValidation.errorBackground#fff
inputValidation.errorBorder#ff3333
inputValidation.infoBackground#fff
inputValidation.infoBorder#0086B3
inputValidation.warningBackground#fff
inputValidation.warningBorder#F0C36F
list.activeSelectionBackground#3d82c6
list.activeSelectionForeground#fff
list.errorForeground#d21d00
list.focusAndSelectionOutline#dfeffad1
list.focusBackground#dbebfd
list.focusForeground#333
list.focusHighlightForeground#ffffff
list.highlightForeground#3d82c6
list.hoverBackground#fff
list.hoverForeground#000
list.inactiveSelectionBackground#dbebfd
list.inactiveSelectionForeground#4180C6
list.warningForeground#ffaa4f
merge.border#fff
merge.currentHeaderBackground#f66a0a
panel.background#f7f7f7
panel.border#ddd
panelTitle.activeBorder#ddd
panelTitle.activeForeground#333
panelTitle.inactiveForeground#666
progressBar.background#3d82c6
scrollbarSlider.activeBackground#cfcfcfee
scrollbarSlider.background#cfcfcf52
scrollbarSlider.hoverBackground#cfcfcf9e
selection.background#3d81c683
sideBar.background#f5f5f5
sideBar.border#ddd
sideBar.foreground#333
sideBarSectionHeader.background#fff
sideBarSectionHeader.foreground#333
sideBarTitle.foreground#333
statusBar.background#ddd
statusBar.border#ddd
statusBar.debuggingBackground#f7f7f7
statusBar.debuggingForeground#ddd
statusBar.foreground#4b4b4b
statusBar.noFolderBackground#f7f7f7
statusBarItem.activeBackground#ddd
statusBarItem.hoverBackground#ddd
statusBarItem.prominentBackground#f7f7f7f7
statusBarItem.prominentHoverBackground#ddd
tab.activeBackground#3d82c6
tab.activeBorder#3d82c6
tab.activeForeground#fff
tab.border#fff
tab.inactiveBackground#fff
tab.inactiveForeground#666
tab.unfocusedActiveBorder#3d82c6
tab.unfocusedActiveForeground#000
tab.unfocusedInactiveBackground#dfeffad1
tab.unfocusedInactiveForeground#666666
terminal.ansiBlack#000
terminal.ansiBlue#85e7fa
terminal.ansiBrightBlack#686868
terminal.ansiBrightBlue#6871ff
terminal.ansiBrightCyan#85e7ee
terminal.ansiBrightGreen#cbe645
terminal.ansiBrightMagenta#ff77ff
terminal.ansiBrightRed#f07178
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffd864
terminal.ansiCyan#85e7ee
terminal.ansiGreen#56fa48
terminal.ansiMagenta#ae90e9
terminal.ansiRed#ff6c69
terminal.ansiWhite#c7c7c7
terminal.ansiYellow#ffd864
terminal.background#142638
terminal.foreground#fff
terminal.selectionBackground#89ceffd1
widget.shadow#dddddd

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#333	—
variable.parameter.function, variable.other	#333	—
comment, punctuation.definition.comment	#969896	—
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array	#173591	—
punctuation.section.scope, support.function.core	#333	—
keyword.operator	#333	—
keyword	#A71D5D	—
variable, variable.other.constant, variable.other.block, variable.other.readwrite.instance, variable.parameter.function	#ED6A43	—
entity.name.function, meta.require, support.function.any-method	#795DA3	—
support.class, entity.name.class, entity.name.type.class	#0086B3	—
meta.class	#333	—
keyword.other.special-method	#795DA3	—
storage	#A71D5D	—
support.function	#795DA3	—
constant	#795DA3	—
string, constant.other.symbol, entity.other.inherited-class, constant.character.escape.scss, constant.character.escape.css, constant.language.symbol	#4180C6	—
constant.numeric	#0086B3	—
entity.name.tag	#63a3a4	—
entity.other.attribute-name	#795DA3	—
entity.other.attribute-name.id, punctuation.definition.entity	#795DA3	—
meta.selector	#A71D5D	—
markup.heading punctuation.definition.heading, entity.name.section	#795DA3	—
keyword.other.unit	#5C9966	—
markup.bold, punctuation.definition.bold	#795DA3	bold
markup.italic, punctuation.definition.italic	#A71D5D	italic
markup.raw.inline	#183691	—
support.type.property-name.json	#4B83CD	—
string.other.link	#ED6A43	—
meta.link	#795DA3	—
markup.lists	#ED6A43	—
markup.quote	#795DA3	—
meta.separator	#333	—
markup.inserted	#A1DF8A	—
markup.deleted	#EB5368	—
markup.changed	#F0C36F	—
string.regexp	#795DA3	—
constant.character.escape	#795DA3	—
punctuation.section.embedded, variable.interpolation	#ab7967	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#333	—
entity.name.tag	#63a3a4	—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#91B3E0	italic
constant.character.entity, punctuation.definition.entity	#AB6526	—
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css	#7A3E9D	—
meta.property-value, meta.property-value constant.other, support.constant.property-value	#448C27	—
keyword.other.important	—	bold

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