VS Code preview Full workbench mockup using this variant's colors and tokenColors.
fetchUser.tssrc/components index.ts README.md
src
components fetchUser.ts Button.tsx Modal.tsx legacy.tsx fetch Config.tsindex.ts renamed.ts staged.ts removed.ts
vendor package.json broken.ts slow.ts tsconfig.json README.md package-lock.json 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
31
32
33
34
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 }!` ;
}
Problems1
Output
Debug Console
Terminal
Ports
✓ fetchUser passed 12 blk
✗ Cannot find name 'user'. error ▲ warning 412 ready localhost
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
greenery light
colors Workbench UI color keys from the theme JSON colors map.
key HEX RGB RGBA activityBar.background
#667C55 RGB(102, 124, 85) RGBA(102, 124, 85, 1) activityBar.foreground
#FFFFFF RGB(255, 255, 255) RGBA(255, 255, 255, 1) activityBarBadge.background
#41463D RGB(65, 70, 61) RGBA(65, 70, 61, 1) editor.background
#FEFEFE RGB(254, 254, 254) RGBA(254, 254, 254, 1) editor.foreground
#1E1E1E RGB(30, 30, 30) RGBA(30, 30, 30, 1) editor.selectionBackground
#83A06C33 RGB(131, 160, 108) RGBA(131, 160, 108, 0.2) editor.wordHighlightBackground
#83A06C33 RGB(131, 160, 108) RGBA(131, 160, 108, 0.2) editorGroupHeader.tabsBackground
#F1F1F1 RGB(241, 241, 241) RGBA(241, 241, 241, 1) editorLineNumber.foreground
#849E6F RGB(132, 158, 111) RGBA(132, 158, 111, 1) gitDecoration.conflictingResourceForeground
#F07178 RGB(240, 113, 120) RGBA(240, 113, 120, 1) gitDecoration.deletedResourceForeground
#BB90D8 RGB(187, 144, 216) RGBA(187, 144, 216, 1) gitDecoration.ignoredResourceForeground
#4E5350 RGB(78, 83, 80) RGBA(78, 83, 80, 1) gitDecoration.modifiedResourceForeground
#D6B24F RGB(214, 178, 79) RGBA(214, 178, 79, 1) gitDecoration.untrackedResourceForeground
#769BAA RGB(118, 155, 170) RGBA(118, 155, 170, 1) sideBar.background
#F1F1F1 RGB(241, 241, 241) RGBA(241, 241, 241, 1) sideBarSectionHeader.background
#FFFFFF RGB(255, 255, 255) RGBA(255, 255, 255, 1) sideBarTitle.foreground
#667C55 RGB(102, 124, 85) RGBA(102, 124, 85, 1) statusBar.background
#1E1E1E RGB(30, 30, 30) RGBA(30, 30, 30, 1) statusBar.debuggingBackground
#B06698 RGB(176, 102, 152) RGBA(176, 102, 152, 1) statusBar.debuggingForeground
#1F1F1F RGB(31, 31, 31) RGBA(31, 31, 31, 1) statusBar.foreground
#FFFFFF RGB(255, 255, 255) RGBA(255, 255, 255, 1) statusBar.noFolderBackground
#1E1E1E RGB(30, 30, 30) RGBA(30, 30, 30, 1) tab.activeBackground
#83A06C RGB(131, 160, 108) RGBA(131, 160, 108, 1) tab.activeForeground
#FFFFFF RGB(255, 255, 255) RGBA(255, 255, 255, 1) tab.border
#FFFFFF00 RGB(255, 255, 255) RGBA(255, 255, 255, 0) tab.hoverBackground
#9EBE84 RGB(158, 190, 132) RGBA(158, 190, 132, 1) tab.inactiveBackground
#DFDFDF RGB(223, 223, 223) RGBA(223, 223, 223, 1) tab.inactiveForeground
#1E1E1E RGB(30, 30, 30) RGBA(30, 30, 30, 1) titleBar.activeBackground
#FFFFFF RGB(255, 255, 255) RGBA(255, 255, 255, 1)
tokenColors Foregrounds this theme assigns to the token scope catalog. A rule with only a font style is skipped, and a longer matching scope wins. Italic and bold rules are not listed — the preview above shows them in the code.
scope HEX RGB RGBA comment
#A7B69F RGB(167, 182, 159) RGBA(167, 182, 159, 1) comment.block
#A7B69F RGB(167, 182, 159) RGBA(167, 182, 159, 1) comment.block.documentation
#A7B69F RGB(167, 182, 159) RGBA(167, 182, 159, 1) comment.line
#A7B69F RGB(167, 182, 159) RGBA(167, 182, 159, 1) constant
#6A8D50 RGB(106, 141, 80) RGBA(106, 141, 80, 1) constant.character
#65BB62 RGB(101, 187, 98) RGBA(101, 187, 98, 1) constant.character.escape
#9AC2BE RGB(154, 194, 190) RGBA(154, 194, 190, 1) constant.numeric
#65BB62 RGB(101, 187, 98) RGBA(101, 187, 98, 1) constant.numeric.integer
#65BB62 RGB(101, 187, 98) RGBA(101, 187, 98, 1) constant.numeric.float
#65BB62 RGB(101, 187, 98) RGBA(101, 187, 98, 1) constant.numeric.hex
#65BB62 RGB(101, 187, 98) RGBA(101, 187, 98, 1) constant.numeric.octal
#65BB62 RGB(101, 187, 98) RGBA(101, 187, 98, 1) constant.other
#6A8D50 RGB(106, 141, 80) RGBA(106, 141, 80, 1) constant.other.placeholder
#1F1F1F RGB(31, 31, 31) RGBA(31, 31, 31, 1) entity
#667C55 RGB(102, 124, 85) RGBA(102, 124, 85, 1) entity.name
#C78547 RGB(199, 133, 71) RGBA(199, 133, 71, 1) entity.name.class
#B06698 RGB(176, 102, 152) RGBA(176, 102, 152, 1) entity.name.function
#65BB62 RGB(101, 187, 98) RGBA(101, 187, 98, 1) entity.name.method
#C78547 RGB(199, 133, 71) RGBA(199, 133, 71, 1) entity.name.namespace
#C78547 RGB(199, 133, 71) RGBA(199, 133, 71, 1) entity.name.section
#C78547 RGB(199, 133, 71) RGBA(199, 133, 71, 1) entity.name.selector
#C78547 RGB(199, 133, 71) RGBA(199, 133, 71, 1) entity.name.tag
#C78547 RGB(199, 133, 71) RGBA(199, 133, 71, 1) entity.name.type
#C78547 RGB(199, 133, 71) RGBA(199, 133, 71, 1) entity.name.type.enum
#C78547 RGB(199, 133, 71) RGBA(199, 133, 71, 1) entity.name.type.interface
#C78547 RGB(199, 133, 71) RGBA(199, 133, 71, 1) entity.name.type.struct
#C78547 RGB(199, 133, 71) RGBA(199, 133, 71, 1) entity.other
#B06698 RGB(176, 102, 152) RGBA(176, 102, 152, 1) entity.other.attribute-name
#65BB62 RGB(101, 187, 98) RGBA(101, 187, 98, 1) entity.other.inherited-class
#6A8D50 RGB(106, 141, 80) RGBA(106, 141, 80, 1) invalid
#F7442D RGB(247, 68, 45) RGBA(247, 68, 45, 1) invalid.deprecated
#F7442D RGB(247, 68, 45) RGBA(247, 68, 45, 1) invalid.illegal
#F7442D RGB(247, 68, 45) RGBA(247, 68, 45, 1) keyword
#526E39 RGB(82, 110, 57) RGBA(82, 110, 57, 1) keyword.control
#6A8D50 RGB(106, 141, 80) RGBA(106, 141, 80, 1) keyword.control.flow
#6A8D50 RGB(106, 141, 80) RGBA(106, 141, 80, 1) keyword.operator
#526E39 RGB(82, 110, 57) RGBA(82, 110, 57, 1) keyword.operator.new
#526E39 RGB(82, 110, 57) RGBA(82, 110, 57, 1) keyword.operator.assignment
#526E39 RGB(82, 110, 57) RGBA(82, 110, 57, 1) keyword.operator.arithmetic
#526E39 RGB(82, 110, 57) RGBA(82, 110, 57, 1) keyword.operator.logical
#526E39 RGB(82, 110, 57) RGBA(82, 110, 57, 1) keyword.other
#65BB62 RGB(101, 187, 98) RGBA(101, 187, 98, 1) markup
#6A8D50 RGB(106, 141, 80) RGBA(106, 141, 80, 1) markup.changed
#C78547 RGB(199, 133, 71) RGBA(199, 133, 71, 1) markup.heading
#6A8D50 RGB(106, 141, 80) RGBA(106, 141, 80, 1) markup.inserted
#6A8D50 RGB(106, 141, 80) RGBA(106, 141, 80, 1) meta
#65BB62 RGB(101, 187, 98) RGBA(101, 187, 98, 1) meta.class
#B06698 RGB(176, 102, 152) RGBA(176, 102, 152, 1) meta.function
#4096B8 RGB(64, 150, 184) RGBA(64, 150, 184, 1) meta.function-call
#65BB62 RGB(101, 187, 98) RGBA(101, 187, 98, 1) meta.tag
#6A8D50 RGB(106, 141, 80) RGBA(106, 141, 80, 1) punctuation.definition.bracket
#6A8D50 RGB(106, 141, 80) RGBA(106, 141, 80, 1) punctuation.definition.comment
#A7B69F RGB(167, 182, 159) RGBA(167, 182, 159, 1) punctuation.definition.string.begin
#6A8D50 RGB(106, 141, 80) RGBA(106, 141, 80, 1) punctuation.definition.string.end
#6A8D50 RGB(106, 141, 80) RGBA(106, 141, 80, 1) punctuation.separator
#6A8D50 RGB(106, 141, 80) RGBA(106, 141, 80, 1) punctuation.separator.continuation
#6A8D50 RGB(106, 141, 80) RGBA(106, 141, 80, 1) punctuation.terminator
#6A8D50 RGB(106, 141, 80) RGBA(106, 141, 80, 1) storage
#395723 RGB(57, 87, 35) RGBA(57, 87, 35, 1) storage.modifier
#526E39 RGB(82, 110, 57) RGBA(82, 110, 57, 1) storage.type
#526E39 RGB(82, 110, 57) RGBA(82, 110, 57, 1) string
#6A8D50 RGB(106, 141, 80) RGBA(106, 141, 80, 1) string.interpolated
#6A8D50 RGB(106, 141, 80) RGBA(106, 141, 80, 1) string.other
#6A8D50 RGB(106, 141, 80) RGBA(106, 141, 80, 1) string.quoted
#6A8D50 RGB(106, 141, 80) RGBA(106, 141, 80, 1) string.quoted.double
#87AA87 RGB(135, 170, 135) RGBA(135, 170, 135, 1) string.quoted.other
#6A8D50 RGB(106, 141, 80) RGBA(106, 141, 80, 1) string.quoted.single
#87AA87 RGB(135, 170, 135) RGBA(135, 170, 135, 1) string.quoted.triple
#6A8D50 RGB(106, 141, 80) RGBA(106, 141, 80, 1) string.regexp
#9AC2BE RGB(154, 194, 190) RGBA(154, 194, 190, 1) string.template
#6A8D50 RGB(106, 141, 80) RGBA(106, 141, 80, 1) string.unquoted
#1F1F1F RGB(31, 31, 31) RGBA(31, 31, 31, 1) support
#9AC2BE RGB(154, 194, 190) RGBA(154, 194, 190, 1) support.class
#C78547 RGB(199, 133, 71) RGBA(199, 133, 71, 1) support.constant
#65BB62 RGB(101, 187, 98) RGBA(101, 187, 98, 1) support.function
#65BB62 RGB(101, 187, 98) RGBA(101, 187, 98, 1) support.other
#C78547 RGB(199, 133, 71) RGBA(199, 133, 71, 1) support.type
#C78547 RGB(199, 133, 71) RGBA(199, 133, 71, 1) support.type.primitive
#C78547 RGB(199, 133, 71) RGBA(199, 133, 71, 1) support.type.property-name
#65BB62 RGB(101, 187, 98) RGBA(101, 187, 98, 1) variable
#1F1F1F RGB(31, 31, 31) RGBA(31, 31, 31, 1) variable.function
#65BB62 RGB(101, 187, 98) RGBA(101, 187, 98, 1) variable.language
#F07178 RGB(240, 113, 120) RGBA(240, 113, 120, 1) variable.name
#1F1F1F RGB(31, 31, 31) RGBA(31, 31, 31, 1) variable.other
#F07178 RGB(240, 113, 120) RGBA(240, 113, 120, 1) variable.other.constant
#F07178 RGB(240, 113, 120) RGBA(240, 113, 120, 1) variable.other.property
#F07178 RGB(240, 113, 120) RGBA(240, 113, 120, 1) variable.other.readwrite
#1F1F1F RGB(31, 31, 31) RGBA(31, 31, 31, 1) variable.parameter
#4096B8 RGB(64, 150, 184) RGBA(64, 150, 184, 1)