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 #1A1C22 activityBar.border #252627 activityBar.foreground #ffc83f activityBarBadge.background #c48909 activityBarBadge.foreground #22252e badge.background #8C00FF tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle #d3d3d3 — comment, markup.quote.markdown, meta.diff, meta.diff.header #5f6167 — meta.template.expression.js, constant.name.attribute.tag.jade, punctuation.definition.metadata.markdown, punctuation.definition.string.end.markdown, punctuation.definition.string.begin.markdown #d3d3d3 — variable, support.variable, entity.name.tag.yaml, constant.character.entity.html, source.css entity.name.tag.reference, beginning.punctuation.definition.list.markdown, source.css entity.other.attribute-name.parent-selector, meta.structure.dictionary.json support.type.property-name
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
badge.foreground
#20232B
button.background #ff8c1e
button.hoverBackground #3a69d8
debugExceptionWidget.background #FF9F2E60
debugExceptionWidget.border #FF9F2E60
debugToolBar.background #20232A
diffEditor.insertedTextBackground #29BF1220
diffEditor.removedTextBackground #F21B3F20
dropdown.background #2b303b
dropdown.border #363c49
editor.background #22252e
editor.findMatchBackground #f39d12d7
editor.findMatchHighlightBackground #59b8b377
editor.foreground #d3d3d3
editor.hoverHighlightBackground #373941
editor.lineHighlightBackground #23262e
editor.lineHighlightBorder #23262e
editor.rangeHighlightBackground #372F3C
editor.selectionBackground #3D4352
editor.selectionHighlightBackground #4F435580
editor.wordHighlightBackground #4F4355
editor.wordHighlightStrongBackground #dbcc4580
editorBracketMatch.background #746f77
editorBracketMatch.border #746f77
editorCodeLens.foreground #746f77
editorCursor.foreground #FFF
editorError.foreground #FC644D
editorGroup.dropBackground #495061d7
editorGroupHeader.tabsBackground #1A1C22
editorGutter.addedBackground #9BC53DBB
editorGutter.deletedBackground #FC644DBB
editorGutter.modifiedBackground #5BC0EBBB
editorHoverWidget.background #373941
editorHoverWidget.border #ff8c1e
editorIndentGuide.activeBackground #585C66
editorIndentGuide.background #333844
editorLineNumber.foreground #746f77
editorLink.activeForeground #3B79C7
editorOverviewRuler.border #1B1D23
editorRuler.foreground #4F4355
editorSuggestWidget.background #20232A
editorSuggestWidget.border #372F3C
editorSuggestWidget.selectedBackground #373941
editorWarning.foreground #FF9F2E
editorWhitespace.foreground #333844
editorWidget.background #20232A
errorForeground #FC644D
extensionButton.prominentBackground #3a69d8
extensionButton.prominentHoverBackground #7807d4b0
focusBorder #746f77
foreground #d3d3d3
input.background #2b303b
input.placeholderForeground #746f77
inputOption.activeBorder #C668BA
inputValidation.errorBackground #D65343
inputValidation.errorBorder #D65343
inputValidation.infoBackground #3A6395
inputValidation.infoBorder #3A6395
inputValidation.warningBackground #DE9237
inputValidation.warningBorder #DE9237
list.activeSelectionBackground #22252e
list.activeSelectionForeground #0087ff
list.dropBackground #3a404e
list.focusBackground #282b35
list.focusForeground #eee
list.hoverBackground #1A1C22
list.hoverForeground #eee
list.inactiveSelectionBackground #1A1C22
list.inactiveSelectionForeground #0087ff
merge.currentContentBackground #F9267240
merge.currentHeaderBackground #F92672
merge.incomingContentBackground #3B79C740
merge.incomingHeaderBackground #3B79C7BB
notebook.cellEditorBackground #1A1C22
panel.background #1d2027
panel.border #1B1D23
panelTitle.activeBorder #22252e
panelTitle.inactiveForeground #746f77
peekView.border #22252e
peekViewEditor.background #1A1C22
peekViewEditor.matchHighlightBackground #FF9F2E60
peekViewResult.background #1A1C22
peekViewResult.matchHighlightBackground #FF9F2E60
peekViewResult.selectionBackground #22252e
peekViewTitle.background #1A1C22
peekViewTitleDescription.foreground #746f77
pickerGroup.border #4F4355
pickerGroup.foreground #746f77
progressBar.background #C668BA
scrollbar.shadow #22252e
scrollbarSlider.activeBackground #3A3F4CCC
scrollbarSlider.background #3A3F4C77
scrollbarSlider.hoverBackground #3A3F4CAA
selection.background #746f77
sideBar.background #22252e
sideBar.border #272525
sideBar.foreground #776f72
sideBarSectionHeader.background #22252e
sideBarTitle.foreground #0087ff
statusBar.background #22252e
statusBar.debuggingBackground #FC644D
statusBar.noFolderBackground #22252e
statusBarItem.activeBackground #ff8c1e
statusBarItem.hoverBackground #997708
statusBarItem.prominentBackground #997708
statusBarItem.prominentHoverBackground #ff8c1e
tab.activeBackground #22252e
tab.activeForeground #0087ff
tab.inactiveBackground #1A1C22
tab.inactiveForeground #746f77
terminal.ansiBlue #515cfa
terminal.ansiBrightBlue #ee2dc4
terminal.ansiBrightCyan #0087ff
terminal.ansiBrightGreen #7267CB
terminal.ansiBrightMagenta #ff00aa
terminal.ansiBrightRed #ee5d43
terminal.ansiBrightYellow #8C00FF
terminal.ansiCyan #0087ff
terminal.ansiGreen #06c5ac
terminal.ansiMagenta #ff00aa
terminal.ansiRed #ee5d43
terminal.ansiYellow #8C00FF
terminalCursor.background #22252e
terminalCursor.foreground #8C00FF
titleBar.activeBackground #22252e
walkThrough.embeddedEditorBackground #22252e
widget.shadow #14151A #0087ff
markup.bold, constant.numeric, meta.group.regexp, constant.other.php, support.constant.ext.php, constant.other.class.php, support.constant.core.php, fenced_code.block.language, constant.other.caps.python, entity.other.attribute-name, support.type.exception.python, source.css keyword.other.unit, variable.other.object.property.js.jsx, variable.other.object.js #c90481 —
markup.list, text.xml string, entity.name.type, support.function, entity.other.attribute-name, meta.at-rule.extend, entity.name.function, entity.other.inherited-class, entity.other.keyframe-offset.css, text.html.markdown string.quoted, meta.function-call.generic.python, meta.at-rule.extend support.constant, entity.other.attribute-name.class.jade, source.css entity.other.attribute-name, text.xml punctuation.definition.string #8C00FF —
markup.heading, variable.language.this.js, variable.language.special.self.python #ff00aa —
punctuation.definition.interpolation, punctuation.section.embedded.end.php, punctuation.section.embedded.end.ruby, punctuation.section.embedded.begin.php, punctuation.section.embedded.begin.ruby, punctuation.definition.template-expression, entity.name.tag #f92672 —
storage, keyword, meta.link, meta.image, markup.italic, source.js support.type #00C8FF —
string.regexp, markup.changed #078480 —
constant, support.class, keyword.operator, support.constant, text.html.markdown string, source.css support.function, source.php support.function, support.function.magic.python, entity.other.attribute-name.id, markup.deleted #fccd11 —
string, text.html.php string, markup.inline.raw, markup.inserted, punctuation.definition.string, punctuation.definition.markdown, text.html meta.embedded source.js string, text.html.php punctuation.definition.string, text.html meta.embedded source.js punctuation.definition.string, text.html punctuation.definition.string, text.html string #15df6b —
entity.other.inherited-class — underline
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 } !` ;
}
T-rex | Coding Theme