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 #2d2d2d activityBar.border #2d2d2d activityBarBadge.background #687f7b70 activityBarBadge.foreground #D7DAE0 badge.background #687f7b3b badge.foreground #D7DAE0 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #b3b9c5 — string, constant.other.symbol, entity.other.inherited-class, punctuation.definition.string, markup.underline.link.image.markdown, string.other.link, markup.raw.inline, markup.inserted, markup.inserted.git_gutter, string.other.link.title.markdown, variable.parameter.url.scss #92D192 — keyword, keyword.operator.expression.typeof, variable.language.this, storage, support.function.construct.output.php, keyword.operator.new, markup.inline.raw.string.markdown, keyword.operator.expression.import.js #ffeea6 — entity.other.attribute-name, entity.other.attribute-name.class.css, markup.heading punctuation.definition.heading, entity.name.section, entity.other.attribute-name.class.css, string.unquoted.alias.graphql
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Solid Moon Theme — Solid Moon Theme
button.background
#4a7baa
button.foreground #FFFFFF
button.hoverBackground #6AB0F3
diffEditor.border #444444
diffEditor.insertedTextBackground #92D19244
diffEditor.removedTextBackground #f2777a44
editor.background #2d2d2d
editor.findMatchBackground #101010
editor.findMatchBorder #FFD479
editor.findMatchHighlightBackground #cda86955
editor.foreground #b3b9c5
editor.lineHighlightBackground #65917d11
editor.selection #414141
editor.selectionBackground #687F7B66
editor.whitespaces #555555
editorBracketMatch.background #101010
editorBracketMatch.border #ffffff
editorCursor.foreground #b6af8f
editorError.foreground #b13d4379
editorGutter.addedBackground #6e8d4248
editorGutter.background #2d2d2d
editorGutter.deletedBackground #99484e48
editorGutter.modifiedBackground #42809148
editorHint.foreground #4a599b56
editorInfo.foreground #6cc45d56
editorLineNumber.activeForeground #909090
editorLineNumber.foreground #606060
editorSuggestWidget.background #2d2d2d
editorSuggestWidget.border #202020
editorSuggestWidget.highlightForeground #FFD479
editorSuggestWidget.Hoverbackground #444444
editorSuggestWidget.selectedBackground #202020
editorWarning.foreground #ccc16156
extensionBadge.remoteBackground #687f7b70
extensionBadge.remoteForeground #D7DAE0
extensionButton.prominentBackground #FFD479
extensionButton.prominentForeground #222222
extensionButton.prominentHoverBackground #ffeea6
findRangeHighlightBackground #66666699
focusBorder #2d2d2d
gitDecoration.conflictingResourceForeground #db8a8fcc
gitDecoration.deletedResourceForeground #d8a1a5cc
gitDecoration.ignoredResourceForeground #718c9b91
gitDecoration.modifiedResourceForeground #cdce91cc
gitDecoration.untrackedResourceForeground #87c291cc
input.background #333333
inputOption.activeBorder #FFD479
inputValidation.warningBorder #f2777a
list.activeSelectionBackground #4a7baa66
list.focusBackground #101010
list.hoverBackground #383838
list.inactiveSelectionBackground #444444
merge.border #95a29d00
panel.background #2d2d2d
panel.border #95a29d00
peekView.border #333333
peekViewEditor.background #242424
peekViewEditor.matchHighlightBackground #2d2d2d
peekViewResult.background #242424
peekViewResult.matchHighlightBackground #2d2d2d
peekViewResult.selectionBackground #444444
scrollbar.shadow #2d2d2d
scrollbarSlider.activeBackground #88888880
scrollbarSlider.background #44444480
scrollbarSlider.hoverBackground #66666680
sideBar.background #2d2d2d
sideBarBackground #2d2d2d
sideBarSectionHeader.background #2d2d2d
sideBarSectionHeader.border #2d2d2d
statusBar.background #2d2d2d
statusBar.debuggingForeground #FFFFFF
statusBar.foreground #9DA5B4
statusBar.noFolderBackground #2d2d2d
statusBarItem.hoverBackground #888888
tab.activeBackground #2d2d2d
tab.background #232323
tab.inactiveBackground #232323
terminal.ansiBlack #666666
terminal.ansiBlue #6AB0F3
terminal.ansiBrightBlack #777777
terminal.ansiBrightBlue #6AB0F3
terminal.ansiBrightCyan #62CFCF
terminal.ansiBrightGreen #92D192
terminal.ansiBrightMagenta #E1A6F2
terminal.ansiBrightRed #f2777a
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #ffd479
terminal.ansiCyan #62CFCF
terminal.ansiGreen #92D192
terminal.ansiMagenta #E1A6F2
terminal.ansiRed #f2777a
terminal.ansiWhite #ffffff
terminal.ansiYellow #ffd479
terminal.background #2d2d2d
terminal.foreground #b3b9c5
terminal.selectionBackground #bbbbbb22
textLink.activeForeground #6AB0F3
textLink.foreground #6AB0F3
widget.shadow #2d2d2d variable.other.property.php, variable.other.member.php, entity.name.function.php, meta.function-call, meta.property-value, meta.selector, entity.name.function.ts, entity.name.function.js, entity.name.function.tsx #ffffff —
support.class, entity.name.type.class, meta.entity.new.name.expr, entity.name.tag.structure.any.html, meta.tag.structure.any.html, punctuation.definition.tag.html, meta.tag.sgml.doctype.html, keyword.other.special-method, entity.name.type, entity.name.tag, support.variable.dom.js, meta.tag.structure.any.html, markup.bold, punctuation.definition.bold, entity.name.type.ts, support.variable.dom.ts, entity.name.function.graphql #6AB0F3 —
meta.type.annotation.ts, support.type.primitive.ts, entity.name.type.ts, meta.type.annotation.ts, variable.other.jsdoc #4a7baa —
variable.parameter.ts, variable.parameter.ts, variable.parameter.tsx, entity.tag.tagbraces.nunjucks, string.unquoted.filter-pipe.nunjucks, punctuation.colon.graphql, string.unquoted.graphql #848991 —
comment, punctuation.definition.comment, punctuation.separator.key-value, punctuation.separator, meta.template.expression.js, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js, markup.underline.link.markdown, punctuation.definition.metadata.markdown #777c85 —
punctuation.definition.variable, variable, variable.language.this.php, markup.deleted, markup.deleted.git_gutter, invalid.illegal, string.unquoted.tag-string.nunjucks #f2777a —
constant.numeric, keyword.other.unit, markup.quote #fca369 —
support.function, constant, entity.other.attribute-name.id, markup.italic, punctuation.definition.italic, markup.changed, markup.changed.git_gutter, support.constant.property-value #E1A6F2 —
keyword.operator, constant.character.escape, constant.character.escape.json, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css, keyword.operator, punctuation.accessor.js, punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc #AC8D58 —
punctuation.definition.block, meta.parameters, punctuation.definition.parameters, meta.brace.round, punctuation.definition.dictionary, constant.character.escape.backslash.regexp, punctuation.section, punctuation.terminator.statement, variable.other.property.js, support.variable.property.dom.js, punctuation.definition.parameters, punctuation.definition.array, support.type.property-name.json, entity.name.function, meta.require, support.function.any-method, meta.tag.sgml.html, punctuation.section.embedded, variable.interpolation, variable.object.property.ts, variable.object.property.tsx, meta.brace.square, punctuation.definition.array, punctuation.definition.binding-pattern.object.js, entity.name.tag.yaml, meta.selectionset.graphql #d5d8df —
entity.other.attribute-name.pseudo-class.css, constant.other.php, string.regexp, entity.other.attribute-name.pseudo-element.css, meta.image.inline.markdown, string.other.link.description.markdown #62CFCF —
entity.name.tag.reference, meta.embedded.block.php, meta.embedded.line.php, keyword.other.phpdoc.php, meta.separator, variable.object.property.ts, variable.object.property.tsx, variable.other.property.js, support.variable.property.dom.js, support.type.property-name.json, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.instance.jsdoc, variable.graphql #abb2bf —
markup.bold.markdown, markup.bold.markdown punctuation.definition.bold.markdown #b3b9c5 bold
markup.italic.markdown, punctuation.definition.italic.markdown #b3b9c5 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...
main*
Solid Moon Theme | Coding Theme
Button.tsx
31
~/my-project
$
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 }!` ;
}