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