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 #24242A activityBar.border #24242A00 activityBar.dropBackground #E56F92 activityBar.foreground #DADDEE activityBarBadge.background #E56F92 activityBarBadge.foreground #DADDEE tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle Global settings #A6A9B7 — string, string.quoted, support.type.property-name.json, source.elixir punctuation.definition.string, entity.other.inherited-class, source.elixir punctuation.definition.string #8CD7AA — 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, string.template punctuation.definition.string, 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.
Topl Theme | Coding Theme
badge.background
#E56F92
badge.foreground #DADDEE
breadcrumb.activeSelectionForeground #DADDEE
breadcrumb.focusForeground #A6A9B7
breadcrumb.foreground #484E5B
breadcrumbPicker.background #24242A
button.background #E56F92
button.foreground #DADDEE
button.hoverBackground #E56F92
contrastActiveBorder #24242A00
contrastBorder #24242A00
debugExceptionWidget.background #24242A
debugExceptionWidget.border #24242A00
debugToolBar.background #24242A
descriptionForeground #24242A00
diffEditor.insertedTextBackground #8CD7AA
diffEditor.insertedTextBorder #8CD7AA
diffEditor.removedTextBackground #E56F92
diffEditor.removedTextBorder #24242A00
dropdown.background #24242A
dropdown.border #24242A00
dropdown.foreground #DADDEE
editor.background #24242A
editor.findMatchBackground #E56F92
editor.findMatchHighlightBackground #2E3248
editor.findRangeHighlightBackground #24242A00
editor.foreground #A6A9B7
editor.hoverHighlightBackground #E56F92
editor.inactiveSelectionBackground #E56F92
editor.lineHighlightBackground #0003
editor.lineHighlightBorder #24242A00
editor.rangeHighlightBackground #E56F92
editor.selectionBackground #484E5B
editor.selectionHighlightBackground #383D51
editor.wordHighlightBackground #32374D
editor.wordHighlightStrongBackground #2E3250
editorActiveLineNumber.foreground #DADDEE
editorBracketMatch.background #24242A00
editorBracketMatch.border #24242A00
editorCodeLens.foreground #E9967E
editorCursor.background #24242A00
editorCursor.foreground #E56F92
editorError.border #24242A00
editorError.foreground #E56F92
editorGroup.background #24242A
editorGroup.border #24242A00
editorGroup.dropBackground #E56F92
editorGroupHeader.noTabsBackground #24242A
editorGroupHeader.tabsBackground #24242A
editorGroupHeader.tabsBorder #24242A00
editorGutter.addedBackground #8CD7AA
editorGutter.background #24242A00
editorGutter.deletedBackground #E56F92
editorGutter.modifiedBackground #E9967E
editorHoverWidget.background #24242A
editorHoverWidget.border #24242A00
editorIndentGuide.background #484E5B
editorLineNumber.activeForeground #DADDEE
editorLineNumber.foreground #484E5B
editorLink.activeForeground #24242A00
editorMarkerNavigation.background #31364a
editorMarkerNavigationError.background #E56F92
editorMarkerNavigationWarning.background #E9967E
editorOverviewRuler.commonContentForeground #E56F92
editorOverviewRuler.currentContentForeground #E56F92
editorOverviewRuler.incomingContentForeground #E56F92
editorRuler.foreground #24242A00
editorSuggestWidget.background #2C3043
editorSuggestWidget.border #24242A00
editorSuggestWidget.foreground #A6A9B7
editorSuggestWidget.highlightForeground #DADDEE
editorSuggestWidget.selectedBackground #E56F92
editorWarning.border #24242A00
editorWarning.foreground #E9967E
editorWhitespace.foreground #24242A00
editorWidget.background #31364a
editorWidget.border #24242A00
errorForeground #E56F92
extensionButton.prominentBackground #E56F92
extensionButton.prominentForeground #DADDEE
extensionButton.prominentHoverBackground #E56F92
focusBorder #24242A00
foreground #DADDEE
gitDecoration.conflictingResourceForeground #E9967E
gitDecoration.deletedResourceForeground #E56F92
gitDecoration.ignoredResourceForeground #484E5B90
gitDecoration.modifiedResourceForeground #E9967E
gitDecoration.untrackedResourceForeground #8CD7AA
input.background #484E5B
input.border #24242A00
input.foreground #DADDEE
input.placeholderForeground #DADDEE
inputOption.activeBorder #24242A00
inputValidation.errorBackground #E56F92f2
inputValidation.errorBorder #24242A00
inputValidation.infoBackground #7ABCE4
inputValidation.infoBorder #24242A00
inputValidation.warningBackground #E9967E
inputValidation.warningBorder #24242A00
list.activeSelectionBackground #2E3245
list.activeSelectionForeground #DADDEE
list.dropBackground #2E3245
list.focusBackground #2e3249
list.focusForeground #DADDEE
list.highlightForeground #DADDEE
list.hoverBackground #2E3245
list.hoverForeground #DADDEE
list.inactiveSelectionBackground #2E3245
list.inactiveSelectionForeground #DADDEE
merge.border #24242A00
merge.currentContentBackground #24242A00
merge.currentHeaderBackground #E56F92
merge.incomingContentBackground #24242A00
merge.incomingHeaderBackground #E56F92
notificationLink.foreground #8CD7AA
notifications.background #24242A
notifications.foreground #DADDEE
panel.background #24242A
panel.border #24242A00
panelTitle.activeBorder #E56F92
panelTitle.activeForeground #DADDEE
panelTitle.inactiveForeground #A6A9B7
peekView.border #24242A00
peekViewEditor.background #24242A
peekViewEditor.matchHighlightBackground #E56F92
peekViewResult.background #2E3245
peekViewResult.fileForeground #DADDEE
peekViewResult.lineForeground #DADDEE
peekViewResult.matchHighlightBackground #E56F92
peekViewResult.selectionBackground #2E3250
peekViewResult.selectionForeground #DADDEE
peekViewTitle.background #24242A
peekViewTitleDescription.foreground #484E5B
peekViewTitleLabel.foreground #DADDEE
pickerGroup.border #24242A00
pickerGroup.foreground #C488EC
progress.background #E56F92
scrollbar.shadow #24242A00
scrollbarSlider.activeBackground #DADDEE
scrollbarSlider.background #A6A9B7
scrollbarSlider.hoverBackground #DADDEE
selection.background #484E5B
sideBar.background #24242A
sideBar.border #24242A00
sideBar.foreground #DADDEE
sideBarSectionHeader.background #24242A
sideBarSectionHeader.foreground #DADDEE
sideBarTitle.foreground #DADDEE
statusBar.background #24242A
statusBar.border #24242A00
statusBar.debuggingBackground #202431
statusBar.debuggingBorder #24242A00
statusBar.debuggingForeground #24242A00
statusBar.foreground #484E5B
statusBar.noFolderBackground #24242A
statusBar.noFolderBorder #24242A00
statusBar.noFolderForeground #24242A00
statusBarItem.activeBackground #202431
statusBarItem.hoverBackground #202431
statusBarItem.prominentBackground #202431
statusBarItem.prominentHoverBackground #202431
tab.activeBackground #24242A
tab.activeBorder #DADDEE
tab.activeForeground #DADDEE
tab.border #24242A00
tab.inactiveBackground #24242A
tab.inactiveForeground #A6A9B7
tab.unfocusedActiveBorder #24242A00
tab.unfocusedActiveForeground #24242A00
tab.unfocusedInactiveForeground #24242A00
terminal.ansiBlack #484E5B
terminal.ansiBlue #E56F92
terminal.ansiBrightBlack #484E5B
terminal.ansiBrightBlue #E56F92
terminal.ansiBrightCyan #7ABCE4
terminal.ansiBrightGreen #8CD7AA
terminal.ansiBrightMagenta #E56F92
terminal.ansiBrightRed #E56F92
terminal.ansiBrightWhite #DADDEE
terminal.ansiBrightYellow #E9967E
terminal.ansiCyan #7ABCE4
terminal.ansiGreen #8CD7AA
terminal.ansiMagenta #E56F92
terminal.ansiRed #E56F92
terminal.ansiWhite #DADDEE
terminal.ansiYellow #E9967E
titleBar.activeBackground #24242A
titleBar.activeForeground #DADDEE
titleBar.inactiveBackground #24242A00
titleBar.inactiveForeground #24242A00
walkThrough.embeddedEditorBackground #24242A
welcomePage.buttonBackground #24242A00
welcomePage.buttonHoverBackground #24242A00
widget.shadow #24242A 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 #E9967E —
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 #E9967E —
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 #79AAEB —
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 #8CD7AA —
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 #DADDEE —
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 #C488EC —
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 #7ABCE4 —
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 #E56F92 —
invalid.deprecated #DADDEE —
invalid.unimplemented #DADDEE —
quote, markup.quote.markdown, comment, comment.line.double-slash #484E5B italic
italic, meta.tag.sgml.doctype.html, markup.italic.markdown #79AAEB 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 } ! ` ;
}