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 #16191c activityBar.foreground #80838f activityBarBadge.background #957FB8 activityBarBadge.foreground #000 badge.background #957FB8 badge.foreground #000 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #8b8b8b94 — variable, string constant.other.placeholder, entity.name.tag #aed0aa — constant.other.color #9da2af — invalid, invalid.illegal #FF8080 — keyword, storage.type, storage.modifier
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
button.background
#957FB8
button.foreground #000
button.hoverBackground #958fd0
diffEditor.insertedLineBackground #99FFE415
diffEditor.insertedTextBackground #99FFE415
diffEditor.removedLineBackground #FF808015
diffEditor.removedTextBackground #FF808015
editor.background #16191c
editor.cursorForeground #1c1e20
editor.foreground #9da2af
editor.selectionBackground #9da2af25
editor.selectionHighlightBackground #9da2af25
editorBracketHighlight.foreground1 #80838f
editorBracketHighlight.foreground2 #80838f
editorBracketHighlight.foreground3 #80838f
editorBracketHighlight.foreground4 #80838f
editorBracketHighlight.foreground5 #80838f
editorBracketHighlight.foreground6 #80838f
editorBracketHighlight.unexpectedBracket.foreground #FF8080
editorError.foreground #FF8080
editorGroupHeader.tabsBackground #16191c
editorGutter.addedBackground #99FFE4
editorGutter.deletedBackground #FF8080
editorGutter.modifiedBackground #957FB8
editorHoverWidget.background #161616
editorHoverWidget.border #282828
editorIndentGuide.activeBackground #00000000
editorIndentGuide.background #00000000
editorInlayHint.background #1C1C1C
editorInlayHint.foreground #80838f
editorLineNumber.activeForeground #957FB8
editorLineNumber.foreground #957FB888
editorOverviewRuler.border #16191c
editorWarning.foreground #957FB8
editorWidget.background #16191c
focusBorder #957FB8
icon.foreground #80838f
input.background #1C1C1C
list.activeSelectionBackground #232323
list.activeSelectionForeground #957FB8
list.errorForeground #FF8080
list.highlightForeground #957FB8
list.hoverBackground #282828
list.inactiveSelectionBackground #232323
scrollbarSlider.background #34343480
scrollbarSlider.hoverBackground #343434
selection.background #666
settings.modifiedItemIndicator #957FB8
sideBar.background #16191c
sideBarSectionHeader.background #16191c
sideBarSectionHeader.foreground #80838f
sideBarTitle.foreground #80838f
statusBar.background #16191c
statusBar.debuggingBackground #ffdd51
statusBar.debuggingForeground #9da2af
statusBar.foreground #80838f
statusBarItem.remoteBackground #957FB8
statusBarItem.remoteForeground #000
tab.activeBackground #161616
tab.border #16191c
tab.inactiveBackground #16191c
terminal.cursorForeground #1c1e20
textLink.activeForeground #958fd0
textLink.foreground #957FB8
titleBar.activeBackground #16191c
titleBar.activeForeground #7E7E7E
titleBar.inactiveBackground #16191c
titleBar.inactiveForeground #707070
tree.indentGuidesStroke #1c1e20 keyword.control, constant.other.color, 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 #80838f —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #957FB8 —
support.class.component.tsx #9a70c4 —
entity.name.function, variable.function, support.function, keyword.other.special-method #957FB8 —
meta.block variable.other #baafd6 —
support.other.variable, string.other.link #9da2af —
constant.numeric, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other, constant.language.boolean #e4ced0 —
string, constant.other.symbol, constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js #d2cde5 —
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 #957FB8 —
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, source.postcss support.type.property-name, support.type.vendored.property-name.css, source.css.scss entity.name.tag, variable.parameter.keyframe-list.css, meta.property-name.css, variable.parameter.url.scss, meta.property-value.scss, meta.property-value.css #9da2af —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #FF8080 —
variable.language #80838f —
entity.name.method.js #FFFF —
meta.class-method.js entity.name.function.js, variable.function.constructor #FFFF —
entity.other.attribute-name, meta.property-list.scss, meta.attribute-selector.scss, meta.property-value.css, entity.other.keyframe-offset.css, meta.selector.css, entity.name.tag.reference.scss, entity.name.tag.nesting.css, punctuation.separator.key-value.css #80838f —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #957FB8 —
entity.other.attribute-name.class, entity.other.attribute-name.id, meta.attribute-selector.scss, variable.parameter.misc.css #957FB8 —
source.sass keyword.control, meta.attribute-selector.scss #99FFE4 —
constant.character.escape #80838f —
*url*, *link*, *uri* — underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #FFFF —
source.js constant.other.object.key.js string.unquoted.label.js #FF8080 italic
source.json meta.structure.dictionary.json support.type.property-name.json #957FB8 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #957FB8 —
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 #957FB8 —
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 #957FB8 —
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 #957FB8 —
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 #957FB8 —
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 #957FB8 —
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 #957FB8 —
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 #957FB8 —
text.html.markdown, punctuation.definition.list_item.markdown #9da2af —
text.html.markdown markup.inline.raw.markdown #80838f —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #9da2af —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading, markup.inserted.git_gutter #957FB8 —
markup.italic #9da2af italic
markup.bold, markup.bold string #9da2af 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 #9da2af bold
markup.underline #957FB8 underline
markup.quote punctuation.definition.blockquote.markdown #9da2af —
string.other.link.title.markdown #FFFF —
string.other.link.description.title.markdown #80838f —
constant.other.reference.link.markdown #957FB8 —
markup.raw.block.fenced.markdown #00000050 —
punctuation.definition.fenced.markdown #00000050 —
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end #9da2af —
variable.language.fenced.markdown #9da2af —
meta.separator #65737E 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 }!` ;
}
v Low | Coding Theme