Pure Colors #FA50

Name: Pure Colors #FA50
Author: Y.Petremann

Publisher: Y.PetremannThemes in package: 1

Dark vibrant theme using a restricted set of colors using only 4 letter Hexadecimal with only F A 5 and 0.

GitHub

VS Code preview

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

Pure Colors #FA50 — Pure Colors - Neutral

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.activeBackground#AAAA
activityBar.activeBorder#0000
activityBar.activeFocusBorder#0000
activityBar.background#555F
activityBar.border#0000
activityBar.dropBorder#AAAF
activityBar.foreground#FFFF
activityBar.inactiveForeground#FFF5
activityBarBadge.background#0005
activityBarBadge.foreground#FFFF
badge.background#000A
badge.foreground#FFFF
banner.background#0AFF
banner.foreground#FFFF
banner.iconForeground#FFFF
breadcrumb.activeSelectionForeground#FFFF
breadcrumb.background#000F
breadcrumb.focusForeground#FFFF
breadcrumb.foreground#FFFA
breadcrumbPicker.background#000F
button.background#0AFA
button.border#0AF0
button.foreground#FFFF
button.hoverBackground#0AFF
button.secondaryBackground#555A
button.secondaryForeground#FFFF
button.secondaryHoverBackground#555F
charts.blue#0000FF
charts.foreground#0000FF
charts.green#0000FF
charts.lines#0000FF
charts.orange#0000FF
charts.purple#0000FF
charts.red#0000FF
charts.yellow#0000FF
checkbox.background#555F
checkbox.border#0000
checkbox.foreground#FFFF
contrastActiveBorder#0000
contrastBorder#0000
debugConsole.errorForeground#F00F
debugConsole.infoForeground#00FF
debugConsole.sourceForeground#AAAF
debugConsole.warningForeground#FF0F
debugConsoleInputIcon.foreground#FFFF
debugExceptionWidget.background#555F
debugExceptionWidget.border#555F
debugIcon.breakpointCurrentStackframeForeground#FF0000
debugIcon.breakpointDisabledForeground#FF0000
debugIcon.breakpointForeground#FF0000
debugIcon.breakpointStackframeForeground#FF0000
debugIcon.breakpointUnverifiedForeground#FF0000
debugIcon.continueForeground#FF0000
debugIcon.disconnectForeground#FF0000
debugIcon.pauseForeground#FF0000
debugIcon.restartForeground#FF0000
debugIcon.startForeground#FF0000
debugIcon.stepBackForeground#FF0000
debugIcon.stepIntoForeground#FF0000
debugIcon.stepOutForeground#FF0000
debugIcon.stepOverForeground#FF0000
debugIcon.stopForeground#FF0000
debugTokenExpression.boolean#FF0000
debugTokenExpression.error#FF0000
debugTokenExpression.name#FF0000
debugTokenExpression.number#FF0000
debugTokenExpression.string#FF0000
debugTokenExpression.value#FF0000
debugToolBar.background#555F
debugToolBar.border#555F
debugView.exceptionLabelBackground#FF0000
debugView.exceptionLabelForeground#FF0000
debugView.stateLabelBackground#FF0000
debugView.stateLabelForeground#FF0000
debugView.valueChangedHighlight#FF0000
descriptionForeground#555F
diffEditor.border#555F
diffEditor.diagonalFill#5555
diffEditor.insertedTextBackground#020F
diffEditor.insertedTextBorder#0000
diffEditor.removedTextBackground#200F
diffEditor.removedTextBorder#0000
dropdown.background#555F
dropdown.border#000F
dropdown.foreground#FFFF
dropdown.listBackground#000F
editor.background#000F
editor.findMatchBackground#FA05
editor.findMatchBorder#FA0F
editor.findMatchHighlightBackground#A505
editor.findMatchHighlightBorder#A50F
editor.findRangeHighlightBackground#05F5
editor.findRangeHighlightBorder#FFF0
editor.foldBackground#5555
editor.foreground#FFF
editor.hoverHighlightBackground#AAA5
editor.inactiveSelectionBackground#AAA5
editor.lineHighlightBackground#5555
editor.lineHighlightBorder#0000
editor.rangeHighlightBackground#FFF5
editor.rangeHighlightBorder#FFF0
editor.selectionBackground#0AF5
editor.selectionHighlightBackground#5AF5
editor.selectionHighlightBorder#5AFF
editor.wordHighlightBackground#AAA5
editor.wordHighlightBorder#AAAF
editor.wordHighlightStrongBackground#FFF5
editor.wordHighlightStrongBorder#FFFA
editorBracketMatch.background#0F05
editorBracketMatch.border#0F0A
editorCodeLens.foreground#AAAF
editorCursor.background#000F
editorCursor.foreground#FFFF
editorError.background#F555
editorError.border#F550
editorError.foreground#F55F
editorGroup.border#555F
editorGroup.emptyBackground#000F
editorGroupHeader.border#0000
editorGroupHeader.tabsBackground#555F
editorGroupHeader.tabsBorder#000F
editorGutter.addedBackground#5F5F
editorGutter.background#000F
editorGutter.commentRangeForeground#FFFF
editorGutter.deletedBackground#F55F
editorGutter.foldingControlForeground#FFFF
editorGutter.modifiedBackground#5AFF
editorHoverWidget.background#000F
editorHoverWidget.border#555F
editorHoverWidget.foreground#AAAF
editorIndentGuide.activeBackground#FFFA
editorIndentGuide.background#555A
editorInfo.background#5AF5
editorInfo.border#5AF0
editorInfo.foreground#5AFF
editorLineNumber.activeForeground#FFFF
editorLineNumber.foreground#555F
editorLink.activeForeground#5AFF
editorMarkerNavigation.background#555F
editorMarkerNavigationError.background#F55F
editorMarkerNavigationInfo.background#5AFF
editorMarkerNavigationWarning.background#FA5F
editorOverviewRuler.background#5555
editorOverviewRuler.border#FFF0
editorRuler.foreground#555A
editorSuggestWidget.background#000F
editorSuggestWidget.border#555F
editorSuggestWidget.foreground#FFFF
editorSuggestWidget.highlightForeground#0AFF
editorSuggestWidget.selectedBackground#555F
editorWarning.background#FA05
editorWarning.border#FA00
editorWarning.foreground#FA0F
editorWhitespace.foreground#555F
editorWidget.background#555F
editorWidget.foreground#FFFF
editorWidget.resizeBorder#555F
focusBorder#0AFF
foreground#AAAF
gitDecoration.addedResourceForeground#5F5F
gitDecoration.conflictingResourceForeground#5AFF
gitDecoration.deletedResourceForeground#F55F
gitDecoration.ignoredResourceForeground#AAAF
gitDecoration.modifiedResourceForeground#FA5F
gitDecoration.stageDeletedResourceForeground#F55A
gitDecoration.stageModifiedResourceForeground#FA5A
gitDecoration.submoduleResourceForeground#5AFA
gitDecoration.untrackedResourceForeground#5F5F
icon.foreground#AAAF
input.background#000D
input.border#0000
input.foreground#FFFF
input.placeholderForeground#FFF5
inputOption.activeBackground#05F5
inputOption.activeBorder#05F0
inputOption.activeForeground#FFFF
list.activeSelectionBackground#094771
list.activeSelectionForeground#FFFF
list.dropBackground#383b3d
list.focusBackground#062f4a
list.focusForeground#cccccc
list.highlightForeground#0097fb
list.hoverBackground#2a2d2e
list.hoverForeground#cccccc
list.inactiveSelectionBackground#37373d
list.inactiveSelectionForeground#cccccc
listFilterWidget.background#653723
listFilterWidget.noMatchesOutline#be1100
listFilterWidget.outline#0000
menu.background#555F
menu.border#0000
menu.foreground#FFFF
menu.selectionBackground#AAAA
menu.selectionBorder#0000
menu.selectionForeground#FFFF
menu.separatorBackground#AAAF
menubar.selectionBackground#FFF5
menubar.selectionForeground#FFFF
merge.commonContentBackground#5555
merge.commonHeaderBackground#555A
merge.currentContentBackground#5AA5
merge.currentHeaderBackground#5AAA
merge.incomingContentBackground#5AF5
merge.incomingHeaderBackground#5AFA
minimap.background#000F
minimap.errorHighlight#F55F
minimap.findMatchHighlight#FA05
minimap.selectionHighlight#0AF5
minimap.warningHighlight#FA0F
minimapGutter.addedBackground#5F5F
minimapGutter.deletedBackground#F55F
minimapGutter.modifiedBackground#5AFF
notificationCenter.border#555F
notificationCenterHeader.background#555F
notificationCenterHeader.foreground#FFFF
notifications.background#000F
notifications.border#555F
notifications.foreground#FFFF
notificationsErrorIcon.foreground#F55F
notificationsInfoIcon.foreground#5AFF
notificationsWarningIcon.foreground#FA5F
notificationToast.border#555F
panel.background#000F
panel.border#555F
panelSection.border#AAA5
panelTitle.activeBorder#FFFF
panelTitle.activeForeground#FFFF
panelTitle.inactiveForeground#FFFA
peekView.border#00FF
peekViewEditor.background#0055
peekViewEditor.matchHighlightBackground#FA0A
peekViewEditor.matchHighlightBorder#FA0F
peekViewEditorGutter.background#000F
peekViewResult.background#000F
peekViewResult.fileForeground#FFFF
peekViewResult.lineForeground#AAAF
peekViewResult.matchHighlightBackground#F505
peekViewResult.selectionBackground#0AF0
peekViewResult.selectionForeground#FFFF
peekViewTitle.background#000F
peekViewTitleDescription.foreground#FFFA
peekViewTitleLabel.foreground#FFFF
pickerGroup.border#5AFF
pickerGroup.foreground#0AFF
progressBar.background#0AFF
scrollbar.shadow#000F
scrollbarSlider.activeBackground#AAA5
scrollbarSlider.background#5555
scrollbarSlider.hoverBackground#555A
selection.background#5AF5
settings.focusedRowBackground#FFF0
settings.headerForeground#AAAF
sideBar.background#5555
sideBar.dropBackground#000F
sideBar.foreground#FFFF
sideBarSectionHeader.background#0000
sideBarSectionHeader.border#FFF5
sideBarSectionHeader.foreground#FFFF
sideBarTitle.foreground#AAAF
statusBar.background#05FF
statusBar.debuggingBackground#F50F
statusBar.debuggingForeground#FFFF
statusBar.foreground#FFFF
statusBar.noFolderBackground#505F
statusBar.noFolderForeground#FFFF
statusBarItem.activeBackground#FFF0
statusBarItem.hoverBackground#FFF0
statusBarItem.remoteBackground#0A5F
statusBarItem.remoteForeground#FFFF
tab.activeBackground#000F
tab.activeBorder#0000
tab.activeBorderTop#0000
tab.activeForeground#FFFF
tab.border#555F
tab.inactiveBackground#0005
tab.inactiveForeground#FFFF
terminal.ansiBlack#000F
terminal.ansiBlue#05FF
terminal.ansiBrightBlack#555F
terminal.ansiBrightBlue#0AFF
terminal.ansiBrightCyan#0AFF
terminal.ansiBrightGreen#0FAF
terminal.ansiBrightMagenta#F5FF
terminal.ansiBrightRed#F55F
terminal.ansiBrightWhite#FFFF
terminal.ansiBrightYellow#FF5F
terminal.ansiCyan#0AFF
terminal.ansiGreen#0A5F
terminal.ansiMagenta#A0AF
terminal.ansiRed#F00F
terminal.ansiWhite#FFFF
terminal.ansiYellow#FF0F
terminal.background#0000
terminal.border#AAA5
terminal.foreground#FFFF
terminal.selectionBackground#FFF5
terminalCursor.background#0AFF
terminalCursor.foreground#FFF0
textLink.foreground#0AFF
titleBar.activeBackground#555F
titleBar.activeForeground#FFFF
titleBar.border#0000
titleBar.inactiveBackground#555F
titleBar.inactiveForeground#FFF5
tree.indentGuidesStroke#555F
walkThrough.embeddedEditorBackground#0005
widget.shadow#0005

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#555F	—
comment.block.documentation	—	bold
comment.block.javadoc	#AAAF	—
constant	#FA0F	—
emphasis	#F00F	—
entity	#0AFF	bold
invalid	#F00F	bold
keyword	#F0AF	—
markup	#AF0F	—
meta	#A0FF	—
punctuation	#AAAF	—
punctuation.definition.comment	#555F	—
punctuation.terminator	#555F	—
storage	—	italic
string	#AF0F	—
support	—	italic
variable	#0FAF	—

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