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 #13131A activityBar.border #13131A00 activityBar.dropBackground #FF1654 activityBar.foreground #CFDEE6 activityBarBadge.background #FF1654 activityBarBadge.foreground #CFDEE6 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle Global settings #CFDEE6 — string, string.quoted, support.type.property-name.json, source.elixir punctuation.definition.string, entity.other.inherited-class, source.elixir punctuation.definition.string #FF1654 — string.unquoted, meta.brace, object, punctuation.definition.string, punctuation.definition.parameters, punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array, punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list, variable.parameter.function.coffee, variable.other.readwrite.cs, entity.name.type.namespace.cs, source.js source.css meta.property-list, source.js source.css punctuation.section, source.js source.css punctuation.terminator.rule, source.js source.css punctuation.definition.entity.end.bracket, source.js source.css punctuation.definition.entity.begin.bracket, source.js source.css punctuation.separator.key-value, source.js source.css punctuation.definition.attribute-selector, source.js source.css meta.property-list, source.js source.css meta.property-list punctuation.separator.comma, source.ts source.css punctuation.section, source.ts source.css punctuation.terminator.rule, source.ts source.css punctuation.definition.entity.end.bracket, source.ts source.css punctuation.definition.entity.begin.bracket, source.ts source.css punctuation.separator.key-value, source.ts source.css punctuation.definition.attribute-selector, source.ts source.css meta.property-list, source.ts source.css meta.property-list punctuation.separator.comma, source.go meta.function-call.go, variable.qraphql, terminator.js, meta.js punctuation.definition.js, variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other, variable.other.readwrite.js, meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx, variable.other.object.js, variable.other.object.jsx, meta.object-literal.key.js, meta.object-literal.key.jsx, variable.object.property.js, variable.object.property.jsx, variable.js, variable.other.js, support.class.js, variable.other.ruby, string.other.link.title.markdown, string.other.link.description.markdown, variable.other.php, meta.function-call.php punctuation, meta.function-call.python, meta.function-call.generic.python, punctuation.python, variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass, source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts, meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block, variable.parameter.handlebars
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
badge.background
#FF1654
badge.foreground #CFDEE6
breadcrumb.activeSelectionForeground #CFDEE6
breadcrumb.focusForeground #CFDEE6
breadcrumb.foreground #484E5B
breadcrumbPicker.background #13131A
button.background #FF1654
button.foreground #CFDEE6
button.hoverBackground #FF1654
contrastActiveBorder #13131A00
contrastBorder #13131A00
debugExceptionWidget.background #13131A
debugExceptionWidget.border #13131A00
debugToolBar.background #13131A
descriptionForeground #13131A00
diffEditor.insertedTextBackground #70C1B3
diffEditor.insertedTextBorder #70C1B3
diffEditor.removedTextBackground #FF1654
diffEditor.removedTextBorder #13131A00
dropdown.background #13131A
dropdown.border #13131A00
dropdown.foreground #CFDEE6
editor.background #13131A
editor.findMatchBackground #FF1654
editor.findMatchHighlightBackground #2E3248
editor.findRangeHighlightBackground #13131A00
editor.foreground #CFDEE6
editor.hoverHighlightBackground #FF1654
editor.inactiveSelectionBackground #FF1654
editor.lineHighlightBackground #0003
editor.lineHighlightBorder #13131A00
editor.rangeHighlightBackground #FF1654
editor.selectionBackground #484E5B
editor.selectionHighlightBackground #383D51
editor.wordHighlightBackground #32374D
editor.wordHighlightStrongBackground #2E3250
editorActiveLineNumber.foreground #CFDEE6
editorBracketMatch.background #13131A00
editorBracketMatch.border #13131A00
editorCodeLens.foreground #F3FFBD
editorCursor.background #13131A00
editorCursor.foreground #FF1654
editorError.border #13131A00
editorError.foreground #FF1654
editorGroup.background #13131A
editorGroup.border #13131A00
editorGroup.dropBackground #FF1654
editorGroupHeader.noTabsBackground #13131A
editorGroupHeader.tabsBackground #13131A
editorGroupHeader.tabsBorder #13131A00
editorGutter.addedBackground #70C1B3
editorGutter.background #13131A00
editorGutter.deletedBackground #FF1654
editorGutter.modifiedBackground #F3FFBD
editorHoverWidget.background #13131A
editorHoverWidget.border #13131A00
editorIndentGuide.background #484E5B
editorLineNumber.activeForeground #CFDEE6
editorLineNumber.foreground #484E5B
editorLink.activeForeground #13131A00
editorMarkerNavigation.background #31364a
editorMarkerNavigationError.background #FF1654
editorMarkerNavigationWarning.background #F3FFBD
editorOverviewRuler.commonContentForeground #FF1654
editorOverviewRuler.currentContentForeground #FF1654
editorOverviewRuler.incomingContentForeground #FF1654
editorRuler.foreground #13131A00
editorSuggestWidget.background #2C3043
editorSuggestWidget.border #13131A00
editorSuggestWidget.foreground #CFDEE6
editorSuggestWidget.highlightForeground #CFDEE6
editorSuggestWidget.selectedBackground #FF1654
editorWarning.border #13131A00
editorWarning.foreground #F3FFBD
editorWhitespace.foreground #13131A00
editorWidget.background #31364a
editorWidget.border #13131A00
errorForeground #FF1654
extensionButton.prominentBackground #FF1654
extensionButton.prominentForeground #CFDEE6
extensionButton.prominentHoverBackground #FF1654
focusBorder #13131A00
foreground #CFDEE6
gitDecoration.conflictingResourceForeground #F3FFBD
gitDecoration.deletedResourceForeground #FF1654
gitDecoration.ignoredResourceForeground #484E5B90
gitDecoration.modifiedResourceForeground #F3FFBD
gitDecoration.untrackedResourceForeground #70C1B3
input.background #484E5B
input.border #13131A00
input.foreground #CFDEE6
input.placeholderForeground #CFDEE6
inputOption.activeBorder #13131A00
inputValidation.errorBackground #FF1654f2
inputValidation.errorBorder #13131A00
inputValidation.infoBackground #CFDEE6
inputValidation.infoBorder #13131A00
inputValidation.warningBackground #F3FFBD
inputValidation.warningBorder #13131A00
list.activeSelectionBackground #2E3245
list.activeSelectionForeground #CFDEE6
list.dropBackground #2E3245
list.focusBackground #2e3249
list.focusForeground #CFDEE6
list.highlightForeground #CFDEE6
list.hoverBackground #2E3245
list.hoverForeground #CFDEE6
list.inactiveSelectionBackground #2E3245
list.inactiveSelectionForeground #CFDEE6
merge.border #13131A00
merge.currentContentBackground #13131A00
merge.currentHeaderBackground #FF1654
merge.incomingContentBackground #13131A00
merge.incomingHeaderBackground #FF1654
notificationLink.foreground #70C1B3
notifications.background #13131A
notifications.foreground #CFDEE6
panel.background #13131A
panel.border #13131A00
panelTitle.activeBorder #FF1654
panelTitle.activeForeground #CFDEE6
panelTitle.inactiveForeground #CFDEE6
peekView.border #13131A00
peekViewEditor.background #13131A
peekViewEditor.matchHighlightBackground #FF1654
peekViewResult.background #2E3245
peekViewResult.fileForeground #CFDEE6
peekViewResult.lineForeground #CFDEE6
peekViewResult.matchHighlightBackground #FF1654
peekViewResult.selectionBackground #2E3250
peekViewResult.selectionForeground #CFDEE6
peekViewTitle.background #13131A
peekViewTitleDescription.foreground #484E5B
peekViewTitleLabel.foreground #CFDEE6
pickerGroup.border #13131A00
pickerGroup.foreground #B2DBBF
progress.background #FF1654
scrollbar.shadow #13131A00
scrollbarSlider.activeBackground #CFDEE6
scrollbarSlider.background #CFDEE6
scrollbarSlider.hoverBackground #CFDEE6
selection.background #484E5B
sideBar.background #13131A
sideBar.border #13131A00
sideBar.foreground #CFDEE6
sideBarSectionHeader.background #13131A
sideBarSectionHeader.foreground #CFDEE6
sideBarTitle.foreground #CFDEE6
statusBar.background #13131A
statusBar.border #13131A00
statusBar.debuggingBackground #202431
statusBar.debuggingBorder #13131A00
statusBar.debuggingForeground #13131A00
statusBar.foreground #484E5B
statusBar.noFolderBackground #13131A
statusBar.noFolderBorder #13131A00
statusBar.noFolderForeground #13131A00
statusBarItem.activeBackground #202431
statusBarItem.hoverBackground #202431
statusBarItem.prominentBackground #202431
statusBarItem.prominentHoverBackground #202431
tab.activeBackground #13131A
tab.activeBorder #CFDEE6
tab.activeForeground #CFDEE6
tab.border #13131A00
tab.inactiveBackground #13131A
tab.inactiveForeground #CFDEE6
tab.unfocusedActiveBorder #13131A00
tab.unfocusedActiveForeground #13131A00
tab.unfocusedInactiveForeground #13131A00
terminal.ansiBlack #484E5B
terminal.ansiBlue #FF1654
terminal.ansiBrightBlack #484E5B
terminal.ansiBrightBlue #FF1654
terminal.ansiBrightCyan #CFDEE6
terminal.ansiBrightGreen #70C1B3
terminal.ansiBrightMagenta #FF1654
terminal.ansiBrightRed #FF1654
terminal.ansiBrightWhite #CFDEE6
terminal.ansiBrightYellow #F3FFBD
terminal.ansiCyan #CFDEE6
terminal.ansiGreen #70C1B3
terminal.ansiMagenta #FF1654
terminal.ansiRed #FF1654
terminal.ansiWhite #CFDEE6
terminal.ansiYellow #F3FFBD
titleBar.activeBackground #13131A
titleBar.activeForeground #CFDEE6
titleBar.inactiveBackground #13131A00
titleBar.inactiveForeground #13131A00
walkThrough.embeddedEditorBackground #13131A
welcomePage.buttonBackground #13131A00
welcomePage.buttonHoverBackground #13131A00
widget.shadow #13131A support.constant.math, entity.other.attribute-name.handlebars variable.parameter.handlebars, entity.name.function.decorator.python, variable.other.global.php punctuation.definition.variable, variable.other.global.php, support.class.php, markup.bold.markdown, support.constant.json, entity.name.type.js, entity.name.type.module.js, entity.other.attribute-name.id.html, meta.class entity.name.type.class.js, entity.other.attribute-name.id.html, source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir, source.elixir entity.name.function, bold, support.variable.dom, support.type, support.class, entity.name.tag.custom, entity.other.attribute-name, entity.name.class, meta.class entity.name.type.class, variable, constant.other.color, keyword.other.unit, entity.other.attribute-name.id, keyword.other.unit.css, constant.length.units.css, keyword.other.unit.less, constant.length.units.less, keyword.other.unit.scss, constant.length.units.scss, keyword.other.unit.sass, constant.length.units.sass, constant.numeric, constant.character.numeric, constant.character.escape, constant.other.color.rgb-value punctuation.definition.constant, meta.attribute-selector.css entity.other.attribute-name.attribute, meta.attribute-selector.less entity.other.attribute-name.attribute, meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute, punctuation.definition.string, string.template punctuation.definition.string #FF1654 —
constant.language, punctuation.definition.constant, variable.other.constant, constant.character, constant.other, entity.name.function, support.function, support.constant, entity.name.function, variable.function, meta.function-call, entity.name.type.class.cs, storage.type.cs, source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir, source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir, meta.method.declaration storage.type.js, source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable, support.class.node.ts, support.class.node.tsx, meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx, meta.tag.js meta.jsx.children.tsx, source.python variable.language.special, entity.other.attribute-value.handlebars variable.parameter.handlebars, variable.parameter.function.python, meta.function-call.arguments.python, variable.parameter.function.js, variable.parameter, beginning.punctuation.definition.list.markdown, punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string, markup.heading.markdown #B2DBBF —
string.regexp, string.regexp keyword.other, support.type.vendored.property-name, support.constant.vendored.property-value, support.type.property-name, meta.property-list entity.name.tag, meta.property-name, raw, meta.structure.dictionary.value.json string.quoted.double, string.quoted.double.json punctuation.definition.string.json, markup.inline.raw.markdown #FF1654 —
meta.function punctuation.separator.comma, entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc, meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type #CFDEE6 —
punctuation.accessor, keyword, storage, storage.type, meta.var.expr storage.type, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx, meta.class meta.method.declaration meta.var.expr storage.type.js, keyword.operator.relational, keyword.operator.assignment, meta.delimiter.period, meta.selector, entity.name.tag.doctype, meta.tag.sgml.doctype, keyword.operator.logical, keyword.operator.comparison, source.elixir .punctuation.binary.elixir #B2DBBF —
punctuation.definition.tag, meta.tag, support.constant.meta.property-value, keyword.operator, variable.parameter.function, keyword.control.operator, variable.other.property, variable.other.object.property, support.constant, keyword.other.special-method, keyword.other.new, support.function, support.variable.property, variable.assignment.coffee, punctuation.definition.tag.html, constant.language.symbol.hashkey.ruby, entity.name.tag.yaml, entity.other.attribute-name.handlebars, variable.other.jsdoc, variable.other.phpdoc, entity.name.type.ts, entity.name.type.tsx #CFDEE6 —
entity.name.tag support.class.component, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html, meta.property-list entity.name.tag.reference, constant.language.boolean, variable.instance, variable.other.instance, variable.reaedwrite.instance, variable.other.readwrite.instance, variable.language, variable.interpolation, punctuation.section.embedded, entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass, entity.name.tag.less, meta.structure.dictionary.json meta.structure.dictionary.value constant.language, punctuation.definition.metadata.markdown, entity.name.tag.scss, entity.name.tag.sass, constant.language.null, constant.language.python, markup.underline.link.markdown, markup.underline.link.image.markdown, string.template meta.template.expression #FF1654 —
invalid.deprecated #CFDEE6 —
invalid.unimplemented #CFDEE6 —
quote, markup.quote.markdown, comment, comment.line.double-slash #247BA0 italic
italic, meta.tag.sgml.doctype.html, markup.italic.markdown #B2DBBF italic
meta.tag.js meta.embedded.expression.js punctuation.section.embedded.begin.js, meta.tag.js meta.embedded.expression.js punctuation.section.embedded.end.js, meta.property-list.css meta.property-value.css variable.other.less, punctuation.section.embedded.begin.js.jsx, punctuation.section.embedded.end.js.jsx, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.type, punctuation.section.embedded.js, punctuation.definintion.string, punctuation — normal
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 }!` ;
}
Topl Theme | Coding Theme