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.background #444847 activityBar.border #444847 activityBar.dropBackground #5a5e5c activityBar.foreground #b3b6b2 activityBarBadge.background #bb91b7 activityBarBadge.foreground #444847 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #caccc8 — comment #878a87 — constant #c08da4 — entity #71ca98 — invalid
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
BBogdanov VS Code Themes — Themer Dark
badge.background
#bb91b7
badge.foreground #444847
button.background #7eb9d0
button.foreground #444847
button.hoverBackground #71ca98
debugExceptionWidget.background #5a5e5c
debugExceptionWidget.border #5a5e5c
debugToolBar.background #5a5e5c
diffEditor.insertedTextBackground #a4cc7820
diffEditor.removedTextBackground #e2928820
dropdown.background #5a5e5c
dropdown.border #5a5e5c
dropdown.foreground #caccc8
editor.background #444847
editor.findMatchBackground #dbb66d7f
editor.findMatchHighlightBackground #dbb66d3f
editor.findRangeHighlightBackground #5a5e5c
editor.foreground #e0e2dd
editor.hoverHighlightBackground #717472
editor.inactiveSelectionBackground #7eb9d033
editor.lineHighlightBackground #444847
editor.lineHighlightBorder #5a5e5c
editor.rangeHighlightBackground #5a5e5c
editor.selectionBackground #7eb9d033
editor.selectionHighlightBackground #5a5e5c
editor.wordHighlightBackground #bb91b77f
editor.wordHighlightStrongBackground #c08da47f
editorBracketMatch.background #5a5e5c
editorBracketMatch.border #5a5e5c
editorCodeLens.foreground #b3b6b2
editorCursor.foreground #bb91b7
editorError.border #e0e2dd
editorError.foreground #e29288
editorGroup.border #5a5e5c
editorGroup.dropBackground #7174727f
editorGroup.emptyBackground #444847
editorGroup.focusedEmptyBorder #5a5e5c
editorGroupHeader.noTabsBackground #444847
editorGroupHeader.tabsBackground #444847
editorGroupHeader.tabsBorder #444847
editorGutter.addedBackground #a4cc78
editorGutter.background #444847
editorGutter.deletedBackground #e29288
editorGutter.modifiedBackground #dbb66d
editorHoverWidget.background #5a5e5c
editorHoverWidget.border #5a5e5c
editorIndentGuide.activeBackground #717472
editorIndentGuide.background #5a5e5c
editorLineNumber.foreground #717472
editorLink.activeForeground #71ca98
editorMarkerNavigation.background #5a5e5c
editorMarkerNavigationError.background #e29288
editorMarkerNavigationWarning.background #e4a572
editorOverviewRuler.addedForeground #a4cc787f
editorOverviewRuler.border #5a5e5c
editorOverviewRuler.commonContentForeground #bb91b7
editorOverviewRuler.currentContentForeground #71ca98
editorOverviewRuler.deletedForeground #e292887f
editorOverviewRuler.errorForeground #e292887f
editorOverviewRuler.findMatchForeground #dbb66dbf
editorOverviewRuler.incomingContentForeground #7eb9d0
editorOverviewRuler.infoForeground #7eb9d07f
editorOverviewRuler.modifiedForeground #dbb66d7f
editorOverviewRuler.rangeHighlightForeground #717472bf
editorOverviewRuler.selectionHighlightForeground #5a5e5cbf
editorOverviewRuler.warningForeground #e4a5727f
editorOverviewRuler.wordHighlightForeground #717472bf
editorOverviewRuler.wordHighlightStrongForeground #878a87bf
editorPane.background #444847
editorRuler.foreground #5a5e5c
editorSuggestWidget.background #5a5e5c
editorSuggestWidget.border #5a5e5c
editorSuggestWidget.foreground #caccc8
editorSuggestWidget.highlightForeground #c08da4
editorSuggestWidget.selectedBackground #717472
editorWarning.border #caccc8
editorWarning.foreground #e4a572
editorWhitespace.foreground #5a5e5c
editorWidget.background #5a5e5c
editorWidget.border #5a5e5c
errorForeground #e29288
extensionButton.prominentBackground #7eb9d0
extensionButton.prominentForeground #444847
extensionButton.prominentHoverBackground #71ca98
focusBorder #bb91b7
foreground #e0e2dd
gitDecoration.conflictingResourceForeground #71ca98
gitDecoration.deletedResourceForeground #e29288
gitDecoration.ignoredResourceForeground #878a87
gitDecoration.modifiedResourceForeground #dbb66d
gitDecoration.untrackedResourceForeground #bb91b7
input.background #5a5e5c
input.border #5a5e5c
input.foreground #caccc8
input.placeholderForeground #717472
inputOption.activeBorder #71ca98
inputValidation.errorBackground #5a5e5c
inputValidation.errorBorder #e29288
inputValidation.infoBackground #5a5e5c
inputValidation.infoBorder #7eb9d0
inputValidation.warningBackground #5a5e5c
inputValidation.warningBorder #e4a572
list.activeSelectionBackground #a4cc787f
list.activeSelectionForeground #444847
list.dropBackground #878a87
list.errorForeground #e29288
list.focusBackground #878a87
list.focusForeground #444847
list.highlightForeground #dbb66d
list.hoverBackground #5a5e5c
list.hoverForeground #b3b6b2
list.inactiveSelectionBackground #5a5e5c
list.inactiveSelectionForeground #e0e2dd
list.invalidItemForeground #e29288
list.warningForeground #dbb66d
listFilterWidget.background #5a5e5c
listFilterWidget.noMatchesOutline #e29288
listFilterWidget.outline #7eb9d0
merge.border #9da09d
merge.commonContentBackground #bb91b74c
merge.commonHeaderBackground #bb91b74c
merge.currentContentBackground #71ca984c
merge.currentHeaderBackground #71ca984c
merge.incomingContentBackground #7eb9d04c
merge.incomingHeaderBackground #7eb9d04c
notification.background #5a5e5c
notification.buttonBackground #7eb9d0
notification.buttonForeground #444847
notification.buttonHoverBackground #71ca98
notification.errorBackground #e29288
notification.errorForeground #444847
notification.foreground #e0e2dd
notification.infoBackground #7eb9d0
notification.infoForeground #444847
notification.warningBackground #e4a572
notification.warningForeground #444847
panel.background #444847
panel.border #5a5e5c
panelTitle.activeBorder #878a87
panelTitle.activeForeground #caccc8
panelTitle.inactiveForeground #9da09d
peekView.border #c08da4
peekViewEditor.background #5a5e5c
peekViewEditor.matchHighlightBackground #dbb66d7f
peekViewEditorGutter.background #5a5e5c
peekViewResult.background #5a5e5c
peekViewResult.fileForeground #caccc8
peekViewResult.lineForeground #717472
peekViewResult.matchHighlightBackground #dbb66d
peekViewResult.selectionBackground #878a87
peekViewResult.selectionForeground #e0e2dd
peekViewTitle.background #717472
peekViewTitleDescription.foreground #b3b6b2
peekViewTitleLabel.foreground #e0e2dd
pickerGroup.border #b3b6b2
pickerGroup.foreground #e0e2dd
progressBar.background #a4cc78
scrollbar.shadow #444847
scrollbarSlider.activeBackground #b3b6b27f
scrollbarSlider.background #878a877f
scrollbarSlider.hoverBackground #9da09d7f
selection.background #717472
sideBar.background #444847
sideBar.border #5a5e5c
sideBar.foreground #caccc8
sideBarSectionHeader.background #717472
sideBarSectionHeader.foreground #caccc8
sideBarTitle.foreground #b3b6b2
statusBar.background #7eb9d0
statusBar.border #7eb9d07f
statusBar.debuggingBackground #e4a572
statusBar.debuggingBorder #e4a5727f
statusBar.debuggingForeground #444847
statusBar.foreground #444847
statusBar.noFolderBackground #bb91b7
statusBar.noFolderBorder #bb91b77f
statusBar.noFolderForeground #444847
statusBarItem.activeBackground #71ca98
statusBarItem.hoverBackground #a4cc78
statusBarItem.prominentBackground #71ca98
statusBarItem.prominentHoverBackground #a4cc78
tab.activeBackground #444847
tab.activeForeground #caccc8
tab.border #444847
tab.inactiveBackground #5a5e5c
tab.inactiveForeground #878a87
tab.unfocusedActiveForeground #878a87
tab.unfocusedInactiveForeground #717472
terminal.ansiBlack #444847
terminal.ansiBlue #7eb9d0
terminal.ansiBrightBlack #5a5e5c
terminal.ansiBrightBlue #7eb9d0
terminal.ansiBrightCyan #71ca98
terminal.ansiBrightGreen #71ca98
terminal.ansiBrightMagenta #c08da4
terminal.ansiBrightRed #e4a572
terminal.ansiBrightWhite #e0e2dd
terminal.ansiBrightYellow #dbb66d
terminal.ansiCyan #71ca98
terminal.ansiGreen #a4cc78
terminal.ansiMagenta #c08da4
terminal.ansiRed #e29288
terminal.ansiWhite #caccc8
terminal.ansiYellow #dbb66d
terminal.background #444847
terminal.foreground #caccc8
terminal.selectionBackground #7eb9d07f
terminalCursor.background #5a5e5c
terminalCursor.foreground #b3b6b2
titleBar.activeBackground #444847
titleBar.activeForeground #b3b6b2
titleBar.inactiveBackground #444847
titleBar.inactiveForeground #878a87
tree.indentGuidesStroke #5a5e5c
walkThrough.embeddedEditorBackground #444847
welcomePage.buttonBackground #5a5e5c
welcomePage.buttonHoverBackground #717472
widget.shadow #444847
#e29288
markup.underline — underline
markup.underline.link #7eb9d0 —
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*
BBogdanov VS Code Themes | Coding Theme
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 }!` ;
}