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.
activityBar.activeBackground #464646 activityBar.activeBorder #8CDCFF activityBar.activeFocusBorder #787878 activityBar.background #464646 activityBar.border #464646 activityBar.dropBackground #5A5A5A tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #FFFFFF — meta.embedded, source.groovy.embedded #FFFFFF — comment #7285B7 — keyword.operator.class, keyword.operator, source.php.embedded.line #FFFFFF constant.other
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Black Back Dark E-Theme — Black Back Dark E-Theme
activityBar.foreground
#FFFFFF
activityBar.inactiveForeground #B4B4B4
activityBarBadge.background #8CDCFF
activityBarBadge.foreground #464646
badge.background #8CDCFF
badge.foreground #464646
breadcrumb.activeSelectionForeground #F0F0F0
breadcrumb.background #1E1E1E
breadcrumb.focusForeground #8CDCFF
breadcrumb.foreground #B4B4B4
breadcrumbPicker.background #232323e1
button.background #5A5A5A
button.foreground #E1E1E1
button.hoverBackground #646464
checkbox.background #5A5A5A
checkbox.border #646464
checkbox.foreground #E1E1E1
debugExceptionWidget.background #2D2D2De1
debugExceptionWidget.border #2D2D2De1
debugToolBar.background #2D2D2De1
descriptionForeground #F0F0F0
diffEditor.insertedTextBackground #A0C88C28
diffEditor.removedTextBackground #C8646428
dropdown.background #232323e1
dropdown.border #464646
dropdown.foreground #E1E1E1
dropdown.listBackground #2D2D2De1
editor.background #1E1E1E
editor.findMatchBackground #1EB4FF50
editor.findMatchBorder #FFFFFF50
editor.findMatchHighlightBackground #1EB4FF41
editor.findRangeHighlightBackground #9B91FF32
editor.foldBackground #B4AAFF14
editor.foreground #F0F0F0
editor.hoverHighlightBackground #FFFFFF28
editor.inactiveSelectionBackground #FFFFFF28
editor.lineHighlightBackground #1E1E1E
editor.lineHighlightBorder #1E1E1E
editor.rangeHighlightBackground #FFFFFF28
editor.rangeHighlightBorder #FFFFFF50
editor.selectionBackground #FFFFFF37
editor.selectionHighlightBackground #FFFFFF1E
editor.snippetFinalTabstopHighlightBackground #FFFFFF28
editor.snippetFinalTabstopHighlightBorder #78CDFF
editor.snippetTabstopHighlightBackground #FFFFFF28
editor.stackFrameHighlightBackground #2D2D2De1
editor.symbolHighlightBackground #9B91FF41
editor.symbolHighlightBorder #9B91FF64
editor.wordHighlightBackground #FFFFFF37
editorBracketMatch.background #1E1E1E
editorBracketMatch.border #FFFFFF78
editorCodeLens.foreground #D2D2D2
editorCursor.background #1E1E1E
editorCursor.foreground #D2D2D2
editorError.foreground #FF5A50
editorGroup.border #505050
editorGroup.dropBackground #64646450
editorGroupHeader.tabsBackground #2D2D2D
editorGutter.addedBackground #8CBE82
editorGutter.background #1E1E1E
editorGutter.commentRangeForeground #8C8C8C
editorGutter.deletedBackground #E16464
editorGutter.modifiedBackground #148CDC
editorHint.foreground #788CA0
editorHoverWidget.background #2D2D2De1
editorHoverWidget.border #2D2D2De1
editorHoverWidget.foreground #E1E1E1
editorHoverWidget.statusBarBackground #2D2D2De1
editorIndentGuide.activeBackground #646464
editorIndentGuide.background #3C3C3C
editorInfo.foreground #AF8CF0
editorLightBulb.foreground #FFC800
editorLightBulbAutoFix.foreground #FFEB00
editorLineNumber.activeForeground #F0F0F0
editorLineNumber.foreground #8C8C8C
editorLink.activeForeground #F0F0F0
editorOverviewRuler.addedForeground #64C882a0
editorOverviewRuler.border #2D2D2D
editorOverviewRuler.bracketMatchForeground #64D7FFbe
editorOverviewRuler.commonContentForeground #E1E1E1
editorOverviewRuler.currentContentForeground #E1E1E1
editorOverviewRuler.deletedForeground #E16464a0
editorOverviewRuler.errorForeground #FF5A50be
editorOverviewRuler.findMatchForeground #1EB4FF5A
editorOverviewRuler.incomingContentForeground #E1E1E1
editorOverviewRuler.infoForeground #D28CFAbe
editorOverviewRuler.modifiedForeground #00C8F0a0
editorOverviewRuler.rangeHighlightForeground #28B4B4
editorOverviewRuler.selectionHighlightForeground #D28CFA
editorOverviewRuler.warningForeground #A0C88Cbe
editorOverviewRuler.wordHighlightForeground #1496FF
editorOverviewRuler.wordHighlightStrongForeground #1EB4FF
editorSuggestWidget.background #2D2D2De1
editorSuggestWidget.border #2D2D2De1
editorSuggestWidget.foreground #E1E1E1
editorSuggestWidget.highlightForeground #00C8F0
editorSuggestWidget.selectedBackground #464646e1
editorUnnecessaryCode.border #8C8C8C
editorUnnecessaryCode.opacity #8C8C8C8c
editorWarning.foreground #A0C88C
editorWhitespace.foreground #323232
editorWidget.background #1E1E1Ee1
editorWidget.border #464646
editorWidget.foreground #F0F0F0
editorWidget.resizeBorder #464646
errorForeground #FF7878
extensionBadge.remoteBackground #2D2D2D
extensionBadge.remoteForeground #F0F0F0
extensionButton.prominentBackground #148CDC
extensionButton.prominentForeground #F0F0F0
extensionButton.prominentHoverBackground #9B91FF
focusBorder #1496FF
foreground #F0F0F0
gitDecoration.addedResourceForeground #FFDC64
gitDecoration.conflictingResourceForeground #FF5064
gitDecoration.deletedResourceForeground #8C8C8C
gitDecoration.ignoredResourceForeground #8C8C8C
gitDecoration.modifiedResourceForeground #78CDFF
gitDecoration.submoduleResourceForeground #D28CFA
gitDecoration.untrackedResourceForeground #8CDC96
icon.foreground #F0F0F0
imagePreview.border #2D2D2D
input.background #1E1E1Ee1
input.border #464646
input.foreground #E1E1E1
input.placeholderForeground #E1E1E1
inputOption.activeBorder #464646
inputValidation.errorBackground #1E1E1Ee1
inputValidation.errorBorder #464646
inputValidation.errorForeground #FF5064
inputValidation.infoBackground #1E1E1Ee1
inputValidation.infoBorder #464646
inputValidation.infoForeground #D28CFA
inputValidation.warningBackground #1E1E1Ee1
inputValidation.warningBorder #464646
inputValidation.warningForeground #A0C88C
list.activeSelectionBackground #3CBEFF3C
list.activeSelectionForeground #F0F0F0
list.dropBackground #1EB4FF3C
list.errorForeground #FF5064
list.focusBackground #464646c8
list.focusForeground #F0F0F0
list.highlightForeground #00C8F0
list.hoverBackground #1EB4FF1e
list.hoverForeground #FAFAFA
list.inactiveFocusBackground #373737
list.inactiveSelectionBackground #3C3C3C
list.inactiveSelectionForeground #FAFAFA
list.invalidItemForeground #E1E1E1
list.warningForeground #A0C88C
menu.background #282828e1
menu.border #282828e1
menu.foreground #F0F0F0
menu.selectionBackground #1EB4FF3c
menu.selectionBorder #1EB4FF3c
menu.selectionForeground #F0F0F0
menu.separatorBackground #5A5A5Ae1
menubar.selectionBackground #787878
menubar.selectionForeground #FFFFFF
merge.border #1E1E1E00
merge.commonContentBackground #282828e1
merge.commonHeaderBackground #282828e1
merge.currentContentBackground #82A5C346
merge.currentHeaderBackground #82A5C364
merge.incomingContentBackground #8CBEB946
merge.incomingHeaderBackground #8CBEB964
minimap.background #1E1E1Ea0
minimap.errorHighlight #FF5064
minimap.findMatchHighlight #1EB4FF5A
minimap.selectionHighlight #464646
minimap.warningHighlight #A0C88C
minimapSlider.activeBackground #8282827d
minimapSlider.background #6464647d
minimapSlider.hoverBackground #A0A0A07d
notificationCenter.border #282828b4
notificationCenterHeader.background #464646b4
notificationCenterHeader.foreground #F0F0F0
notificationLink.foreground #1EB4FF
notifications.background #2D2D2Db4
notifications.border #2D2D2Db4
notifications.foreground #F0F0F0
notificationsErrorIcon.foreground #FF5A50
notificationsInfoIcon.foreground #AF8CF0
notificationsWarningIcon.foreground #A0C88C
notificationToast.border #282828b4
panel.background #2D2D2D
panel.border #2D2D2D
panel.dropBackground #64646496
panelInput.border #464646
panelTitle.activeBorder #2D2D2D
panelTitle.activeForeground #FAFAFA
panelTitle.inactiveForeground #B4B4B4
peekView.border #2D2D2D
peekViewEditor.background #1E1E1Ee1
peekViewEditor.matchHighlightBackground #1EB4FF41
peekViewEditor.matchHighlightBorder #1EB4FF41
peekViewEditorGutter.background #1E1E1Ee1
peekViewResult.background #1E1E1Ee1
peekViewResult.fileForeground #00C8F0
peekViewResult.lineForeground #AFAFAF
peekViewResult.matchHighlightBackground #AF8CF08c
peekViewResult.selectionBackground #505050e1
peekViewResult.selectionForeground #F0F0F0
peekViewTitle.background #2D2D2D
peekViewTitleDescription.foreground #AFAFAF
peekViewTitleLabel.foreground #F0F0F0
pickerGroup.border #505050e1
pickerGroup.foreground #D28CFA
problemsErrorIcon.foreground #FF5A50
problemsInfoIcon.foreground #AF8CF0
problemsWarningIcon.foreground #A0C88C
quickInput.background #2D2D2De1
quickInput.foreground #B4B4B4
scrollbar.shadow #000000a0
scrollbarSlider.activeBackground #E1E1E1a0
scrollbarSlider.background #646464a0
scrollbarSlider.hoverBackground #969696a0
selection.background #1EB4FF
settings.checkboxBackground #464646
settings.checkboxBorder #464646
settings.checkboxForeground #1EB4FF
settings.dropdownBackground #2D2D2D
settings.dropdownBorder #464646
settings.dropdownForeground #FAFAFA
settings.dropdownListBorder #464646
settings.headerForeground #FAFAFA
settings.modifiedItemIndicator #148CDC
settings.numberInputBackground #2D2D2D
settings.numberInputBorder #464646
settings.numberInputForeground #FAFAFA
settings.textInputBackground #2D2D2D
settings.textInputBorder #464646
settings.textInputForeground #FAFAFA
sideBar.background #2D2D2D
sideBar.dropBackground #64646450
sideBar.foreground #D2D2D2
sideBarSectionHeader.background #464646
sideBarSectionHeader.foreground #FFFFFF
sideBarTitle.foreground #F0F0F0
statusBar.background #464646
statusBar.border #464646
statusBar.debuggingBackground #464646
statusBar.debuggingBorder #1496FF
statusBar.debuggingForeground #F0F0F0
statusBar.foreground #F0F0F0
statusBar.noFolderBackground #464646
statusBar.noFolderBorder #464646
statusBar.noFolderForeground #E1E1E1
statusBarItem.activeBackground #9B91FF
statusBarItem.hoverBackground #787878
statusBarItem.prominentBackground #464646
statusBarItem.prominentForeground #00C8F0
statusBarItem.prominentHoverBackground #5A5A5A
statusBarItem.remoteBackground #8CDCFF
statusBarItem.remoteForeground #464646
tab.activeBackground #1E1E1E
tab.activeBorder #1E1E1E
tab.activeForeground #FFFFFF
tab.border #2D2D2D
tab.hoverBackground #464646
tab.inactiveBackground #2D2D2D
tab.inactiveForeground #D2D2D2
tab.unfocusedActiveBackground #2D2D2D
tab.unfocusedActiveForeground #D2D2D2
tab.unfocusedInactiveForeground #B4B4B4
terminal.ansiBlack #3C3C3C
terminal.ansiBlue #1496FF
terminal.ansiBrightBlack #646464
terminal.ansiBrightBlue #00C8F0
terminal.ansiBrightCyan #8CE1E1
terminal.ansiBrightGreen #C8FF46
terminal.ansiBrightMagenta #D28CFA
terminal.ansiBrightRed #FF7878
terminal.ansiBrightWhite #FFFFFF
terminal.ansiBrightYellow #FFDC64
terminal.ansiCyan #28B4B4
terminal.ansiGreen #64F050
terminal.ansiMagenta #AF8CF0
terminal.ansiRed #FF5064
terminal.ansiWhite #F0F0F0
terminal.ansiYellow #FFC814
terminal.background #232323
terminal.border #2D2D2D
terminal.foreground #F0F0F0
terminal.selectionBackground #6464647e
terminalCursor.background #282828
terminalCursor.foreground #D2D2D2
textLink.activeForeground #3CBEFF
textLink.foreground #1EB4FF
titleBar.activeBackground #464646
titleBar.activeForeground #F0F0F0
titleBar.inactiveBackground #464646
titleBar.inactiveForeground #B4B4B4
tree.indentGuidesStroke #464646
walkThrough.embeddedEditorBackground #323232
welcomePage.background #1E1E1E
welcomePage.buttonBackground #2D2D2D
welcomePage.buttonHoverBackground #464646
widget.shadow #000000 #D1F1A9
string.other.link, string.regexp, entity.name.tag, entity.other.attribute-name, meta.tag, declaration.tag, markup.deleted.git_gutter #ffffff —
constant.numeric, constant.language, support.constant, constant.character, punctuation.section.embedded, keyword.other.unit #FFC58F
variable.parameter #ffffff —
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution, support.type, support.class #FFEEAD
string, constant.other.symbol, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter #D1F1A9
keyword.operator, constant.other.color #99FFFF —
entity.name.function, meta.function-call, support.function, keyword.other.special-method, meta.block-level, markup.changed.git_gutter #BBDAFF
keyword, storage, storage.type, entity.name.tag.css #EBBBFF
invalid.deprecated #FFFFFF
markup.inserted.diff, markup.deleted.diff, meta.diff.header.to-file, meta.diff.header.from-file #FFFFFF —
markup.inserted.diff, meta.diff.header.to-file #718c00 —
markup.deleted.diff, meta.diff.header.from-file #c82829 —
meta.diff.header.from-file, meta.diff.header.to-file #FFFFFF —
meta.diff.range #3e999f italic
markup.bold, markup.italic #FFC58F —
token.error-token #f44747 —
token.debug-token #b267e6 —
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 }!` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
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
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
main*
Button.tsx
31
$
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 }!` ;
}
Black Back Dark E-Theme | Coding Theme