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.activeBackground #ffb3ba13 activityBar.activeBorder #ffb3ba activityBar.activeFocusBorder #ffb3ba activityBar.background #222222 activityBar.dropBorder #ffb3ba activityBar.inactiveForeground #a6a6a6 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle invalid #F07171 — meta.embedded, source.groovy.embedded, meta.template.expression #D9D9D9 — variable, support.variable.property.dom, support.variable.dom, support.variable.property, punctuation.separator.parameter, string.interpolated.pug variable #D9D9D9 — comment, punctuation.definition.comment #888888 —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.background #bae1ff
activityBarBadge.foreground #000000
badge.background #bae1ff
badge.foreground #000000
button.background #baffc9
button.foreground #000000
button.hoverBackground #9ed9ab
checkbox.background #3c3c3c
diffEditor.insertedTextBackground #78BD6530
diffEditor.removedTextBackground #F0717135
dropdown.background #3c3c3c
dropdown.border #464646
editor.background #2f2f2f
editor.findMatchBorder #ffb3ba
editor.findMatchHighlightBackground #D9D9D930
editor.foldBackground #ffdfba30
editor.foreground #D9D9D9
editor.lineHighlightBackground #3c3c3c
editor.selectionBackground #ffb3ba30
editorBracketMatch.background #2a2a2a
editorBracketMatch.border #cc8f94
editorCursor.background #000000
editorCursor.foreground #ffb3ba
editorError.foreground #F07171
editorGroup.border #222222
editorGroup.dropBackground #ffb3ba30
editorGroupHeader.noTabsBackground #3c3c3c
editorGroupHeader.tabsBackground #3c3c3c
editorGutter.addedBackground #78BD65
editorGutter.deletedBackground #F07171
editorGutter.modifiedBackground #399EE6
editorHoverWidget.border #494949
editorIndentGuide.activeBackground #ffb3ba
editorIndentGuide.background #494949
editorInfo.foreground #399EE6
editorLineNumber.activeForeground #afafaf
editorLineNumber.foreground #626262
editorLink.activeForeground #ffb3ba
editorMarkerNavigation.background #2f2f2f
editorMarkerNavigationError.background #F07171
editorMarkerNavigationInfo.background #399EE6
editorMarkerNavigationWarning.background #EF7C2A
editorOverviewRuler.addedForeground #399EE6
editorOverviewRuler.border #494949
editorOverviewRuler.bracketMatchForeground #ffb3ba
editorOverviewRuler.deletedForeground #399EE6
editorOverviewRuler.errorForeground #F07171
editorOverviewRuler.infoForeground #399EE6
editorOverviewRuler.modifiedForeground #399EE6
editorOverviewRuler.selectionHighlightForeground #ffb3ba
editorOverviewRuler.warningForeground #EF7C2A
editorPane.background #252525
editorRuler.foreground #494949
editorSuggestWidget.background #3c3c3c
editorSuggestWidget.border #494949
editorSuggestWidget.highlightForeground #baffc9
editorWarning.foreground #EF7C2A
editorWhitespace.foreground #626262
editorWidget.background #2f2f2f
editorWidget.resizeBorder #494949
errorForeground #F07171
extensionButton.prominentBackground #baffc9
extensionButton.prominentForeground #000000
extensionButton.prominentHoverBackground #95cca1
focusBorder #ffb3ba
foreground #D9D9D9
gitDecoration.addedResourceForeground #78BD65
gitDecoration.deletedResourceForeground #F07171
gitDecoration.modifiedResourceForeground #399EE6
gitDecoration.stageDeletedResourceForeground #F07171
gitDecoration.stageModifiedResourceForeground #399EE6
input.background #3c3c3c
input.border #464646
inputValidation.errorBackground #F0717190
inputValidation.errorBorder #F07171
inputValidation.errorForeground #000000
inputValidation.infoBackground #399EE690
inputValidation.infoBorder #399EE6
inputValidation.infoForeground #000000
inputValidation.warningBackground #EF7C2A90
inputValidation.warningBorder #EF7C2A
inputValidation.warningForeground #000000
list.activeSelectionBackground #ffb3ba20
list.errorForeground #F07171
list.focusBackground #ffb3ba30
list.highlightForeground #baffc9
list.hoverBackground #3c3c3c
list.inactiveSelectionBackground #ffb3ba25
list.warningForeground #EF7C2A
menu.background #2f2f2f
menu.foreground #D9D9D9
menu.selectionBackground #ffb3baDD
menu.selectionForeground #000000
menu.separatorBackground #626262
minimap.errorHighlight #F07171
minimap.selectionHighlight #ffb3ba80
minimap.warningHighlight #EF7C2A
minimapGutter.addedBackground #78BD65
minimapGutter.deletedBackground #F07171
minimapGutter.modifiedBackground #399EE6
notebook.focusedRowBorder #ffb3ba
notifications.background #2f2f2f
notificationsErrorIcon.foreground #F07171
notificationsInfoIcon.foreground #399EE6
notificationsWarningIcon.foreground #EF7C2A
panel.dropBorder #ffb3ba
panelTitle.activeBorder #ffb3ba
peekViewResult.background #3c3c3c
peekViewTitle.background #222222
pickerGroup.border #161616
pickerGroup.foreground #ffb3ba
problemsErrorIcon.foreground #F07171
problemsInfoIcon.foreground #399EE6
problemsWarningIcon.foreground #EF7C2A
progressBar.background #ffb3ba
scrollbar.shadow #161616
scrollbarSlider.activeBackground #62626240
scrollbarSlider.background #7c7c7c50
scrollbarSlider.hoverBackground #95959540
selection.background #ffb3ba80
settings.modifiedItemIndicator #399EE6
sideBar.background #292929
sideBarSectionHeader.background #363636
statusBar.background #222222
statusBarItem.hoverBackground #3c3c3c
statusBarItem.prominentBackground #ffb3ba
statusBarItem.prominentForeground #000000
statusBarItem.prominentHoverBackground #e6a1a7
tab.activeBackground #2f2f2f
tab.activeBorder #ffb3ba
tab.activeModifiedBorder #399EE6
tab.border #494949
tab.hoverBackground #494949
tab.inactiveBackground #3c3c3c
tab.lastPinnedBorder #ffb3ba50
terminal.selectionBackground #ffb3ba
terminalCursor.background #000000
terminalCursor.foreground #ffb3ba
textLink.activeForeground #ffdfba
textLink.foreground #ffb3ba
textPreformat.foreground #bae1ff
textSeparator.foreground #161616
titleBar.activeBackground #3c3c3c
titleBar.border #414141
titleBar.inactiveBackground #2f2f2f
widget.shadow #161616 string, punctuation.definition.string
constant.character.escape #ffb3ba —
keyword, constant.language.import-export-all #ffffba —
entity.name.type, support.type.primitive, support.type.builtin, meta.type.annotation entity.name.type, meta.type.parameters entity.name.type #baffc9 —
keyword.control, keyword.operator, storage, support.type, keyword.operator.expression, keyword.operator.new #ffb3ba —
entity.name.function, support.class, support.function, new.expr entity.name.type, entity.other.inherited-class #ffdfba —
punctuation.definition.typeparameters, keyword.operator.type, keyword.operator.optional, punctuation.definition.template-expression, source.tsx punctuation.section.embedded, source.jsx punctuation.section.embedded #ffffba —
constant.numeric, constant.language #bae1ff —
variable.parameter, parameter.variable, meta.function.parameter variable, source.rust meta.type_params.rust #bae1ff —
punctuation, meta.brace #808080 —
comment.block.documentation entity.name.type #ffffba —
variable.language.this, variable.language.special.self #ffb3ba —
meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype punctuation.definition.tag, meta.tag.metadata.doctype string, meta.tag.metadata.doctype entity.other.attribute-name.html, meta.tag.sgml.doctype #808080 —
meta.attribute punctuation.definition.string #808080 —
meta.tag entity.other.attribute-name, entity.other.attribute-name.html #ffffba —
constant.character.entity, punctuation.definition.entity #bae1ff —
entity.name.section.markdown, markup.heading.setext #ffffba —
punctuation.definition.list #ffffba —
meta.separator.markdown #ffffba —
markup.inline.raw #ffb3ba —
meta.link punctuation.definition.string, meta.image punctuation.definition.string #808080 —
link, markup.underline.link, constant.other.reference.link.markdown #ffdfba —
entity.name.tag.css, entity.name.tag.wildcard #baffc9 —
entity.other.attribute-name.class, entity.other.attribute-name punctuation.definition.entity #ffffba —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, constant.other.color #ffb3ba —
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity #ffdfba —
source.css constant.numeric #baffc9 —
meta.property-name, support.type.property-name #bae1ff —
meta.property-value, meta.property-value constant.other, support.constant.property-value #ffdfba —
variable.parameter.url #bae1ff —
punctuation.definition.variable #D9D9D9 —
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php #ffffba —
entity.name.section #ffdfba —
support.type.property-name.json #ffffba —
meta.diff.header #399EE6 italic
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 } !` ;
}
pastella | Coding Theme