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 #ff5800 activityBar.activeBorder #ffffff activityBar.activeFocusBorder #ff5800 activityBar.background #ff5800 activityBar.border #ff5800 activityBar.dropBackground #ff5800 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #AAAAAA italic comment.block.preprocessor #AAAAAA comment.documentation, comment.block.documentation #448C27 — invalid.illegal #660000 — keyword.operator
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBar.foreground
#ffffff
activityBar.inactiveForeground #ffffff
activityBarBadge.background #ffffff
activityBarBadge.foreground #ff5800
badge.background #ffffff
badge.foreground #ff5800
button.background #ffffff
button.foreground #ff5800
button.hoverBackground #ffffff
checkbox.background #ffffff
checkbox.border #ff5800
checkbox.foreground #ff5800
dropdown.background #ffffff
dropdown.border #ff5800
dropdown.foreground #ff5800
dropdown.listBackground #ffffff
editor.background #FFFFFF
editor.foreground #000000
editor.inactiveSelectionBackground #E5EBF1
editor.selectionHighlightBackground #ADD6FF80
editorGroup.border #ff5800
editorGroup.dropBackground #ff5800
editorGroupHeader.tabsBorder #ff5800
editorIndentGuide.activeBackground #939393
editorIndentGuide.background #D3D3D3
editorPane.background #ffffff
editorSuggestWidget.background #F3F3F3
input.background #ffffff
input.border #ffffff
input.foreground #ff5800
input.placeholderForeground #ff5800
inputOption.activeBackground #ffffff
inputOption.activeBorder #ffffff
inputValidation.errorBackground #ffffff
inputValidation.errorBorder #ffffff
inputValidation.errorForeground #ffffff
inputValidation.infoBackground #ffffff
inputValidation.infoBorder #ffffff
inputValidation.infoForeground #ff5800
inputValidation.warningBackground #ffffff
inputValidation.warningBorder #ffffff
inputValidation.warningForeground #ffffff
list.activeSelectionBackground #ffffff
list.activeSelectionForeground #ff5800
list.deemphasizedForeground #ffffff
list.dropBackground #ffffff
list.errorForeground #ffffff
list.filterMatchBackground #ffffff
list.filterMatchBorder #ffffff
list.focusBackground #ffffff
list.focusForeground #ff5800
list.highlightForeground #ffffff
list.hoverBackground #ffffff
list.hoverForeground #ff5800
list.inactiveFocusBackground #ffffff
list.inactiveSelectionBackground #ffffff
list.inactiveSelectionForeground #ff5800
list.invalidItemForeground #ffffff
list.warningForeground #ffffff
listFilterWidget.background #ffffff
listFilterWidget.noMatchesOutline #ffffff
listFilterWidget.outline #ffffff
panel.background #ffffff
panel.border #ff5800
panelInput.border #ff5800
panelTitle.activeBorder #ff5800
panelTitle.activeForeground #ff5800
progressBar.background #ff5800
scrollbar.shadow #ff5800
scrollbarSlider.activeBackground #ff5800
scrollbarSlider.background #ff5800
scrollbarSlider.hoverBackground #ff5800
searchEditor.textInputBorder #ff5800
settings.numberInputBorder #ff5800
settings.textInputBorder #ff5800
sideBar.background #ffffff
sideBar.border #ff5800
sideBar.dropBackground #ffffff
sideBar.foreground #ff5800
sideBarSectionHeader.background #ffffff
sideBarSectionHeader.border #ffffff
sideBarSectionHeader.foreground #ff5800
sideBarTitle.foreground #ff5800
statusBar.background #ff5800
statusBar.border #ff5800
statusBar.debuggingBackground #ff5800
statusBar.debuggingBorder #ff5800
statusBar.debuggingForeground #ffffff
statusBar.foreground #ffffff
statusBar.noFolderBackground #ff5800
statusBar.noFolderBorder #ff5800
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #ff5800
statusBarItem.hoverBackground #ff5800
statusBarItem.prominentBackground #ff5800
statusBarItem.prominentForeground #ffffff
statusBarItem.prominentHoverBackground #ff5800
statusBarItem.remoteBackground #ff5800
statusBarItem.remoteForeground #ffffff
tab.activeBackground #ff5800
tab.activeBorder #ff5800
tab.activeBorderTop #ff5800
tab.activeForeground #ffffff
tab.inactiveBackground #ffffff
tab.inactiveForeground #ff5800
tab.unfocusedActiveBackground #ff5800
tab.unfocusedActiveBorder #ff5800
tab.unfocusedActiveBorderTop #ff5800
titleBar.activeBackground #ff5800
titleBar.activeForeground #ffffff
titleBar.border #ff5800
titleBar.inactiveBackground #ff5800
titleBar.inactiveForeground #ffffff
tree.indentGuidesStroke #ffffff
window.activeBorder #ff5800
window.inactiveBorder #ff5800 storage.type, support.type #7A3E9D —
constant.language, support.constant, variable.language #AB6526 —
variable, support.variable #7A3E9D —
entity.name.function, support.function #AA3731 bold
entity.name.type, entity.other.inherited-class, support.class #7A3E9D bold
entity.name.exception #660000 —
constant.numeric, constant.character, constant #AB6526 —
constant.character.escape #777777 —
constant.other.symbol #AB6526 —
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html #AAAAAA —
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html #91B3E0 —
meta.tag entity.other.attribute-name, entity.other.attribute-name.html #91B3E0 italic
constant.character.entity, punctuation.definition.entity #AB6526 —
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css #7A3E9D —
meta.property-name, support.type.property-name #AB6526 —
meta.property-value, meta.property-value constant.other, support.constant.property-value #448C27 —
keyword.other.important — bold
markup.output, markup.raw #777777 —
markup.underline — underline
markup.bold, markup.italic #448C27 —
meta.diff.range, meta.diff.index, meta.separator #434343 —
meta.diff.header.from-file #434343 —
meta.diff.header.to-file #434343 —
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 } ! ` ;
}
GOrange | Coding Theme