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.activeBorder #f3f2f1 activityBar.background #f3f2f1 activityBar.border #b5bec5 activityBar.foreground #2c76e4 activityBar.inactiveForeground #9eaca3 activityBarBadge.background #2c76e4 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #a6b7ab — variable, namespace, entity.name.namespace #42454b — keyword, entity #618b31 string #5d7696 — constant
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Cereal Theme — Cereal Light
activityBarBadge.foreground
#ffffff
badge.background #2c76e4
badge.foreground #ffffff
button.background #2c76e4
editor.background #fdfdfa
editor.findMatchBackground #16c7e673
editor.findMatchHighlightBackground #16c7e649
editor.foreground #42454b
editor.hoverHighlightBackground #b6b2a94d
editor.inactiveSelectionBackground #b6b2a931
editor.lineHighlightBackground #f8f6f4
editor.lineHighlightBorder #f5f0f0
editor.selectionBackground #b6b2a94d
editor.selectionHighlightBackground #b6b2a941
editor.wordHighlightBackground #b6b2a959
editor.wordHighlightStrongBackground #16c7e644
editorBracketMatch.background #a3a5a865
editorBracketMatch.border #fdfdfa
editorCursor.foreground #000000
editorError.background #ff18ba1a
editorError.foreground #e00169
editorGroupHeader.tabsBackground #ebebe8
editorGutter.addedBackground #cdd39a
editorGutter.commentRangeForeground #ff0000
editorGutter.deletedBackground #f37f20
editorGutter.foldingControlForeground #2e2d2d
editorGutter.modifiedBackground #7bc1f0
editorHoverWidget.background #ffffff
editorHoverWidget.border #b8b8b8
editorIndentGuide.activeBackground #c2beb8
editorIndentGuide.background #eeecec
editorLineNumber.activeForeground #3c4a5e
editorLineNumber.foreground #b4bbae
editorWidget.background #ffffff
editorWidget.border #b8b8b8
focusBorder #2c76e4
gitDecoration.conflictingResourceForeground #eb1366
gitDecoration.modifiedResourceForeground #bd7b00
gitDecoration.stageModifiedResourceForeground #18a0d6
gitDecoration.untrackedResourceForeground #53910c
input.background #f5f5f3
input.border #b5b6c4
input.foreground #42454b
inputOption.activeBackground #2c76e4
inputOption.activeForeground #ffffff
inputOption.hoverBackground #dee0e4
list.activeSelectionBackground #709fe7
list.activeSelectionForeground #ffffff
list.activeSelectionIconForeground #ffffff
list.errorForeground #e00169
list.focusHighlightForeground #ffffff
list.highlightForeground #ffa011
list.hoverBackground #1682e646
list.hoverForeground #272727
list.inactiveSelectionBackground #1682e627
list.inactiveSelectionForeground #131313
minimap.errorHighlight #e00169
panel.border #81828d
panelTitle.activeBorder #f3f2f1
panelTitle.activeForeground #42454b
peekView.border #42454b
peekViewEditor.background #ffffff
peekViewResult.background #ffffff
peekViewTitle.background #9fa3aa
peekViewTitleDescription.foreground #ffffff
peekViewTitleLabel.foreground #ffffff
scrollbarSlider.activeBackground #2c76e49f
scrollbarSlider.background #2c76e43b
scrollbarSlider.hoverBackground #2c76e459
sideBar.background #f3f2f1
sideBar.border #b5bec5
sideBar.foreground #526263
sideBarSectionHeader.background #f3f2f1
sideBarSectionHeader.border #b5bec5
sideBarSectionHeader.foreground #42454b
sideBarTitle.foreground #42454b
statusBar.background #f3f2f1
statusBar.border #b5bec5
statusBar.debuggingBackground #a572e0
statusBar.debuggingForeground #ffffff
statusBar.foreground #42454b
statusBar.noFolderBackground #f3f2f1
statusBarItem.errorBackground #ff0080
statusBarItem.errorForeground #ffffff
statusBarItem.warningBackground #ff6600
statusBarItem.warningForeground #ffffff
tab.activeBorderTop #0ca6ff
tab.activeForeground #000000
tab.border #ebebe8
tab.hoverForeground #2c76e4
tab.inactiveBackground #ebebe8
tab.inactiveForeground #647779
tree.indentGuidesStroke #d4d1c9
widget.shadow #a4c3e5 #965d66
constant.character.escape, constant.language.boolean, constant.language.true, constant.language.false #618b31
storage, keyword.control.import, punctuation.definition.directive, keyword.control.directive #b42a36
keyword.control, keyword.control.flow.python #e28903
keyword.control.flow, keyword.control.return, keyword.control.break, keyword.control.throw, keyword.operator.new, keyword.operator.delete #1e80b8
keyword.operator.assignment, punctuation.separator.key-value.html #7a7771 bold
keyword.operator, punctuation.accessor, punctuation.separator.period, punctuation.separator.pointer-access, punctuation.separator.dot-access, keyword.operator.assignment.compound, storage.modifier.pointer, storage.modifier.reference, storage.type.function.arrow #d342a7 bold
keyword.operator.ternary, keyword.operator.logical, keyword.operator.comparison, keyword.operator.bitwise, keyword.operator.and, keyword.operator.or, keyword.operator.not, keyword.operator.relational #e28903 bold
variable.function, entity.name.function #555352 bold
punctuation.section.block, meta.tag, constant.other.symbol, constant.other.key, constant.other.color, punctuation.definition.tag, punctuation.definition.block, punctuation.definition.dictionary, punctuation.separator.inheritance, keyword.other.template, keyword.other.substitution, keyword.operator.type.annotation, markup.raw.block #b4afa7
invalid, message.error, punctuation.definition.deleted, markup.deleted #e00169 bold underline
meta.brace.round, constant.character.format.placeholder, punctuation.separator, punctuation.terminator, punctuation.section, punctuation.definition.list.begin.python, punctuation.definition.list.end.python, meta.brace.square, punctuation.definition.string #7a7771
punctuation.definition.parameters, punctuation.definition.arguments, punctuation.section.arguments, punctuation.section.parameters, punctuation.definition.parameters.begin.ts, punctuation.definition.parameters.end.ts #777371 bold
markup.underline.link #1e80b8
string.other.link.description, string.other.link.title #e28903
markup.heading, markup.heading entity.name #b42a36 bold
punctuation.definition.list #e28903
meta.separator, punctuation.definition.bold, punctuation.definition.italic, punctuation.definition.metadata, punctuation.definition.array, punctuation.support.type #7a7771 —
support.type.property-name #42454b —
constant.language.json #e28903 —
entity.other.attribute-name #e28903 —
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 }! ` ;
}
Cereal Theme | Coding Theme