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 #181818 activityBar.border #3030306E activityBar.foreground #BBBBBB activityBar.inactiveForeground #BBBBBB6E activityBarBadge.background #EE5577 activityBarBadge.foreground #181818 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle source.js #BBBBBB normal comment #55AA336E italic entity.name.type.instance.jsdoc #BB77DD6E — variable.other.jsdoc #EE55776E — storage.type.class.jsdoc
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
breadcrumb.activeSelectionForeground #EE5577
breadcrumb.background #181818
breadcrumb.focusForeground #EE5577
breadcrumb.foreground #BBBBBB6E
button.background #EE5577
button.foreground #181818
debugToolBar.background #EE5577
descriptionForeground #BBBBBB
diffEditor.insertedTextBackground #55AA336E
diffEditor.removedTextBackground #F433006E
editor.background #181818
editor.findMatchBackground #303030
editor.findMatchBorder #BBBBBB6E
editor.findMatchHighlightBackground #303030
editor.findRangeHighlightBackground #303030
editor.foreground #BBBBBB
editor.hoverHighlightBackground #BBBBBB6E
editor.lineHighlightBackground #232323
editor.lineHighlightBorder #BBBBBB00
editor.rangeHighlightBackground #303030
editor.rangeHighlightBorder #BBBBBB00
editor.selectionBackground #303030
editor.wordHighlightBackground #303030
editor.wordHighlightStrongBackground #BBBBBB6E
editor.wordHighlightStrongBorder #BBBBBB
editorBracketMatch.background #303030
editorBracketMatch.border #BBBBBB6E
editorCursor.background #BBBBBB
editorCursor.foreground #EE5577
editorError.foreground #F43300
editorGroup.border #303030
editorGroup.dropBackground #30303070
editorGroupHeader.tabsBackground #181818
editorGroupHeader.tabsBorder #303030
editorGutter.addedBackground #55AA336E
editorGutter.background #181818
editorGutter.commentRangeForeground #BBBBBB6E
editorGutter.deletedBackground #F433006E
editorGutter.modifiedBackground #2255EE6E
editorHint.foreground #55AA33
editorIndentGuide.activeBackground #303030
editorIndentGuide.background #232323
editorInfo.foreground #2255EE
editorLineNumber.activeForeground #BBBBBB
editorLineNumber.foreground #BBBBBB6E
editorLink.activeForeground #EE5577
editorOverviewRuler.addedForeground #55AA336E
editorOverviewRuler.border #303030
editorOverviewRuler.bracketMatchForeground #BBBBBB
editorOverviewRuler.deletedForeground #F433006E
editorOverviewRuler.errorForeground #F43300
editorOverviewRuler.findMatchForeground #BBBBBB6E
editorOverviewRuler.infoForeground #2255EE
editorOverviewRuler.modifiedForeground #2255EE6E
editorOverviewRuler.selectionHighlightForeground #BBBBBB6E
editorOverviewRuler.warningForeground #CC9900
editorOverviewRuler.wordHighlightForeground #BBBBBB6E
editorOverviewRuler.wordHighlightStrongForeground #BBBBBB
editorRuler.foreground #232323
editorWarning.foreground #CC9900
editorWhitespace.foreground #303030
errorForeground #F43300
focusBorder #EE55773A
foreground #BBBBBB
gitDecoration.addedResourceForeground #55AA33
gitDecoration.deletedResourceForeground #F43300
gitDecoration.ignoredResourceForeground #BBBBBB6E
gitDecoration.modifiedResourceForeground #2255EE
gitDecoration.untrackedResourceForeground #CC9900
input.background #303030
input.border #303030
input.foreground #BBBBBB
input.placeholderForeground #BBBBBB6E
list.activeSelectionBackground #EE55776E
list.activeSelectionForeground #BBBBBB
list.dropBackground #303030E6
list.errorForeground #F43300
list.focusBackground #EE55776E
list.hoverBackground #BBBBBB6E
list.hoverForeground #BBBBBB
list.inactiveSelectionBackground #303030
list.inactiveSelectionForeground #BBBBBB
list.invalidItemForeground #CC9900
list.warningForeground #CC9900
listFilterWidget.background #232323
listFilterWidget.noMatchesOutline #F43300
listFilterWidget.outline #BBBBBB7E
progressBar.background #EE5577
scrollbar.shadow #2323236E
scrollbarSlider.activeBackground #EE55776E
scrollbarSlider.background #2323236E
scrollbarSlider.hoverBackground #3030306E
selection.background #BBBBBB6E
sideBar.background #181818
sideBar.border #232323
sideBar.dropBackground #BBBBBB6E
sideBar.foreground #BBBBBB6E
sideBarSectionHeader.background #232323
sideBarSectionHeader.border #303030
sideBarSectionHeader.foreground #BBBBBB
statusBar.background #181818
statusBar.debuggingBackground #2255EE6E
statusBar.debuggingForeground #BBBBBB
statusBar.foreground #BBBBBB6E
statusBar.noFolderBackground #212121
statusBarItem.hoverBackground #3030306E
statusBarItem.prominentBackground #303030
statusBarItem.prominentHoverBackground #BBBBBB6E
tab.activeBackground #232323
tab.activeBorder #EE5577
tab.activeForeground #BBBBBB
tab.border #BBBBBB00
tab.inactiveBackground #181818
tab.unfocusedActiveBackground #181818
terminal.ansiBlue #26BBD9
terminal.ansiBrightBlue #3FC4DE
terminal.ansiBrightCyan #6BE4E6
terminal.ansiBrightGreen #3FDAA4
terminal.ansiBrightMagenta #F075B5
terminal.ansiBrightRed #EC6A88
terminal.ansiBrightYellow #FBC3A7
terminal.ansiCyan #59E1E3
terminal.ansiGreen #29D398
terminal.ansiMagenta #EE64AC
terminal.ansiRed #EE5577
terminal.ansiYellow #FFBB99
terminal.foreground #BBBBBB
terminal.selectionBackground #9797974D
terminalCursor.background #BBBBBB
terminalCursor.foreground #8F8F8F80
textBlockQuote.background #232323
textLink.activeForeground #FF9999
textLink.foreground #EE5577
titleBar.activeBackground #181818
titleBar.inactiveBackground #232323
tree.indentGuidesStroke #BBBBBB70
welcomePage.background #181818
widget.shadow #111111E6 #FFBB996E
constant.character.escape #22BBBB —
entity.name.function #22BBBB —
entity.name.tag #99BBFF normal
entity.name.type, storage.type.cs #FFBB99 —
entity.other.attribute-name #FF9999 italic
entity.other.inherited-class #FFBB99 —
entity.other.attribute-name.id #22BBBB —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #FFBB99 —
support.type.property-name.css #EE5577 —
entity.name.tag.css #BB77DD —
variable.argument.css #99BBFF —
meta.selector.css #99BBFF —
keyword.other.unit.em.css, keyword.other.unit.rem.css, keyword.other.unit.px.css, keyword.other.unit.pt.css, keyword.other.unit.deg.css, keyword.other.unit.rad.css, keyword.other.unit.cm.css, keyword.other.unit.mm.css, keyword.other.unit.in.css, keyword.other.unit.pc.css, keyword.other.unit.percentage.css #99BBFF —
entity.name.variable, variable #EE5577 —
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete #BB77DD —
keyword.other.unit #FF9999 —
markup.quote #FFBB99 italic
markup.heading, entity.name.section #EE5577 —
markup.italic #22BBBB italic
markup.inline.raw, markup.fenced_code.block #FF9999 —
markup.underline.link #FFBB99 —
string.quoted, string.template #FFBB99 —
string.other.link #FF9999 —
support.type.property-name, meta.object-literal.key #FF9999 —
variable.language #FFBB99 italic
variable.parameter — italic
string.template meta.embedded #BBBBBB —
support.class.component.js #99BBFF italic
punctuation.definition.tag #99BBFF normal
punctuation.separator #BBBBBB —
punctuation.definition.template-expression #BB77DD —
punctuation.section.embedded #BB77DD —
punctuation.definition.list #FF9999 —
token.error-token #F43300 —
token.debug-token #2255EE —
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 } !` ;
}
Yedor | Coding Theme