Skip to main content
Monfika Pro Theme | Coding Theme
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 #171923 activityBar.border #171923 activityBar.foreground #8da8c9 activityBarBadge.background #fcd75e activityBarBadge.foreground #282A36 badge.background #fcd75e tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, comment keyword, comment markup.underline.link, comment string, comment punctuation.definition, comment punctuation, comment text #6d767e italic
comment storage.type
#6d767e —
comment entity.name.type
, comment variable, comment variable.other #f48e5d —
comment keyword.codetag.notation
#9F90ED —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Monfika Pro Theme — Monfika
badge.foreground
#282A36
button.background #222430
button.foreground #69677d
button.hoverBackground #282A36
debugExceptionWidget.background #222430
debugExceptionWidget.border #282A36
debugToolBar.background #222430
descriptionForeground #8da8c9
diffEditor.insertedTextBackground #a9dc760c
diffEditor.insertedTextBorder #00000000
diffEditor.removedTextBackground #ff61880c
diffEditor.removedTextBorder #00000000
dropdown.background #171923
dropdown.border #171923
dropdown.foreground #69677d
dropdown.listBackground #222430
editor.background #2F313D
editor.findMatchBackground #1d64ff40
editor.findMatchBorder #fcd75e
editor.findMatchHighlightBackground #5f7bd526
editor.findMatchHighlightBorder #00000000
editor.findRangeHighlightBackground #5f7bd526
editor.findRangeHighlightBorder #00000000
editor.foreground #e9e9e9
editor.hoverHighlightBackground #5f7bd526
editor.inactiveSelectionBackground #fcfcfa0c
editor.lineHighlightBackground #5f7bd526
editor.lineHighlightBorder #00000000
editor.rangeHighlightBackground #333d72
editor.rangeHighlightBorder #333d72
editor.selectionBackground #4b5183
editor.selectionHighlightBackground #38eebe40
editor.selectionHighlightBorder #00000000
editor.wordHighlightBackground #1d64ff40
editor.wordHighlightBorder #00000000
editor.wordHighlightStrongBackground #1d64ff40
editor.wordHighlightStrongBorder #00000000
editorBracketMatch.background #7651cb80
editorBracketMatch.border #b798ff
editorCodeLens.foreground #727072
editorCursor.background #00000000
editorCursor.foreground #ffffff
editorError.border #00000000
editorError.foreground #ff6188
editorGroup.border #221f22
editorGroup.dropBackground #221f22bf
editorGroupHeader.noTabsBackground #282A36
editorGroupHeader.tabsBackground #282A36
editorGroupHeader.tabsBorder #282A36
editorGutter.addedBackground #a9dc76
editorGutter.background #282A36
editorGutter.deletedBackground #ff6188
editorGutter.modifiedBackground #f48e5d
editorHint.border #282A36
editorHint.foreground #9F90ED
editorHoverWidget.background #222430
editorHoverWidget.border #282A36
editorIndentGuide.background #222430
editorInfo.border #282A36
editorInfo.foreground #79dbe6
editorLineNumber.activeForeground #f48e5d
editorLineNumber.foreground #5d5f7b
editorLink.activeForeground #79dbe6
editorMarkerNavigation.background #222430
editorMarkerNavigationError.background #ff6188
editorMarkerNavigationInfo.background #79dbe6
editorMarkerNavigationWarning.background #f48e5d
editorOverviewRuler.addedForeground #a9dc76
editorOverviewRuler.border #282A36
editorOverviewRuler.currentContentForeground #222430
editorOverviewRuler.deletedForeground #ff6188
editorOverviewRuler.errorForeground #ff6188
editorOverviewRuler.findMatchForeground #fcfcfa26
editorOverviewRuler.incomingContentForeground #222430
editorOverviewRuler.infoForeground #79dbe6
editorOverviewRuler.modifiedForeground #f48e5d
editorOverviewRuler.rangeHighlightForeground #fcfcfa26
editorOverviewRuler.selectionHighlightForeground #fcfcfa26
editorOverviewRuler.warningForeground #f48e5d
editorOverviewRuler.wordHighlightForeground #fcfcfa26
editorOverviewRuler.wordHighlightStrongForeground #fcfcfa26
editorRuler.foreground #5b595c
editorSuggestWidget.background #222430
editorSuggestWidget.border #222430
editorSuggestWidget.foreground #ddd
editorSuggestWidget.highlightForeground #e2e2e2
editorSuggestWidget.selectedBackground #727072
editorWarning.border #00000000
editorWarning.foreground #f48e5d
editorWhitespace.foreground #5b595c
editorWidget.background #171923
editorWidget.border #171923
errorForeground #ff6188
extensionButton.prominentBackground #222430
extensionButton.prominentForeground #e9e9e9
extensionButton.prominentHoverBackground #323546
focusBorder #7387a0
foreground #e9e9e9
gitDecoration.conflictingResourceForeground #f48e5d
gitDecoration.deletedResourceForeground #ff6188
gitDecoration.ignoredResourceForeground #a0b0ae
gitDecoration.modifiedResourceForeground #a9dc76
gitDecoration.untrackedResourceForeground #f48e5d
input.background #171923
input.border #171923
input.foreground #e2e2e2
input.placeholderForeground #52586a
inputOption.activeBorder #5b595c
inputValidation.errorBackground #222430
inputValidation.errorBorder #ff6188
inputValidation.infoBackground #222430
inputValidation.infoBorder #79dbe6
inputValidation.warningBackground #222430
inputValidation.warningBorder #f48e5d
list.activeSelectionBackground #0f1017
list.activeSelectionForeground #fcd75e
list.dropBackground #221f22bf
list.focusBackground #6d3dba
list.focusForeground #e9e9e9
list.highlightForeground #e9e9e9
list.hoverBackground #073772
list.hoverForeground #e9e9e9
list.inactiveFocusBackground #fcd75e
list.inactiveSelectionBackground #0f1017
list.inactiveSelectionForeground #fcd75e
list.invalidItemForeground #ff6188
merge.border #282A36
merge.commonContentBackground #fcfcfa0c
merge.commonHeaderBackground #fcfcfa26
merge.currentContentBackground #ff61880c
merge.currentHeaderBackground #ff618826
merge.incomingContentBackground #a9dc760c
merge.incomingHeaderBackground #a9dc7626
minimap.background #2a2d39
minimap.findMatchHighlight #a9dc76
minimapSlider.activeBackground #6a44b155
minimapSlider.background #6a44b155
minimapSlider.hoverBackground #6a44b155
notificationCenter.border #222430
notificationCenterHeader.background #222430
notificationCenterHeader.foreground #7387a0
notificationLink.foreground #fcd75e
notifications.background #222430
notifications.border #222430
notifications.foreground #f48e5d
notificationToast.border #222430
panel.background #171923
panel.border #171923
panel.dropBackground #221f22bf
panelTitle.activeBorder #fcd75e
panelTitle.activeForeground #fcd75e
panelTitle.inactiveForeground #7387a0
peekView.border #282A36
peekViewEditor.background #222430
peekViewEditor.matchHighlightBackground #5b595c
peekViewEditorGutter.background #222430
peekViewResult.background #222430
peekViewResult.fileForeground #939293
peekViewResult.lineForeground #939293
peekViewResult.matchHighlightBackground #5b595c
peekViewResult.selectionBackground #222430
peekViewResult.selectionForeground #e2e2e2
peekViewTitle.background #222430
peekViewTitleDescription.foreground #939293
peekViewTitleLabel.foreground #e2e2e2
pickerGroup.border #063a7a
pickerGroup.foreground #f48e5d
progressBar.background #282A36
quickInput.background #0f5dbd
quickInput.foreground #d7e2f0
scrollbar.shadow #282A36
scrollbarSlider.activeBackground #7387a042
scrollbarSlider.background #7387a042
scrollbarSlider.hoverBackground #7387a042
selection.background #0f5dbd
sideBar.background #222430
sideBar.border #222430
sideBar.foreground #9aa3ab
sideBarSectionHeader.background #171923
sideBarSectionHeader.border #171923
sideBarSectionHeader.foreground #e9e9e9
sideBarTitle.foreground #7387a0
statusBar.background #49327d
statusBar.foreground #e0dbfa
statusBarItem.activeBackground #0e0f16
statusBarItem.hoverBackground #292339
tab.activeBackground #282A36
tab.activeBorder #fcd75e
tab.activeForeground #fcd75e
tab.border #282A36
tab.hoverBackground #282A36
tab.hoverBorder #7387a0
tab.inactiveBackground #282A36
tab.inactiveForeground #7387a0
tab.unfocusedActiveBorder #7387a0
tab.unfocusedActiveForeground #f48e5d
tab.unfocusedHoverBackground #282A36
tab.unfocusedHoverBorder #282A36
tab.unfocusedInactiveForeground #7387a0
terminal.ansiBlack #222430
terminal.ansiBlue #f48e5d
terminal.ansiBrightBlack #727072
terminal.ansiBrightBlue #f48e5d
terminal.ansiBrightCyan #79dbe6
terminal.ansiBrightGreen #a9dc76
terminal.ansiBrightMagenta #9F90ED
terminal.ansiBrightRed #ff6188
terminal.ansiBrightWhite #e9e9e9
terminal.ansiBrightYellow #fcd75e
terminal.ansiCyan #79dbe6
terminal.ansiGreen #a9dc76
terminal.ansiMagenta #9F90ED
terminal.ansiRed #ff6188
terminal.ansiWhite #e9e9e9
terminal.ansiYellow #fcd75e
terminal.background #171923
terminal.foreground #e9e9e9
terminal.selectionBackground #fcfcfa26
terminalCursor.background #00000000
terminalCursor.foreground #e9e9e9
textBlockQuote.background #222430
textBlockQuote.border #222430
textCodeBlock.background #222430
textLink.activeForeground #e9e9e9
textLink.foreground #fcd75e
textPreformat.foreground #e9e9e9
textSeparator.foreground #727072
titleBar.activeBackground #221f22
titleBar.activeForeground #939293
titleBar.border #19181a
titleBar.inactiveBackground #221f22
titleBar.inactiveForeground #5b595c
walkThrough.embeddedEditorBackground #222430
welcomePage.buttonBackground #222430
welcomePage.buttonHoverBackground #323546
widget.shadow #19181a
comment.git-status.header.remote
comment.git-status.header.local
#79dbe6 —
comment.other.git-status.head
#e9e9e9 —
constant.other.property, constant.other.color, constant.other.character-class.escape, constant.numeric, constant.other.key #9F90ED —
constant.other.symbol #f48e5d —
constant.language, constant.character.escape #9F90ED —
constant.numeric.line-number.find-in-files #5b595c —
constant.numeric.line-number.match.find-in-files, entity.name.section #fcd75e —
entity.name.class #e2e2e2 —
entity.name.constant #9F90ED —
entity.name.namespace #e2e2e2 —
entity.other.inherited-class #79dbe6 italic
entity.name.function #a9dc76 —
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx #ff6188 —
entity.other.attribute-name #79dbe6 italic
entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector-suffix.css, entity.other.attribute-name.parent-selector-suffix.css punctuation.definition.entity.css #a9dc76 —
entity.other.attribute-name.id.css #f48e5d —
entity.other.attribute-name.pseudo-class.css
entity.other.pseudo-class.css
#79dbe6 italic
entity.name.function #a9dc76 —
entity.other.git-status.hex
#9F90ED —
keyword, keyword.control, keyword.operator #ff6188 —
keyword.other.substitution #939293 —
keyword.other.template.begin
keyword.other.template.end
#ff6188 —
keyword.operator.heading.restructuredtext, keyword.operator.table.row.restructuredtext, keyword.operator.table.data.restructuredtext #939293 —
markup.underline — underline
markup.underline.link, markup.inserted, markup.inserted punctuation.definition.inserted #a9dc76 —
markup.deleted, markup.deleted punctuation.definition.deleted #ff6188 —
markup.changed, markup.changed punctuation.definition.changed #fcd75e —
markup.ignored, markup.ignored punctuation.definition.ignored, markup.untracked #bcc2c9 —
meta.brace.round, meta.brace.square, meta.brace.curly, meta.delimiter.comma.js, meta.function-call.without-arguments.js, meta.function-call.method.without-arguments.js #bcc2c9 —
meta.function-call, meta.function-call.arguments meta.function-call #a9dc76 —
meta.function-call meta.function-call.arguments, meta.function-call meta.arguments, meta.function-call meta.group #e2e2e2 —
meta.instance.constructor #a9dc76 —
meta.attribute-with-value.class string #a9dc76 —
meta.attribute-with-value.id string #f48e5d —
meta.object.member #e9e9e9 —
meta.property-list.css variable.other #f48e5d —
entity.name.constant.preprocessor, meta.preprocessor #9F90ED —
meta.diff.git-diff.header
#fcd75e —
punctuation.definition.tag, punctuation.definition.tag source #acb2ba —
punctuation.definition.group #e9e9e9 —
punctuation.definition.comment #6d767e —
punctuation.definition.variable, punctuation.definition.keyword.scss, punctuation.definition.entity.css #acb2ba —
punctuation.section.embedded, punctuation.section.embedded entity.name.tag, punctuation.section.embedded constant.other, punctuation.section.embedded source #f48e5d —
punctuation.template-string.element.begin, punctuation.template-string.element.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, string.quoted.template punctuation.definition.string.begin, string.quoted.template punctuation.definition.string.end #ff6188 —
punctuation.definition.string.begin, punctuation.definition.string.end #fcd75e —
source.scss, source.sass #939293 —
source.sass variable.other, source.sass variable.sass, source.scss variable.other, source.scss variable.scss, source.scss variable.sass, source.css variable.other, source.css variable.scss, source.less variable.other, source.less variable.other.less, source.less variable.declaration.less #f48e5d italic
source.git-show.commit.sha
#9F90ED —
source.git-show.author, source.git-show.date, source.git-diff.command, source.git-diff.command meta.diff.git-diff.header.from-file, source.git-diff.command meta.diff.git-diff.header.to-file #939293 —
source.git-show meta.diff.git-diff.header.extended.index.from-sha, source.git-show meta.diff.git-diff.header.extended.index.to-sha #9F90ED —
source.git-show meta.diff.range.unified
#f48e5d —
source.git-show meta.diff.header.from-file, source.git-show meta.diff.header.to-file #939293 —
storage.type #79dbe6 italic
storage.type.function.arrow #ff6188 bold
storage.modifier #ff6188 italic
storage.class.restructuredtext.ref #9F90ED —
string.unquoted.label #e2e2e2 —
string source punctuation.section.embedded #939293 —
string.other.link.title, string.other.link.description #ff6188 —
string.other.link.description.title #79dbe6 —
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end #ff6188 —
string.other.ref, string.other.restructuredtext.ref #a9dc76 —
string.other.git-status.help.key
#f48e5d —
string.other.git-status.remote
#ff6188 —
support.constant.handlebars #939293 —
support.type, entity.name.type.object.console, support.variable #79dbe6 —
support.type.property-name #e9e9e9 —
support.function.construct, support.function.basic_functions, support.function.string, support.function.errorfunc, meta.function-call #7dbcfa —
text, text.find-in-files #ffffff —
variable, variable.other #e9e9e9 —
variable.parameter, parameters variable.function, variable.language, variable.parameter.function.language.special.self.python #acb2ba italic
variable.language.arguments #9F90ED —
variable.other.class #79dbe6 —
variable.other.constant #9F90ED —
variable.other.member #e9e9e9 —
variable.function #a9dc76 —
variable.other.substitution #f48e5d —
variable.other.readwrite #7dbcfa —
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 } ! ` ;
}