Primary Theme

Name: Primary Theme
Author: negative.one

Publisher: negative.oneThemes in package: 2

A warm, earthy theme for Visual Studio Code inspired by the Primary theme for Obsidian

GitHub

Color themes

VS Code preview

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

Primary Theme — Primary Dark

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#24221d
activityBar.border#312822
activityBar.foreground#c9af96
activityBar.inactiveForeground#968575
activityBarBadge.background#59bdd8
activityBarBadge.foreground#c9af96
badge.background#59bdd8
badge.foreground#c9af96
breadcrumb.activeSelectionForeground#c9af96
breadcrumb.background#27241f
breadcrumb.focusForeground#c9af96
breadcrumb.foreground#b9a399
breadcrumbPicker.background#25231e
button.background#24221d
button.foreground#c9af96
button.hoverBackground#25231e
button.secondaryBackground#25231e
button.secondaryForeground#c9af96
button.secondaryHoverBackground#25231e
charts.blue#3ca3bc
charts.foreground#c9af96
charts.green#1eb83a
charts.lines#312822
charts.orange#d18128
charts.purple#f6aba9
charts.red#ef7976
charts.yellow#d18128
debugToolBar.background#25231e
debugToolBar.border#312822
descriptionForeground#b9a399
diffEditor.insertedTextBackground#1eb83a20
diffEditor.removedTextBackground#ef797620
dropdown.background#25231e
dropdown.border#312822
dropdown.foreground#c9af96
editor.background#27241f
editor.findMatchBackground#e7c34440
editor.findMatchHighlightBackground#e7c34425
editor.findRangeHighlightBackground#e7c34415
editor.foreground#c9af96
editor.hoverHighlightBackground#e7c34415
editor.inactiveSelectionBackground#5443335080
editor.lineHighlightBackground#2b251d
editor.lineHighlightBorder#2b251d
editor.rangeHighlightBackground#54433350
editor.selectionBackground#54433350
editor.selectionHighlightBackground#e7c34420
editor.wordHighlightBackground#e7c34420
editor.wordHighlightStrongBackground#e7c34430
editorBracketMatch.background#e7c34430
editorBracketMatch.border#59bdd8
editorCursor.foreground#968575
editorGroup.border#312822
editorGroup.dropBackground#59bdd820
editorGroupHeader.noTabsBackground#25231e
editorGroupHeader.tabsBackground#25231e
editorGroupHeader.tabsBorder#312822
editorGutter.addedBackground#1eb83a
editorGutter.background#27241f
editorGutter.deletedBackground#ef7976
editorGutter.modifiedBackground#3ca3bc
editorLineNumber.activeForeground#b9a399
editorLineNumber.foreground#968575
editorLink.activeForeground#3ca3bc
editorOverviewRuler.addedForeground#1eb83a
editorOverviewRuler.border#312822
editorOverviewRuler.bracketMatchForeground#59bdd8
editorOverviewRuler.deletedForeground#ef7976
editorOverviewRuler.errorForeground#ef7976
editorOverviewRuler.infoForeground#3ca3bc
editorOverviewRuler.modifiedForeground#3ca3bc
editorOverviewRuler.warningForeground#d18128
editorSuggestWidget.background#25231e
editorSuggestWidget.border#312822
editorSuggestWidget.foreground#c9af96
editorSuggestWidget.highlightForeground#3ca3bc
editorSuggestWidget.selectedBackground#59bdd830
editorWidget.background#25231e
editorWidget.border#312822
errorForeground#ef7976
extensionButton.prominentBackground#59bdd8
extensionButton.prominentForeground#c9af96
extensionButton.prominentHoverBackground#3ca3bc
focusBorder#59bdd8
foreground#c9af96
gitDecoration.conflictingResourceForeground#d18128
gitDecoration.deletedResourceForeground#ef7976
gitDecoration.ignoredResourceForeground#968575
gitDecoration.modifiedResourceForeground#3ca3bc
gitDecoration.untrackedResourceForeground#1eb83a
input.background#25231e
input.border#312822
input.foreground#c9af96
input.placeholderForeground#968575
inputOption.activeBorder#59bdd8
inputValidation.errorBackground#ef7976
inputValidation.errorBorder#ef7976
inputValidation.infoBackground#3ca3bc
inputValidation.infoBorder#3ca3bc
inputValidation.warningBackground#d18128
inputValidation.warningBorder#d18128
list.activeSelectionBackground#59bdd840
list.activeSelectionForeground#c9af96
list.dropBackground#59bdd820
list.errorForeground#ef7976
list.focusBackground#59bdd830
list.focusForeground#c9af96
list.highlightForeground#3ca3bc
list.hoverBackground#25231e
list.hoverForeground#c9af96
list.inactiveSelectionBackground#59bdd820
list.inactiveSelectionForeground#c9af96
list.warningForeground#d18128
menu.background#25231e
menu.foreground#c9af96
menu.selectionBackground#59bdd830
menu.selectionForeground#c9af96
menu.separatorBackground#312822
menubar.selectionBackground#59bdd830
menubar.selectionForeground#c9af96
merge.currentContentBackground#3ca3bc20
merge.currentHeaderBackground#3ca3bc40
merge.incomingContentBackground#1eb83a20
merge.incomingHeaderBackground#1eb83a40
notificationCenter.border#312822
notificationCenterHeader.background#24221d
notificationCenterHeader.foreground#c9af96
notificationLink.foreground#3ca3bc
notifications.background#25231e
notifications.border#312822
notifications.foreground#c9af96
notificationToast.border#312822
panel.background#25231e
panel.border#312822
panelTitle.activeBorder#59bdd8
panelTitle.activeForeground#c9af96
panelTitle.inactiveForeground#b9a399
peekView.border#59bdd8
peekViewEditor.background#25231e
peekViewEditor.matchHighlightBackground#e7c344
peekViewResult.background#24221d
peekViewResult.matchHighlightBackground#e7c344
peekViewResult.selectionBackground#59bdd840
peekViewTitle.background#24221d
peekViewTitleDescription.foreground#b9a399
peekViewTitleLabel.foreground#c9af96
pickerGroup.border#312822
pickerGroup.foreground#59bdd8
progressBar.background#59bdd8
scrollbar.shadow#00000040
scrollbarSlider.activeBackground#544333A0
scrollbarSlider.background#31282280
scrollbarSlider.hoverBackground#54433380
selection.background#54433350
settings.headerForeground#c9af96
settings.modifiedItemIndicator#3ca3bc
sideBar.background#25231e
sideBar.border#312822
sideBar.foreground#b9a399
sideBarSectionHeader.background#24221d
sideBarSectionHeader.foreground#c9af96
sideBarTitle.foreground#c9af96
statusBar.background#24221d
statusBar.border#312822
statusBar.debuggingBackground#d18128
statusBar.debuggingForeground#c9af96
statusBar.foreground#b9a399
statusBar.noFolderBackground#24221d
statusBarItem.activeBackground#59bdd840
statusBarItem.hoverBackground#59bdd820
symbolIcon.arrayForeground#c9af96
symbolIcon.booleanForeground#f6aba9
symbolIcon.classForeground#3ca3bc
symbolIcon.colorForeground#f6aba9
symbolIcon.constantForeground#f6aba9
symbolIcon.constructorForeground#3ca3bc
symbolIcon.enumeratorForeground#3ca3bc
symbolIcon.enumeratorMemberForeground#f6aba9
symbolIcon.eventForeground#d18128
symbolIcon.fieldForeground#c9af96
symbolIcon.fileForeground#c9af96
symbolIcon.folderForeground#c9af96
symbolIcon.functionForeground#3ca3bc
symbolIcon.interfaceForeground#3ca3bc
symbolIcon.keyForeground#f6aba9
symbolIcon.keywordForeground#caaa2f
symbolIcon.methodForeground#3ca3bc
symbolIcon.moduleForeground#3ca3bc
symbolIcon.namespaceForeground#3ca3bc
symbolIcon.nullForeground#f6aba9
symbolIcon.numberForeground#f6aba9
symbolIcon.objectForeground#c9af96
symbolIcon.operatorForeground#968575
symbolIcon.packageForeground#3ca3bc
symbolIcon.propertyForeground#c9af96
symbolIcon.referenceForeground#3ca3bc
symbolIcon.snippetForeground#caaa2f
symbolIcon.stringForeground#caaa2f
symbolIcon.structForeground#3ca3bc
symbolIcon.textForeground#c9af96
symbolIcon.typeParameterForeground#3ca3bc
symbolIcon.unitForeground#f6aba9
symbolIcon.variableForeground#c9af96
tab.activeBackground#27241f
tab.activeBorder#59bdd8
tab.activeBorderTop#59bdd8
tab.activeForeground#c9af96
tab.border#312822
tab.hoverBackground#25231e
tab.hoverForeground#c9af96
tab.inactiveBackground#25231e
tab.inactiveForeground#b9a399
terminal.ansiBlack#27241f
terminal.ansiBlue#3ca3bc
terminal.ansiBrightBlack#968575
terminal.ansiBrightBlue#3ca3bc
terminal.ansiBrightCyan#3ca3bc
terminal.ansiBrightGreen#1eb83a
terminal.ansiBrightMagenta#f6aba9
terminal.ansiBrightRed#ef7976
terminal.ansiBrightWhite#c9af96
terminal.ansiBrightYellow#d18128
terminal.ansiCyan#3ca3bc
terminal.ansiGreen#1eb83a
terminal.ansiMagenta#f6aba9
terminal.ansiRed#ef7976
terminal.ansiWhite#c9af96
terminal.ansiYellow#d18128
terminal.foreground#c9af96
textLink.activeForeground#3ca3bc
textLink.foreground#3ca3bc
textPreformat.foreground#f6aba9
titleBar.activeBackground#24221d
titleBar.activeForeground#c9af96
titleBar.border#312822
titleBar.inactiveBackground#24221d
titleBar.inactiveForeground#968575
welcomePage.buttonBackground#25231e
welcomePage.buttonHoverBackground#25231e
widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7a6856	italic
string, string.quoted, string.template	#caaa2f	—
constant.numeric	#f6aba9	—
constant.language, constant.character, constant.other	#f6aba9	—
variable.other.constant	#f6aba9	—
variable, variable.other	#c9af96	—
keyword, keyword.control, keyword.operator.new	#caaa2f	—
storage, storage.type, storage.modifier	#caaa2f	—
keyword.operator	#968575	—
punctuation, punctuation.separator, punctuation.terminator	#968575	—
entity.name.function, support.function, meta.function-call	#3ca3bc	—
entity.name.class, entity.name.type, support.class, support.type	#3ca3bc	—
entity.name.type, entity.other.inherited-class, support.type	#3ca3bc	—
entity.name.tag, meta.tag	#f6aba9	—
entity.other.attribute-name	#3ca3bc	—
variable.other.property, support.type.property-name	#c9af96	—
keyword.control.import, keyword.control.export, keyword.control.from	#caaa2f	—
entity.name.namespace, entity.name.module	#3ca3bc	—
invalid, invalid.illegal	#ef7976	—
markup.heading, entity.name.section	#3ca3bc	bold
markup.bold	—	bold
markup.italic	—	italic
markup.underline.link, string.other.link	#3ca3bc	—
markup.inline.raw, markup.fenced_code	#f6aba9	—
support.type.property-name.json, string.json support.type.property-name.json	#3ca3bc	—
support.type.property-name.css	#c9af96	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#3ca3bc	—

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