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 #f0717113 activityBar.activeBorder #f07171 activityBar.activeFocusBorder #f07171 activityBar.background #210000 activityBar.dropBorder #610000 activityBar.inactiveForeground #1ab133 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle invalid #f07171 — meta.embedded, source.groovy.embedded, meta.template.expression #21e441 — variable, support.variable.property.dom, support.variable.dom, support.variable.property, punctuation.separator.parameter, string.interpolated.pug variable #21e441 — comment, punctuation.definition.comment #A55555 —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.background #ffce6b
activityBarBadge.foreground #000000
badge.background #ffce6b
badge.foreground #000000
button.background #399ee6
button.foreground #000000
button.hoverBackground #2c7ab3
diffEditor.insertedTextBackground #78bd6530
diffEditor.removedTextBackground #f0717135
dropdown.background #3b0000
dropdown.border #450000
editor.background #2e0000
editor.foldBackground #ffce6b30
editor.foreground #21e441
editor.lineHighlightBackground #3b0000
editor.selectionBackground #f0717130
editorBracketMatch.background #f0717120
editorBracketMatch.border #bd5959
editorCursor.background #000000
editorCursor.foreground #f07171
editorError.foreground #f07171
editorGroup.border #210000
editorGroup.dropBackground #f0717130
editorGroupHeader.noTabsBackground #3b0000
editorGroupHeader.tabsBackground #3b0000
editorGutter.addedBackground #78bd65
editorGutter.deletedBackground #f07171
editorGutter.modifiedBackground #399ee6
editorHoverWidget.border #480000
editorIndentGuide.activeBackground #f07171
editorIndentGuide.background #480000
editorInfo.foreground #399ee6
editorLineNumber.activeForeground #ff2e2e
editorLineNumber.foreground #940000
editorLink.activeForeground #f07171
editorMarkerNavigation.background #2e0000
editorMarkerNavigationError.background #f07171
editorMarkerNavigationInfo.background #399ee6
editorMarkerNavigationWarning.background #ef7c2a
editorOverviewRuler.addedForeground #399ee6
editorOverviewRuler.border #480000
editorOverviewRuler.bracketMatchForeground #f07171
editorOverviewRuler.deletedForeground #399ee6
editorOverviewRuler.errorForeground #f07171
editorOverviewRuler.infoForeground #399ee6
editorOverviewRuler.modifiedForeground #399ee6
editorOverviewRuler.selectionHighlightForeground #e67c7c48
editorOverviewRuler.warningForeground #ef7c2a
editorPane.background #240000
editorRuler.foreground #480000
editorSuggestWidget.background #3b0000
editorSuggestWidget.border #480000
editorSuggestWidget.highlightForeground #a470d8
editorWarning.foreground #ef7c2a
editorWhitespace.foreground #610000
editorWidget.background #2e0000
editorWidget.resizeBorder #480000
errorForeground #f07171
extensionButton.prominentBackground #399ee6
extensionButton.prominentForeground #000000
extensionButton.prominentHoverBackground #2c7ab3
focusBorder #f07171
foreground #21e441
gitDecoration.addedResourceForeground #78bd65
gitDecoration.deletedResourceForeground #f07171
gitDecoration.modifiedResourceForeground #399ee6
gitDecoration.stageDeletedResourceForeground #f07171
gitDecoration.stageModifiedResourceForeground #399ee6
input.background #3b0000
input.border #450000
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 #f0717120
list.errorForeground #f07171
list.focusBackground #f0717130
list.highlightForeground #a470d8
list.hoverBackground #480000
list.inactiveSelectionBackground #f0717125
list.warningForeground #ef7c2a
menu.background #2e0000
menu.foreground #21e441
menu.selectionBackground #f07171DD
menu.selectionForeground #000000
menu.separatorBackground #610000
minimap.errorHighlight #f07171
minimap.selectionHighlight #f0717180
minimap.warningHighlight #ef7c2a
minimapGutter.addedBackground #78bd65
minimapGutter.deletedBackground #f07171
minimapGutter.modifiedBackground #399ee6
notebook.focusedRowBorder #f07171
notifications.background #2e0000
notificationsErrorIcon.foreground #f07171
notificationsInfoIcon.foreground #399ee6
notificationsWarningIcon.foreground #ef7c2a
panelTitle.activeBorder #f07171
peekViewResult.background #3b0000
peekViewTitle.background #210000
pickerGroup.border #140000
pickerGroup.foreground #f07171
problemsErrorIcon.foreground #f07171
problemsInfoIcon.foreground #399ee6
problemsWarningIcon.foreground #ef7c2a
progressBar.background #f07171
scrollbar.shadow #000000
scrollbarSlider.activeBackground #61000040
scrollbarSlider.background #7b000050
scrollbarSlider.hoverBackground #94000040
selection.background #f0717180
settings.modifiedItemIndicator #399ee6
sideBar.background #280000
sideBarSectionHeader.background #350000
statusBar.background #210000
statusBarItem.hoverBackground #3b0000
statusBarItem.prominentBackground #f07171
statusBarItem.prominentForeground #000000
statusBarItem.prominentHoverBackground #d66565
tab.activeBackground #2e0000
tab.activeBorder #f07171
tab.activeModifiedBorder #399ee6
tab.border #480000
tab.hoverBackground #480000
tab.inactiveBackground #3b0000
tab.lastPinnedBorder #f0717150
terminal.selectionBackground #f07171
terminalCursor.background #000000
terminalCursor.foreground #f07171
textLink.activeForeground #ffce6b
textLink.foreground #78bd65
textPreformat.foreground #399ee6
textSeparator.foreground #140000
titleBar.activeBackground #3b0000
titleBar.border #400000
titleBar.inactiveBackground #2e0000
widget.shadow #000000 string, punctuation.definition.string
constant.character.escape #78bd65 —
keyword, constant.language.import-export-all #fa8d3e —
entity.name.type, support.type.primitive, support.type.builtin, meta.type.annotation entity.name.type, meta.type.parameters entity.name.type #399ee6 —
keyword.control, storage, support.type, keyword.operator.expression, keyword.operator.new #78bd65 —
entity.name.function, support.class, support.function, new.expr entity.name.type, entity.other.inherited-class #ffce6b —
punctuation.definition.typeparameters, keyword.operator.type, keyword.operator.optional, source.tsx punctuation.section.embedded, source.jsx punctuation.section.embedded #4cbf99 —
constant.numeric, constant.language #a470d8 —
variable.parameter, parameter.variable, meta.function.parameter variable, source.rust meta.type_params.rust #a470d8 —
punctuation, meta.brace #148b28 —
comment.block.documentation entity.name.type #4cbf99 —
variable.language.this, variable.language.special.self #78bd65 —
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 #148b28 —
meta.attribute punctuation.definition.string #148b28 —
meta.tag entity.other.attribute-name, entity.other.attribute-name.html #fa8d3e —
constant.character.entity, punctuation.definition.entity #a470d8 —
entity.name.section.markdown, markup.heading.setext #fa8d3e —
punctuation.definition.list #fa8d3e —
meta.separator.markdown #fa8d3e —
markup.inline.raw #78bd65 —
meta.link punctuation.definition.string, meta.image punctuation.definition.string #148b28 —
link, markup.underline.link, constant.other.reference.link.markdown #ffce6b —
entity.name.tag.css, entity.name.tag.wildcard #f07171 —
entity.other.attribute-name.class, entity.other.attribute-name punctuation.definition.entity #fa8d3e —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, constant.other.color #78bd65 —
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity #ffce6b —
source.css constant.numeric #f07171 —
meta.property-name, support.type.property-name #a470d8 —
meta.property-value, meta.property-value constant.other, support.constant.property-value #ffce6b —
variable.parameter.url #a470d8 —
punctuation.definition.variable #21e441 —
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php #fa8d3e —
entity.name.section #ffce6b —
support.type.property-name.json #fa8d3e —
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*
Strawberry | Coding Theme
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 } !` ;
}