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 #1A212E activityBar.foreground #E9ECEF activityBar.inactiveForeground #8695A8 activityBarBadge.background #64FFDA activityBarBadge.foreground #1A212E badge.background #64FFDA tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #8695A8 italic variable, string constant.other.placeholder #E9ECEF — constant.other.color #FFFFFF — invalid, invalid.illegal #FF5555 — keyword, storage.type, storage.modifier
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
V Theme | Coding Theme
badge.foreground
#1A212E
diffEditor.insertedTextBackground #5CFF8720
diffEditor.removedTextBackground #FF555520
editor.background #212836
editor.foreground #E9ECEF
editor.lineHighlightBackground #2B3647
editor.selectionBackground #3A506B
editor.selectionHighlightBackground #3A506B88
editorCursor.foreground #64FFDA
editorGroupHeader.tabsBackground #1A212E
editorWhitespace.foreground #2B3647
input.background #1A212E
input.border #212836
input.foreground #E9ECEF
input.placeholderForeground #8695A8
inputOption.activeBorder #64FFDA
list.activeSelectionBackground #2B3647
list.activeSelectionForeground #E9ECEF
list.highlightForeground #64FFDA
list.hoverBackground #2B364760
list.inactiveSelectionBackground #2B364780
list.inactiveSelectionForeground #E9ECEF
panel.background #1A212E
panelTitle.activeBorder #64FFDA
panelTitle.activeForeground #E9ECEF
panelTitle.inactiveForeground #8695A8
scrollbarSlider.activeBackground #3A506B
scrollbarSlider.background #2B364780
scrollbarSlider.hoverBackground #2B3647
sideBar.background #1A212E
sideBar.foreground #E9ECEF
sideBarSectionHeader.background #212836
sideBarSectionHeader.foreground #64FFDA
sideBarTitle.foreground #64FFDA
statusBar.background #151C28
statusBar.debuggingBackground #64FFDA
statusBar.debuggingForeground #151C28
statusBar.foreground #E9ECEF
statusBar.noFolderBackground #151C28
tab.activeBackground #212836
tab.activeBorder #64FFDA
tab.activeForeground #E9ECEF
tab.inactiveBackground #1A212E
tab.inactiveForeground #8695A8
tab.unfocusedActiveForeground #E9ECEF
tab.unfocusedInactiveForeground #8695A8
terminal.ansiBlack #151C28
terminal.ansiBlue #82AAFF
terminal.ansiBrightBlack #8695A8
terminal.ansiBrightBlue #9DACFF
terminal.ansiBrightCyan #A1FFF7
terminal.ansiBrightGreen #98FFB3
terminal.ansiBrightMagenta #FFA6FF
terminal.ansiBrightRed #FF8A8A
terminal.ansiBrightWhite #FFFFFF
terminal.ansiBrightYellow #FFE08A
terminal.ansiCyan #64FFDA
terminal.ansiGreen #5CFF87
terminal.ansiMagenta #FF79C6
terminal.ansiRed #FF5555
terminal.ansiWhite #E9ECEF
terminal.ansiYellow #FFCB6B
terminal.background #1A212E
terminal.foreground #E9ECEF
titleBar.activeBackground #151C28
titleBar.activeForeground #E9ECEF
titleBar.inactiveBackground #151C28
titleBar.inactiveForeground #8695A8 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 #82AAFF —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #FFCB6B —
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method #64FFDA —
meta.block variable.other #FFCB6B —
support.other.variable, string.other.link #FFCB6B —
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other #FF8A8A —
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 #5CFF87 —
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 #FFCB6B —
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 #A1FFF7 —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #FF5555 —
variable.language #FF5555 italic
entity.name.method.js #64FFDA italic
meta.class-method.js entity.name.function.js, variable.function.constructor #64FFDA —
entity.other.attribute-name #FF79C6 —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #FFCB6B italic
entity.other.attribute-name.class #FFCB6B —
source.sass keyword.control #64FFDA —
constant.character.escape #82AAFF —
*url*, *link*, *uri* — underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #64FFDA italic
source.js constant.other.object.key.js string.unquoted.label.js #FF5555 italic
source.json meta.structure.dictionary.json support.type.property-name.json #FF79C6 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #FFCB6B —
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 #FF8A8A —
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 #FF5555 —
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 #64FFDA —
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 #FFCB6B —
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 #FF79C6 —
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 #5CFF87 —
text.html.markdown, punctuation.definition.list_item.markdown #EEFFFF —
text.html.markdown markup.inline.raw.markdown #FF79C6 —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #8695A8 —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown #5CFF87 —
markup.italic #FFCB6B italic
markup.bold, markup.bold string #FFCB6B bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string #FFCB6B bold
markup.underline #F78C6C underline
markup.quote punctuation.definition.blockquote.markdown #8695A8 —
string.other.link.title.markdown #64FFDA —
string.other.link.description.title.markdown #FF79C6 —
constant.other.reference.link.markdown #64FFDA —
markup.raw.block.fenced.markdown #00000050 —
punctuation.definition.fenced.markdown #00000050 —
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end #EEFFFF —
variable.language.fenced.markdown #8695A8 —
meta.separator #8695A8 bold
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
fetchUser 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...
~/my-project
main*
Button.tsx
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 } ! ` ;
}