sjsepan.e-inkish

Name: sjsepan.e-inkish
Author: sjsepan

Publisher: sjsepanThemes in package: 4

E-inkish, but with lighter borders and with lightly contrasting regions. Inspired by E-Ink 2 by Mufanzaa.

Color themes

VS Code preview

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

sjsepan.e-inkish — E-inkish

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#000000
activityBar.activeFocusBorder#000000
activityBar.background#f2f2f2
activityBar.border#9f9f9f
activityBar.dropBorder#000000
activityBar.foreground#000000
activityBar.inactiveForeground#8f8f8f
activityBarBadge.background#808080b9
activityBarBadge.foreground#ffffff
badge.background#808080b9
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#000000
breadcrumb.background#f2f2f2
breadcrumb.focusForeground#999999
breadcrumb.foreground#000000
breadcrumbPicker.background#ffffff
button.background#c0c0c0
button.border#9f9f9f
button.foreground#000000
button.hoverBackground#b5b5b5
button.secondaryBackground#999999
button.secondaryForeground#000000
button.secondaryHoverBackground#cccccc
checkbox.background#000000
checkbox.border#000000
checkbox.foreground#ffffff
contrastActiveBorder#000000
contrastBorder#000000
debugConsole.errorForeground#000000
debugConsole.infoForeground#cdcdcd
debugConsole.sourceForeground#000000
debugConsole.warningForeground#cccccc
debugConsoleInputIcon.foreground#000000
debugExceptionWidget.background#f2f2f2
debugExceptionWidget.border#000000
debugIcon.breakpointCurrentStackframeForeground#999999
debugIcon.breakpointDisabledForeground#cdcdcd
debugIcon.breakpointForeground#000000
debugIcon.breakpointStackframeForeground#000000
debugIcon.breakpointUnverifiedForeground#cccccc
debugIcon.continueForeground#000000
debugIcon.disconnectForeground#cdcdcd
debugIcon.pauseForeground#999999
debugIcon.restartForeground#000000
debugIcon.startForeground#000000
debugIcon.stepBackForeground#000000
debugIcon.stepIntoForeground#000000
debugIcon.stepOutForeground#000000
debugIcon.stepOverForeground#000000
debugIcon.stopForeground#999999
debugTokenExpression.boolean#cdcdcd
debugTokenExpression.error#000000
debugTokenExpression.name#cdcdcd
debugTokenExpression.number#cdcdcd
debugTokenExpression.string#cdcdcd
debugTokenExpression.value#cdcdcd
debugToolBar.background#ffffff
debugToolBar.border#000000
debugView.exceptionLabelBackground#cccccc
debugView.exceptionLabelForeground#000000
debugView.stateLabelBackground#ffffff
debugView.stateLabelForeground#000000
debugView.valueChangedHighlight#cdcdcd
descriptionForeground#000000
diffEditor.border#000000
diffEditor.diagonalFill#cdcdcd
diffEditor.insertedTextBackground#cdcdcdee
diffEditor.insertedTextBorder#000000
diffEditor.removedTextBackground#ccccccee
diffEditor.removedTextBorder#000000
dropdown.background#ffffff
dropdown.border#000000
dropdown.foreground#000000
dropdown.listBackground#cccccc
editor.background#ffffff
editor.findMatchBackground#ffffff
editor.findMatchBorder#00000070
editor.findMatchHighlightBackground#cdcdcdee
editor.findMatchHighlightBorder#ffffff
editor.findRangeHighlightBackground#cdcdcdee
editor.foldBackground#999999ee
editor.foreground#000000
editor.inactiveSelectionBackground#cdcdcdee
editor.lineHighlightBorder#bbbbbb
editor.rangeHighlightBackground#cdcdcdee
editor.rangeHighlightBorder#cccccc
editor.selectionBackground#cccccc
editor.selectionForeground#000000
editor.selectionHighlightBackground#aaaaaaee
editor.selectionHighlightBorder#ffffff00
editor.snippetFinalTabstopHighlightBackground#ffffff
editor.snippetFinalTabstopHighlightBorder#000000
editor.snippetTabstopHighlightBackground#cdcdcd
editor.snippetTabstopHighlightBorder#cdcdcd
editor.stackFrameHighlightBackground#ffffff
editor.symbolHighlightBackground#ffffffee
editor.symbolHighlightBorder#ffffff
editor.wordHighlightBackground#cdcdcd50
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#bbbbbbee
editor.wordHighlightStrongBorder#00000000
editorBracketMatch.background#cccccc
editorBracketMatch.border#888888
editorCodeLens.foreground#000000
editorCursor.background#ffffff
editorCursor.foreground#000000
editorGroup.border#9f9f9f
editorGroup.emptyBackground#ffffff
editorGroupHeader.border#9f9f9f
editorGroupHeader.noTabsBackground#ffffff
editorGutter.addedBackground#ffffff
editorGutter.background#f2f2f2
editorGutter.commentRangeForeground#ffffff
editorGutter.deletedBackground#ffffff
editorGutter.foldingControlForeground#202020
editorGutter.modifiedBackground#ffffff
editorHint.border#000000
editorHint.foreground#000000
editorHoverWidget.background#f2f2f2
editorHoverWidget.border#000000
editorHoverWidget.foreground#000000
editorHoverWidget.statusBarBackground#cccccc
editorIndentGuide.activeBackground1#cccccc
editorIndentGuide.background1#dddddd
editorInfo.border#cccccc
editorInfo.foreground#000000
editorLightBulb.foreground#000000
editorLightBulbAutoFix.foreground#000000
editorLineNumber.activeForeground#000000
editorLineNumber.foreground#8f8f8f
editorMarkerNavigation.background#ffffff
editorMarkerNavigationError.background#999999
editorMarkerNavigationInfo.background#cdcdcd
editorMarkerNavigationWarning.background#cccccc
editorOverviewRuler.addedForeground#000000
editorOverviewRuler.background#ffffff
editorOverviewRuler.border#000000
editorOverviewRuler.bracketMatchForeground#000000
editorOverviewRuler.commonContentForeground#000000
editorOverviewRuler.currentContentForeground#000000
editorOverviewRuler.deletedForeground#cccccc
editorOverviewRuler.errorForeground#999999
editorOverviewRuler.findMatchForeground#000000ee
editorOverviewRuler.incomingContentForeground#000000
editorOverviewRuler.infoForeground#cdcdcd
editorOverviewRuler.modifiedForeground#000000
editorOverviewRuler.rangeHighlightForeground#000000ee
editorOverviewRuler.selectionHighlightForeground#000000ee
editorOverviewRuler.warningForeground#cccccc
editorOverviewRuler.wordHighlightForeground#00000050
editorOverviewRuler.wordHighlightStrongForeground#00000050
editorPane.background#ffffff
editorRuler.foreground#000000
editorSuggestWidget.background#f2f2f2
editorSuggestWidget.border#000000
editorSuggestWidget.foreground#000000
editorSuggestWidget.highlightForeground#000000
editorSuggestWidget.selectedBackground#b8b7b7
editorWarning.foreground#888888
editorWhitespace.foreground#ffffff00
editorWidget.background#f2f2f2
editorWidget.border#000000
editorWidget.foreground#000000
editorWidget.resizeBorder#000000
focusBorder#000000
foreground#000000
icon.foreground#000000
input.background#ffffff
input.border#9f9f9f
input.foreground#000000
input.placeholderForeground#999999
inputOption.activeBackground#cccccc
inputOption.activeBorder#999999
list.activeSelectionBackground#27272780
list.activeSelectionForeground#ffffff
menu.background#ffffff
menu.border#9f9f9f
menu.foreground#000000
menu.selectionBackground#999999
menu.selectionBorder#cccccc
menu.selectionForeground#000000
menu.separatorBackground#000000
menubar.selectionBackground#cccccc
menubar.selectionBorder#cccccc
menubar.selectionForeground#000000
merge.border#000000
merge.commonContentBackground#ccccccee
merge.commonHeaderBackground#ccccccee
merge.currentContentBackground#cdcdcdee
merge.currentHeaderBackground#cdcdcdee
merge.incomingContentBackground#ffffffee
merge.incomingHeaderBackground#ffffffee
minimap.background#f2f2f2
minimap.errorHighlight#cccccc
minimap.findMatchHighlight#cdcdcdee
minimap.selectionHighlight#00000090
minimap.warningHighlight#999999
minimapGutter.addedBackground#cccccc
minimapGutter.deletedBackground#000000
minimapGutter.modifiedBackground#999999
minimapSlider.activeBackground#00000040
minimapSlider.background#00000020
minimapSlider.hoverBackground#00000060
notebook.cellBorderColor#000000
notebook.cellHoverBackground#cdcdcd
notebook.cellInsertionIndicator#000000
notebook.cellStatusBarItemHoverBackground#ffffff
notebook.cellToolbarSeparator#000000
notebook.focusedCellBackground#cccccc
notebook.focusedCellBorder#000000
notebook.focusedEditorBorder#000000
notebook.outputContainerBackgroundColor#ffffff
notebook.symbolHighlightBackground#cdcdcd
notebookScrollbarSlider.activeBackground#cccccc
notebookScrollbarSlider.background#000000
notebookScrollbarSlider.hoverBackground#cccccc
notebookStatusErrorIcon.foreground#000000
notebookStatusRunningIcon.foreground#cccccc
notebookStatusSuccessIcon.foreground#cdcdcd
notificationCenter.border#000000
notificationCenterHeader.background#f2f2f2
notificationCenterHeader.foreground#000000
notificationLink.foreground#999999
notifications.background#f2f2f2
notifications.border#000000
notifications.foreground#000000
notificationsErrorIcon.foreground#999999
notificationsInfoIcon.foreground#cdcdcd
notificationsWarningIcon.foreground#cccccc
notificationToast.border#000000
panel.background#f2f2f2
panel.border#9f9f9f
panel.dropBorder#d3d3d3
panelInput.border#000000
panelSection.border#9f9f9f
panelSection.dropBackground#cdcdcd
panelSectionHeader.background#ffffff
panelSectionHeader.border#000000
panelSectionHeader.foreground#000000
panelTitle.activeBorder#000000
panelTitle.activeForeground#000000
panelTitle.inactiveForeground#8f8f8f
peekView.border#000000
peekViewEditor.background#ffffff
peekViewEditor.matchHighlightBackground#cdcdcd
peekViewEditor.matchHighlightBorder#000000
peekViewEditorGutter.background#ffffff
peekViewResult.background#ffffff
peekViewResult.fileForeground#000000
peekViewResult.lineForeground#000000
peekViewResult.matchHighlightBackground#cdcdcd
peekViewResult.selectionBackground#cccccc
peekViewResult.selectionForeground#000000
peekViewTitle.background#ffffff
peekViewTitleDescription.foreground#000000
peekViewTitleLabel.foreground#000000
pickerGroup.border#000000
pickerGroup.foreground#000000
problemsErrorIcon.foreground#cccccc
problemsInfoIcon.foreground#cdcdcd
problemsWarningIcon.foreground#999999
profileBadge.background#808080b9
profileBadge.foreground#ffffff
progressBar.background#000000
quickInput.background#ffffff
quickInput.foreground#000000
quickInputTitle.background#000000
scmGraph.foreground1default
scmGraph.foreground2default
scmGraph.foreground3default
scmGraph.foreground4default
scmGraph.foreground5default
scmGraph.historyItemBaseRefColordefault
scmGraph.historyItemHoverAdditionsForegrounddefault
scmGraph.historyItemHoverDefaultLabelBackgrounddefault
scmGraph.historyItemHoverDefaultLabelForegrounddefault
scmGraph.historyItemHoverDeletionsForegrounddefault
scmGraph.historyItemHoverLabelForegrounddefault
scmGraph.historyItemRefColor#808080
scmGraph.historyItemRemoteRefColordefault
scrollbar.shadow#202020
scrollbarSlider.activeBackground#00000040
scrollbarSlider.background#00000020
scrollbarSlider.hoverBackground#00000060
searchEditor.findMatchBackground#ffffff
searchEditor.findMatchBorder#000000
searchEditor.textInputBorder#000000
selection.background#999999
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#9f9f9f
sideBar.dropBackground#cdcdcd
sideBar.foreground#000000
sideBarSectionHeader.background#f2f2f2
sideBarSectionHeader.border#9f9f9f
sideBarSectionHeader.foreground#000000
sideBarTitle.foreground#000000
statusBar.background#f2f2f2
statusBar.border#9f9f9f
statusBar.debuggingBackground#cccccc
statusBar.debuggingBorder#9f9f9f
statusBar.debuggingForeground#000000
statusBar.foreground#000000
statusBar.noFolderBackground#999999
statusBar.noFolderBorder#9f9f9f
statusBar.noFolderForeground#000000
statusBarItem.activeBackground#cccccc
statusBarItem.hoverBackground#cdcdcd
statusBarItem.prominentBackground#999999
statusBarItem.prominentForeground#000000
statusBarItem.prominentHoverBackground#cccccc
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#cdcdcd
tab.activeBorder#000000
tab.activeBorderTop#000000
tab.activeForeground#000000
tab.activeModifiedBorder#ffffff
tab.border#9f9f9f
tab.hoverBackground#cdcdcd
tab.hoverBorder#cdcdcd
tab.hoverForeground#000000
tab.inactiveBackground#f2f2f2
tab.inactiveForeground#000000
tab.inactiveModifiedBorder#000000
tab.unfocusedActiveBackground#cdcdcd
tab.unfocusedActiveBorder#000000
tab.unfocusedActiveBorderTop#000000
tab.unfocusedActiveForeground#000000
tab.unfocusedActiveModifiedBorder#000000
tab.unfocusedHoverBackground#cdcdcd
tab.unfocusedHoverBorder#000000
tab.unfocusedHoverForeground#000000
tab.unfocusedInactiveBackground#f2f2f2
tab.unfocusedInactiveForeground#000000
tab.unfocusedInactiveModifiedBorder#999999
terminal.background#ffffff
terminal.border#9f9f9f
terminal.foreground#000000
terminal.selectionBackground#cdcdcd
terminalCursor.background#ffffff
terminalCursor.foreground#000000
textBlockQuote.background#ffffff
textBlockQuote.border#000000
textCodeBlock.background#ffffff
textLink.activeForeground#cccccc
textLink.foreground#000000
textPreformat.foreground#000000
textSeparator.foreground#000000
titleBar.activeBackground#f2f2f2
titleBar.activeForeground#000000
titleBar.border#9f9f9f
titleBar.inactiveBackground#f2f2f2
titleBar.inactiveForeground#8f8f8f
tree.indentGuidesStroke#000000
walkThrough.embeddedEditorBackground#ffffff
welcomePage.background#ffffff
widget.shadow#202020
window.activeBorder#000000
window.inactiveBorder#cdcdcd

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
support.function, variable.function	—	bold
entity.name.function, storage.type	—	bold
meta.function-call entity.name.function	—	bold
keyword.control.conditional	—	bold
variable.interpolation	—	bold
variable.parameter	—	bold
storage	—	bold
constant.other.object.key string.unquoted	—	bold
string.quoted, string, punctuation.tag.definition.string, tag.string	#777777	—
variable.language.this	—	bold
constant.other.object.key string.unquoted	—	bold
comment	#888888	italic
entity.name.type	—	bold
entity.other.inherited-class	—	bold
keyword, keyword.operator.new, keyword.other, keyword.control	—	bold
keyword.operator	—	bold
keyword.control.conditional, source.php keyword.control	—	bold
keyword.control.trycatch	—	bold
keyword.control	—	bold
keyword.control.flow	—	bold
meta.brace, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.definition.block, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.end	—	bold
meta.brace.square	#000000	bold
support.type.property-name.json	#000000	bold
markup.bold.markdown	#000000	bold
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass	#000000	bold
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable	#000000	bold
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable	#000000	bold
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute	#000000	bold
entity.name.tag.scss, entity.name.tag.sass	#000000	bold
keyword.other.unit.scss, keyword.other.unit.sass	#000000	bold
entity.other.attribute-name	#000000	bold

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