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 #23262E activityBar.dropBackground #3a404e activityBar.foreground #BAAFC0 activityBarBadge.background #ff4ea3 activityBarBadge.foreground #20232B badge.background #23262E tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #D5CED9 — 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, keyword.operator #D5CED9 — variable, support.variable, constant #ff4ea3 —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
badge.foreground
#ff4ea3
button.background #746f77
button.hoverBackground #ff4ea3
debugExceptionWidget.background #23262E
debugExceptionWidget.border #FF9F2E60
debugToolBar.background #20232A
diffEditor.insertedTextBackground #29BF12
diffEditor.removedTextBackground #ff4ea3
dropdown.background #746f77
dropdown.border #ff4ea3
editor.background #23262E
editor.findMatchBackground #f6c16b
editor.findMatchHighlightBackground #59b8b377
editor.foreground #D5CED9
editor.hoverHighlightBackground #373941
editor.lineHighlightBackground #2e323d
editor.lineHighlightBorder #2e323d
editor.rangeHighlightBackground #372F3C
editor.selectionBackground #303541
editor.selectionHighlightBackground #4F435580
editor.wordHighlightBackground #4F4355
editor.wordHighlightStrongBackground #db45a280
editorBracketMatch.background #746f77
editorBracketMatch.border #746f77
editorCodeLens.foreground #746f77
editorCursor.foreground #ff4ea3
editorError.foreground #ff4ea3
editorGroup.background #23262E
editorGroup.dropBackground #495061d7
editorGroupHeader.tabsBackground #23262E
editorGutter.addedBackground #9BC53DBB
editorGutter.deletedBackground #ff4ea3
editorGutter.modifiedBackground #5BC0EBBB
editorHoverWidget.background #373941
editorHoverWidget.border #b1b6c5
editorIndentGuide.background #333844
editorLineNumber.foreground #746f77
editorLink.activeForeground #ff4ea3
editorOverviewRuler.border #1B1D23
editorRuler.foreground #4F4355
editorSuggestWidget.background #20232A
editorSuggestWidget.border #372F3C
editorSuggestWidget.selectedBackground #373941
editorWarning.foreground #ff4ea3
editorWhitespace.foreground #333844
editorWidget.background #20232A
errorForeground #ff4ea3
extensionButton.prominentBackground #746f77
extensionButton.prominentHoverBackground #ff4ea3
focusBorder #746f77
foreground #D5CED9
input.background #23262E
input.placeholderForeground #746f77
inputOption.activeBorder #C668BA
inputValidation.errorBackground #23262E
inputValidation.errorBorder #ff4ea3
inputValidation.infoBackground #23262E
inputValidation.infoBorder #ff4ea3
inputValidation.warningBackground #23262E
inputValidation.warningBorder #ff7b00
list.activeSelectionBackground #23262E
list.activeSelectionForeground #ff4ea3
list.dropBackground #3a404e
list.focusBackground #282b35
list.focusForeground #ff4ea3
list.hoverBackground #23262E
list.hoverForeground #ff4ea3
list.inactiveSelectionBackground #23262E
list.inactiveSelectionForeground #747474
merge.currentContentBackground #23262E
merge.currentHeaderBackground #23262E
merge.incomingContentBackground #23262E
merge.incomingHeaderBackground #23262E
notification.background #2d313b
notification.buttonBackground #00e8c5cc
notification.buttonHoverBackground #07d4b5b0
notification.errorBackground #FC644D
notification.infoBackground #00b0ff
notification.warningBackground #FF9F2E
panel.background #23262E
panel.border #23262E
panelTitle.activeBorder #ff4ea3
panelTitle.inactiveForeground #b1b6c5
peekView.border #23262E
peekViewEditor.background #23262E
peekViewEditor.matchHighlightBackground #ff4ea3
peekViewResult.background #23262E
peekViewResult.matchHighlightBackground #FF9F2E
peekViewResult.selectionBackground #23262E
peekViewTitle.background #23262E
peekViewTitleDescription.foreground #b1b6c5
pickerGroup.border #746f77
pickerGroup.foreground #746f77
progressBar.background #ff4ea3
scrollbar.shadow #3A3F4CCC
scrollbarSlider.activeBackground #3A3F4CCC
scrollbarSlider.background #3A3F4CCC
scrollbarSlider.hoverBackground #3A3F4CCC
selection.background #ff4ea3
sideBar.background #23262E
sideBar.foreground #746f77
sideBarSectionHeader.background #23262E
sideBarTitle.foreground #ff4ea3
statusBar.background #23262E
statusBar.debuggingBackground #23262E
statusBar.noFolderBackground #23262E
statusBarItem.activeBackground #23262E
statusBarItem.hoverBackground #23262E
statusBarItem.prominentBackground #23262E
statusBarItem.prominentHoverBackground #23262E
tab.activeBackground #23262E
tab.activeForeground #ff4ea3
tab.inactiveBackground #23262E
tab.inactiveForeground #747474
terminal.ansiBlue #7cb7ff
terminal.ansiBrightBlue #7cb7ff
terminal.ansiBrightCyan #00e8c6
terminal.ansiBrightGreen #96E072
terminal.ansiBrightMagenta #ff00ff
terminal.ansiBrightRed #ff4ea3
terminal.ansiBrightYellow #FFE66D
terminal.ansiCyan #00e8c6
terminal.ansiGreen #96E072
terminal.ansiMagenta #ff00ff
terminal.ansiRed #ff4ea3
terminal.ansiYellow #FFE66D
terminalCursor.background #23262E
terminalCursor.foreground #ffffff
titleBar.activeBackground #23262E
walkThrough.embeddedEditorBackground #23262E
widget.shadow #14151A 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, 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, support.class, support.constant, text.html.markdown string, source.css support.function, source.php support.function, entity.other.attribute-name.id, markup.deleted
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 #f39c12 —
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, markup.heading, variable.language.this.js, variable.language.special.self.python, string.regexp, markup.changed #73efff —
storage, keyword, meta.link, meta.image, markup.italic, source.js support.type #ed67ff —
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 #adff7d —
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 } !` ;
}
Shiro | Coding Theme