Skip to main content
E-Ink Theme | Coding Theme
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
actionBar.toggledBackground #44475A activityBar.activeBackground #141523 activityBar.activeBorder #6272A4 activityBar.activeFocusBorder #6272A4 activityBar.background #141523 activityBar.border #6272A4 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, comment.line, comment.line.double-slash, comment.line.double-dash, comment.line.number-sign, comment.line.percentage, comment.line.character, comment.block, comment.block.documentation #2AA198 constant, constant.numeric, constant.character, constant.character.escape, constant.language, constant.other, markup.underline, markup.underline.link, markup.heading, markup.list, markup.list.numbered, markup.list.unnumbered, markup.quote, markup.raw, string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.quoted.other, string.unquoted, string.interpolated, string.regexp, string.other, text.html.derivative, entity.other.attribute-name.class.css #EAC394 entity, entity.name, entity.name.function, entity.name.type, entity.name.tag, entity.name.section, entity.other, entity.other.inherited-class, entity.other.attribute-name, markup.bold, markup.inline.raw.string.markdown, markup.bold.markdown, markup.italic.markdown, markup.strikethrough.markdown, string.other.link.title.markdown, string.other.link.description.markdown, fenced_code.block.language.markdown
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
E-Ink Theme — E-Ink Color Dark
activityBar.dropBorder
#BD93F9
activityBar.foreground #F8F8F2
activityBar.inactiveForeground #F8F8F2
activityBarBadge.background #141523
activityBarBadge.foreground #F8F8F2
activityBarTop.activeBackground #141523
activityBarTop.activeBorder #BD93F9
activityBarTop.background #141523
activityBarTop.dropBorder #BD93F9
activityBarTop.foreground #F8F8F2
activityBarTop.inactiveForeground #F8F8F2
badge.background #141523
badge.foreground #F8F8F2
breadcrumb.activeSelectionForeground #F8F8F2
breadcrumb.focusForeground #F8F8F2
breadcrumb.foreground #F8F8F2
button.background #141523
button.border #6272A4
button.foreground #F8F8F2
button.hoverBackground #44475A
button.separator #F8F8F2
checkbox.background #141523
checkbox.border #6272A4
checkbox.foreground #F8F8F2
checkbox.selectBackground #6272A4
checkbox.selectBorder #BD93F9
contrastActiveBorder #BD93F9
contrastBorder #6272A4
debugTokenExpression.name #F8F8F2
debugToolBar.background #141523
debugToolBar.border #6272A4
debugView.stateLabelBackground #44475A
debugView.stateLabelForeground #F8F8F2
debugView.valueChangedHighlight #F8F8F2
descriptionForeground #F8F8F2
diffEditor.border #6272A4
diffEditor.insertedTextBackground #2AA19850
diffEditor.insertedTextBorder #2AA19850
diffEditor.removedTextBackground #FF555550
diffEditor.removedTextBorder #FF555550
diffEditor.unchangedRegionBackground #44475A
diffEditor.unchangedRegionForeground #F8F8F2
diffEditorGutter.insertedLineBackground #44475Ad0
diffEditorGutter.removedLineBackground #44475Ad0
disabledForeground #6272A4
dropdown.background #141523
dropdown.border #6272A4
dropdown.foreground #F8F8F2
dropdown.listBackground #141523
editor.background #141523
editor.findMatchBorder #BD93F9
editor.findRangeHighlightBackground #141523
editor.findRangeHighlightBorder #BD93F9
editor.focusedStackFrameHighlightBackground #44475A
editor.foldPlaceholderForeground #F8F8F2
editor.foreground #F8F8F2
editor.inactiveSelectionBackground #44475A
editor.inlineValuesBackground #44475A
editor.inlineValuesForeground #F8F8F2
editor.lineHighlightBorder #BD93F9
editor.linkedEditingBackground #F8F8F200
editor.selectionBackground #44475A
editor.selectionForeground #F8F8F200
editor.snippetTabstopHighlightBackground #44475A
editor.snippetTabstopHighlightBorder #6272A4
editor.stackFrameHighlightBackground #44475A
editor.symbolHighlightBackground #44475A
editor.symbolHighlightBorder #BD93F9
editor.wordHighlightBorder #BD93F9
editor.wordHighlightStrongBorder #BD93F9
editor.wordHighlightTextBorder #BD93F9
editorBracketHighlight.foreground1 #FF79C6
editorBracketHighlight.foreground2 #FF9800
editorBracketHighlight.foreground3 #8BE9FD
editorBracketHighlight.foreground4 #20E3B2
editorBracketHighlight.foreground5 #F8F8F2
editorBracketHighlight.foreground6 #EAC394
editorBracketHighlight.unexpectedBracket.foreground #FF5555
editorBracketMatch.background #141523
editorBracketMatch.border #BD93F9
editorCodeLens.foreground #BD93F9
editorCursor.background #141523
editorCursor.foreground #BD93F9
editorGroup.border #6272A4
editorGroup.dropBackground #44475A
editorGroup.dropIntoPromptBackground #141523
editorGroup.dropIntoPromptBorder #6272A4
editorGroup.dropIntoPromptForeground #F8F8F2
editorGroup.emptyBackground #141523
editorGroup.focusedEmptyBorder #6272A4
editorGroupHeader.border #6272A4
editorGroupHeader.noTabsBackground #141523
editorGroupHeader.tabsBackground #141523
editorGroupHeader.tabsBorder #6272A4
editorGutter.background #141523
editorGutter.modifiedBackground #6272A4
editorIndentGuide.activeBackground #6272A4
editorIndentGuide.background #141523
editorLightBulb.foreground #F8F8F2
editorLightBulbAutoFix.foreground #F8F8F2
editorLineNumber.activeForeground #BD93F9
editorLineNumber.dimmedForeground #6272A4
editorLineNumber.foreground #6272A4
editorLink.activeForeground #BD93F9
editorOverviewRuler.background #141523
editorOverviewRuler.border #6272A4
editorOverviewRuler.findMatchForeground #F8F8F2
editorPane.background #141523
editorRuler.foreground #F8F8F2
editorWhitespace.foreground #F8F8F2
errorForeground #FF5555
extensionButton.foreground #F8F8F2
extensionButton.hoverBackground #141523
extensionButton.prominentForeground #F8F8F2
extensionButton.prominentHoverBackground #141523
extensionButton.separator #F8F8F2
focusBorder #BD93F9
foreground #F8F8F2
icon.foreground #F8F8F2
input.background #141523
input.border #6272A4
input.foreground #F8F8F2
input.placeholderForeground #F8F8F2
inputOption.activeBackground #141523
inputOption.activeBorder #6272A4
inputOption.activeForeground #F8F8F2
inputOption.hoverBackground #141523
keybindingLabel.background #141523
keybindingLabel.border #6272A4
keybindingLabel.bottomBorder #6272A4
keybindingLabel.foreground #F8F8F2
keybindingTable.headerBackground #141523
keybindingTable.rowsBackground #141523
list.activeSelectionBackground #44475A
list.activeSelectionForeground #F8F8F2
list.activeSelectionIconForeground #F8F8F2
list.deemphasizedForeground #F8F8F2
list.dropBackground #44475A
list.errorForeground #FF5555
list.filterMatchBackground #44475A
list.filterMatchBorder #6272A4
list.focusAndSelectionOutline #BD93F9
list.focusBackground #141523
list.focusForeground #F8F8F2
list.focusHighlightForeground #F8F8F2
list.focusOutline #BD93F9
list.highlightForeground #F8F8F2
list.hoverBackground #44475A
list.hoverForeground #F8F8F2
list.inactiveFocusBackground #141523
list.inactiveFocusOutline #BD93F9
list.inactiveSelectionBackground #44475A
list.inactiveSelectionForeground #F8F8F2
list.inactiveSelectionIconForeground #F8F8F2
list.invalidItemForeground #FF5555
list.warningForeground #EAC394
listFilterWidget.background #141523
listFilterWidget.noMatchesOutline #BD93F9
listFilterWidget.outline #BD93F9
listFilterWidget.shadow #141523
notificationCenter.border #6272A4
notificationCenterHeader.background #141523
notificationCenterHeader.foreground #F8F8F2
notifications.background #141523
notifications.border #6272A4
notifications.foreground #F8F8F2
notificationToast.border #6272A4
panel.background #141523
panel.border #6272A4
panel.dropBorder #BD93F9
panelInput.border #6272A4
panelTitle.activeBorder #BD93F9
panelTitle.activeForeground #F8F8F2
panelTitle.inactiveForeground #F8F8F2
profileBadge.background #141523
profileBadge.foreground #F8F8F2
progressBar.background #6272A4
sash.hoverBorder #6272A4
scrollbar.shadow #141523
scrollbarSlider.activeBackground #6272A4
scrollbarSlider.background #6272A499
scrollbarSlider.hoverBackground #6272A4CC
search.resultsInfoForeground #F8F8F2
selection.background #44475A
sideBar.background #141523
sideBar.border #6272A4
sideBar.dropBackground #44475A
sideBar.foreground #F8F8F2
sideBarSectionHeader.background #141523
sideBarSectionHeader.border #6272A4
sideBarSectionHeader.foreground #F8F8F2
sideBarTitle.foreground #F8F8F2
sideBySideEditor.horizontalBorder #6272A4
sideBySideEditor.verticalBorder #6272A4
statusBar.background #141523
statusBar.border #6272A4
statusBar.debuggingBackground #141523
statusBar.debuggingBorder #6272A4
statusBar.debuggingForeground #F8F8F2
statusBar.foreground #F8F8F2
statusBar.noFolderBackground #141523
statusBar.noFolderBorder #6272A4
statusBar.noFolderForeground #F8F8F2
tab.activeBackground #141523
tab.activeBorder #6272A4
tab.activeBorderTop #6272A4
tab.activeForeground #F8F8F2
tab.activeModifiedBorder #6272A4
tab.border #6272A4
tab.hoverBackground #141523
tab.hoverBorder #6272A4
tab.hoverForeground #F8F8F2
tab.inactiveBackground #141523
tab.inactiveForeground #F8F8F2
tab.inactiveModifiedBorder #6272A4
tab.lastPinnedBorder #6272A4
tab.unfocusedActiveBackground #141523
tab.unfocusedActiveBorder #6272A4
tab.unfocusedActiveBorderTop #6272A4
tab.unfocusedActiveForeground #F8F8F2
tab.unfocusedActiveModifiedBorder #6272A4
tab.unfocusedHoverBackground #141523
tab.unfocusedHoverBorder #6272A4
tab.unfocusedHoverForeground #F8F8F2
tab.unfocusedInactiveBackground #141523
tab.unfocusedInactiveForeground #F8F8F2
tab.unfocusedInactiveModifiedBorder #6272A4
terminal.background #141523
terminal.border #6272A4
terminal.findMatchBackground #141523
terminal.findMatchBorder #BD93F9
terminal.findMatchHighlightBackground #141523
terminal.findMatchHighlightBorder #BD93F9
terminal.foreground #F8F8F2
terminal.tab.activeBorder #BD93F9
terminalCursor.background #141523
terminalCursor.foreground #BD93F9
textBlockQuote.background #141523
textBlockQuote.border #6272A4
textCodeBlock.background #141523
textLink.activeForeground #F8F8F2
textLink.foreground #BD93F9
textPreformat.background #44475A
textPreformat.foreground #F8F8F2
textSeparator.foreground #F8F8F2
toolbar.activeBackground #6272A4
toolbar.hoverBackground #141523
toolbar.hoverOutline #BD93F9
tree.inactiveIndentGuidesStroke #6272A4
tree.indentGuidesStroke #6272A4
tree.tableColumnsBorder #6272A4
tree.tableOddRowsBackground #141523
widget.border #6272A4
widget.shadow #141523
window.activeBorder #6272A4
window.inactiveBorder #6272A4
#8BE9FD
invalid, invalid.illegal, invalid.deprecated #FF5555
keyword, keyword.control, keyword.operator, keyword.other, markup.italic, storage, storage.type, storage.modifier, support, support.function, support.class, support.type, support.constant, support.variable, support.other, variable.language, entity.name.tag.html, punctuation.separator.key-value.html, support.type.property-name.json, entity.name.tag.yaml, punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, punctuation.definition.metadata.markdown, punctuation.definition.bold.markdown, punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown, punctuation.definition.raw.markdown, punctuation.definition.markdown, punctuation.definition.heading.markdown, punctuation.definition.strikethrough.markdown, punctuation.definition.italic.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.table.markdown, punctuation.separator.table.markdown, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, entity.name.tag.css, entity.name.tag.wildcard.css, entity.name.tag.script.html.vue, entity.name.tag.template.html.vue, entity.name.tag.style.html.vue, punctuation.attribute-shorthand.bind.html.vue, punctuation.attribute-shorthand.event.html.vue, punctuation.definition.string.begin.html.vue, punctuation.definition.string.end.html.vue, punctuation.separator.key-value.ts, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.separator.key-value.js, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js #FF79C6
markup, markup.other, meta, variable, variable.parameter, variable.other #F8F8F2
entity.other.attribute-name.html, support.type.property-name.css, support.type.property-name.media.css, support.type.builtin.ts, support.type.primitive.ts #20E3B2
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 } !` ;
}
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Dark+
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
Button.tsx
Modal.tsx
hooks
utils
index.ts
public
README.md
src
components
fetchUser.ts
fetchUser 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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...
~/my-project $
package.json
tsconfig.json
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 } !` ;
}