Primal

Name: Primal
Author: primalmotion

Publisher: primalmotionThemes in package: 1

Dark theme that is a mix of Space Grey, City Light and Ayu

GitHub

VS Code preview

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

Primal — Primal

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#1d252c
activityBar.border#262e36
activityBar.foreground#62737f
activityBarBadge.background#ffcc66
activityBarBadge.foreground#1d252c
badge.background#66737f
badge.foreground#ffffff
button.background#ffcc66aa
button.foreground#ffffff
button.hoverBackground#ffcc66bb
debugExceptionWidget.background#2d3644
debugExceptionWidget.border#262e36
debugToolBar.background#2d3644
diffEditor.insertedTextBackground#95e6cb44
diffEditor.removedTextBackground#f0717844
dropdown.background#1D252C
dropdown.border#15232d
dropdown.foreground#fff
editor.background#1d252c
editor.findMatchBackground#b7c5d380
editor.findMatchHighlightBackground#b7c5d330
editor.findRangeHighlightBackground#243E51
editor.foreground#d9d7ce
editor.hoverHighlightBackground#333F4A
editor.inactiveSelectionBackground#1D252C
editor.lineHighlightBackground#28313a
editor.lineHighlightBorder#28313a
editor.rangeHighlightBackground#28313a
editor.selectionBackground#FFFFFF40
editor.selectionHighlightBackground#FFFFFF15
editor.wordHighlightBackground#FFFFFF15
editor.wordHighlightStrongBackground#FFFFFF15
editorActiveLineNumber.foreground#62737f
editorBracketMatch.background#3d454d
editorBracketMatch.border#4e6e99
editorCursor.foreground#ffcc66
editorError.foreground#ff3333
editorGroup.background#2d3644
editorGroup.border#262e36
editorGroupHeader.noTabsBackground#1d252c
editorGroupHeader.tabsBackground#1d252c
editorGroupHeader.tabsBorder#262e36
editorGutter.addedBackground#bae67e
editorGutter.deletedBackground#ff3333
editorGutter.modifiedBackground#5ccfe6
editorHoverWidget.background#182024
editorHoverWidget.border#262e36
editorIndentGuide.background#2b333b
editorLineNumber.foreground#3d4752
editorLink.activeForeground#ffcc66
editorMarkerNavigation.background#2d3644
editorOverviewRuler.border#262e36
editorRuler.foreground#262e36
editorSuggestWidget.background#182024
editorSuggestWidget.border#262e36
editorSuggestWidget.highlightForeground#ffcc66
editorSuggestWidget.selectedBackground#28313a
editorWarning.foreground#ffcc66
editorWhitespace.foreground#3d4752
editorWidget.background#1d252c
editorWidget.border#262e36
extensionButton.prominentBackground#ffcc66aa
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#ffcc66bb
focusBorder#ffffff00
foreground#aaa
gitDecoration.ignoredResourceForeground#62737f77
input.background#182024
input.border#262e36
input.foreground#d9d7ce
input.placeholderForeground#62737f8a
inputOption.activeBorder#62737f8a
inputValidation.errorBackground#1d252c
inputValidation.errorBorder#ff3333
inputValidation.infoBackground#1d252c
inputValidation.infoBorder#5ccfe6
inputValidation.warningBackground#1d252c
inputValidation.warningBorder#ffcc66
list.activeSelectionBackground#262e36
list.activeSelectionForeground#d9d7ce
list.focusBackground#262e36
list.focusForeground#d9d7ce
list.highlightForeground#ffcc66
list.hoverBackground#1d252c
list.hoverForeground#d9d7ce
list.inactiveSelectionBackground#262e36
list.inactiveSelectionForeground#d9d7ce
panel.background#1d252c
panel.border#262e36
panelTitle.activeBorder#1d252c
panelTitle.activeForeground#d9d7ce
panelTitle.inactiveForeground#62737f
peekView.border#262e36
peekViewEditor.background#192024
peekViewEditor.matchHighlightBackground#323f4d
peekViewResult.background#192024
peekViewResult.fileForeground#62737f
peekViewResult.matchHighlightBackground#323f4d
peekViewTitle.background#262e36
peekViewTitleDescription.foreground#62737f
peekViewTitleLabel.foreground#62737f
pickerGroup.border#262e36
pickerGroup.foreground#ffcc66
progressBar.background#ffcc66
scrollbar.shadow#11141a11
scrollbarSlider.activeBackground#ffffff22
scrollbarSlider.background#ffffff11
scrollbarSlider.hoverBackground#ffffff22
selection.background#343f4cfd
sideBar.background#1d252c
sideBar.border#262e36
sideBar.dropBackground#1d252c
sideBar.foreground#62737f
sideBarSectionHeader.background#1d252c
sideBarSectionHeader.foreground#ffcc66
sideBarTitle.foreground#ffcc6699
statusBar.background#1d252c
statusBar.border#262e36
statusBar.debuggingBackground#2d3644
statusBar.debuggingForeground#62737f
statusBar.foreground#62737f
statusBar.noFolderBackground#1d252c
statusBarItem.activeBackground#262e36
statusBarItem.hoverBackground#262e36
statusBarItem.prominentBackground#262e36
statusBarItem.prominentHoverBackground#262e36
tab.activeBackground#1d252c
tab.activeForeground#ffcc66
tab.border#262e36
tab.inactiveBackground#1d252c
tab.inactiveForeground#516170
tab.unfocusedActiveForeground#d9d7ceaa
tab.unfocusedInactiveForeground#62737f
terminal.ansiBlack#262e36
terminal.ansiBlue#36a3d9
terminal.ansiBrightBlack#686868
terminal.ansiBrightBlue#36a3d9
terminal.ansiBrightCyan#95e6cb
terminal.ansiBrightGreen#bae67e
terminal.ansiBrightMagenta#d4bfff
terminal.ansiBrightRed#f07178
terminal.ansiBrightWhite#c7c7c7
terminal.ansiBrightYellow#ffcc66
terminal.ansiCyan#95e6cb
terminal.ansiGreen#bae67e
terminal.ansiMagenta#d4bfff
terminal.ansiRed#f07178
terminal.ansiWhite#c7c7c7
terminal.ansiYellow#ffcc66
terminal.background#1d252c
terminal.border#262e36
terminal.foreground#d9d7ce
textBlockQuote.background#2d3644
textLink.activeForeground#ffcc66
textLink.foreground#ffcc66
textPreformat.foreground#d9d7ce
titleBar.activeBackground#1d252c
titleBar.activeForeground#62737f
titleBar.border#262e36
titleBar.inactiveBackground#1d252c
titleBar.inactiveForeground#516170
walkThrough.embeddedEditorBackground#2d3644
widget.shadow#11141ab3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#5C6773	—
variable	#D9D7CE	—
keyword, storage.type, storage.modifier	#FFAE57	—
constant.other.color, meta.tag, punctuation.separator.inheritance.php, punctuation.section.embedded, keyword.other.substitution	#80D4FF	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#5CCFE6	—
meta.tag.jsx	#D9D7CE	—
entity.name.function, keyword.other.special-method, meta.block-level	#ffcc66	—
support.other.variable, string.other.link	#F07178	—
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit	#D4BFFF	—
string, keyword.other.template, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#BAE67E	—
entity.name.class, entity.name.type.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter	#5CCFE6	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#5CCFE6	—
variable.language	#5CCFE6	italic
invalid	#FF3333	—
invalid.deprecated	#FFFFFF	—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#5CCFE690	—
entity.other.attribute-name	#FFAE57	—
markup.inserted	#BAE67E	—
markup.deleted	#5CCFE6	—
markup.changed	#FFAE57	—
string.regexp, constant.character.escape	#95E6CB	—
url, link, uri	—	underline
constant.numeric.line-number.find-in-files - match	#5C6773	—
entity.name.filename.find-in-files	#BAE67E	—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#FFC44C	italic
source.js constant.other.object.key.js string.unquoted.label.js	#5CCFE6	italic
entity.name.method.js	#FFC44C	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#FFC44C	—
markup.italic	#F07178	italic
markup.bold	#F07178	bold
markup.underline	#D4BFFF	underline
markup.strike	#FFC44C	—
markup.quote	#80D4FF	italic
markup.fenced_code.block.markdown	#FFAE57	—
markup.table	#5CCFE6	—
text.html.markdown, punctuation.definition.list_item.markdown	#D9D7CE	—
text.html.markdown markup.inline.raw.string.markdown	#5CCFE6	—
text.html.markdown meta.dummy.line-break	#5C6773	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#BAE67E	—
markup.quote, punctuation.definition.blockquote.markdown	#80D4FF	italic
string.other.link.title.markdown	#FFC44C	underline
markup.raw.block.fenced.markdown	#D9D7CE	—
punctuation.definition.fenced.markdown, variable.language.fenced.markdown	#5C6773	—
variable.language.fenced.markdown	#5C6773
meta.separator	#5C6773	bold
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#5CCFE6	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#5CCFE6	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#5CCFE6	—
source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#5CCFE6	—
source.json meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#5CCFE6	—
source.json meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#5CCFE6	—
source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#5CCFE6	—
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta.structure.dictionary.json punctuation.definition.string - meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#5CCFE6	—
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#5CCFE6	—
acejump.label.blue	#FFFFFF	—
acejump.label.green	#FFFFFF	—
acejump.label.orange	#FFFFFF	—
acejump.label.purple	#FFFFFF	—
sublimelinter.mark.warning	#5CCFE6	—
sublimelinter.gutter-mark	#FFFFFF	—
sublimelinter.mark.error	#FF3333	—
markup.ignored.git_gutter	#5C6773	—
markup.untracked.git_gutter	#5C6773	—
gutter_color	#FFFFFF	—
token.info-token	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#f44747	—
token.debug-token	#b267e6	—
variable.parameter.function	#c0c5ce	—
comment, punctuation.definition.comment	#65737e	—
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array	#c0c5ce	—
none	#c0c5ce	—
keyword.operator	#c0c5ce	—
keyword	#b48ead	—
variable, support.type, variable.other.assignment.go	#bf616a	—
entity.name.function, meta.require, support.function.any-method	#8fa1b3	—
support.class, entity.name.type.class	#ebcb8b	—
meta.entity.new.name.expr	#ebcb8b	—
keyword.other.special-method	#8fa1b3	—
storage, storage.type.go	#b48ead	—
support.function	#96b5b4	—
string, constant.other.symbol, entity.other.inherited-class, storage.type	#a3be8c	—
constant.numeric	#d08770	—
none	#d08770	—
none	#d08770	—
constant.language	#d08770	—
entity.name.tag	#bf616a	—
entity.other.attribute-name	#d08770	—
entity.other.attribute-name.id, punctuation.definition.entity	#8fa1b3	—
meta.selector	#b48ead	—
none	#d08770	—
markup.heading punctuation.definition.heading, entity.name.section, support.function.go	#8fa1b3
keyword.other.unit	#d08770	—
markup.bold, punctuation.definition.bold	#ebcb8b	bold
markup.italic, punctuation.definition.italic	#b48ead	italic
markup.raw.inline	#a3be8c	—
string.other.link	#bf616a	—
meta.link	#d08770	—
markup.list	#bf616a	—
markup.quote	#d08770	—
meta.separator	#c0c5ce	—
markup.inserted, markup.inserted.git_gutter	#a3be8c	—
markup.deleted, markup.deleted.git_gutter	#bf616a	—
markup.changed, markup.changed.git_gutter	#b48ead	—
markup.ignored, markup.ignored.git_gutter	#4f5b66	—
markup.untracked, markup.untracked.git_gutter	#4f5b66	—
constant.other.color	#96b5b4	—
string.regexp	#96b5b4	—
constant.character.escape	#96b5b4	—
punctuation.section.embedded, variable.interpolation	#ab7967	—
invalid.illegal	#ffffff	—
markup.deleted.git_gutter	#F92672	—
markup.inserted.git_gutter	#A6E22E	—
markup.changed.git_gutter	#967EFB	—
markup.ignored.git_gutter	#565656	—
markup.untracked.git_gutter	#565656	—
token.info-token	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#f44747	—
token.debug-token	#b267e6	—

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