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.activeBackground #525252 activityBar.activeBorder #2E90E8 activityBar.background #393939 badge.background #2089D0 badge.foreground #fff breadcrumb.background #ffffff tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle variable, support.class, entity.name.type, entity.other.attribute-name, meta.property-value.css, meta.property-list.css #000 comment, punctuation.definition.comment, comment.documentation, comment.block.documentation #63f182 invalid.illegal #d33a3a — keyword.operator #fff — constant.language, variable.language, storage, storage.type, support.type
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Gray Matter — Gray Matter
breadcrumb.foreground
#000
button.background #007ACC
button.border #c8c8c8
button.foreground #fff
debugTokenExpression.boolean #0000ff
debugTokenExpression.name #00b2e3
debugTokenExpression.number #ee8484
debugTokenExpression.string #df9008
debugTokenExpression.value #444444
editor.background #737373
editor.findMatchBackground #37ADFB
editor.findMatchHighlightBackground #97a36c
editor.foldBackground #00000009
editor.foreground #000
editor.hoverHighlightBackground #cccccc84
editor.lineHighlightBackground #7e7e7e
editor.selectionBackground #37ADFB
editor.selectionForeground #fff
editor.selectionHighlightBackground #cccccc84
editor.symbolHighlightBackground #cccccc
editor.wordHighlightBackground #cccccc84
editor.wordHighlightStrongBackground #cccccc84
editorBracketMatch.background #cccccc84
editorBracketMatch.border #cccccc84
editorCursor.foreground #dbdbdb
editorError.foreground #ff0000
editorGutter.addedBackground #a0d8ac
editorGutter.background #ececec
editorGutter.deletedBackground #ff0000
editorGutter.foldingControlForeground #7b7b7b
editorGutter.modifiedBackground #416eeb
editorHoverWidget.background #7e7e7e
editorHoverWidget.foreground #000000
editorIndentGuide.activeBackground #8a8a8a
editorIndentGuide.background #868686
editorLineNumber.activeForeground #267fba
editorLineNumber.foreground #000
editorSuggestWidget.background #8c8c8c
editorSuggestWidget.focusHighlightForeground #EEE
editorSuggestWidget.highlightForeground #eee
editorSuggestWidget.selectedBackground #7bacc6
editorSuggestWidget.selectedForeground #000
editorSuggestWidget.selectedIconForeground #000
editorWarning.foreground #eadf1d
editorWhitespace.foreground #00000000
editorWidget.background #ececec
focusBorder #c5c5c5
foreground #000000
gitDecoration.addedResourceForeground #00ff00
gitDecoration.conflictingResourceForeground #ffff00
gitDecoration.ignoredResourceForeground #ad6200
gitDecoration.modifiedResourceForeground #0000ff
gitDecoration.stageModifiedResourceForeground #ff0000
icon.foreground #000
input.background #bfbfbf
input.border #5f5f5f
input.foreground #000
input.placeholderForeground #000
list.activeSelectionBackground #dddddd
list.activeSelectionForeground #000
list.errorForeground #ff0000
list.focusBackground #C2D3DC
list.highlightForeground #41bacf
list.hoverBackground #bdbdbd
list.inactiveSelectionBackground #dddddd
list.warningForeground #000000
menu.background #ececec
menu.border #a1a1a1
menu.foreground #000
minimap.background #6e6e6e
minimap.errorHighlight #ff00006b
minimap.warningHighlight #eae01d6b
minimapGutter.addedBackground #00ff00
minimapGutter.modifiedBackground #0000ff
minimapSlider.background #4747478c
panel.background #ececec
panel.border #a1a1a1
panelTitle.activeBorder #757575
peekView.border #464646
peekViewEditor.background #7e7e7e
peekViewEditor.matchHighlightBackground #a7a7a7
peekViewEditorGutter.background #ececec
peekViewResult.background #fff
peekViewResult.lineForeground #000000
peekViewResult.selectionBackground #dddddd
peekViewResult.selectionForeground #000000
peekViewTitle.background #464646
peekViewTitleDescription.foreground #aaaaaa
peekViewTitleLabel.foreground #fff
quickInput.background #ececec
quickInput.foreground #000
scrollbar.shadow #474747
scrollbarSlider.activeBackground #a5a5a5
scrollbarSlider.background #bebebe
scrollbarSlider.hoverBackground #a5a5a5
selection.background #2986F5
settings.checkboxBackground #bfbfbf
settings.checkboxBorder #5f5f5f
settings.checkboxForeground #000
settings.dropdownBackground #bfbfbf
settings.dropdownBorder #5f5f5f
settings.dropdownForeground #000
settings.focusedRowBackground #718b92
settings.focusedRowBorder #718b92
settings.headerBorder #c0c0c0
settings.headerForeground #ffffff
settings.numberInputBackground #bfbfbf
settings.numberInputBorder #5f5f5f
settings.numberInputForeground #000
settings.rowHoverBackground #818181
settings.sashBorder #c0c0c0
settings.textInputBackground #bfbfbf
settings.textInputBorder #5f5f5f
settings.textInputForeground #000
sideBar.background #f9f9f9
sideBar.border #a1a1a1
sideBar.foreground #000
sideBarSectionHeader.background #e0e0e0
sideBarSectionHeader.border #a1a1a1
sideBarSectionHeader.foreground #000
sideBarTitle.foreground #000
statusBar.background #007ACC
statusBar.foreground #fff
symbolIcon.propertyForeground #2089D0
tab.activeBackground #c6c6c6
tab.activeBorderTop #2E90E8
tab.activeForeground #000
tab.border #f2f2f2
tab.hoverBackground #c1c1c1
tab.inactiveBackground #e8e8e8
tab.inactiveForeground #000
terminal.foreground #000
textCodeBlock.background #dddddd
textLink.activeForeground #39c1c3
textLink.foreground #cecece
titleBar.activeBackground #c1c1c1
titleBar.activeForeground #000
titleBar.border #a1a1a1
titleBar.inactiveBackground #c1c1c1
tree.indentGuidesStroke #bdbdbd
welcomePage.background #737373
window.activeBorder #000 entity.name.exception #ff0000 —
constant.numeric, constant.other.symbol, punctuation.definition.constant, constant.character.entity #ee8484 —
string, string.quoted.double.json.comments punctuation, source.sql.embedded.php constant.numeric, source.sql.embedded.php keyword.operator, punctuation.definition.string #63ecf1 —
punctuation, punctuation.definition, punctuation.definition.dictionary, punctuation.terminator.statement, punctuation.definition.parameters, punctuation.separator.parameter, punctuation.definition.block, punctuation.definition.array, punctuation.accessor, punctuation.definition.entity #ffffffeb —
keyword.other.using.cs, keyword.other.namespace.cs, keyword.control.flow.return.cs, keyword.control.conditional, keyword.type.cs #0000ff —
entity.name.type.cs #f1e863 —
variable.other.object.cs #f1c063 —
punctuation.definition.tag.xml #0000ff —
meta.tag.xml, meta.tag.preprocessor.xml #fff —
string.json.comments support.type, support.type.property-name.json.comments punctuation, support.type.property-name.json #efefef —
punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.pair.json, punctuation.separator.dictionary.key-value.json, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.definition.array.begin.json, punctuation.definition.array.end.json, punctuation.separator.array.json, invalid.illegal.expected-dictionary-separator.json.comments #000 —
meta.definition.variable.js, meta.definition.variable.js variable.other.readwrite.js, variable.parameter.js, support.variable.property.js, entity.name.function.js, meta.object-literal.key.js #000
meta.function.expression.js, punctuation.separator.key-value.js, meta.brace.round.js, meta.brace.square.js, punctuation.definition.binding-pattern.object.js #ffffffeb
meta.var.expr.js, variable.language.arguments.js, meta.function-call.js entity.name.function.js #000000
variable.other.object.js #C9C91C
storage.type.class.jsdoc, storage.type.class.jsdoc punctuation.definition.block, entity.name.type.instance.jsdoc punctuation.definition #d1d1d1
entity.name.type.instance.jsdoc #ecd47e
variable.language.this.js, keyword.operator.new.js, constant.language.boolean.false.js, constant.language.boolean.true.js, keyword.operator.expression.in.js, keyword.control.flow.js, keyword.control.conditional.js, keyword.control.loop.js, keyword.operator.expression.typeof.js, keyword.control.trycatch.js, keyword.control.switch.js, keyword.operator.expression.instanceof.js, keyword.operator.expression.delete.js #0000ff —
keyword.operator.new.ts #0000ff —
meta.brace.round.ts #ffffffeb
storage.type.php, storage.modifier.php, storage.type.class.php, storage.modifier.extends.php, keyword.control.return.php, meta.include.php, support.function.construct.output.php, meta.use.php, support.function.construct.php, keyword.control.foreach.php, keyword.control.do.php, keyword.control.while.php, keyword.other.new.php, keyword.control.elseif.php, keyword.control.exception.php, keyword.control.exception.catch.php, keyword.operator.type.php, punctuation.definition.storage-type.begin.bracket.round.php, punctuation.definition.storage-type.end.bracket.round.php, keyword.control.continue.php, keyword.control.switch.php, keyword.control.case.php, keyword.control.break.php, keyword.other.type.php, constant.language.php, storage.type.function.php, keyword.control.if.php, keyword.control.else.php, keyword.control.exit.php, storage.type.trait.php, meta.function-call.php constant.language.php, keyword.control.for.php, keyword.control.default.php, keyword.other.function.use.php #79053F
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php #ff0000 bold
variable.other.global.safer.php, variable.other.global.safer.php punctuation, punctuation.definition.variable.php, variable.other.php, variable.other.php punctuation, variable.other.global.php, variable.language.this.php punctuation #f8eb2f
variable.language.this.php, variable.language.this.php punctuation.definition.variable.php #ffffffeb
entity.name.variable.parameter.php, variable.other.property.php #0000ff
entity.other.inherited-class.php, punctuation.separator.delimiter.php, support.function.var.php, support.function.output.php, support.function.file.php, punctuation.section.array.begin.php, punctuation.section.array.end.php, constant.other.php, support.constant.core.php, constant.other.class.php, meta.array.php, support.class.exception.php, support.class.builtin.php, support.constant.ext.php, meta.method-call.php, keyword.operator.ternary.php, support.function.string.php, entity.name.function.php, punctuation.definition.trait #000000
punctuation.definition.arguments.begin.bracket.round.php, punctuation.definition.arguments.end.bracket.round.php, punctuation.definition.begin.bracket.round.php, punctuation.definition.end.bracket.round.php, punctuation.definition.begin.bracket.curly.php, punctuation.definition.end.bracket.curly.php, punctuation.definition.array.begin.bracket.round.php, punctuation.definition.array.end.bracket.round.php, punctuation.definition.parameters.begin.bracket.round.php, punctuation.definition.parameters.end.bracket.round.php, punctuation.definition.class.start.bracket.curly.php, punctuation.definition.class.end.bracket.curly.php, punctuation.definition.switch-expression.begin.bracket.round.php, punctuation.definition.switch-expression.end.bracket.round.php, punctuation.definition.section.switch-block.begin.bracket.curly.php, punctuation.definition.section.switch-block.end.bracket.curly.php, punctuation.definition.class.begin.bracket.curly.php, punctuation.definition.class.end.bracket.curly.php, punctuation.terminator.statement.php #000000
meta.method-call.static.php entity.name.function.php, variable.other.class.php #ffffffeb
storage.modifier.reference.php #000
keyword.other.phpdoc.php #d1d1d1 —
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html #0000ff —
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.tag #0000ff —
meta.attribute.class.html string.quoted.double.html, meta.attribute.id.html string.quoted.double.html, meta.attribute.class.html string.quoted.single.html, meta.attribute.id.html string.quoted.single.html, meta.attribute.type.html string.quoted.single.html #FFC800 —
meta.embedded.line.css source.css #f8eb2f —
meta.embedded.line.css punctuation.definition.string.end.html source.css #63ecf1 —
meta.tag entity.other.attribute-name, entity.other.attribute-name.html, meta.attribute.align.html, punctuation.separator.key-value.html, constant.character.entity.named.nbsp.html #ffffffeb
entity.name.tag.css, entity.other.attribute-name.id.css, entity.other.attribute-name.class.css, entity.name.tag.wildcard.css, entity.other.attribute-name.id.css punctuation.definition.entity.css, entity.other.attribute-name.class.css punctuation.definition.entity.css #FFC800 —
meta.property-name, support.type.vendored.property-name.css, entity.other.attribute-name.css #0000ff —
meta.property-value.css support.constant, keyword.operator.gradient.css, support.constant.property-value, keyword.control.at-rule punctuation.definition #000000 —
constant.other.color.rgb-value.hex.css #ee8484 —
markup.inserted, punctuation.definition.constant.markdown #000000 —
meta.link, markup.underline.link.image.markdown #ebebeb —
markup.output, markup.raw #0000ff —
markup.underline — underline
markup.bold, markup.italic #fff —
meta.diff.range, meta.diff.index, meta.separator #434343 —
meta.diff.header.from-file #434343 —
meta.diff.header.to-file #434343 —
punctuation.definition.string.begin.ps, punctuation.definition.string.end.ps, constant.character.escaped.ps, string.quoted.double.ps, string.quoted.single.ps #63ecf1
keyword.control.import.ps, keyword.control.export.ps, keyword.control.as.ps #42bba6
punctuation.separator.ps, entity.name.type.class.ps, constant.numeric.ps #5b9cf6
support.type.primitive.entity.ps, punctuation.accessor.entity.ps, entity.name.function.ps #0000ff
keyword.operator.new.ps #3178f4
variable.other.readwrite.ps, punctuation.accessor.ps #000
punctuation.accessor.constant.ps #fff
constant.language.boolean.true.ps, constant.language.boolean.false.ps #0000ff
support.constant.ps #C9C91C
support.function.property.ps #000
support.function.ps #C9C91C
support.function.property.ps, punctuation.accessor.function.ps, keyword.operator.new.support.ps #000
constant.numeric.decimal.ps, constant.numeric.decimal.hex.ps #ee8484
storage.type.class.ps #0000ff
support.type.primitive.ps #c9a11c bold
storage.type.function.ps, storage.type.type.ps, storage.type.ps #0000ff
keyword.control.conditional.ps, keyword.control.switch.ps, keyword.control.loop.ps #0000ff
keyword.operator.ternary.ps #fff
storage.type.function.arrow.ps #fff
keyword.operator.word.ps #fff
punctuation.separator.comma.ps #fff
meta.brace.round.ps, meta.brace.square.ps #fff
constant.character.format.placeholder.other.ps, punctuation.separator.comma.placeholder.ps, constant.numeric.decimal.placeholder.ps, variable.parameter.placeholder.ps #388e3c
keyword.operator.assignment.ps #fff
keyword.operator.assignment.compound.ps, keyword.operator.arithmetic.ps, keyword.operator.relational.ps, keyword.operator.comparison.ps #fff
punctuation.definition.generic.begin.ps, punctuation.definition.generic.end.ps #d1d4dc
punctuation.definition.annotation.ps #787b86
variable.parameter.ps #000
support.type.primitive.import.ps, punctuation.accessor.import.ps, keyword.operator.new.import.ps, entity.name.namespace.ps #b968c7
comment.line.double-slash.ps, meta.annotation.ps, meta.numeric.ps, meta.assignment.ps, meta.section.embedded.other.ps #63f182
meta.annotation.identifier.ps #787b86 bold
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
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*
Button.tsx
fetchUser
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 } !` ;
}
Gray Matter | Coding Theme