Skip to main content
Home Theme VS Code Stone Stone is a cool blue theme with hints of teal & gray that is easy on the eyes and pleasing aesthetically
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 #111827 activityBar.border #05668d30 activityBar.foreground #05668d activityBarBadge.background #05668d activityBarBadge.foreground #111827 badge.background #1F6F8A40 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier #0783B5 — storage.type #05668D — variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss — italic punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss #F59E0D —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
badge.foreground
#1F6F8A
breadcrumb.activeSelectionForeground #000000
breadcrumb.background #111827
breadcrumb.focusForeground #05668d
breadcrumb.foreground #173A5E
breadcrumbPicker.background #111827
button.background #00000050
contrastBorder #00000040
debugToolBar.background #111827
diffEditor.insertedTextBackground #F59E0D15
diffEditor.removedTextBackground #10B98120
dropdown.background #111827
dropdown.border #A3D8F910
editor.background #111827
editor.findMatchBackground #111827
editor.findMatchBorder #05668d60
editor.findMatchHighlightBackground #00000093
editor.findMatchHighlightBorder #A3D8F930
editor.foreground #95B7CE
editor.lineHighlightBackground #11182750
editor.selectionBackground #05668d30
editor.selectionHighlightBackground #0000006b
editor.selectionHighlightBorder #05668df0
editorBracketMatch.background #111827
editorBracketMatch.border #05668d7f
editorCursor.foreground #05668d
editorError.foreground #EC407A70
editorGroup.border #11182730
editorGroupHeader.tabsBackground #111827
editorGroupHeader.tabsBorder #05668d50
editorGutter.addedBackground #F59E0D60
editorGutter.deletedBackground #EC407A70
editorGutter.modifiedBackground #05668d60
editorHoverWidget.background #111827
editorHoverWidget.border #A3D8F910
editorIndentGuide.activeBackground #374151
editorIndentGuide.background #37415170
editorInfo.foreground #05668d70
editorLineNumber.activeForeground #51B5DD
editorLineNumber.foreground #05668d
editorLink.activeForeground #05668d
editorMarkerNavigation.background #05668d05
editorOverviewRuler.border #111827
editorOverviewRuler.errorForeground #EC407A70
editorOverviewRuler.findMatchForeground #000000
editorOverviewRuler.infoForeground #05668d40
editorOverviewRuler.warningForeground #EC407A70
editorRuler.foreground #374151
editorSuggestWidget.background #111827
editorSuggestWidget.border #A3D8F910
editorSuggestWidget.foreground #05668d
editorSuggestWidget.highlightForeground #EC407A
editorSuggestWidget.selectedBackground #00000020
editorWarning.foreground #F59E0D
editorWhitespace.foreground #05668d40
editorWidget.background #111827
editorWidget.border #EC407A
editorWidget.resizeBorder #000000
extensionButton.prominentBackground #F59E0D90
extensionButton.prominentHoverBackground #10B981
focusBorder #A3D8F900
gitDecoration.conflictingResourceForeground #EC407A
gitDecoration.deletedResourceForeground #10B981
gitDecoration.ignoredResourceForeground #000000
gitDecoration.modifiedResourceForeground #173A5E
gitDecoration.untrackedResourceForeground #05668d
input.background #1F2937
input.border #A3D8F910
input.foreground #05668d
input.placeholderForeground #05668d60
inputOption.activeBackground #05668d30
inputOption.activeBorder #05668d30
inputValidation.errorBorder #F59E0D90
inputValidation.infoBorder #05668d50
inputValidation.warningBorder #EC407A50
list.activeSelectionBackground #05668d10
list.activeSelectionForeground #05668d
list.focusBackground #1F2937
list.focusForeground #05668d
list.highlightForeground #51B5DD
list.hoverBackground #05668d10
list.hoverForeground #05668d
list.inactiveSelectionBackground #11182730
list.inactiveSelectionForeground #05668d
list.warningForeground #AD4171
listFilterWidget.background #11182730
listFilterWidget.noMatchesOutline #11182730
listFilterWidget.outline #11182730
menu.background #111827f8
menu.border #05668d60
menu.foreground #05668d
menu.selectionBackground #1F2937
menu.selectionBorder #05668d60
menu.selectionForeground #05668d
menu.separatorBackground #05668d
menubar.selectionBackground #1F2937
menubar.selectionBorder #00000050
menubar.selectionForeground #05668d
minimap.background #111827
minimapGutter.addedBackground #10B981
minimapGutter.deletedBackground #EC407A
minimapGutter.modifiedBackground #F59E0D
minimapSlider.activeBackground #F59E0Db0
minimapSlider.background #F59E0D80
minimapSlider.hoverBackground #F59E0Da0
notificationLink.foreground #05668D
notifications.background #111827
notifications.foreground #05668d
panel.background #111827
panel.border #05668d20
panelTitle.activeBorder #05668d60
panelTitle.activeForeground #05668d
panelTitle.inactiveForeground #05668d80
peekView.border #11182730
peekViewEditor.background #05668d05
peekViewEditor.matchHighlightBackground #00000050
peekViewEditorGutter.background #05668d05
peekViewResult.background #05668d05
peekViewResult.matchHighlightBackground #00000050
peekViewResult.selectionBackground #00000070
peekViewTitle.background #05668d05
peekViewTitleDescription.foreground #05668d60
pickerGroup.foreground #05668D
progressBar.background #000000
scrollbar.shadow #11182700
scrollbarSlider.activeBackground #05668d60
scrollbarSlider.background #05668d60
scrollbarSlider.hoverBackground #1F75AA10
selection.background #000000
settings.checkboxBackground #111827
settings.checkboxForeground #05668d
settings.dropdownBackground #111827
settings.dropdownForeground #05668d
settings.headerForeground #05668D
settings.modifiedItemIndicator #05668D
settings.numberInputBackground #111827
settings.numberInputForeground #05668d
settings.textInputBackground #111827
settings.textInputForeground #05668d
sideBar.background #111827
sideBar.border #002331
sideBar.foreground #05668d90
sideBarSectionHeader.background #111827
sideBarSectionHeader.border #11182760
sideBarSectionHeader.foreground #05668d
sideBarTitle.foreground #05668d
statusBar.background #111827
statusBar.border #05668d30
statusBar.debuggingBackground #EC407A
statusBar.debuggingForeground #A3D8F9
statusBar.foreground #05668d
statusBar.noFolderBackground #111827
statusBarItem.hoverBackground #00000020
statusBarItem.remoteBackground #000000
statusBarItem.remoteForeground #111827
tab.activeBackground #00000020
tab.activeBorder #05668d90
tab.activeForeground #05668d
tab.activeModifiedBorder #1F75AA
tab.border #111827
tab.inactiveBackground #00000020
tab.inactiveForeground #05668d80
tab.unfocusedActiveBackground #1F75AA40
tab.unfocusedActiveBorder #1F75AA
tab.unfocusedActiveForeground #05668d
tab.unfocusedInactiveBackground #00000010
tab.unfocusedInactiveForeground #05668d7f
terminal.ansiBlack #05668d50
terminal.ansiBlue #05668d
terminal.ansiBrightBlack #05668d80
terminal.ansiBrightBlue #3370FF
terminal.ansiBrightCyan #44D7B6
terminal.ansiBrightGreen #10B981
terminal.ansiBrightMagenta #B620E0
terminal.ansiBrightRed #EC407A
terminal.ansiBrightWhite #A3D8F9
terminal.ansiBrightYellow #BADA55
terminal.ansiCyan #3370FF
terminal.ansiGreen #10B981
terminal.ansiMagenta #B620E0
terminal.ansiRed #EC407A
terminal.ansiWhite #A3D8F9
terminal.ansiYellow #BADA55
terminal.foreground #05668d
terminalCursor.background #111827
terminalCursor.foreground #05668d
textLink.activeForeground #05668d
textLink.foreground #05668d
titleBar.activeBackground #111827
titleBar.activeForeground #05668d
titleBar.border #05668d30
titleBar.inactiveBackground #111827
titleBar.inactiveForeground #05668d60
tree.indentGuidesStroke #374151
widget.shadow #11182730 constant.other.color #A3D8F9 —
invalid, invalid.illegal #EC407A70 —
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss #00798c —
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js #173A5E —
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js #546e7a —
punctuation.definition, string.quoted.single.scss #013a63 —
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html, comment.line.double-slash.ts, meta.arrow.ts, meta.block.ts, meta.var.expr.ts, source.ts, punctuation.definition.comment.json.comments, comment.line.double-slash.js, source.json.comments, punctuation.definition, comment.block.js, meta.block.js, meta.arrow.js, meta.var.expr.js, meta.block.js, meta.export.default.js, source.js, comment, comment.block.js.jsx, comment.block.documentation.js.jsx #013a63 —
meta.block.ts, meta.block.js #0390C9 —
text.html.derivative #013a63 —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #35B1F5 —
entity.name.tag.html — bold
variable.parameter.js, variable.parameter.tsx, meta.parameters.tsx, meta.arrow.tsx, meta.block.tsx, meta.var.expr.tsx, meta.block.tsx, source.tsx, variable.parameter, variable.parameter.keyframe-list.css #457b9d —
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js, variable.parameter.ts, meta.parameters.ts, meta.function.ts, meta.block.ts, meta.arrow.ts, meta.var.expr.ts, source.ts, variable.parameter #278BCD
variable.other.property.js #115E83
string, string.quoted.double.html, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, entity.name.function, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control #457B9D —
meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.function #318EB3 —
variable.other.constant.js #457B9D —
punctuation.definition.string.begin.html, punctuation.definition.string.end.html #BADA55 —
support.other.variable, string.other.link, markup.table #546e7a —
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html #AD4171 —
variable.parameter.function.language.special, variable.parameter #457b9d —
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js #B9901795
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name.html #2FA3EF —
support.type, support.class #35B1F5 —
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name #427AA1 —
meta.property-name.css, meta.property-list.css, source.css #115E83 —
entity.name.tag.css, entity.other.attribute-name.class, entity.other.attribute-name.class.css, meta.selector.css, source.css, meta.property-list.css, keyword.control.at-rule #0783B5 —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #10B981 —
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #546e7a italic
entity.other.attribute-name, support.function #1F75AA —
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, keyword.control.conditional.js, support.constant, entity.other.attribute-name.html, string.quoted.single.js, storage.type.function.js, meta.object-literal.key #0158A2 —
meta.object-literal.key #468faf —
string.quoted.single.js #427aa1 —
source.scss keyword.control #05668d —
constant.character.escape #01A8EB —
*url*, *link*, *uri* — underline
source.js constant.other.object.key.js string.unquoted.label.js #546e7a italic
support.type.property-name.json #546e7a —
text.html.markdown, punctuation.definition.list_item.markdown #546e7a —
text.html.markdown markup.inline.raw.markdown #EC407A —
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown #05668D50 —
text.html.markdown meta.dummy.line-break — —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown #173A5E bold
markup.underline #546e7a underline
markup.quote punctuation.definition.blockquote.markdown #05668D50 —
string.other.link.description.title.markdown #EC407A —
constant.other.reference.link.markdown #EC407A —
punctuation.definition.raw.markdown, punctuation.definition.markdown #BADA55 —
variable.language.fenced.markdown #05668D —
meta.separator #34A5DD bold
token.error-token #FF293B —
token.debug-token #BADA55 —
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*
Stone | 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 } ! ` ;
}