Skip to main content
Home Theme VS Code Speedy Monokai A Monokai theme optimized for high definition, vivid color displays.
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 #202020 activityBar.dropBackground #ffffff1f activityBar.foreground #d7dae0 activityBarBadge.background #528bff activityBarBadge.foreground #f8fafd badge.background #4d4d4d tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, string.comment #afafafde italic comment.block.documentation storage.type.class, punctuation.definition.block.tag, entity.name.type.instance #afafafde italic string, string.template #fffc67 — constant.numeric #BB95FF — string.embedded.begin, string.embedded.end
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Speedy Monokai — Speedy Monokai Theme
badge.foreground
#ffffff
button.background #528bff
button.foreground #ffffff
button.hoverBackground #95b9ff
debugExceptionWidget.background #420b0d
debugExceptionWidget.border #a31515
debugToolBar.background #333333
descriptionForeground #ccccccb3
diffEditor.insertedTextBackground #007e9733
diffEditor.removedTextBackground #ff000033
dropdown.background #282b31
dropdown.border #202020
dropdown.foreground #f0f0f0
editor.background #202020
editor.findMatchBackground #42557b
editor.findMatchHighlightBackground #314365
editor.findRangeHighlightBackground #3a3d4166
editor.foreground #f8f8f2
editor.hoverHighlightBackground #264f7840
editor.inactiveSelectionBackground #3e445180
editor.lineHighlightBackground #3d3d3d
editor.lineHighlightBorder #3d3d3d
editor.rangeHighlightBackground #ffffff0b
editor.selectionBackground #5e5e5e
editor.selectionHighlightBackground #31364099
editor.wordHighlightBackground #575757b8
editor.wordHighlightStrongBackground #004972b8
editorBracketMatch.background #0064001a
editorBracketMatch.border #888888
editorCodeLens.foreground #999999
editorCursor.foreground #f8f8f0
editorError.foreground #c24038
editorGroup.background #282b31
editorGroup.border #202020
editorGroup.dropBackground #53595d80
editorGroupHeader.noTabsBackground #202020
editorGroupHeader.tabsBackground #000000
editorGroupHeader.tabsBorder #000000
editorGutter.addedBackground #587c0c
editorGutter.background #202020
editorGutter.deletedBackground #94151b
editorGutter.modifiedBackground #0c7d9d
editorHint.foreground #eeeeeeb3
editorHoverWidget.background #3b4048
editorHoverWidget.border #2781b8
editorIndentGuide.activeBackground #3b4048
editorIndentGuide.background #3b4048
editorInfo.foreground #008000
editorLineNumber.activeForeground #bebebe
editorLineNumber.foreground #616161
editorLink.activeForeground #6ac5ff
editorMarkerNavigation.background #2d2d30
editorMarkerNavigationError.background #c24038
editorMarkerNavigationInfo.background #008000
editorMarkerNavigationWarning.background #4d9e4d
editorOverviewRuler.addedForeground #007acc99
editorOverviewRuler.border #7f7f7f4d
editorOverviewRuler.bracketMatchForeground #a0a0a0
editorOverviewRuler.commonContentForeground #60606066
editorOverviewRuler.currentContentForeground #40c8ae80
editorOverviewRuler.deletedForeground #007acc99
editorOverviewRuler.errorForeground #ff1212b3
editorOverviewRuler.findMatchForeground #f6b94db3
editorOverviewRuler.incomingContentForeground #40a6ff80
editorOverviewRuler.infoForeground #121288b3
editorOverviewRuler.modifiedForeground #007acc99
editorOverviewRuler.rangeHighlightForeground #007acc99
editorOverviewRuler.selectionHighlightForeground #a0a0a0cc
editorOverviewRuler.warningForeground #128812b3
editorOverviewRuler.wordHighlightForeground #a0a0a0cc
editorOverviewRuler.wordHighlightStrongForeground #c0a0c0cc
editorPane.background #202020
editorRuler.foreground #484848
editorSuggestWidget.background #202020
editorSuggestWidget.border #202020
editorSuggestWidget.foreground #f8f8f2
editorSuggestWidget.highlightForeground #c5c5c5
editorSuggestWidget.selectedBackground #2c313a
editorUnnecessaryCode.opacity #202020aa
editorWarning.foreground #4d9e4d
editorWhitespace.foreground #3b4048
editorWidget.background #2d2d30
editorWidget.border #454545
errorForeground #f48771
extensionButton.prominentBackground #327e36
extensionButton.prominentForeground #ffffff
extensionButton.prominentHoverBackground #28632b
focusBorder #0e639c99
foreground #cccccc
gitDecoration.addedResourceForeground #81b88b
gitDecoration.conflictingResourceForeground #6c6cc4
gitDecoration.deletedResourceForeground #c74e39
gitDecoration.ignoredResourceForeground #a7a8a9
gitDecoration.modifiedResourceForeground #55c3ff
gitDecoration.submoduleResourceForeground #8db9e2
gitDecoration.untrackedResourceForeground #73c991
gitlens.gutterBackgroundColor #ffffff00
gitlens.gutterForegroundColor #e9e9e9
gitlens.gutterUncommittedForegroundColor #00bcf299
gitlens.lineHighlightBackgroundColor #00bcf233
gitlens.lineHighlightOverviewRulerColor #00bcf299
gitlens.trailingLineBackgroundColor #00000000
gitlens.trailingLineForegroundColor #99999959
input.background #1d1f23
input.foreground #cccccc
inputOption.activeBorder #007acc
inputValidation.errorBackground #5a1d1d
inputValidation.errorBorder #be1100
inputValidation.infoBackground #063b49
inputValidation.infoBorder #007acc
inputValidation.warningBackground #352a05
inputValidation.warningBorder #b89500
list.activeSelectionBackground #2c313a
list.activeSelectionForeground #d7dae0
list.dropBackground #383e4a
list.errorForeground #ff6e67
list.focusBackground #383e4a
list.highlightForeground #c5c5c5
list.hoverBackground #292d35
list.inactiveFocusBackground #313135
list.inactiveSelectionBackground #2c313a
list.inactiveSelectionForeground #d7dae0
list.invalidItemForeground #b89500
list.warningForeground #e5e500
merge.commonContentBackground #60606029
merge.commonHeaderBackground #60606066
merge.currentContentBackground #40c8ae33
merge.currentHeaderBackground #40c8ae80
merge.incomingContentBackground #40a6ff33
merge.incomingHeaderBackground #40a6ff80
notificationCenterHeader.background #3b3b3e
notificationLink.foreground #4080d0
notifications.background #2d2d30
notifications.border #3b3b3e
panel.background #000000
panel.border #202020
panel.dropBackground #ffffff1f
panelTitle.activeBorder #202020
panelTitle.activeForeground #e7e7e7
panelTitle.inactiveForeground #e7e7e780
peekView.border #007acc
peekViewEditor.background #202020
peekViewEditor.matchHighlightBackground #f6b94d99
peekViewEditorGutter.background #202020
peekViewResult.background #252526
peekViewResult.fileForeground #ffffff
peekViewResult.lineForeground #bbbbbb
peekViewResult.matchHighlightBackground #ea5c004d
peekViewResult.selectionBackground #3399ff33
peekViewResult.selectionForeground #ffffff
peekViewTitle.background #1e1e1e
peekViewTitleDescription.foreground #ccccccb3
peekViewTitleLabel.foreground #ffffff
pickerGroup.border #3f3f46
pickerGroup.foreground #0097fb99
progressBar.background #0e70c0
scrollbar.shadow #0c0d0f
scrollbarSlider.activeBackground #747d9180
scrollbarSlider.background #4e566680
scrollbarSlider.hoverBackground #5a637580
settings.modifiedItemForeground #73c991
sideBar.background #000000
sideBar.border #202020
sideBar.dropBackground #ffffff1f
sideBar.foreground #a9c5d8
sideBarSectionHeader.background #202020
sideBarSectionHeader.foreground #a9c5d8
sideBarTitle.foreground #a9c5d8
statusBar.background #000000
statusBar.border #202020
statusBar.debuggingBackground #202020
statusBar.debuggingBorder #202020
statusBar.debuggingForeground #6ac5ff
statusBar.foreground #6ac5ff
statusBar.noFolderBackground #202020
statusBar.noFolderBorder #202020
statusBar.noFolderForeground #6ac5ff
statusBarItem.activeBackground #ffffff2e
statusBarItem.hoverBackground #2c313a
statusBarItem.prominentBackground #388a34
statusBarItem.prominentHoverBackground #369432
tab.activeBackground #2781b8
tab.activeForeground #ffffff
tab.border #000000
tab.inactiveBackground #144969
tab.inactiveForeground #a9c5d8
tab.unfocusedActiveForeground #ffffff80
tab.unfocusedInactiveForeground #a9c5d880
terminal.ansiBlack #000000
terminal.ansiBlue #0225c7
terminal.ansiBrightBlack #686868
terminal.ansiBrightBlue #6871ff
terminal.ansiBrightCyan #60fdff
terminal.ansiBrightGreen #5ffa68
terminal.ansiBrightMagenta #ff77ff
terminal.ansiBrightRed #c91b00
terminal.ansiBrightWhite #e5e5e5
terminal.ansiBrightYellow #fffc67
terminal.ansiCyan #00c5c7
terminal.ansiGreen #00a600
terminal.ansiMagenta #ca30c7
terminal.ansiRed #990000
terminal.ansiWhite #c7c7c7
terminal.ansiYellow #999900
terminal.background #000000
terminal.foreground #6ac5ff
terminal.selectionBackground #a9c5d840
textBlockQuote.background #7f7f7f1a
textBlockQuote.border #007acc80
textCodeBlock.background #0a0a0a66
textLink.activeForeground #4080d0
textLink.foreground #4080d0
textPreformat.foreground #d7ba7d
textSeparator.foreground #ffffff2e
titleBar.activeBackground #202020
titleBar.activeForeground #9da5b4
titleBar.inactiveBackground #202020
titleBar.inactiveForeground #6b717d
widget.shadow #000000 constant.character, constant.other #BB95FF —
variable.language #f8f8f2 italic
variable.readwrite, variable.readwrite.other.block #55c3ff —
keyword.control #ff6e67 bold italic
keyword.operator.arithmetic #9bffc8
keyword.operator.logical #9bffc8 bold
storage.type.function #ff6e67 italic
storage.type.class #ff6e67 bold italic
storage.modifier #ff6e67 italic
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class #55c3ff bold
meta.objectliteral #f8f8f2 —
variable.other.property, variable.other.block #f6b94d —
entity.other.inherited-class #5ffa68 —
entity.name.function, support.function #5ffa68 —
entity.name.function-call #F8F8F2 —
function.support.builtin, function.support.core #5ffa68 —
entity.other.attribute-name #5ffa68 —
support.type, support.variable, support.constant #55c3ff —
constant.language #ff6e67 —
meta.template.expression.js, keyword.operator.spread #F8F8F2 —
variable.parameter #f6b94d italic
meta.object-literal.key #F8F8F2 —
punctuation.accessor, punctuation.separator.comma, meta.brace.round, punctuation.definition.block #F8F8F2 —
entity.name.tag.js, entity.name.tag.inline.any.html, entity.name.tag.block.any.html, entity.name.tag.structure.any.html, entity.name.tag.jade #d9d9fa —
meta.tag.attributes keyword.operator.assignment.js #fffc67 —
entity.name.tag.css #ff6e67 —
meta.attribute-selector.scss #fffc67 —
variable.css, variable.scss, variable.less, variable.sass #f6b94d —
punctuation.definition.attribute-selector.begin.bracket.square.scss, punctuation.definition.attribute-selector.end.bracket.square.scss #F8F8F2 —
support.constant.media #5ffa68 —
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass, support.function.url #55c3ff italic
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass, support.constant.font-name.css, support.constant.color.w3c-standard-color-name.css, constant.other.color.rgb-value.hex.css #5ffa68 —
support.constant.property-value, meta.property-value.css #6fee4c —
punctuation.separator.list.comma.css, punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css #fff —
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string #5ffa68 —
unit.css, unit.scss, unit.less, unit.sass #5ffa68 —
function.css, function.scss, function.less, function.sass #55c3ff —
support.dictionary.json #55c3ff —
invalid.deprecated #F8F8F0 —
structure.dictionary.property-name.json #CFCFC2 —
string.detected-link #55c3ff —
meta.diff, meta.diff.header #75715E —
constant.numeric.line-number.find-in-files - match #BB95FFA0 —
entity.name.filename.find-in-files #fffc67 —
markup.italic, markup.italic.markdown — italic
punctuation.definition.italic.markdown #696969 —
markup.underline.link.markdown #55c3ff —
markup.bold.markdown — bold
punctuation.definition.bold.markdown #696969 —
markup.heading.markdown #ff6e67 bold
punctuation.definition.heading.markdown #696969 —
markup.quote.markdown #5ffa68 —
meta.separator.markdown #5ffa68 bold
markup.raw.inline.markdown, markup.raw.block.markdown #55c3ff —
punctuation.definition.list_item.markdown #ffffff bold
token.error-token #f44747 —
token.debug-token #b267e6 —
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...
main*
Speedy Monokai | Coding Theme
Button.tsx
31
~/my-project
$
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 }!` ;
}