Skip to main content
Home Theme VS Code V Theme A professionally crafted theme with both dark and light variants based on color theory principles
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 #FFFFFF activityBar.foreground #2D3748 activityBar.inactiveForeground #718096 activityBarBadge.background #00A3A3 activityBarBadge.foreground #FFFFFF badge.background #00A3A3 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #718096 italic variable, string constant.other.placeholder #2D3748 — constant.other.color #444444 — invalid, invalid.illegal #DC2626 — keyword, storage.type, storage.modifier
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
V Theme | Coding Theme
badge.foreground
#FFFFFF
diffEditor.insertedTextBackground #16A34920
diffEditor.removedTextBackground #DC262620
editor.background #F5F8FA
editor.foreground #2D3748
editor.lineHighlightBackground #E9EFF5
editor.selectionBackground #C9E3F5
editor.selectionHighlightBackground #C9E3F588
editorCursor.foreground #00A3A3
editorGroupHeader.tabsBackground #FFFFFF
editorWhitespace.foreground #E5E9F0
input.background #FFFFFF
input.border #E5E9F0
input.foreground #2D3748
input.placeholderForeground #718096
inputOption.activeBorder #00A3A3
list.activeSelectionBackground #E9EFF5
list.activeSelectionForeground #2D3748
list.highlightForeground #00A3A3
list.hoverBackground #E9EFF560
list.inactiveSelectionBackground #E9EFF580
list.inactiveSelectionForeground #2D3748
panel.background #FFFFFF
panelTitle.activeBorder #00A3A3
panelTitle.activeForeground #2D3748
panelTitle.inactiveForeground #718096
scrollbarSlider.activeBackground #C9E3F5
scrollbarSlider.background #E9EFF580
scrollbarSlider.hoverBackground #E9EFF5
sideBar.background #FFFFFF
sideBar.foreground #2D3748
sideBarSectionHeader.background #F5F8FA
sideBarSectionHeader.foreground #00A3A3
sideBarTitle.foreground #00A3A3
statusBar.background #FFFFFF
statusBar.debuggingBackground #00A3A3
statusBar.debuggingForeground #FFFFFF
statusBar.foreground #2D3748
statusBar.noFolderBackground #FFFFFF
tab.activeBackground #F5F8FA
tab.activeBorder #00A3A3
tab.activeForeground #2D3748
tab.inactiveBackground #FFFFFF
tab.inactiveForeground #718096
tab.unfocusedActiveForeground #2D3748
tab.unfocusedInactiveForeground #718096
terminal.ansiBlack #2D3748
terminal.ansiBlue #0072C6
terminal.ansiBrightBlack #718096
terminal.ansiBrightBlue #1A85FF
terminal.ansiBrightCyan #0F9F9F
terminal.ansiBrightGreen #26A769
terminal.ansiBrightMagenta #C838C6
terminal.ansiBrightRed #E03E3E
terminal.ansiBrightWhite #F5F8FA
terminal.ansiBrightYellow #D97706
terminal.ansiCyan #00A3A3
terminal.ansiGreen #16A349
terminal.ansiMagenta #A31DB1
terminal.ansiRed #DC2626
terminal.ansiWhite #E5E9F0
terminal.ansiYellow #B45309
terminal.background #FFFFFF
terminal.foreground #2D3748
titleBar.activeBackground #FFFFFF
titleBar.activeForeground #2D3748
titleBar.inactiveBackground #FFFFFF
titleBar.inactiveForeground #718096 keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution #0072C6 —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #B45309 —
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method #00A3A3 —
meta.block variable.other #B45309 —
support.other.variable, string.other.link #B45309 —
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other #E03E3E —
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js #16A349 —
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types #B45309 —
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name #0F9F9F —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #DC2626 —
variable.language #DC2626 italic
entity.name.method.js #00A3A3 italic
meta.class-method.js entity.name.function.js, variable.function.constructor #00A3A3 —
entity.other.attribute-name #A31DB1 —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #B45309 italic
entity.other.attribute-name.class #B45309 —
source.sass keyword.control #00A3A3 —
constant.character.escape #0072C6 —
*url*, *link*, *uri* — underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #00A3A3 italic
source.js constant.other.object.key.js string.unquoted.label.js #DC2626 italic
source.json meta.structure.dictionary.json support.type.property-name.json #A31DB1 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #B45309 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #E03E3E —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #DC2626 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #C17E70 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #00A3A3 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #B45309 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #A31DB1 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #16A349 —
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 } ! ` ;
}