Skip to main content
Monokai Sharp 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 #30343b activityBar.dropBackground #474f57 activityBar.foreground #d0edff activityBarBadge.background #d0edff activityBarBadge.foreground #191a1f badge.background #d0edff tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #d0edff — comment #697681 — string #f7f025 — constant.numeric #8a8aff — constant.language
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Monokai Sharp Theme — Monokai Sharp
badge.foreground
#191a1f
breadcrumb.activeSelectionForeground #d0edff
breadcrumb.focusForeground #d0edff
breadcrumb.foreground #a2b8c7
breadcrumbPicker.background #24272d
button.background #0a70a5
button.foreground #ffffff
button.hoverBackground #14374c
debugExceptionWidget.background #a30a4a
debugExceptionWidget.border #ff0066
debugIcon.continueForeground #00aaff
debugIcon.disconnectForeground #ff0066
debugIcon.pauseForeground #00aaff
debugIcon.restartForeground #00ff91
debugIcon.startForeground #00ff91
debugIcon.stepBackForeground #00aaff
debugIcon.stepIntoForeground #00aaff
debugIcon.stepOutForeground #00aaff
debugIcon.stepOverForeground #00aaff
debugIcon.stopForeground #ff0066
debugToolBar.background #30343b
descriptionForeground #aec5d5
diffEditor.diagonalFill #30343b
diffEditor.insertedLineBackground #00ff9111
diffEditor.insertedTextBackground #00ff9122
diffEditor.removedLineBackground #ff006611
diffEditor.removedTextBackground #ff006622
diffEditorGutter.insertedLineBackground #00ff9133
diffEditorGutter.removedLineBackground #ff006633
dropdown.background #30343b
dropdown.foreground #d0edff
dropdown.listBackground #191a1f
editor.background #191a1f
editor.findMatchBackground #d0edff66
editor.findMatchHighlightBackground #f7f02533
editor.foreground #d0edff
editor.hoverHighlightBackground #d0edff11
editor.inactiveSelectionBackground #30343b
editor.lineHighlightBackground #d0edff11
editor.rangeHighlightBackground #24272d
editor.selectionBackground #d0edff33
editor.selectionForeground #d0edff
editor.selectionHighlightBackground #00aaff33
editor.wordHighlightBackground #d0edff33
editor.wordHighlightStrongBackground #00aaff44
editorBracketMatch.background #d0edff44
editorBracketMatch.border #d0edff00
editorCodeLens.foreground #75848f
editorCursor.background #000000
editorCursor.foreground #d0edff
editorError.foreground #ff0066
editorGroup.border #3b4249
editorGroup.dropBackground #d0edff44
editorGroup.emptyBackground #191a1f
editorGroupHeader.noTabsBackground #191a1f
editorGroupHeader.tabsBackground #24272d
editorGutter.addedBackground #0aa363
editorGutter.background #191a1f
editorGutter.deletedBackground #a30a4a
editorGutter.modifiedBackground #9e9a23
editorHint.foreground #00ff91
editorHoverWidget.background #30343b
editorHoverWidget.border #3b4249
editorIndentGuide.activeBackground #474f57
editorIndentGuide.background #30343b
editorInfo.foreground #00aaff
editorInlayHint.background #30343b
editorInlayHint.foreground #a2b8c7
editorLineNumber.activeForeground #8b9eab
editorLineNumber.foreground #5e6973
editorLink.activeForeground #00aaff
editorMarkerNavigation.background #30343b
editorMarkerNavigationError.background #3b4249
editorMarkerNavigationInfo.background #3b4249
editorMarkerNavigationWarning.background #3b4249
editorOverviewRuler.addedForeground #0aa363
editorOverviewRuler.border #d0edff00
editorOverviewRuler.bracketMatchForeground #d0edff44
editorOverviewRuler.commonContentForeground #d0edff66
editorOverviewRuler.currentContentForeground #00ff9166
editorOverviewRuler.deletedForeground #a30a4a
editorOverviewRuler.errorForeground #ff0066
editorOverviewRuler.findMatchForeground #f7f02533
editorOverviewRuler.incomingContentForeground #00aaff66
editorOverviewRuler.infoForeground #00aaff
editorOverviewRuler.modifiedForeground #9e9a23
editorOverviewRuler.rangeHighlightForeground #d0edff11
editorOverviewRuler.selectionHighlightForeground #00aaff44
editorOverviewRuler.warningForeground #ff6a1f
editorOverviewRuler.wordHighlightForeground #d0edff33
editorOverviewRuler.wordHighlightStrongForeground #00aaff44
editorRuler.foreground #30343b
editorSuggestWidget.background #24272d
editorSuggestWidget.border #3b4249
editorSuggestWidget.foreground #d0edff
editorSuggestWidget.highlightForeground #00aaff
editorSuggestWidget.selectedBackground #3b4249
editorUnnecessaryCode.opacity #ffffff88
editorWarning.foreground #ff6a1f
editorWhitespace.foreground #474f57
editorWidget.background #24272d
editorWidget.resizeBorder #30343b
errorForeground #ff0066
extensionButton.prominentBackground #0aa363
extensionButton.prominentForeground #ffffff
extensionButton.prominentHoverBackground #144836
focusBorder #3b4249
foreground #d0edff
gitDecoration.addedResourceForeground #00ff91
gitDecoration.conflictingResourceForeground #8a8aff
gitDecoration.deletedResourceForeground #ff0066
gitDecoration.ignoredResourceForeground #7b85a1
gitDecoration.modifiedResourceForeground #f7f025
gitDecoration.renamedResourceForeground #53f8bd
gitDecoration.stageDeletedResourceForeground #ff0066
gitDecoration.stageModifiedResourceForeground #f7f025
gitDecoration.submoduleResourceForeground #7b85a1
gitDecoration.untrackedResourceForeground #00ff91
input.background #30343b
input.foreground #d0edff
input.placeholderForeground #697681
inputOption.activeBorder #d0edff
inputValidation.errorBackground #a30a4a
inputValidation.errorBorder #ff0066
inputValidation.infoBackground #0a70a5
inputValidation.infoBorder #00aaff
inputValidation.warningBackground #a34a1f
inputValidation.warningBorder #ff6a1f
list.activeSelectionBackground #474f57
list.activeSelectionForeground #d0edff
list.dropBackground #3b4249
list.errorForeground #ff0066
list.focusBackground #30343b
list.focusForeground #d0edff
list.highlightForeground #00aaff
list.hoverBackground #30343b
list.hoverForeground #d0edff
list.inactiveFocusBackground #30343b
list.inactiveSelectionBackground #3b4249
list.inactiveSelectionForeground #d0edff
list.invalidItemForeground #ff0066
list.warningForeground #ff6a1f
menu.background #3b4249
menu.foreground #d0edff
menu.selectionBackground #525c65
menu.selectionForeground #d0edff
menubar.selectionBackground #525c65
menubar.selectionForeground #d0edff
merge.commonContentBackground #d0edff22
merge.commonHeaderBackground #d0edff66
merge.currentContentBackground #00ff9122
merge.currentHeaderBackground #00ff9166
merge.incomingContentBackground #00aaff22
merge.incomingHeaderBackground #00aaff66
minimap.background #191a1f
minimap.errorHighlight #ff0066
minimap.findMatchHighlight #f7f025
minimap.selectionHighlight #eeeeee33
minimap.warningHighlight #ff6a1f
minimapGutter.addedBackground #0aa363
minimapGutter.deletedBackground #a30a4a
minimapGutter.modifiedBackground #9e9a23
minimapSlider.activeBackground #d0edff33
minimapSlider.background #d0edff11
minimapSlider.hoverBackground #d0edff22
notificationCenterHeader.background #30343b
notificationCenterHeader.foreground #d0edff
notificationLink.foreground #00aaff
notifications.background #24272d
notifications.foreground #d0edff
panel.background #191a1f
panel.border #3b4249
panel.dropBackground #30343b
panelTitle.activeBorder #d0edff
panelTitle.activeForeground #d0edff
panelTitle.inactiveForeground #75848f
peekView.border #3b4249
peekViewEditor.background #191a1f
peekViewEditor.matchHighlightBackground #f7f02533
peekViewEditorGutter.background #24272d
peekViewResult.background #24272d
peekViewResult.fileForeground #d0edff
peekViewResult.lineForeground #d0edff
peekViewResult.matchHighlightBackground #f7f02533
peekViewResult.selectionBackground #30343b
peekViewResult.selectionForeground #d0edff
peekViewTitle.background #3b4249
peekViewTitleDescription.foreground #a2b8c7
peekViewTitleLabel.foreground #d0edff
pickerGroup.foreground #75848f
progressBar.background #697681
scrollbar.shadow #00000044
scrollbarSlider.activeBackground #d0edff44
scrollbarSlider.background #d0edff22
scrollbarSlider.hoverBackground #d0edff33
selection.background #474f57
settings.headerForeground #d0edff
settings.modifiedItemIndicator #75848f
sideBar.background #24272d
sideBar.dropBackground #3b4249
sideBar.foreground #d0edff
sideBarSectionHeader.background #30343b
sideBarSectionHeader.foreground #b9d3e3
sideBarTitle.foreground #b9d3e3
statusBar.background #3b4249
statusBar.debuggingBackground #d0edff
statusBar.debuggingForeground #191a1f
statusBar.foreground #d0edff
statusBar.noFolderBackground #5e6973
statusBar.noFolderForeground #d0edff
statusBarItem.activeBackground #75848f88
statusBarItem.hoverBackground #75848f44
statusBarItem.prominentBackground #0aa363
statusBarItem.prominentHoverBackground #144836
tab.activeBackground #191a1f
tab.activeForeground #d0edff
tab.inactiveBackground #30343b
tab.inactiveForeground #a2b8c7
tab.unfocusedActiveForeground #a2b8c7
tab.unfocusedInactiveForeground #75848f
terminal.ansiBlack #191a1f
terminal.ansiBlue #00aaff
terminal.ansiBrightBlack #3a3c47
terminal.ansiBrightBlue #53c5ff
terminal.ansiBrightCyan #53d2d0
terminal.ansiBrightGreen #53f8bd
terminal.ansiBrightMagenta #cc8eff
terminal.ansiBrightRed #ec5fa3
terminal.ansiBrightWhite #d0edff
terminal.ansiBrightYellow #e7ef7c
terminal.ansiCyan #00c0b0
terminal.ansiGreen #00ff91
terminal.ansiMagenta #ca4fff
terminal.ansiRed #ff0066
terminal.ansiWhite #acc1ce
terminal.ansiYellow #f7f025
terminal.background #191a1f
terminal.foreground #d0edff
textBlockQuote.background #30343b
textBlockQuote.border #00aaff
textCodeBlock.background #000000
textLink.activeForeground #00aaff
textLink.foreground #00aaff
textPreformat.foreground #e7ef7c
textSeparator.foreground #aec5d5
titleBar.activeBackground #3b4249
titleBar.activeForeground #d0edff
titleBar.inactiveBackground #30343b
titleBar.inactiveForeground #75848f
welcomePage.buttonBackground #24272d
welcomePage.buttonHoverBackground #30343b
widget.shadow #00000044
#8a8aff
constant.character, constant.other #8a8aff —
entity.name.type, entity.name.class #00ff91 —
entity.other.inherited-class #00ff91 —
entity.name.function #00ff91 —
variable.parameter #ff6a1f —
entity.other.attribute-name #00ff91 —
support.type, support.class #00aaff —
invalid.deprecated #ffffff —
meta.structure.dictionary.json string.quoted.double.json #f7f025 —
meta.diff, meta.diff.header #697681 —
constant.numeric.line-number.find-in-files - match #8a8affA0 —
entity.name.filename.find-in-files #f7f025 —
markup.bold.markdown #f7f025 bold
markup.inline.raw.string.markdown, markup.raw.block.markdown, markup.fenced_code.block.markdown #ff6a1f —
markup.italic.markdown #00ff91 italic
markup.list.unnumbered.markdown, markup.list.numbered.markdown #00aaff —
markup.heading.markdown #ff0066 bold
meta.link.inline.markdown #8a8aff —
meta.image.inline.markdown #8a8aff —
meta.separator.markdown #697681 —
markup.quote.markdown #8a8aff —
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 }!` ;
}