Skip to main content
BBogdanov VS Code Themes | 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.
activityBar.background #ffffff activityBar.border #ffffff activityBar.dropBackground #e2e2e2 activityBar.foreground #6d6d6d activityBarBadge.background #9d7a9a activityBarBadge.foreground #ffffff tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #505050 — comment #a8a8a8 — constant #b2889b — entity #336600 — invalid
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
BBogdanov VS Code Themes — Themer Light
badge.background
#9d7a9a
badge.foreground #ffffff
button.background #70a4b9
button.foreground #ffffff
button.hoverBackground #336600
debugExceptionWidget.background #e2e2e2
debugExceptionWidget.border #e2e2e2
debugToolBar.background #e2e2e2
diffEditor.insertedTextBackground #66990020
diffEditor.removedTextBackground #ab5b5120
dropdown.background #e2e2e2
dropdown.border #e2e2e2
dropdown.foreground #505050
editor.background #ffffff
editor.findMatchBackground #c49f477f
editor.findMatchHighlightBackground #c49f473f
editor.findRangeHighlightBackground #e2e2e2
editor.foreground #333333
editor.hoverHighlightBackground #c5c5c5
editor.inactiveSelectionBackground #70a4b933
editor.lineHighlightBackground #ffffff
editor.lineHighlightBorder #e2e2e2
editor.rangeHighlightBackground #e2e2e2
editor.selectionBackground #70a4b933
editor.selectionHighlightBackground #e2e2e2
editor.wordHighlightBackground #9d7a9a7f
editor.wordHighlightStrongBackground #b2889b7f
editorBracketMatch.background #e2e2e2
editorBracketMatch.border #e2e2e2
editorCodeLens.foreground #6d6d6d
editorCursor.foreground #9d7a9a
editorError.border #333333
editorError.foreground #ab5b51
editorGroup.border #e2e2e2
editorGroup.dropBackground #c5c5c57f
editorGroup.emptyBackground #ffffff
editorGroup.focusedEmptyBorder #e2e2e2
editorGroupHeader.noTabsBackground #ffffff
editorGroupHeader.tabsBackground #ffffff
editorGroupHeader.tabsBorder #ffffff
editorGutter.addedBackground #669900
editorGutter.background #ffffff
editorGutter.deletedBackground #ab5b51
editorGutter.modifiedBackground #c49f47
editorHoverWidget.background #e2e2e2
editorHoverWidget.border #e2e2e2
editorIndentGuide.activeBackground #c5c5c5
editorIndentGuide.background #e2e2e2
editorLineNumber.foreground #c5c5c5
editorLink.activeForeground #336600
editorMarkerNavigation.background #e2e2e2
editorMarkerNavigationError.background #ab5b51
editorMarkerNavigationWarning.background #b97b49
editorOverviewRuler.addedForeground #6699007f
editorOverviewRuler.border #e2e2e2
editorOverviewRuler.commonContentForeground #9d7a9a
editorOverviewRuler.currentContentForeground #336600
editorOverviewRuler.deletedForeground #ab5b517f
editorOverviewRuler.errorForeground #ab5b517f
editorOverviewRuler.findMatchForeground #c49f47bf
editorOverviewRuler.incomingContentForeground #70a4b9
editorOverviewRuler.infoForeground #70a4b97f
editorOverviewRuler.modifiedForeground #c49f477f
editorOverviewRuler.rangeHighlightForeground #c5c5c5bf
editorOverviewRuler.selectionHighlightForeground #e2e2e2bf
editorOverviewRuler.warningForeground #b97b497f
editorOverviewRuler.wordHighlightForeground #c5c5c5bf
editorOverviewRuler.wordHighlightStrongForeground #a8a8a8bf
editorPane.background #ffffff
editorRuler.foreground #e2e2e2
editorSuggestWidget.background #e2e2e2
editorSuggestWidget.border #e2e2e2
editorSuggestWidget.foreground #505050
editorSuggestWidget.highlightForeground #b2889b
editorSuggestWidget.selectedBackground #c5c5c5
editorWarning.border #505050
editorWarning.foreground #b97b49
editorWhitespace.foreground #e2e2e2
editorWidget.background #e2e2e2
editorWidget.border #e2e2e2
errorForeground #ab5b51
extensionButton.prominentBackground #70a4b9
extensionButton.prominentForeground #ffffff
extensionButton.prominentHoverBackground #336600
focusBorder #9d7a9a
foreground #333333
gitDecoration.conflictingResourceForeground #336600
gitDecoration.deletedResourceForeground #ab5b51
gitDecoration.ignoredResourceForeground #a8a8a8
gitDecoration.modifiedResourceForeground #c49f47
gitDecoration.untrackedResourceForeground #9d7a9a
input.background #e2e2e2
input.border #e2e2e2
input.foreground #505050
input.placeholderForeground #c5c5c5
inputOption.activeBorder #336600
inputValidation.errorBackground #e2e2e2
inputValidation.errorBorder #ab5b51
inputValidation.infoBackground #e2e2e2
inputValidation.infoBorder #70a4b9
inputValidation.warningBackground #e2e2e2
inputValidation.warningBorder #b97b49
list.activeSelectionBackground #6699007f
list.activeSelectionForeground #ffffff
list.dropBackground #a8a8a8
list.errorForeground #ab5b51
list.focusBackground #a8a8a8
list.focusForeground #ffffff
list.highlightForeground #c49f47
list.hoverBackground #e2e2e2
list.hoverForeground #6d6d6d
list.inactiveSelectionBackground #e2e2e2
list.inactiveSelectionForeground #333333
list.invalidItemForeground #ab5b51
list.warningForeground #c49f47
listFilterWidget.background #e2e2e2
listFilterWidget.noMatchesOutline #ab5b51
listFilterWidget.outline #70a4b9
merge.border #8a8a8a
merge.commonContentBackground #9d7a9a4c
merge.commonHeaderBackground #9d7a9a4c
merge.currentContentBackground #3366004c
merge.currentHeaderBackground #3366004c
merge.incomingContentBackground #70a4b94c
merge.incomingHeaderBackground #70a4b94c
notification.background #e2e2e2
notification.buttonBackground #70a4b9
notification.buttonForeground #ffffff
notification.buttonHoverBackground #336600
notification.errorBackground #ab5b51
notification.errorForeground #ffffff
notification.foreground #333333
notification.infoBackground #70a4b9
notification.infoForeground #ffffff
notification.warningBackground #b97b49
notification.warningForeground #ffffff
panel.background #ffffff
panel.border #e2e2e2
panelTitle.activeBorder #a8a8a8
panelTitle.activeForeground #505050
panelTitle.inactiveForeground #8a8a8a
peekView.border #b2889b
peekViewEditor.background #e2e2e2
peekViewEditor.matchHighlightBackground #c49f477f
peekViewEditorGutter.background #e2e2e2
peekViewResult.background #e2e2e2
peekViewResult.fileForeground #505050
peekViewResult.lineForeground #c5c5c5
peekViewResult.matchHighlightBackground #c49f47
peekViewResult.selectionBackground #a8a8a8
peekViewResult.selectionForeground #333333
peekViewTitle.background #c5c5c5
peekViewTitleDescription.foreground #6d6d6d
peekViewTitleLabel.foreground #333333
pickerGroup.border #6d6d6d
pickerGroup.foreground #333333
progressBar.background #669900
scrollbar.shadow #33333366
scrollbarSlider.activeBackground #6d6d6d7f
scrollbarSlider.background #a8a8a87f
scrollbarSlider.hoverBackground #8a8a8a7f
selection.background #c5c5c5
sideBar.background #ffffff
sideBar.border #e2e2e2
sideBar.foreground #505050
sideBarSectionHeader.background #c5c5c5
sideBarSectionHeader.foreground #505050
sideBarTitle.foreground #6d6d6d
statusBar.background #70a4b9
statusBar.border #70a4b97f
statusBar.debuggingBackground #b97b49
statusBar.debuggingBorder #b97b497f
statusBar.debuggingForeground #ffffff
statusBar.foreground #ffffff
statusBar.noFolderBackground #9d7a9a
statusBar.noFolderBorder #9d7a9a7f
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #336600
statusBarItem.hoverBackground #669900
statusBarItem.prominentBackground #336600
statusBarItem.prominentHoverBackground #669900
tab.activeBackground #ffffff
tab.activeForeground #505050
tab.border #ffffff
tab.inactiveBackground #e2e2e2
tab.inactiveForeground #a8a8a8
tab.unfocusedActiveForeground #a8a8a8
tab.unfocusedInactiveForeground #c5c5c5
terminal.ansiBlack #ffffff
terminal.ansiBlue #70a4b9
terminal.ansiBrightBlack #e2e2e2
terminal.ansiBrightBlue #70a4b9
terminal.ansiBrightCyan #336600
terminal.ansiBrightGreen #336600
terminal.ansiBrightMagenta #b2889b
terminal.ansiBrightRed #b97b49
terminal.ansiBrightWhite #333333
terminal.ansiBrightYellow #c49f47
terminal.ansiCyan #336600
terminal.ansiGreen #669900
terminal.ansiMagenta #b2889b
terminal.ansiRed #ab5b51
terminal.ansiWhite #505050
terminal.ansiYellow #c49f47
terminal.background #ffffff
terminal.foreground #505050
terminal.selectionBackground #70a4b97f
terminalCursor.background #e2e2e2
terminalCursor.foreground #6d6d6d
titleBar.activeBackground #ffffff
titleBar.activeForeground #6d6d6d
titleBar.inactiveBackground #ffffff
titleBar.inactiveForeground #a8a8a8
tree.indentGuidesStroke #e2e2e2
walkThrough.embeddedEditorBackground #ffffff
welcomePage.buttonBackground #e2e2e2
welcomePage.buttonHoverBackground #c5c5c5
widget.shadow #33333366
#ab5b51
markup.underline — underline
markup.underline.link #70a4b9 —
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
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...
main*
Button.tsx
fetchUser
31
~/my-project
$
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 }!` ;
}