Skip to main content
Home Theme VS Code Monokard Theme Inspired by the famous Monokai color scheme with a flat dark UI
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 #0f0f0f activityBar.activeBorder #0f0f0f activityBar.background #0f0f0f activityBar.border #000000 activityBar.foreground #dddddd activityBar.inactiveForeground #888888 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #ddddddff — meta.embedded, source.groovy.embedded #F8F8F2 — comment #75715E — string #FFEE99 — punctuation.definition.template-expression, punctuation.section.embedded
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Monokard Theme — Monokard
activityBarBadge.background
#007acc
activityBarBadge.foreground #dddddd
badge.background #363636
badge.foreground #dddddd
breadcrumb.activeSelectionForeground #dddddd
breadcrumb.background #161616
breadcrumb.focusForeground #dddddd
breadcrumb.foreground #666666
breadcrumbPicker.background #363636
button.background #007acc
button.foreground #dddddd
button.hoverBackground #004c7f
debugExceptionWidget.background #363636
debugExceptionWidget.border #666666
debugToolBar.background #363636
debugToolBar.border #363636
descriptionForeground #dddddd
diffEditor.border #000000
diffEditor.insertedTextBackground #0fd58944
diffEditor.removedTextBackground #F9267244
dropdown.background #363636
dropdown.border #363636
dropdown.foreground #dddddd
dropdown.listBackground #363636
editor.background #1f1f1f
editor.findMatchBackground #464646
editor.findMatchBorder #00000000
editor.findMatchHighlightBackground #363636
editor.findMatchHighlightBorder #00000000
editor.findRangeHighlightBackground #f2f2f20c
editor.focusedStackFrameHighlightBackground #fd971e24
editor.foreground #dddddd
editor.hoverHighlightBackground #363636
editor.inactiveSelectionBackground #464646
editor.lineHighlightBackground #292929
editor.lineHighlightBorder #292929
editor.rangeHighlightBackground #292929
editor.rangeHighlightBorder #292929
editor.selectionBackground #464646
editor.selectionForeground #dddddd
editor.selectionHighlightBackground #363636
editor.selectionHighlightBorder #00000000
editor.snippetFinalTabstopHighlightBackground #ffffff20
editor.snippetFinalTabstopHighlightBorder #00000000
editor.snippetTabstopHighlightBackground #ffffff20
editor.snippetTabstopHighlightBorder #00000000
editor.stackFrameHighlightBackground #fd971e24
editor.wordHighlightBackground #363636
editor.wordHighlightBorder #00000000
editor.wordHighlightStrongBackground #363636
editor.wordHighlightStrongBorder #00000000
editorBracketMatch.background #363636
editorBracketMatch.border #666666
editorCodeLens.foreground #666666
editorCursor.background #1f1f1f
editorCursor.foreground #f2f2f2
editorError.border #00000000
editorError.foreground #fe413f
editorGroup.border #161616
editorGroup.dropBackground #ffffff12
editorGroup.emptyBackground #1f1f1f
editorGroup.focusedEmptyBorder #00000000
editorGroupHeader.noTabsBackground #161616
editorGroupHeader.tabsBackground #1f1f1f
editorGroupHeader.tabsBorder #161616
editorGutter.addedBackground #0fd589
editorGutter.background #1f1f1f
editorGutter.deletedBackground #F92672
editorGutter.modifiedBackground #007acc
editorHint.border #00000000
editorHint.foreground #007acc
editorHoverWidget.background #363636
editorHoverWidget.border #666666
editorIndentGuide.activeBackground1 #363636
editorIndentGuide.background1 #363636
editorInfo.border #00000000
editorInfo.foreground #007acc
editorLineNumber.activeForeground #666666
editorLineNumber.foreground #666666
editorLink.activeForeground #66d9ef
editorMarkerNavigation.background #363636
editorMarkerNavigationError.background #fe413f
editorMarkerNavigationInfo.background #007acc
editorMarkerNavigationWarning.background #fd971e
editorOverviewRuler.addedForeground #0fd589
editorOverviewRuler.border #00000000
editorOverviewRuler.bracketMatchForeground #666666
editorOverviewRuler.currentContentForeground #ae81ff
editorOverviewRuler.deletedForeground #F92672
editorOverviewRuler.errorForeground #fe413f
editorOverviewRuler.findMatchForeground #666666
editorOverviewRuler.incomingContentForeground #66d9ef
editorOverviewRuler.infoForeground #007acc
editorOverviewRuler.modifiedForeground #007acc
editorOverviewRuler.rangeHighlightForeground #007acc
editorOverviewRuler.warningForeground #fd971e
editorOverviewRuler.wordHighlightForeground #666666
editorOverviewRuler.wordHighlightStrongForeground #666666
editorPane.background #161616
editorRuler.foreground #363636
editorSuggestWidget.background #262626
editorSuggestWidget.border #363636
editorSuggestWidget.foreground #dddddd
editorSuggestWidget.highlightForeground #dddddd
editorSuggestWidget.selectedBackground #363636
editorUnnecessaryCode.border #00000000
editorWarning.border #00000000
editorWarning.foreground #fd971e
editorWhitespace.foreground #363636
editorWidget.background #363636
editorWidget.border #666666
editorWidget.resizeBorder #666666
errorForeground #dddddd
extensionButton.prominentBackground #363636
extensionButton.prominentForeground #dddddd
extensionButton.prominentHoverBackground #464646
focusBorder #00000000
foreground #dddddd
gitDecoration.addedResourceForeground #007acc
gitDecoration.conflictingResourceForeground #fe413f
gitDecoration.deletedResourceForeground #F92672
gitDecoration.ignoredResourceForeground #777777
gitDecoration.modifiedResourceForeground #A6E22E
gitDecoration.submoduleResourceForeground #2bb3b4
gitDecoration.untrackedResourceForeground #0fd589
input.background #363636
input.border #363636
input.foreground #dddddd
input.placeholderForeground #888888
inputOption.activeBackground #464646
inputOption.activeBorder #464646
inputValidation.errorBackground #fe413f
inputValidation.errorBorder #fc5b58
inputValidation.errorForeground #dddddd
inputValidation.infoBackground #007acc
inputValidation.infoBorder #008ae5
inputValidation.infoForeground #dddddd
inputValidation.warningBackground #fd971e
inputValidation.warningBorder #c9c914
inputValidation.warningForeground #dddddd
list.activeSelectionBackground #262626
list.activeSelectionForeground #dddddd
list.dropBackground #363636
list.errorForeground #fe413f
list.focusBackground #1f1f1f
list.focusForeground #dddddd
list.highlightForeground #dddddd
list.hoverBackground #1f1f1f
list.hoverForeground #dddddd
list.inactiveSelectionBackground #262626
list.inactiveSelectionForeground #dddddd
list.invalidItemForeground #fe413f
list.warningForeground #fd971e
menu.background #363636
menu.foreground #dddddd
menu.selectionBackground #262626
menu.selectionBorder #00000000
menu.selectionForeground #dddddd
menu.separatorBackground #666666
menubar.selectionBackground #363636
menubar.selectionBorder #00000000
menubar.selectionForeground #dddddd
merge.border #000000aa
merge.currentContentBackground #ae81ff44
merge.currentHeaderBackground #ae81ff88
merge.incomingContentBackground #66d9ef44
merge.incomingHeaderBackground #66d9ef88
minimap.findMatchHighlight #fd971e
notificationCenter.border #464646
notificationCenterHeader.background #464646
notificationCenterHeader.foreground #dddddd
notificationLink.foreground #66d9ef
notifications.background #363636
notifications.border #464646
notifications.foreground #dddddd
notificationToast.border #363636
panel.background #262626
panel.border #161616
panelTitle.activeBorder #00000000
panelTitle.activeForeground #dddddd
panelTitle.inactiveForeground #666666
peekView.border #666666
peekViewEditor.background #262626
peekViewEditor.matchHighlightBackground #464646
peekViewEditor.matchHighlightBorder #00000000
peekViewEditorGutter.background #262626
peekViewResult.background #262626
peekViewResult.fileForeground #dddddd
peekViewResult.lineForeground #dddddd
peekViewResult.matchHighlightBackground #464646
peekViewResult.selectionBackground #464646
peekViewResult.selectionForeground #dddddd
peekViewTitle.background #262626
peekViewTitleDescription.foreground #dddddd
peekViewTitleLabel.foreground #dddddd
pickerGroup.border #262626
pickerGroup.foreground #666666
progressBar.background #363636
scrollbar.shadow #00000000
scrollbarSlider.activeBackground #f2f2f218
scrollbarSlider.background #f2f2f212
scrollbarSlider.hoverBackground #f2f2f224
selection.background #666666
settings.checkboxBackground #363636
settings.checkboxBorder #363636
settings.checkboxForeground #dddddd
settings.dropdownBackground #363636
settings.dropdownBorder #363636
settings.dropdownForeground #dddddd
settings.dropdownListBorder #666666
settings.headerForeground #dddddd
settings.numberInputBackground #363636
settings.numberInputBorder #363636
settings.numberInputForeground #dddddd
settings.textInputBackground #363636
settings.textInputBorder #363636
settings.textInputForeground #dddddd
sideBar.background #161616
sideBar.border #000000
sideBar.dropBackground #262626
sideBar.foreground #dddddd
sideBarSectionHeader.background #262626
sideBarSectionHeader.border #262626
sideBarSectionHeader.foreground #dddddd
sideBarTitle.foreground #dddddd
statusBar.background #161616
statusBar.border #000000
statusBar.debuggingBackground #007acc
statusBar.debuggingBorder #000000
statusBar.debuggingForeground #dddddd
statusBar.foreground #dddddd
statusBar.noFolderBackground #000000
statusBar.noFolderBorder #000000
statusBar.noFolderForeground #dddddd
statusBarItem.activeBackground #ffffff16
statusBarItem.hoverBackground #ffffff20
statusBarItem.prominentBackground #363636
statusBarItem.prominentHoverBackground #ffffff40
tab.activeBackground #1f1f1f
tab.activeBorder #1f1f1f
tab.activeBorderTop #007acc
tab.activeForeground #dddddd
tab.activeModifiedBorder #dddddd
tab.border #161616
tab.hoverBackground #1f1f1f
tab.hoverBorder #161616
tab.inactiveBackground #1f1f1f
tab.inactiveForeground #666666
tab.inactiveModifiedBorder #666666
tab.unfocusedActiveBackground #1f1f1f
tab.unfocusedActiveBorder #1f1f1f
tab.unfocusedActiveBorderTop #666666
tab.unfocusedActiveForeground #dddddd
tab.unfocusedActiveModifiedBorder #dddddd
tab.unfocusedHoverBackground #1f1f1f
tab.unfocusedHoverBorder #161616
tab.unfocusedInactiveForeground #666666
tab.unfocusedInactiveModifiedBorder #666666
terminal.ansiBlack #333333
terminal.ansiBlue #6a7ec8
terminal.ansiBrightBlack #8C8C8C
terminal.ansiBrightBlue #3bc0f0
terminal.ansiBrightCyan #66D9EF
terminal.ansiBrightGreen #A6E22E
terminal.ansiBrightMagenta #6C71C4
terminal.ansiBrightRed #D3201F
terminal.ansiBrightWhite #f8f8f2
terminal.ansiBrightYellow #fd971e
terminal.ansiCyan #66d8ee
terminal.ansiGreen #0fd589
terminal.ansiMagenta #8c6bc8
terminal.ansiRed #F92672
terminal.ansiWhite #e3e3dd
terminal.ansiYellow #FFEE99
terminal.background #262626
terminal.border #161616
terminal.foreground #dddddd
terminal.selectionBackground #ffffff24
terminalCursor.background #262626
terminalCursor.foreground #f2f2f2
textBlockQuote.background #363636
textBlockQuote.border #666666
textCodeBlock.background #161616
textLink.activeForeground #008ae5
textLink.foreground #007acc
textPreformat.foreground #e6db74
textSeparator.foreground #666666
titleBar.activeBackground #161616
titleBar.activeForeground #dddddd
titleBar.border #000000
titleBar.inactiveBackground #161616
titleBar.inactiveForeground #666666
walkThrough.embeddedEditorBackground #0f0f0f
widget.shadow #00000088 #F92672
meta.template.expression #F8F8F2 —
constant.language #AE81FF —
constant.character, constant.other #AE81FF —
storage.type #3bc0f0 italic
entity.name.type, entity.name.class #0fd589 underline
entity.other.inherited-class #0fd589 italic underline
entity.name.function #0fd589
variable.parameter #fd971e italic
entity.other.attribute-name #0fd589
support.type, support.class #3bc0f0 italic
invalid.deprecated #F8F8F0 —
invalid.deprecated.html #F9267299 —
meta.structure.dictionary.json string.quoted.double.json #CFCFC2 —
meta.diff, meta.diff.header #75715E —
constant.numeric.line-number.find-in-files - match #AE81FFA0 —
entity.name.filename.find-in-files #FFEE99 —
markup.bold, markup.italic #3bc0f0 —
markup.heading.setext #0fd589
token.error-token #f44747 —
token.debug-token #b267e6 —
variable.language #fd971e —
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 } !` ;
}
Monokard Theme | Coding Theme