Skip to main content
Home Theme VS Code My Monokai Theme A set of 32 beautiful color themes for VSCode, inspired by Monokai classic.
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 #272821 activityBar.border #2F3028 activityBar.dropBackground #272821cc activityBar.foreground #fdfff1 activityBarBadge.background #D6C92B activityBarBadge.foreground #000000e6 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #aaac9ed7 — comment, punctuation.definition.comment #5c6370 italic variable, variable.other, variable.name #abb2bf — variable.parameter #bbbbbb underline variable.language, variable.scss, variable.less, variable.styl
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
My Monokai Theme — My Monokai
badge.background
#D9CC39
badge.foreground #000000e6
button.background #D6C92B
button.foreground #000000e6
button.hoverBackground #D9CC39
debugExceptionWidget.background #DD0753
debugExceptionWidget.border #DD0753
diffEditor.insertedTextBackground #88BD1B1a
diffEditor.removedTextBackground #DD07531a
dropdown.background #23241E
dropdown.border #2B2C24
dropdown.foreground #fdfff1
dropdown.listBackground #2B2C24
editor.background #262720
editor.findMatchBackground #ead5953c
editor.findMatchHighlightBackground #dc741677
editor.foreground #979eab
editor.inactiveSelectionBackground #ffffff10
editor.lineHighlightBackground #ffffff0d
editor.rangeHighlightBackground #ffffff16
editor.selectionBackground #ffffff1a
editor.selectionHighlightBackground #ffffff16
editor.wordHighlightBackground #ffffff16
editor.wordHighlightStrongBackground #ffffff1a
editorBracketMatch.background #ffffff16
editorBracketMatch.border #ffffff16
editorCodeLens.foreground #ffffff16
editorCursor.foreground #e4db72
editorError.foreground #F83379
editorGroup.background #2F3028
editorGroup.border #ffffff12
editorGroup.dropBackground #272821cc
editorGroupHeader.noTabsBackground #23241E
editorGroupHeader.tabsBackground #23241E
editorGroupHeader.tabsBorder #2F3028
editorGutter.addedBackground #a6e12db3
editorGutter.background #2A2B23
editorGutter.deletedBackground #f82570b3
editorGutter.modifiedBackground #e4db73b3
editorHoverWidget.background #2B2C24
editorIndentGuide.activeBackground #ffffff33
editorIndentGuide.background #ffffff1a
editorLineNumber.activeForeground #ffffff5a
editorLineNumber.foreground #ffffff33
editorLink.activeForeground #68daee
editorMarkerNavigation.background #272821
editorMarkerNavigationError.background #f82570b3
editorMarkerNavigationWarning.background #e4db73b3
editorOverviewRuler.addedForeground #88BD1B
editorOverviewRuler.border #ffffff12
editorOverviewRuler.currentContentForeground #29CAE71a
editorOverviewRuler.deletedForeground #DD0753
editorOverviewRuler.errorForeground #DD0753
editorOverviewRuler.findMatchForeground #00003c
editorOverviewRuler.incomingContentForeground #D9CC391a
editorOverviewRuler.infoForeground #D9CC39
editorOverviewRuler.modifiedForeground #D9CC39
editorOverviewRuler.rangeHighlightForeground #ffffff16
editorOverviewRuler.selectionHighlightForeground #ffffff16
editorOverviewRuler.warningForeground #D9CC39
editorOverviewRuler.wordHighlightForeground #ffffff1a
editorOverviewRuler.wordHighlightStrongForeground #ffffff1a
editorRuler.foreground #ffffff1a
editorSuggestWidget.background #272821
editorSuggestWidget.border #272821
editorSuggestWidget.foreground #fdfff1
editorSuggestWidget.selectedBackground #ffffff26
editorWarning.foreground #E7DF81
editorWhitespace.foreground #ffffff16
editorWidget.background #272821
editorWidget.border #1F201A
errorForeground #F83379
extensionButton.prominentBackground #D6C92B
extensionButton.prominentForeground #000000e6
extensionButton.prominentHoverBackground #BBAF24
focusBorder #ffffff33
foreground #aab1bb
gitDecoration.conflictingResourceForeground #E7DF81
gitDecoration.deletedResourceForeground #F83379
gitDecoration.ignoredResourceForeground #fdfff1a6
gitDecoration.modifiedResourceForeground #75DDF0
gitDecoration.untrackedResourceForeground #ABE339
input.background #23241E
input.border #2B2C24
input.foreground #aab1bb
input.placeholderForeground #fdfff1a6
inputOption.activeBorder #272821
inputValidation.errorBackground #23241E
inputValidation.errorBorder #DD0753
inputValidation.infoBackground #23241E
inputValidation.infoBorder #29CAE7
inputValidation.warningBackground #23241E
inputValidation.warningBorder #D9CC39
list.activeSelectionBackground #ffffff26
list.activeSelectionForeground #FFFFFF
list.dropBackground #ffffff1a
list.focusBackground #ffffff33
list.focusForeground #FFFFFF
list.highlightForeground #E4DB73
list.hoverBackground #ffffff1a
list.hoverForeground #E8EAEE
list.inactiveFocusBackground #ffffff1f
list.inactiveSelectionBackground #ffffff21
list.inactiveSelectionForeground #FFFFFF
list.invalidItemForeground #F83379
merge.border #DD0753
merge.currentContentBackground #29CAE71a
merge.currentHeaderBackground #29CAE7
merge.incomingContentBackground #D9CC391a
merge.incomingHeaderBackground #D9CC39
notificationCenter.border #BBAF24
notificationCenterHeader.background #BBAF24
notificationCenterHeader.foreground #000000e6
notificationLink.foreground #68daee
notifications.background #1F201A
notifications.border #1F201A
notifications.foreground #FFFFFF
notificationToast.border #272821
panel.background #1F201A
panel.border #2F3028
panelTitle.activeBorder #BBAF24
panelTitle.activeForeground #FFFFFF
panelTitle.inactiveForeground #EFFF8E
peekView.border #272821
peekViewEditor.background #2B2C24
peekViewEditor.matchHighlightBackground #ffffff16
peekViewEditorGutter.background #2B2C24
peekViewResult.background #2B2C24
peekViewResult.fileForeground #fdfff0
peekViewResult.lineForeground #fdfff0
peekViewResult.matchHighlightBackground #ffffff16
peekViewResult.selectionBackground #ffffff1a
peekViewResult.selectionForeground #fdfff0
peekViewTitle.background #23241E
peekViewTitleDescription.foreground #EFFF8E
peekViewTitleLabel.foreground #FFFFFF
pickerGroup.border #2B2C24
pickerGroup.foreground #F6FFBF
progressBar.background #E4DB73
scrollbar.shadow #131411
scrollbarSlider.activeBackground #fdfff14d
scrollbarSlider.background #fdfff11a
scrollbarSlider.hoverBackground #fdfff133
selection.background #66d9eeb3
sideBar.background #272821
sideBar.border #272821
sideBar.foreground #fdfff1
sideBarSectionHeader.background #2F3028
sideBarSectionHeader.foreground #EFFF8E
sideBarTitle.foreground #F6FFBF
statusBar.background #1F201A
statusBar.border #2F3028
statusBar.debuggingBackground #D6C92B
statusBar.debuggingForeground #000000e6
statusBar.foreground #ffffffcc
statusBar.noFolderBackground #2F3028
statusBar.noFolderForeground #EFFF8E
statusBarItem.activeBackground #ffffff26
statusBarItem.hoverBackground #ffffff1a
statusBarItem.prominentBackground #BBAF24
statusBarItem.prominentHoverBackground #D9CC39
tab.activeBackground #2F3028
tab.activeBorder #BBAF24
tab.activeForeground #FFFFFF
tab.border #2F3028
tab.hoverBackground #2F3028
tab.inactiveBackground #1F201A
tab.inactiveForeground #F6FFBF
tab.unfocusedActiveForeground #F6FFBF
tab.unfocusedHoverBackground #2F3028
tab.unfocusedInactiveForeground #EFFF8E
terminal.ansiBlack #000000
terminal.ansiBlue #427ab3
terminal.ansiBrightBlack #686a66
terminal.ansiBrightBlue #84b0d8
terminal.ansiBrightCyan #37e6e8
terminal.ansiBrightGreen #99e343
terminal.ansiBrightMagenta #bc94b7
terminal.ansiBrightRed #f54235
terminal.ansiBrightWhite #f1f1f0
terminal.ansiBrightYellow #fdeb61
terminal.ansiCyan #00a7aa
terminal.ansiGreen #5ea702
terminal.ansiMagenta #89658e
terminal.ansiRed #d81e00
terminal.ansiWhite #dbded8
terminal.ansiYellow #cfae00
terminal.background #1F201A
terminal.foreground #fdfff1
terminal.selectionBackground #c1deff5a
titleBar.activeBackground #1F201A
titleBar.activeForeground #FFFFFF
titleBar.border #1F201A
titleBar.inactiveBackground #2B2C24
titleBar.inactiveForeground #F6FFBF
walkThrough.embeddedEditorBackground #272821
welcomePage.buttonBackground #2B2C24
welcomePage.buttonHoverBackground #2F3028
widget.shadow #131411 punctuation.definition.variable #fdfff0 italic
variable.other.constant #68daee bold
constant, constant.other, constant.character #ac80ff —
support.type.property-name, constant.numeric, support.constant #fc941d —
meta.object-literal.key #e4db72 —
constant.language #f8256f italic
constant.character.escape, constant.other.placeholder #e4db72 italic
invalid, invalid.illegal #f8256f —
keyword, storage.type #ac80ff —
storage.modifier, storage.type, keyword.control — italic
keyword.operator, punctuation.accessor. #eebe4f —
constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution #fdfff0 —
entity.name.tag, meta.tag.sgml #f8256f
entity.name.function, meta.function-call, variable.function, keyword.other.special-method, support.function, support.type, support.class #a5e12d
string, entity.name.label #d68852 —
entity.other.inherited-class, markup.heading, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js #ffd706
meta.tag.attribute, entity.other.attribute-name #fc941d italic
punctuation.terminator, punctuation.separator, meta.property-list.scss, meta.property-list.css, meta.property-list.styl, meta.property-list.less, punctuation.separator.inheritance #888b7e —
source.css entity.other.attribute-name.class, source.scss entity.other.attribute-name.class, source.styl entity.other.attribute-name.class, source.less entity.other.attribute-name.class #eebe4f —
source.css entity.other.attribute-name.id, source.scss entity.other.attribute-name.id, source.styl entity.other.attribute-name.id, source.less entity.other.attribute-name.id #68daee —
support.type.property-name.css #fdfff0 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #adafa7 italic
*url*, *link*, *uri* #68daee italic underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #68daee italic
source.json meta.structure.dictionary.json support.type.property-name.json #e4db72 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #fc941d —
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 #ac80ff —
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 #fdfff0 —
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 #68daee —
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 #eebe4f —
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 #888b7e —
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 #adafa7 —
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 #f8256f —
text.html.markdown, punctuation.definition.list_item.markdown #888b7e —
text.html.markdown markup.inline.raw.markdown #ac80ff —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #adafa7 —
text.html.markdown meta.dummy.line-break —
markdown.heading, markup.heading.markdown entity.name.section.markdown, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown #f8256f —
beginning.punctuation.definition.list.markdown #fc941d —
markup.italic #eebe4f italic
markup.bold, markup.bold string #eebe4f 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 #eebe4f bold italic
markup.underline #68daee underline
markup.strike #6e7066 strike
beginning.punctuation.definition.quote #ffffff13 —
markup.quote #95978c italic
string.other.link.title.markdown #fc941d —
string.other.link.description.title.markdown #a5e12d —
constant.other.reference.link.markdown #eebe4f —
markup.raw.block.fenced.markdown, markup.inline.raw.string.markdown, markup.fenced_code.block.markdown #fdfff0 —
meta.separator #fdfff1 bold
token.error-token #F83379 —
token.debug-token #68daee —
markup.deleted, punctuation.definition.deleted #F83379 —
markup.inserted, punctuation.definition.inserted #ABE339 —
markup.changed, punctuation.definition.changed #75DDF0 —
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php — italic
keyword.other.namespace.php, keyword.other.use.php — italic
meta.tag.sgml.doctype.html — italic
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 } ! ` ;
}
My Monokai Theme | Coding Theme