Halftone Theme

Name: Halftone Theme
Author: Ivan Esmantovich

Publisher: Ivan EsmantovichThemes in package: 2

Theme inspired by the monochrome halftone technique

GitHub

Color themes

VS Code preview

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

Halftone Theme — Halftone 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.activeBackground#D5D5D580
activityBar.activeBorder#D5D5D599
activityBar.activeFocusBorder#5E5E5E
activityBar.background#FAFAFA
activityBar.border#D5D5D5
activityBar.dropBorder#007aff33
activityBar.foreground#000
activityBar.inactiveForeground#7c7c7c
activityBarBadge.background#444444
activityBarBadge.foreground#FFF
activityBarTop.activeBorder#000
activityBarTop.dropBorder#007aff33
activityBarTop.foreground#000
activityBarTop.inactiveForeground#7c7c7c
badge.background#444444
badge.foreground#FFF
breadcrumb.activeSelectionForeground#2a2a2a
breadcrumb.background#FFF
breadcrumb.foreground#444
breadcrumbPicker.background#FAFAFA
button.background#222
button.foreground#FFFFFF
button.hoverBackground#333333
charts.red#B22222
commandCenter.activeBackground#D5D5D533
commandCenter.activeBorder#D5D5D5
commandCenter.activeForeground#444444
commandCenter.background#FFFFFF
commandCenter.border#D5D5D5
commandCenter.debuggingBackground#FFFFFF
commandCenter.foreground#5f5f5f
commandCenter.inactiveBorder#D5D5D5
debugConsole.errorForeground#B22222
debugConsole.warningForeground#cc8500
editor.background#FFF
editor.findMatchBackground#007aff33
editor.findMatchBorder#007aff40
editor.findMatchHighlightBackground#007aff33
editor.findMatchHighlightBorder#007aff40
editor.findRangeHighlightBackground#007aff33
editor.findRangeHighlightBorder#007aff40
editor.focusedStackFrameHighlightBackground#D5D5D580
editor.foreground#444444
editor.hoverHighlightBackground#D5D5D580
editor.lineHighlightBackground#D5D5D51A
editor.lineHighlightBorder#D5D5D526
editor.linkedEditingBackground#D5D5D580
editor.rangeHighlightBackground#D5D5D580
editor.rangeHighlightBorder#D5D5D5CC
editor.selectionBackground#D5D5D5A6
editor.selectionHighlightBackground#D5D5D580
editor.selectionHighlightBorder#D5D5D5CC
editor.stackFrameHighlightBackground#D5D5D580
editor.symbolHighlightBackground#D5D5D580
editor.symbolHighlightBorder#D5D5D5CC
editor.wordHighlightBackground#D5D5D580
editor.wordHighlightBorder#D5D5D5CC
editor.wordHighlightStrongBackground#D5D5D580
editor.wordHighlightStrongBorder#D5D5D5CC
editor.wordHighlightTextBackground#D5D5D580
editor.wordHighlightTextBorder#D5D5D5CC
editorBracketHighlight.foreground1#7c7c7c
editorBracketHighlight.foreground2#7c7c7c
editorBracketHighlight.foreground3#7c7c7c
editorBracketHighlight.foreground4#7c7c7c
editorBracketHighlight.foreground5#7c7c7c
editorBracketHighlight.foreground6#7c7c7c
editorBracketHighlight.unexpectedBracket.foreground#7c7c7c
editorBracketMatch.background#D5D5D580
editorBracketMatch.border#D5D5D5
editorCursor.background#FFF
editorCursor.foreground#444444
editorError.background#ff453b1A
editorError.foreground#00000000
editorGroup.border#D5D5D5
editorGroup.dropBackground#007aff33
editorGroupHeader.border#D5D5D5
editorGroupHeader.noTabsBackground#FAFAFA
editorGroupHeader.tabsBackground#FAFAFA
editorHoverWidget.highlightForeground#000
editorIndentGuide.activeBackground#bbbbbb
editorIndentGuide.background#dfdfdf
editorLineNumber.activeForeground#5f5f5f
editorLineNumber.foreground#D1D1D1
editorLink.activeForeground#007aff
editorOverviewRuler.errorForeground#B22222
editorOverviewRuler.warningForeground#cc8500
editorPane.background#FAFAFA
editorSuggestWidget.background#ffffff
editorSuggestWidget.border#D5D5D5
editorSuggestWidget.focusHighlightForeground#000
editorSuggestWidget.foreground#444
editorSuggestWidget.highlightForeground#000
editorSuggestWidget.selectedBackground#D5D5D566
editorSuggestWidget.selectedForeground#000
editorSuggestWidget.selectedIconForeground#000
editorUnicodeHighlight.background#D5D5D580
editorUnicodeHighlight.border#D5D5D5CC
editorUnnecessaryCode.opacity#444444B3
editorWarning.background#FFD7081A
editorWarning.foreground#00000000
editorWidget.background#FAFAFA
editorWidget.foreground#444
errorForeground#B22222
focusBorder#b5b5b5
input.background#FFFFFF
input.border#D5D5D5
inputOption.activeBorder#8e8e93
inputValidation.errorBackground#FFEDEB
inputValidation.errorBorder#00000000
inputValidation.errorForeground#B22222
inputValidation.infoBackground#FFFFFF
inputValidation.infoBorder#FFFFFF
inputValidation.infoForeground#000000
inputValidation.warningBackground#FFD7081A
inputValidation.warningBorder#00000000
inputValidation.warningForeground#FFFFFF
list.activeSelectionBackground#D5D5D566
list.activeSelectionForeground#000000
list.activeSelectionIconForeground#000000
list.errorForeground#B22222
list.focusBackground#D5D5D5A6
list.focusForeground#000
list.focusHighlightForeground#000
list.focusOutline#D5D5D599
list.highlightForeground#000
list.inactiveFocusBackground#D5D5D599
list.inactiveSelectionBackground#D5D5D54D
list.inactiveSelectionForeground#000000
list.inactiveSelectionIconForeground#000000
list.warningForeground#cc8500
menu.border#D5D5D5
menu.selectionBackground#005FB8
menu.selectionForeground#ffffff
minimap.errorHighlight#B22222
notebookStatusErrorIcon.foreground#B22222
notificationsErrorIcon.foreground#B22222
notificationsWarningIcon.foreground#cc8500
panel.background#fbfbfa
panel.border#D5D5D5
panelSection.dropBackground#007aff33
peekView.border#D5D5D5
peekViewEditor.background#FFFFFF
peekViewEditor.matchHighlightBackground#D5D5D580
peekViewEditor.matchHighlightBorder#D5D5D5
peekViewResult.background#FAFAFA
peekViewResult.lineForeground#444
peekViewResult.matchHighlightBackground#D5D5D5E6
peekViewResult.selectionBackground#D5D5D580
peekViewTitle.background#FAFAFA
pickerGroup.border#D5D5D5
pickerGroup.foreground#444
problemsErrorIcon.foreground#B22222
problemsWarningIcon.foreground#cc8500
progressBar.background#444444
quickInput.background#ffffff
quickInput.foreground#444
quickInputList.focusBackground#D5D5D559
quickInputList.focusForeground#2a2a2a
quickInputList.focusIconForeground#2a2a2a
quickInputTitle.background#ffffff
scrollbarSlider.activeBackground#D5D5D5F2
scrollbarSlider.background#D5D5D580
scrollbarSlider.hoverBackground#D5D5D5CC
searchEditor.findMatchBackground#007aff33
searchEditor.findMatchBorder#007aff40
selection.background#D5D5D5A6
sideBar.background#FAFAFA
sideBar.border#D5D5D5
sideBar.dropBackground#007aff33
sideBar.foreground#2a2a2a
sideBarSectionHeader.background#FAFAFA
sideBarSectionHeader.border#D5D5D5
sideBarStickyScroll.background#FAFAFA
sideBarStickyScroll.border#D5D5D54D
sideBarStickyScroll.shadow#D5D5D58C
sideBarTitle.background#FAFAFA
statusBar.background#FAFAFA
statusBar.border#D5D5D5
statusBar.debuggingBackground#FAFAFA
statusBar.debuggingBorder#D5D5D5
statusBar.debuggingForeground#444444
statusBar.focusBorder#D5D5D5
statusBar.foreground#444444
statusBar.noFolderBackground#FAFAFA
statusBar.noFolderBorder#D5D5D5
statusBar.noFolderForeground#444444
statusBarItem.errorBackground#FFEDEB
statusBarItem.errorForeground#B22222
statusBarItem.hoverBackground#D5D5D599
statusBarItem.remoteBackground#FAFAFA
statusBarItem.remoteForeground#444444
statusBarItem.warningBackground#FFD7081A
statusBarItem.warningForeground#cc8500
symbolIcon.arrayForeground#444444
symbolIcon.booleanForeground#444444
symbolIcon.classForeground#444444
symbolIcon.colorForeground#444444
symbolIcon.constantForeground#444444
symbolIcon.constructorForeground#444444
symbolIcon.enumeratorForeground#444444
symbolIcon.enumeratorMemberForeground#444444
symbolIcon.eventForeground#444444
symbolIcon.fieldForeground#444444
symbolIcon.fileForeground#444444
symbolIcon.folderForeground#444444
symbolIcon.functionForeground#444444
symbolIcon.interfaceForeground#444444
symbolIcon.keyForeground#444444
symbolIcon.keywordForeground#444444
symbolIcon.methodForeground#444444
symbolIcon.moduleForeground#444444
symbolIcon.namespaceForeground#444444
symbolIcon.nullForeground#444444
symbolIcon.numberForeground#444444
symbolIcon.objectForeground#444444
symbolIcon.operatorForeground#444444
symbolIcon.packageForeground#444444
symbolIcon.propertyForeground#444444
symbolIcon.referenceForeground#444444
symbolIcon.snippetForeground#444444
symbolIcon.stringForeground#444444
symbolIcon.structForeground#444444
symbolIcon.textForeground#444444
symbolIcon.typeParameterForeground#444444
symbolIcon.unitForeground#444444
symbolIcon.variableForeground#444444
tab.activeBackground#FFF
tab.activeBorder#FFF
tab.activeForeground#2a2a2a
tab.border#D5D5D5
tab.dragAndDropBorder#5f5f5f
tab.hoverBackground#F2F2F2
tab.inactiveBackground#FAFAFA
tab.inactiveForeground#5f5f5f
tab.unfocusedActiveBorder#FFF
tab.unfocusedInactiveForeground#999999
terminal.background#FAFAFA
terminalCursor.background#FFF
terminalCursor.foreground#444444
terminalOverviewRuler.border#FAFAFA
textLink.activeForeground#007aff
textLink.foreground#007aff
titleBar.activeBackground#FAFAFA
titleBar.activeForeground#444444
titleBar.border#D5D5D5
titleBar.inactiveBackground#FFFFFF
titleBar.inactiveForeground#8e8e93
widget.border#D5D5D5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
entity.name.function	#2a2a2a	bold
support.function	#2a2a2a	bold
entity.name.method	#2a2a2a	bold
entity.name.tag	#2a2a2a	bold
support.class.component.astro	#2a2a2a	bold
variable	#444
entity.name.type	#515151	underline
support.type	#515151	underline
storage.modifier	#515151	italic
storage.type	#444	italic
keyword.control	#444	bold
meta.property-name.css	#444	—
entity.other.attribute-name.class.css	#444	bold
entity.other.attribute-name.id.css	#444	bold
entity.other.attribute-name	#595959	—
support.type.property-name.json	#595959	italic
support.type.property-name.css	#595959	italic
constant.numeric	#595959	—
string	#595959	italic
storage.type.function.arrow	#595959	bold
meta.brace	#7c7c7c	—
keyword.operator.assignment	#7c7c7c	—
keyword.operator.logical	#7c7c7c	—
keyword.operator.type	#7c7c7c	—
punctuation.accessor	#7c7c7c	—
punctuation.definition	#7c7c7c	—
punctuation.terminator.statement	#7c7c7c	—
comment	#8b8b8b	italic

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