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.activeBorder #ffffff00 activityBar.activeFocusBorder #ffffff00 activityBar.background #0E1116 activityBar.border #ffffff15 activityBar.foreground #ffffffcc activityBar.inactiveForeground #ffffff80 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, comment.line, comment.block #9198A1 — string.quoted.docstring, comment.block.documentation #A5D6FF — #CBAAF9 — keyword.control, storage.type, storage.modifier, keyword.other, keyword.import #FF7B72 — string, string.quoted, string.template, string.regexp
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
GitHub Dark Web Theme — GitHub Dark Web
activityBarBadge.background #0078d4
activityBarBadge.foreground #ffffff
badge.background #0078d4
badge.foreground #ffffff
button.background #0078d4
button.border #ffffff12
button.foreground #ffffff
button.hoverBackground #0078d4e6
button.secondaryBackground #ffffff0f
button.secondaryForeground #cccccc
button.secondaryHoverBackground #ffffff15
checkbox.background #313131
checkbox.border #ffffff1f
debugToolBar.background #181818
descriptionForeground #8b949e
diffEditor.insertedLineBackground #23863633
diffEditor.insertedTextBackground #2386364d
diffEditor.removedLineBackground #da363333
diffEditor.removedTextBackground #da36334d
dropdown.background #313131
dropdown.border #ffffff1f
dropdown.foreground #cccccc
dropdown.listBackground #1f1f1f
editor.background #0E1116
editor.findMatchBackground #9e6a03
editor.foreground #cccccc
editor.inactiveSelectionBackground #3a3d41f8
editor.lineHighlightBorder #00000000
editor.selectionBackground #b0b0b071
editor.selectionHighlightBackground #ffffff28
editorBracketMatch.background #ffffff28
editorBracketMatch.border #00000000
editorGroup.border #ffffff17
editorGroupHeader.tabsBackground #ffffff00
editorGroupHeader.tabsBorder #ffffff15
editorGutter.addedBackground #2ea043
editorGutter.deletedBackground #f85149
editorGutter.modifiedBackground #0078d4
editorIndentGuide.activeBackground1 #ffffff28
editorIndentGuide.background1 #ffffff00
editorInlayHint.background #8b949e1b
editorInlayHint.typeBackground #8b949e1b
editorLineNumber.activeForeground #8F969F
editorLineNumber.foreground #8F969F
editorOverviewRuler.border #010409
editorRuler.foreground #ffffff28
editorWidget.background #222222
editorWidget.border #ffffff00
errorForeground #f85149
focusBorder #0078d4
foreground #cccccc
gitDecoration.modifiedResourceForeground #6ab49b
icon.foreground #cccccc
input.background #ffffff22
input.border #ffffff00
input.foreground #ffffff
input.placeholderForeground #ffffff77
inputOption.activeBackground #2489db82
inputOption.activeBorder #2488db
keybindingLabel.foreground #cccccc
list.activeSelectionBackground #323232
list.activeSelectionForeground #ffffff
list.activeSelectionIconForeground #ffffff
list.dropBackground #383b3d
list.focusForeground #ffffffb6
list.inactiveSelectionBackground #ffffff2e
list.inactiveSelectionForeground #ffffffe0
menu.background #0E1116
menu.border #454545
menu.foreground #cccccc
menu.separatorBackground #454545
notificationCenterHeader.background #1f1f1f
notificationCenterHeader.foreground #cccccc
notifications.background #1f1f1f
notifications.border #ffffff15
notifications.foreground #cccccc
panel.background #181818
panel.border #ffffff15
panelInput.border #ffffff15
panelTitle.activeBorder #0078d4
panelTitle.activeForeground #cccccc
panelTitle.inactiveForeground #8b949e
peekViewEditor.background #1f1f1f
peekViewEditor.matchHighlightBackground #bb80096f
peekViewResult.background #1f1f1f
peekViewResult.matchHighlightBackground #bb80096f
pickerGroup.border #ffffff15
pickerGroup.foreground #8b949e
ports.iconRunningProcessForeground #369432
progressBar.background #0078d4
quickInput.background #1f1f1f
quickInput.foreground #cccccc
scrollbar.shadow #484f5833
scrollbarSlider.activeBackground #ffffff70
scrollbarSlider.background #ffffff46
scrollbarSlider.hoverBackground #6e768145
selection.background #ffffff44
settings.dropdownBackground #313131
settings.dropdownBorder #ffffff1f
settings.headerForeground #ffffff
settings.modifiedItemIndicator #bb800966
sideBar.background #0E1116
sideBar.border #ffffff15
sideBar.foreground #ffffffbb
sideBarSectionHeader.background #181818
sideBarSectionHeader.border #ffffff15
sideBarSectionHeader.foreground #cccccc
sideBarTitle.foreground #cccccc
statusBar.background #0E1116
statusBar.border #ffffff15
statusBar.debuggingBackground #0078d4
statusBar.debuggingForeground #ffffffab
statusBar.focusBorder #0078d4
statusBar.foreground #ffffff82
statusBar.noFolderBackground #0E1116
statusBarItem.focusBorder #0078d4
statusBarItem.prominentBackground #6e768166
statusBarItem.remoteBackground #0078d4
statusBarItem.remoteForeground #ffffff
tab.activeBackground #ffffff22
tab.activeBorder #1f1f1f
tab.activeBorderTop #ffffffda
tab.activeForeground #ffffff
tab.border #ffffff15
tab.hoverBackground #1f1f1f
tab.inactiveBackground #00000000
tab.inactiveForeground #ffffff98
tab.lastPinnedBorder #cccccc33
tab.unfocusedActiveBorder #1f1f1f
tab.unfocusedActiveBorderTop #ffffff15
tab.unfocusedHoverBackground #6e76811a
terminal.foreground #cccccc
terminal.inactiveSelectionBackground #3a3d41
terminal.tab.activeBorder #ffffffca
textBlockQuote.background #010409
textBlockQuote.border #ffffff14
textCodeBlock.background #6e768166
textLink.activeForeground #40a6ff
textLink.foreground #40a6ff
textSeparator.foreground #21262d
titleBar.activeBackground #0E1116
titleBar.activeForeground #ffffffaf
titleBar.border #ffffff15
titleBar.inactiveBackground #1f1f1f
titleBar.inactiveForeground #ffffffa4
welcomePage.progress.foreground #0078d4
welcomePage.tileBackground #ffffff0f
widget.border #ffffff15 support.type.property-name #7EE787 —
meta.decorator, punctuation.decorator, meta.function.decorator, entity.name.function, support.function, meta.function-call, meta.method-call, support.type #D2A8FF —
entity.name.type.class, entity.name.class, entity.other.inherited-class #FFA657 —
variable, variable.other, variable.parameter, variable.language, punctuation.definition.parameters, punctuation.definition.block, punctuation.definition.arguments, meta.parameters, meta.block, source, source.python, punctuation.separator.period, punctuation.separator.arguments #F0F6FC —
constant.numeric, constant.language, constant.character.escape, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, variable.other.property, meta.function.decorator #79C0FF —
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 }!` ;
}
GitHub Dark Web Theme | Coding Theme