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 #DAB0A1 activityBar.activeBackground #FFFFFF activityBar.activeBorder #795548 activityBar.activeFocusBorder #795548 activityBar.background #FFFFFF activityBar.border #795548 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 #1CB01C 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 Light
activityBar.dropBorder
#FF79C6
activityBar.foreground #795548
activityBar.inactiveForeground #795548
activityBarBadge.background #FFFFFF
activityBarBadge.foreground #795548
activityBarTop.activeBackground #FFFFFF
activityBarTop.activeBorder #795548
activityBarTop.background #FFFFFF
activityBarTop.dropBorder #FF79C6
activityBarTop.foreground #795548
activityBarTop.inactiveForeground #795548
badge.background #FFFFFF
badge.foreground #795548
breadcrumb.activeSelectionForeground #795548
breadcrumb.focusForeground #795548
breadcrumb.foreground #795548
button.background #FFFFFF
button.border #795548
button.foreground #795548
button.hoverBackground #DAB0A1
button.separator #795548
checkbox.background #FFFFFF
checkbox.border #795548
checkbox.foreground #795548
checkbox.selectBackground #795548
checkbox.selectBorder #795548
contrastActiveBorder #795548
contrastBorder #795548
debugTokenExpression.name #795548
debugToolBar.background #FFFFFF
debugToolBar.border #795548
debugView.stateLabelBackground #DAB0A1
debugView.stateLabelForeground #795548
debugView.valueChangedHighlight #DAB0A1
descriptionForeground #795548
diffEditor.border #795548
diffEditor.insertedTextBackground #1CB01C50
diffEditor.insertedTextBorder #1CB01C50
diffEditor.removedTextBackground #FF555550
diffEditor.removedTextBorder #FF555550
diffEditor.unchangedRegionBackground #DAB0A1
diffEditor.unchangedRegionForeground #795548
diffEditorGutter.insertedLineBackground #1CB01C50
diffEditorGutter.removedLineBackground #FF555550
disabledForeground #DAB0A1
dropdown.background #FFFFFF
dropdown.border #795548
dropdown.foreground #795548
dropdown.listBackground #FFFFFF
editor.background #FFFFFF
editor.findMatchBorder #795548
editor.findRangeHighlightBackground #FFFFFF
editor.findRangeHighlightBorder #795548
editor.focusedStackFrameHighlightBackground #DAB0A1
editor.foldPlaceholderForeground #795548
editor.foreground #795548
editor.inactiveSelectionBackground #DAB0A1
editor.inlineValuesBackground #DAB0A1
editor.inlineValuesForeground #795548
editor.lineHighlightBorder #795548
editor.linkedEditingBackground #F8F8F200
editor.selectionBackground #DAB0A1
editor.selectionForeground #F8F8F200
editor.snippetTabstopHighlightBackground #DAB0A1
editor.snippetTabstopHighlightBorder #795548
editor.stackFrameHighlightBackground #DAB0A1
editor.symbolHighlightBackground #DAB0A1
editor.symbolHighlightBorder #795548
editor.wordHighlightBorder #795548
editor.wordHighlightStrongBorder #795548
editor.wordHighlightTextBorder #795548
editorBracketHighlight.foreground1 #3F51B5
editorBracketHighlight.foreground2 #44475A
editorBracketHighlight.foreground3 #FF79C6
editorBracketHighlight.foreground4 #CCA300
editorBracketHighlight.foreground5 #795548
editorBracketHighlight.foreground6 #1CB01C
editorBracketHighlight.unexpectedBracket.foreground #FF5555
editorBracketMatch.background #FFFFFF
editorBracketMatch.border #795548
editorCodeLens.foreground #3F51B5
editorCursor.background #FFFFFF
editorCursor.foreground #795548
editorGroup.border #795548
editorGroup.dropBackground #DAB0A1
editorGroup.dropIntoPromptBackground #FFFFFF
editorGroup.dropIntoPromptBorder #795548
editorGroup.dropIntoPromptForeground #795548
editorGroup.emptyBackground #FFFFFF
editorGroup.focusedEmptyBorder #795548
editorGroupHeader.border #795548
editorGroupHeader.noTabsBackground #FFFFFF
editorGroupHeader.tabsBackground #FFFFFF
editorGroupHeader.tabsBorder #795548
editorGutter.background #FFFFFF
editorGutter.modifiedBackground #795548
editorIndentGuide.activeBackground #795548
editorIndentGuide.background #FFFFFF
editorLightBulb.foreground #795548
editorLightBulbAutoFix.foreground #795548
editorLineNumber.activeForeground #FF79C6
editorLineNumber.dimmedForeground #795548
editorLineNumber.foreground #795548
editorLink.activeForeground #3F51B5
editorOverviewRuler.background #FFFFFF
editorOverviewRuler.border #795548
editorOverviewRuler.findMatchForeground #795548
editorPane.background #FFFFFF
editorRuler.foreground #795548
editorWhitespace.foreground #795548
errorForeground #FF5555
extensionButton.foreground #795548
extensionButton.hoverBackground #FFFFFF
extensionButton.prominentForeground #795548
extensionButton.prominentHoverBackground #FFFFFF
extensionButton.separator #795548
focusBorder #795548
foreground #795548
icon.foreground #795548
input.background #FFFFFF
input.border #795548
input.foreground #795548
input.placeholderForeground #795548
inputOption.activeBackground #FFFFFF
inputOption.activeBorder #795548
inputOption.activeForeground #795548
inputOption.hoverBackground #FFFFFF
keybindingLabel.background #FFFFFF
keybindingLabel.border #795548
keybindingLabel.bottomBorder #795548
keybindingLabel.foreground #795548
keybindingTable.headerBackground #FFFFFF
keybindingTable.rowsBackground #FFFFFF
list.activeSelectionBackground #DAB0A1
list.activeSelectionForeground #795548
list.activeSelectionIconForeground #795548
list.deemphasizedForeground #795548
list.dropBackground #DAB0A1
list.errorForeground #FF5555
list.filterMatchBackground #DAB0A1
list.filterMatchBorder #795548
list.focusAndSelectionOutline #795548
list.focusBackground #FFFFFF
list.focusForeground #795548
list.focusHighlightForeground #795548
list.focusOutline #795548
list.highlightForeground #795548
list.hoverBackground #DAB0A1
list.hoverForeground #795548
list.inactiveFocusBackground #FFFFFF
list.inactiveFocusOutline #795548
list.inactiveSelectionBackground #DAB0A1
list.inactiveSelectionForeground #795548
list.inactiveSelectionIconForeground #795548
list.invalidItemForeground #FF5555
list.warningForeground #CCA300
listFilterWidget.background #FFFFFF
listFilterWidget.noMatchesOutline #795548
listFilterWidget.outline #795548
listFilterWidget.shadow #FFFFFF
notificationCenter.border #795548
notificationCenterHeader.background #FFFFFF
notificationCenterHeader.foreground #795548
notifications.background #FFFFFF
notifications.border #795548
notifications.foreground #795548
notificationToast.border #795548
panel.background #FFFFFF
panel.border #795548
panel.dropBorder #FF79C6
panelInput.border #795548
panelTitle.activeBorder #795548
panelTitle.activeForeground #795548
panelTitle.inactiveForeground #795548
profileBadge.background #FFFFFF
profileBadge.foreground #795548
progressBar.background #795548
sash.hoverBorder #795548
scrollbar.shadow #FFFFFF
scrollbarSlider.activeBackground #795548
scrollbarSlider.background #DAB0A1
scrollbarSlider.hoverBackground #795548
search.resultsInfoForeground #795548
selection.background #DAB0A1
sideBar.background #FFFFFF
sideBar.border #795548
sideBar.dropBackground #DAB0A1
sideBar.foreground #795548
sideBarSectionHeader.background #FFFFFF
sideBarSectionHeader.border #795548
sideBarSectionHeader.foreground #795548
sideBarTitle.foreground #795548
sideBySideEditor.horizontalBorder #795548
sideBySideEditor.verticalBorder #795548
statusBar.background #FFFFFF
statusBar.border #795548
statusBar.debuggingBackground #FFFFFF
statusBar.debuggingBorder #795548
statusBar.debuggingForeground #795548
statusBar.foreground #795548
statusBar.noFolderBackground #FFFFFF
statusBar.noFolderBorder #795548
statusBar.noFolderForeground #795548
tab.activeBackground #FFFFFF
tab.activeBorder #795548
tab.activeBorderTop #795548
tab.activeForeground #795548
tab.activeModifiedBorder #795548
tab.border #795548
tab.hoverBackground #FFFFFF
tab.hoverBorder #795548
tab.hoverForeground #795548
tab.inactiveBackground #FFFFFF
tab.inactiveForeground #795548
tab.inactiveModifiedBorder #795548
tab.lastPinnedBorder #795548
tab.unfocusedActiveBackground #FFFFFF
tab.unfocusedActiveBorder #795548
tab.unfocusedActiveBorderTop #795548
tab.unfocusedActiveForeground #795548
tab.unfocusedActiveModifiedBorder #795548
tab.unfocusedHoverBackground #FFFFFF
tab.unfocusedHoverBorder #795548
tab.unfocusedHoverForeground #795548
tab.unfocusedInactiveBackground #FFFFFF
tab.unfocusedInactiveForeground #795548
tab.unfocusedInactiveModifiedBorder #795548
terminal.background #FFFFFF
terminal.border #795548
terminal.findMatchBackground #FFFFFF
terminal.findMatchBorder #795548
terminal.findMatchHighlightBackground #FFFFFF
terminal.findMatchHighlightBorder #795548
terminal.foreground #795548
terminal.tab.activeBorder #795548
terminalCursor.background #FFFFFF
terminalCursor.foreground #795548
textBlockQuote.background #FFFFFF
textBlockQuote.border #795548
textCodeBlock.background #FFFFFF
textLink.activeForeground #795548
textLink.foreground #3F51B5
textPreformat.background #DAB0A1
textPreformat.foreground #795548
textSeparator.foreground #795548
toolbar.activeBackground #795548
toolbar.hoverBackground #FFFFFF
toolbar.hoverOutline #795548
tree.inactiveIndentGuidesStroke #795548
tree.indentGuidesStroke #795548
tree.tableColumnsBorder #795548
tree.tableOddRowsBackground #FFFFFF
widget.border #795548
widget.shadow #FFFFFF
window.activeBorder #795548
window.inactiveBorder #795548
#FF79C6
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 #3F51B5
markup, markup.other, meta, variable, variable.parameter, variable.other #795548
entity.other.attribute-name.html, support.type.property-name.css, support.type.property-name.media.css, support.type.builtin.ts, support.type.primitive.ts #CCA300
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
Light+
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 } !` ;
}