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 #FDF6E3 activityBar.border #DDD6C1 activityBar.foreground #584c27 activityBarBadge.background #B58900 badge.background #B58900AA button.background #AC9D57 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #3e4b53 — console.error #ca0000ff — console.input #00ae50ff — console.prompt #b651bcff bold console.warning
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
vsc-soft-theme — vsc-solarized-light vsc-soft-theme | Coding Theme
debugExceptionWidget.background
#DDD6C1
debugExceptionWidget.border #AB395B
debugToolBar.background #DDD6C1
dropdown.background #EEE8D5
dropdown.border #D3AF86
editor.background #FDF6E3
editor.foreground #657B83
editor.lineHighlightBackground #EEE8D5
editor.selectionBackground #EEE8D5
editorCursor.foreground #657B83
editorGroup.border #DDD6C1
editorGroup.dropBackground #DDD6C1AA
editorGroupHeader.tabsBackground #FDF6E3
editorGroupHeader.tabsBorder #DDD6C1
editorHoverWidget.background #CCC4B0
editorIndentGuide.activeBackground1 #081E2580
editorIndentGuide.background1 #586E7580
editorLineNumber.activeForeground #567983
editorSuggestWidget.background #EEE8D5
editorSuggestWidget.border #EEE8D5
editorSuggestWidget.foreground #657B83
editorWhitespace.foreground #586E7580
editorWidget.background #EEE8D5
extensionButton.prominentBackground #b58900
extensionButton.prominentHoverBackground #584c27aa
focusBorder #b494716e
input.background #DDD6C1
input.foreground #586E75
input.placeholderForeground #586E75AA
inputOption.activeBorder #D3AF86
list.activeSelectionBackground #d1cbb87a
list.activeSelectionForeground #6C6C6C
list.highlightForeground #B58900
list.hoverBackground #DFCA8844
list.inactiveSelectionBackground #d1cbb87a
minimap.selectionHighlight #EEE8D5
minimapSlider.activeBackground #99937954
minimapSlider.background #99937954
minimapSlider.hoverBackground #99937954
notebook.cellEditorBackground #F7F0E0
panel.border #DDD6C1
peekView.border #B58900
peekViewEditor.background #FFFBF2
peekViewEditor.matchHighlightBackground #7744AA40
peekViewResult.background #EEE8D5
peekViewTitle.background #EEE8D5
pickerGroup.border #2AA19899
pickerGroup.foreground #2AA19899
ports.iconRunningProcessForeground #2AA19899
progressBar.background #B58900
quickInputList.focusBackground #DFCA8866
scrollbar.shadow #d1cbb84b
scrollbarSlider.activeBackground #d1cbb84b
scrollbarSlider.background #d1cbb84b
scrollbarSlider.hoverBackground #d1cbb84b
selection.background #878b9180
sideBar.background #FDF6E3
sideBar.border #DDD6C1
sideBarSectionHeader.background #FDF6E3
sideBarSectionHeader.border #DDD6C1
sideBarTitle.foreground #586E75
statusBar.background #FDF6E3
statusBar.border #DDD6C1
statusBar.debuggingBackground #EEE8D5
statusBar.focusBorder #DDD6C1
statusBar.foreground #586E75
statusBar.noFolderBackground #EEE8D5
statusBarItem.prominentBackground #DDD6C1
statusBarItem.prominentHoverBackground #DDD6C199
statusBarItem.remoteBackground #AC9D57
tab.activeBackground #dbd0b256
tab.activeBorder #DDD6C1
tab.activeForeground #586E75
tab.activeModifiedBorder #cb4b16
tab.border #DDD6C1
tab.inactiveBackground #FDF6E3
tab.inactiveForeground #586E75
tab.lastPinnedBorder #FDF6E3
terminal.`ansiBrightWhite` #FDF6E3
terminal.ansiBlack #073642
terminal.ansiBlue #268bd2
terminal.ansiBrightBlack #002b36
terminal.ansiBrightBlue #839496
terminal.ansiBrightCyan #93a1a1
terminal.ansiBrightGreen #586e75
terminal.ansiBrightMagenta #6c71c4
terminal.ansiBrightRed #cb4b16
terminal.ansiBrightYellow #657b83
terminal.ansiCyan #2aa198
terminal.ansiGreen #859900
terminal.ansiMagenta #d33682
terminal.ansiRed #dc322f
terminal.ansiWhite #eee8d5
terminal.ansiYellow #b58900
terminal.background #FDF6E3
titleBar.activeBackground #FDF6E3
titleBar.border #DDD6C1
titleBar.inactiveBackground #FDF6E3
walkThrough.embeddedEditorBackground #00000014
#cd6600ff
markup.inserted #000000ff —
markup.underline — underline
constant.other.placeholder.py #7b0000ff —
entity.name.type #6c65b0ff —
entity.other.inherited-class #000000ff —
entity.name.function #db7800ff —
entity.name.function.argument #a28d00ff —
entity.name.tag #2265ad bold
entity.other.attribute-name #cb2d01ff —
keyword.control #d0104c bold
token.storage.js,token.storage.ts #DC1376 bold
keyword.operator.expression.delete.js,keyword.operator.expression.in.js,keyword.operator.expression.of.js,keyword.operator.expression.instanceof.js,keyword.operator.new.js,keyword.operator.expression.typeof.js,keyword.operator.expression.void.js #577909 bold
string | punctuation.definition.string #14909D —
string, entity.other.inherited-class #14909D —
variable.parameter #ca7300 —
keyword.operator.logical.js,keyword.operator.logical.ts #ca004b —
keyword.operator.arithmetic.js,keyword.operator.comparison.js,keyword.operator.arithmetic.ts,keyword.operator.comparison.ts #2598da —
invalid.deprecated #cb2d01
invalid.illegal #333333ff —
String constant #696969ff —
string variable #234a97ff —
string.regexp.character-class, string.regexp constant.character.escaped, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition #cf5628ff —
string.regexp constant.character.escape #811f24ff —
function argument #99a600ff —
support.function #ca004bff —
support.constant #c44f00ff —
support.variable #295502ff —
entity.name.type.namespace #b18534 —
support.class, entity.name.type.class #b18534 —
entity.name.class.identifier.namespace.type #b18534 —
entity.name.class #4090f3 —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #cf8f3b bold
support.constant.color.w3c-standard-color-name.css,entity.other.attribute-name.class.css #cf8f3b bold
support.type.vendored.property-name.css #56b6c2 —
punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts #499504 —
support.module.node.js,support.type.object.module.js,support.module.node.js,support.module.node.ts,support.type.object.module.ts,support.module.node.ts #b18534 —
variable.other.readwrite.js,meta.object-literal.key.js,support.variable.property.js,support.variable.object.process.js,variable.other.readwrite.ts,meta.object-literal.key.ts,support.variable.property.ts,support.variable.object.process.ts #126bb2 —
support.constant.json.js,support.constant.json.ts #cf8f3b —
keyword.operator.expression.instanceof.js,keyword.operator.expression.instanceof.ts #577909
keyword.operator.expression.typeof.js,keyword.operator.expression.typeof.ts #577909
support.type.object.console.js,support.type.object.console.ts #499504 —
entity.name.function.js,support.function.console.js,entity.name.function.ts,support.function.console.ts #1D79EC —
keyword.operator.js,keyword.operator.ts #56b6c2 —
support.type.object.dom.js,support.type.object.dom.ts #56b6c2 —
support.variable.dom.js,support.variable.property.dom.js,support.variable.dom.ts,support.variable.property.dom.ts, #499504 —
var.this.js,var.this.ts,variable.language.this.js,variable.language.this.ts #41aeb6 —
markup.heading | markup.heading entity.name #142b5aff —
markup.underline #080808ff underline
markup.link #234a97ff underline
markup.inserted #cc0000ff —
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 } !` ;
}