e-ink

Name: e-ink
Author: eddjrn

Publisher: eddjrnThemes in package: 1

An e-ink theme like for vscode

Open in VS Code

VS Code preview

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

e-ink — e-ink

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#000000
activityBar.activeBorder#000000
activityBar.activeFocusBorder#000000
activityBar.background#ffffff
activityBar.border#000000
activityBar.dropBorder#000000
activityBar.foreground#8d8d8d
activityBar.inactiveForeground#000000
activityBarBadge.background#000000
activityBarBadge.foreground#ffffff
badge.background#000000
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#525252
breadcrumb.background#ffffff
breadcrumb.focusForeground#8d8d8d
breadcrumb.foreground#000000
breadcrumbPicker.background#ffffff
button.background#000000
button.foreground#ffffff
button.hoverBackground#8d8d8d
button.secondaryBackground#8d8d8d
button.secondaryForeground#ffffff
button.secondaryHoverBackground#b3b3b3
checkbox.background#000000
checkbox.border#000000
checkbox.foreground#ffffff
contrastActiveBorder#000000
contrastBorder#000000
debugConsole.errorForeground#000000
debugConsole.infoForeground#dfdfdf
debugConsole.sourceForeground#000000
debugConsole.warningForeground#b3b3b3
debugConsoleInputIcon.foreground#000000
debugExceptionWidget.background#b3b3b3
debugExceptionWidget.border#000000
debugIcon.breakpointCurrentStackframeForeground#8d8d8d
debugIcon.breakpointDisabledForeground#dfdfdf
debugIcon.breakpointForeground#000000
debugIcon.breakpointStackframeForeground#000000
debugIcon.breakpointUnverifiedForeground#b3b3b3
debugIcon.continueForeground#000000
debugIcon.disconnectForeground#dfdfdf
debugIcon.pauseForeground#8d8d8d
debugIcon.restartForeground#000000
debugIcon.startForeground#000000
debugIcon.stepBackForeground#000000
debugIcon.stepIntoForeground#000000
debugIcon.stepOutForeground#000000
debugIcon.stepOverForeground#000000
debugIcon.stopForeground#8d8d8d
debugTokenExpression.boolean#dfdfdf
debugTokenExpression.error#000000
debugTokenExpression.name#dfdfdf
debugTokenExpression.number#dfdfdf
debugTokenExpression.string#dfdfdf
debugTokenExpression.value#dfdfdf
debugToolBar.background#ffffff
debugToolBar.border#000000
debugView.exceptionLabelBackground#b3b3b3
debugView.exceptionLabelForeground#000000
debugView.stateLabelBackground#ffffff
debugView.stateLabelForeground#000000
debugView.valueChangedHighlight#dfdfdf
descriptionForeground#000000
diffEditor.border#000000
diffEditor.diagonalFill#dfdfdf
diffEditor.insertedTextBackground#dfdfdf
diffEditor.insertedTextBorder#000000
diffEditor.removedTextBackground#b3b3b3
diffEditor.removedTextBorder#000000
dropdown.background#ffffff
dropdown.border#000000
dropdown.foreground#000000
dropdown.listBackground#b3b3b3
editor.background#ffffff
editor.findMatchBackground#ffffff
editor.findMatchBorder#000000
editor.findMatchHighlightBackground#dfdfdf
editor.findMatchHighlightBorder#ffffff
editor.findRangeHighlightBackground#dfdfdf
editor.findRangeHighlightBorder#ffffff
editor.focusedStackFrameHighlightBackground#ffffff
editor.foldBackground#8d8d8d
editor.foreground#000000
editor.hoverHighlightBackground#ffffff
editor.inactiveSelectionBackground#dfdfdf
editor.lineHighlightBackground#ffffff
editor.lineHighlightBorder#000000
editor.onTypeRenameBackground#ffffff
editor.rangeHighlightBackground#dfdfdf
editor.rangeHighlightBorder#b3b3b3
editor.selectionBackground#b3b3b3
editor.selectionForeground#000000
editor.selectionHighlightBackground#dfdfdf
editor.selectionHighlightBorder#ffffff
editor.snippetFinalTabstopHighlightBackground#ffffff
editor.snippetFinalTabstopHighlightBorder#000000
editor.snippetTabstopHighlightBackground#dfdfdf
editor.snippetTabstopHighlightBorder#dfdfdf
editor.stackFrameHighlightBackground#ffffff
editor.symbolHighlightBackground#ffffff
editor.symbolHighlightBorder#ffffff
editor.wordHighlightBackground#dfdfdf50
editor.wordHighlightBorder#000000
editor.wordHighlightStrongBackground#8d8d8d50
editor.wordHighlightStrongBorder#000000
editorBracketMatch.background#ffffff
editorBracketMatch.border#000000
editorCodeLens.foreground#000000
editorCursor.background#ffffff
editorCursor.foreground#000000
editorError.border#000000
editorError.foreground#b3b3b3
editorGroup.border#000000
editorGroup.dropBackground#8d8d8d
editorGroup.emptyBackground#b3b3b3
editorGroup.focusedEmptyBorder#000000
editorGroupHeader.border#000000
editorGroupHeader.noTabsBackground#ffffff
editorGroupHeader.tabsBackground#ffffff
editorGroupHeader.tabsBorder#000000
editorGutter.addedBackground#b3b3b3
editorGutter.background#ffffff
editorGutter.commentRangeForeground#dfdfdf
editorGutter.deletedBackground#000000
editorGutter.foldingControlForeground#8d8d8d
editorGutter.modifiedBackground#8d8d8d
editorHint.border#000000
editorHint.foreground#000000
editorHoverWidget.background#dfdfdf
editorHoverWidget.border#dfdfdf
editorHoverWidget.foreground#000000
editorHoverWidget.statusBarBackground#b3b3b3
editorIndentGuide.activeBackground#000000
editorIndentGuide.background#b3b3b3
editorInfo.border#b3b3b3
editorInfo.foreground#000000
editorLightBulb.foreground#000000
editorLightBulbAutoFix.foreground#000000
editorLineNumber.activeForeground#b3b3b3
editorLineNumber.foreground#000000
editorLink.activeForeground#b3b3b3
editorMarkerNavigation.background#ffffff
editorMarkerNavigationError.background#8b8b8b
editorMarkerNavigationInfo.background#dfdfdf
editorMarkerNavigationWarning.background#b3b3b3
editorOverviewRuler.addedForeground#525252
editorOverviewRuler.background#ffffff
editorOverviewRuler.border#000000
editorOverviewRuler.bracketMatchForeground#000000
editorOverviewRuler.commonContentForeground#000000
editorOverviewRuler.currentContentForeground#000000
editorOverviewRuler.deletedForeground#b3b3b3
editorOverviewRuler.errorForeground#8b8b8b
editorOverviewRuler.findMatchForeground#000000
editorOverviewRuler.incomingContentForeground#000000
editorOverviewRuler.infoForeground#dfdfdf
editorOverviewRuler.modifiedForeground#525252
editorOverviewRuler.rangeHighlightForeground#525252
editorOverviewRuler.selectionHighlightForeground#000000
editorOverviewRuler.warningForeground#b3b3b3
editorOverviewRuler.wordHighlightForeground#00000050
editorOverviewRuler.wordHighlightStrongForeground#00000050
editorPane.background#ffffff
editorRuler.foreground#000000
editorSuggestWidget.background#ffffff
editorSuggestWidget.border#000000
editorSuggestWidget.foreground#000000
editorSuggestWidget.highlightForeground#000000
editorSuggestWidget.selectedBackground#b3b3b3
editorUnnecessaryCode.border#000000
editorUnnecessaryCode.opacity#dfdfdf
editorWarning.border#8d8d8d
editorWarning.foreground#dfdfdf
editorWhitespace.foreground#ffffff
editorWidget.background#ffffff
editorWidget.border#000000
editorWidget.foreground#000000
editorWidget.resizeBorder#000000
errorForeground#8d8d8d
extensionBadge.remoteBackground#000000
extensionBadge.remoteForeground#ffffff
extensionButton.prominentBackground#ffffff
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#8b8b8b
focusBorder#000000
foreground#000000
gitDecoration.addedResourceForeground#525252
gitDecoration.conflictingResourceForeground#8b8b8b
gitDecoration.deletedResourceForeground#b3b3b3
gitDecoration.ignoredResourceForeground#8b8b8b
gitDecoration.modifiedResourceForeground#525252
gitDecoration.submoduleResourceForeground#000000
gitDecoration.untrackedResourceForeground#8b8b8b
icon.foreground#000000
imagePreview.border#000000
input.background#ffffff
input.border#000000
input.foreground#000000
input.placeholderForeground#8d8d8d
inputOption.activeBackground#b3b3b3
inputOption.activeBorder#8d8d8d
inputOption.activeForeground#000000
inputValidation.errorBackground#000000
inputValidation.errorBorder#000000
inputValidation.errorForeground#ffffff
inputValidation.infoBackground#dfdfdf
inputValidation.infoBorder#000000
inputValidation.infoForeground#000000
inputValidation.warningBackground#b3b3b3
inputValidation.warningBorder#000000
inputValidation.warningForeground#000000
list.activeSelectionBackground#8d8d8d
list.activeSelectionForeground#000000
list.deemphasizedForeground#000000
list.dropBackground#dfdfdf
list.errorForeground#8d8d8d
list.filterMatchBackground#b3b3b3
list.filterMatchBorder#000000
list.focusBackground#b3b3b3
list.focusForeground#000000
list.highlightForeground#000000
list.hoverBackground#dfdfdf
list.hoverForeground#000000
list.inactiveFocusBackground#dfdfdf
list.inactiveSelectionBackground#dfdfdf
list.inactiveSelectionForeground#000000
list.invalidItemForeground#8d8d8d
list.warningForeground#8d8d8d
listFilterWidget.background#ffffff
listFilterWidget.noMatchesOutline#b3b3b3
listFilterWidget.outline#8d8d8d
menu.background#ffffff
menu.border#000000
menu.foreground#000000
menu.selectionBackground#b3b3b3
menu.selectionBorder#b3b3b3
menu.selectionForeground#000000
menu.separatorBackground#000000
menubar.selectionBackground#b3b3b3
menubar.selectionBorder#b3b3b3
menubar.selectionForeground#000000
merge.border#000000
merge.commonContentBackground#b3b3b3
merge.commonHeaderBackground#b3b3b3
merge.currentContentBackground#dfdfdf
merge.currentHeaderBackground#dfdfdf
merge.incomingContentBackground#ffffff
merge.incomingHeaderBackground#ffffff
minimap.background#ffffff
minimap.errorHighlight#b3b3b3
minimap.findMatchHighlight#dfdfdf
minimap.selectionHighlight#000000
minimap.warningHighlight#8d8d8d
minimapGutter.addedBackground#b3b3b3
minimapGutter.deletedBackground#000000
minimapGutter.modifiedBackground#8d8d8d
minimapSlider.activeBackground#00000050
minimapSlider.background#b3b3b3
minimapSlider.hoverBackground#dfdfdf
notebook.cellBorderColor#000000
notebook.cellHoverBackground#dfdfdf
notebook.cellInsertionIndicator#000000
notebook.cellStatusBarItemHoverBackground#ffffff
notebook.cellToolbarSeparator#000000
notebook.cellToolbarSeperator#000000
notebook.focusedCellBackground#b3b3b3
notebook.focusedCellBorder#000000
notebook.focusedCellShadow#000000
notebook.focusedEditorBorder#000000
notebook.outputContainerBackgroundColor#ffffff
notebook.symbolHighlightBackground#dfdfdf
notebookScrollbarSlider.activeBackground#b3b3b3
notebookScrollbarSlider.background#000000
notebookScrollbarSlider.hoverBackground#b3b3b3
notebookStatusErrorIcon.foreground#000000
notebookStatusRunningIcon.foreground#b3b3b3
notebookStatusSuccessIcon.foreground#dfdfdf
notificationCenter.border#000000
notificationCenterHeader.background#ffffff
notificationCenterHeader.foreground#000000
notificationLink.foreground#8d8d8d
notifications.background#ffffff
notifications.border#000000
notifications.foreground#000000
notificationsErrorIcon.foreground#000000
notificationsInfoIcon.foreground#dfdfdf
notificationsWarningIcon.foreground#b3b3b3
notificationToast.border#000000
panel.background#ffffff
panel.border#000000
panel.dropBorder#d3d3d3
panelInput.border#000000
panelSection.border#000000
panelSection.dropBackground#dfdfdf
panelSectionHeader.background#ffffff
panelSectionHeader.border#000000
panelSectionHeader.foreground#000000
panelTitle.activeBorder#000000
panelTitle.activeForeground#000000
panelTitle.inactiveForeground#000000
peekView.border#000000
peekViewEditor.background#ffffff
peekViewEditor.matchHighlightBackground#dfdfdf
peekViewEditor.matchHighlightBorder#000000
peekViewEditorGutter.background#ffffff
peekViewResult.background#ffffff
peekViewResult.fileForeground#000000
peekViewResult.lineForeground#000000
peekViewResult.matchHighlightBackground#dfdfdf
peekViewResult.selectionBackground#b3b3b3
peekViewResult.selectionForeground#000000
peekViewTitle.background#ffffff
peekViewTitleDescription.foreground#000000
peekViewTitleLabel.foreground#000000
pickerGroup.border#000000
pickerGroup.foreground#000000
problemsErrorIcon.foreground#b3b3b3
problemsInfoIcon.foreground#dfdfdf
problemsWarningIcon.foreground#8d8d8d
progressBar.background#000000
quickInput.background#ffffff
quickInput.foreground#000000
quickInputTitle.background#000000
scm.providerBorder#000000
scrollbar.shadow#000000
scrollbarSlider.activeBackground#000000
scrollbarSlider.background#000000
scrollbarSlider.hoverBackground#b3b3b3
searchEditor.findMatchBackground#ffffff
searchEditor.findMatchBorder#000000
searchEditor.textInputBorder#000000
selection.background#b3b3b3
settings.checkboxBackground#000000
settings.checkboxBorder#000000
settings.checkboxForeground#ffffff
settings.dropdownBackground#ffffff
settings.dropdownBorder#000000
settings.dropdownForeground#000000
settings.dropdownListBorder#000000
settings.headerForeground#000000
settings.modifiedItemIndicator#000000
settings.numberInputBackground#ffffff
settings.numberInputBorder#000000
settings.numberInputForeground#000000
settings.textInputBackground#ffffff
settings.textInputBorder#000000
settings.textInputForeground#000000
sideBar.background#ffffff
sideBar.border#000000
sideBar.dropBackground#dfdfdf
sideBar.foreground#000000
sideBarSectionHeader.background#ffffff
sideBarSectionHeader.border#000000
sideBarSectionHeader.foreground#000000
sideBarTitle.foreground#000000
statusBar.background#ffffff
statusBar.border#000000
statusBar.debuggingBackground#b3b3b3
statusBar.debuggingBorder#000000
statusBar.debuggingForeground#000000
statusBar.foreground#000000
statusBar.noFolderBackground#8d8d8d
statusBar.noFolderBorder#000000
statusBar.noFolderForeground#000000
statusBarItem.activeBackground#b3b3b3
statusBarItem.hoverBackground#dfdfdf
statusBarItem.prominentBackground#8d8d8d
statusBarItem.prominentForeground#000000
statusBarItem.prominentHoverBackground#b3b3b3
statusBarItem.remoteBackground#000000
statusBarItem.remoteForeground#ffffff
symbolIcon.arrayForeground#000000
symbolIcon.booleanForeground#000000
symbolIcon.classForeground#000000
symbolIcon.colorForeground#000000
symbolIcon.constantForeground#000000
symbolIcon.constructorForeground#000000
symbolIcon.enumeratorForeground#000000
symbolIcon.enumeratorMemberForeground#000000
symbolIcon.eventForeground#000000
symbolIcon.fieldForeground#000000
symbolIcon.fileForeground#000000
symbolIcon.folderForeground#000000
symbolIcon.functionForeground#000000
symbolIcon.interfaceForeground#000000
symbolIcon.keyForeground#000000
symbolIcon.keywordForeground#000000
symbolIcon.methodForeground#000000
symbolIcon.moduleForeground#000000
symbolIcon.namespaceForeground#000000
symbolIcon.nullForeground#000000
symbolIcon.numberForeground#000000
symbolIcon.objectForeground#000000
symbolIcon.operatorForeground#000000
symbolIcon.packageForeground#000000
symbolIcon.propertyForeground#000000
symbolIcon.referenceForeground#000000
symbolIcon.snippetForeground#000000
symbolIcon.stringForeground#000000
symbolIcon.structForeground#000000
symbolIcon.textForeground#000000
symbolIcon.typeParameterForeground#000000
symbolIcon.unitForeground#000000
symbolIcon.variableForeground#000000
tab.activeBackground#ffffff
tab.activeBorder#ffffff
tab.activeBorderTop#000000
tab.activeForeground#000000
tab.activeModifiedBorder#000000
tab.border#000000
tab.hoverBackground#dfdfdf
tab.hoverBorder#dfdfdf
tab.hoverForeground#000000
tab.inactiveBackground#b3b3b3
tab.inactiveForeground#000000
tab.inactiveModifiedBorder#000000
tab.unfocusedActiveBackground#dfdfdf
tab.unfocusedActiveBorder#000000
tab.unfocusedActiveBorderTop#000000
tab.unfocusedActiveForeground#000000
tab.unfocusedActiveModifiedBorder#000000
tab.unfocusedHoverBackground#dfdfdf
tab.unfocusedHoverBorder#000000
tab.unfocusedHoverForeground#000000
tab.unfocusedInactiveBackground#8d8d8d
tab.unfocusedInactiveForeground#000000
tab.unfocusedInactiveModifiedBorder#8d8d8d
terminal.background#ffffff
terminal.border#000000
terminal.foreground#000000
terminal.selectionBackground#dfdfdf
terminalCursor.background#ffffff
terminalCursor.foreground#000000
textBlockQuote.background#ffffff
textBlockQuote.border#000000
textCodeBlock.background#ffffff
textLink.activeForeground#b3b3b3
textLink.foreground#525252
textPreformat.foreground#000000
textSeparator.foreground#000000
titleBar.activeBackground#ffffff
titleBar.activeForeground#000000
titleBar.border#000000
titleBar.inactiveBackground#b3b3b3
titleBar.inactiveForeground#000000
tree.indentGuidesStroke#000000
walkThrough.embeddedEditorBackground#ffffff
welcomePage.background#ffffff
welcomePage.buttonBackground#b3b3b3
welcomePage.buttonHoverBackground#dfdfdf
widget.shadow#000000
window.activeBorder#000000
window.inactiveBorder#dfdfdf

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.line.double-slash	#8b8b8b	italic underline
entity.name.tag, storage.modifier, storage.type.class, support.type.property-name, punctuation.definition.template-expression, variable.other.readwrite, variable.other.object	#000000	bold
entity.other.attribute-name	#000000	italic
support.type.primitive, entity.name.type, keyword.control.flow	#000000	italic underline
entity.name.function, storage.type	#000000	italic bold
keyword.control.conditional	#000000	italic
keyword.operator.assignment, storage.type.function.arrow, keyword.operator.logical, keyword.operator.comparison, punctuation.separator.key-value, keyword.operator.type.annotation, punctuation.accessor, punctuation.separator.comma, punctuation.definition.string, punctuation.terminator.statement, punctuation.definition.typeparameters	#000000	bold
punctuation.separator.array, punctuation.separator.dictionary	#8b8b8b	bold
keyword.control.export, keyword.control.import	#000000	bold italic
string.quoted.single, string.quoted.double	#525252
variable.other.object.property	#525252	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}!`;
}