Skip to main content
vsc-soft-theme | 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 #c8e6c9 activityBar.border #5196576a activityBar.foreground #053f0a activityBarBadge.background #519657 activityBarBadge.foreground #eeeeee badge.background #519657 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-green-light
badge.foreground
#ffffff
button.background #519657
button.foreground #eeeeee
button.hoverBackground #519657
debugToolBar.background #a5d6a7
dropdown.background #c8e6c9
dropdown.border #c5e1a5
editor.background #c8e6c9
editor.lineHighlightBackground #338a3f1b
editor.selectionBackground #338a3f23
editorBracketHighlight.foreground1 #006db3
editorBracketHighlight.foreground2 #388e3c
editorBracketHighlight.foreground3 #c77800
editorGroup.border #5196576a
editorGroupHeader.tabsBackground #c8e6c9
editorGroupHeader.tabsBorder #5196576a
editorHoverWidget.background #c8e6c9
editorHoverWidget.border #a5d6a7
editorIndentGuide.activeBackground #205423
editorIndentGuide.background #388e3c9d
editorLineNumber.activeForeground #519657
editorLineNumber.foreground #519657dc
editorSuggestWidget.background #c8e6c9
editorSuggestWidget.border #a5d6a7
editorSuggestWidget.foreground #338a3e
editorSuggestWidget.highlightForeground #338a3e
editorSuggestWidget.selectedBackground #a5d6a7
editorWhitespace.foreground #b4dcb4
editorWidget.background #c8e6c9
extensionButton.prominentBackground #3BBA54
extensionButton.prominentHoverBackground #4CC263
focusBorder #338a3f6b
foreground #519657
gitDecoration.modifiedResourceForeground #00600f
icon.foreground #519657
input.background #c8e6c9
input.border #338a3f6b
list.activeSelectionBackground #338a3f35
list.activeSelectionForeground #244470
list.dropBackground #338a3f35
list.focusBackground #dcedc8
list.highlightForeground #519657
list.hoverBackground #338a3f35
list.inactiveFocusBackground #dcedc8
list.inactiveSelectionBackground #338a3f35
list.inactiveSelectionForeground #244470
menu.foreground #284b2b
menu.separatorBackground #a5d6a7
minimapSlider.activeBackground #51965749
minimapSlider.background #51965749
minimapSlider.hoverBackground #51965749
peekView.border #6faf71
peekViewEditor.background #bfdabf73
peekViewResult.background #bfdabf73
peekViewTitle.background #bfdabf
profileBadge.background #519657
profileBadge.foreground #ffffff
scrollbar.shadow #a5d6a700
scrollbarSlider.activeBackground #338a3f5a
scrollbarSlider.background #338a3f1a
scrollbarSlider.hoverBackground #338a3f5a
sideBar.background #c8e6c9
sideBar.border #5196576a
sideBar.foreground #244427
sideBarSectionHeader.background #c8e6c9
sideBarSectionHeader.border #5196576a
statusBar.background #c8e6c9
statusBar.border #5196576a
statusBar.debuggingBackground #b0cbb1
statusBar.debuggingForeground #3b6e3f
statusBar.focusBorder #5196576a
statusBar.foreground #3b6e3f
statusBar.noFolderBackground #c8e6c9
statusBarItem.hoverBackground #6d8a6f16
statusBarItem.prominentBackground #6d8a6fc7
statusBarItem.prominentForeground #eeeeee
statusBarItem.remoteBackground #6d8a6fc7
statusBarItem.remoteForeground #ffffff
tab.activeBackground #b5d0b6
tab.activeBorder #519657
tab.activeForeground #519657
tab.border #c8e6c9
tab.inactiveBackground #c8e6c9
tab.inactiveForeground #97b498
terminal.background #c8e6c9
titleBar.activeBackground #c8e6c9
titleBar.activeForeground #519657
titleBar.border #5196576a
titleBar.inactiveBackground #c8e6c9
titleBar.inactiveForeground #519657
#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
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 } !` ;
}