Skip to main content
Home Theme VS Code Monet Theme A dark theme based on Claude Monet's Water Lilies series.
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 #202B31 activityBar.foreground #D6D6D6 activityBarBadge.background #59a183 activityBarBadge.foreground #202B31 debugConsole.errorForeground #f15959 debugConsole.warningForeground #F4A261 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #678391 italic variable, string constant.other.placeholder, meta.object-literal.key #82D9A5 — constant.other.color #A6B5DE — invalid, invalid.illegal #FF5370 — keyword, storage.type, storage.modifier, keyword.control, punctuation.definition.template-expression
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Monet Theme — Monet Theme
debugTokenExpression.error #f15959
debugToolBar.background #202B31
dropdown.background #28343E
dropdown.border #202B31
editor.background #202B31
editor.foreground #D6D6D6
editor.selectionBackground #2e3d44
editor.selectionHighlightBackground #2e3d44
editorError.foreground #f15959
editorGroupHeader.tabsBackground #181f257c
editorOverviewRuler.errorForeground #f15959
editorOverviewRuler.warningForeground #F4A261
editorWarning.foreground #F4A261
editorWidget.background #202B31
errorForeground #f15959
focusBorder #202B31
input.background #202B31
input.border #202B31
inputValidation.errorForeground #f15959
inputValidation.warningForeground #F4A261
list.errorForeground #f15959
list.hoverBackground #2e3d44
list.warningForeground #F4A261
minimap.errorHighlight #f15959
minimap.warningHighlight #F4A261
notebookStatusErrorIcon.foreground #f15959
notificationCenterHeader.background #202B31
notifications.background #202B31
notificationsErrorIcon.foreground #f15959
notificationsWarningIcon.foreground #F4A261
problemsErrorIcon.foreground #f15959
problemsWarningIcon.foreground #F4A261
sideBar.background #202B31
sideBarSectionHeader.background #202B31
sideBarTitle.foreground #BBBBBB
statusBar.background #202B31
statusBar.debuggingBackground #C979D3
statusBar.foreground #D6D6D6
statusBarItem.errorForeground #f15959
tab.inactiveBackground #28353E
terminal.ansiBlue #A6B5DE
terminal.ansiBrightBlue #80CFE2
terminal.ansiBrightCyan #10f7f7
terminal.ansiBrightGreen #82d9a5
terminal.ansiBrightMagenta #C979D3
terminal.ansiBrightRed #e0646e
terminal.ansiBrightYellow #F2D77D
terminal.ansiCyan #18f1f1
terminal.ansiGreen #7EC3C8
terminal.ansiMagenta #C165CD
terminal.ansiRed #da4450
terminal.ansiYellow #f0d16a
textBlockQuote.border #59a183
textLink.activeForeground #E0B2E6
textLink.foreground #C979D3
textPreformat.foreground #F2D77D
titleBar.activeBackground #202B31 meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.function-call.arguments.python, punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python #D6D6D6 —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #82D9A5 —
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method #70BCC2 —
meta.block variable.other #EB84BD —
support.other.variable, string.other.link #f07178 —
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit #A6B5DE —
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js #F2D77D —
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types #80cfe2 —
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 #D6D6D6 —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #FF5370 —
variable.language #80CFE2 italic
entity.name.method.js #82AAFF italic
meta.class-method.js entity.name.function.js, variable.function.constructor #82AAFF —
entity.other.attribute-name #C979D3 —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #FFCB6B italic
entity.other.attribute-name.class #80cfe2 —
entity.other.attribute-name.class.css #80cfe2 —
source.sass keyword.control #C979D3 —
entity.other.attribute-name.id.css #C979D3 —
entity.other.attribute-name.pseudo-class.css #f2d77d —
constant.character.escape #89DDFF —
*url*, *link*, *uri* — underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #82AAFF italic
source.js constant.other.object.key.js string.unquoted.label.js #FF5370 italic
source.json meta.structure.dictionary.json support.type.property-name.json #C979D3 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #82D9A5 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #9D92CC —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #A6B5DE —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #EB84BD —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #80CFE2 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #82D9A5 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #C792EA —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #70BCC2 —
text.html.markdown, punctuation.definition.list_item.markdown #D6D6D6 —
text.html.markdown markup.inline.raw.markdown #C792EA —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #65737E —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown #80CFE2 —
markup.italic #9D92CC italic
markup.bold, markup.bold string #82D9A5 bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string #82D9A5 bold
markup.underline #C979D3 underline
markup.quote punctuation.definition.blockquote.markdown #65737E —
string.other.link.title.markdown #70BCC2 —
string.other.link.description.title.markdown #C792EA —
constant.other.reference.link.markdown #F2D77D —
markup.raw.block.fenced.markdown #00000050 —
punctuation.definition.fenced.markdown #00000050 —
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end #EEFFFF —
variable.language.fenced.markdown #65737E —
meta.separator #65737E 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
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 } !` ;
}
Monet Theme | Coding Theme