Monokai v2.1

Name: Monokai v2.1
Author: Raymond Li

Publisher: Raymond LiThemes in package: 1

Monokai v2.1 — a dark Monokai variant ported from the Kate/KDE color scheme of the same name.

Open in VS Code GitHub

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Monokai v2.1 — Monokai v2.1

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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
31
32
33
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}!`;
}

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*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#f92672
activityBar.background#1b1b1b
activityBar.border#45474e
activityBar.foreground#f8f8f2
activityBar.inactiveForeground#909194
activityBarBadge.background#f92672
activityBarBadge.foreground#f8f8f2
badge.background#4c93ff
badge.foreground#f8f8f2
breadcrumb.activeSelectionForeground#d1d931
breadcrumb.background#222222
breadcrumb.focusForeground#f8f8f2
breadcrumb.foreground#909194
breadcrumbPicker.background#1b1b1b
button.background#4c93ff
button.foreground#f8f8f2
button.hoverBackground#5f9fff
button.secondaryBackground#3a3b32
button.secondaryForeground#f8f8f2
button.secondaryHoverBackground#45474e
charts.blue#66d9ef
charts.foreground#f8f8f2
charts.green#a6e22e
charts.lines#45474e
charts.orange#fd971f
charts.purple#ae81ff
charts.red#f92672
charts.yellow#e6db74
checkbox.background#2b2b2b
checkbox.border#45474e
checkbox.foreground#f8f8f2
debugConsoleInputIcon.foreground#a6e22e
debugIcon.breakpointCurrentStackframeForeground#f1fa8c
debugIcon.breakpointDisabledForeground#bd93f9
debugIcon.breakpointForeground#ff5555
debugIcon.breakpointStackframeForeground#44475a
debugTokenExpression.boolean#ae81ff
debugTokenExpression.error#ff5555
debugTokenExpression.name#ff80f4
debugTokenExpression.number#ae81ff
debugTokenExpression.string#e6db74
debugTokenExpression.value#e6db74
debugToolBar.background#1b1b1b
debugToolBar.border#45474e
descriptionForeground#909194
diffEditor.border#45474e
diffEditor.diagonalFill#45474e
diffEditor.insertedLineBackground#a6e22e18
diffEditor.insertedTextBackground#a6e22e22
diffEditor.removedLineBackground#f9267218
diffEditor.removedTextBackground#f9267222
dropdown.background#2b2b2b
dropdown.border#45474e
dropdown.foreground#f8f8f2
dropdown.listBackground#2b2b2b
editor.background#222222
editor.findMatchBackground#4c93ff99
editor.findMatchHighlightBackground#4c93ff4d
editor.findRangeHighlightBackground#735d1666
editor.focusedStackFrameHighlightBackground#44475a66
editor.foldBackground#3a3b3266
editor.foreground#f8f8f2
editor.hoverHighlightBackground#4c93ff33
editor.inactiveSelectionBackground#4c93ff33
editor.lineHighlightBackground#4c4c4c4d
editor.rangeHighlightBackground#735d1666
editor.selectionBackground#4c93ff66
editor.selectionForeground#f8f8f2
editor.selectionHighlightBackground#4c93ff33
editor.selectionHighlightBorder#4c93ff00
editor.stackFrameHighlightBackground#f1fa8c26
editor.wordHighlightBackground#5b5a4a80
editor.wordHighlightStrongBackground#5b5a4aaa
editorBracketHighlight.foreground1#f8f8f2
editorBracketHighlight.foreground2#f92672
editorBracketHighlight.foreground3#66d9ef
editorBracketHighlight.foreground4#a6e22e
editorBracketHighlight.foreground5#ae81ff
editorBracketHighlight.foreground6#fd971f
editorBracketHighlight.unexpectedBracket.foreground#ff5555
editorBracketMatch.background#5b5a4a66
editorBracketMatch.border#5b5a4a
editorCodeLens.foreground#75715e
editorCursor.background#222222
editorCursor.foreground#f8f8f2
editorError.foreground#ff5555
editorGhostText.foreground#75715e
editorGroup.border#45474e
editorGroup.dropBackground#4c93ff40
editorGroupHeader.noTabsBackground#1b1b1b
editorGroupHeader.tabsBackground#1b1b1b
editorGroupHeader.tabsBorder#45474e
editorGutter.addedBackground#20e852
editorGutter.background#222222
editorGutter.deletedBackground#f92672
editorGutter.foldingControlForeground#909194
editorGutter.modifiedBackground#ff473d
editorHint.foreground#f1fa8c
editorHoverWidget.background#1b1b1b
editorHoverWidget.border#45474e
editorIndentGuide.activeBackground1#6272a4
editorIndentGuide.background1#6272a44d
editorInfo.foreground#66d9ef
editorInlayHint.background#2b2b2b
editorInlayHint.foreground#909194
editorLineNumber.activeForeground#d1d931
editorLineNumber.foreground#909194
editorLink.activeForeground#66d9ef
editorMarkerNavigation.background#1b1b1b
editorMarkerNavigationError.background#ff5555
editorMarkerNavigationInfo.background#66d9ef
editorMarkerNavigationWarning.background#ffb86c
editorOverviewRuler.addedForeground#20e852
editorOverviewRuler.border#45474e
editorOverviewRuler.bracketMatchForeground#5b5a4a
editorOverviewRuler.deletedForeground#f92672
editorOverviewRuler.errorForeground#ff5555
editorOverviewRuler.findMatchForeground#4c93ff
editorOverviewRuler.infoForeground#66d9ef
editorOverviewRuler.modifiedForeground#ff473d
editorOverviewRuler.rangeHighlightForeground#735d16
editorOverviewRuler.selectionHighlightForeground#4c93ff
editorOverviewRuler.warningForeground#ffb86c
editorOverviewRuler.wordHighlightForeground#5b5a4a
editorRuler.foreground#282a36
editorStickyScroll.background#1b1b1b
editorStickyScrollHover.background#2b2b2b
editorSuggestWidget.background#1b1b1b
editorSuggestWidget.border#45474e
editorSuggestWidget.foreground#f8f8f2
editorSuggestWidget.highlightForeground#d1d931
editorSuggestWidget.selectedBackground#4c4c4c
editorWarning.foreground#ffb86c
editorWhitespace.foreground#6272a4
editorWidget.background#1b1b1b
editorWidget.border#45474e
editorWidget.foreground#f8f8f2
errorForeground#ff5555
focusBorder#4c93ff
foreground#f8f8f2
gitDecoration.addedResourceForeground#20e852
gitDecoration.conflictingResourceForeground#ffb86c
gitDecoration.deletedResourceForeground#f92672
gitDecoration.ignoredResourceForeground#75715e
gitDecoration.modifiedResourceForeground#ff473d
gitDecoration.stageDeletedResourceForeground#f92672
gitDecoration.stageModifiedResourceForeground#e6db74
gitDecoration.untrackedResourceForeground#a6e22e
icon.foreground#f8f8f2
input.background#1b1b1b
input.border#45474e
input.foreground#f8f8f2
input.placeholderForeground#909194
inputOption.activeBackground#4c93ff66
inputOption.activeBorder#4c93ff
inputOption.activeForeground#f8f8f2
inputValidation.errorBackground#5a2222
inputValidation.errorBorder#ff5555
inputValidation.infoBackground#22405a
inputValidation.infoBorder#66d9ef
inputValidation.warningBackground#5a4522
inputValidation.warningBorder#ffb86c
keybindingLabel.background#2b2b2b
keybindingLabel.border#45474e
keybindingLabel.bottomBorder#45474e
keybindingLabel.foreground#f8f8f2
list.activeSelectionBackground#4c4c4c
list.activeSelectionForeground#f8f8f2
list.dropBackground#4c93ff40
list.errorForeground#ff5555
list.focusBackground#4c4c4c
list.focusForeground#f8f8f2
list.highlightForeground#d1d931
list.hoverBackground#2f2f2f
list.hoverForeground#f8f8f2
list.inactiveSelectionBackground#333333
list.inactiveSelectionForeground#f8f8f2
list.warningForeground#ffb86c
listFilterWidget.background#2b2b2b
listFilterWidget.noMatchesOutline#ff5555
listFilterWidget.outline#4c93ff
menu.background#1b1b1b
menu.border#45474e
menu.foreground#f8f8f2
menu.selectionBackground#4c4c4c
menu.selectionForeground#f8f8f2
menu.separatorBackground#45474e
menubar.selectionBackground#4c4c4c
menubar.selectionForeground#f8f8f2
minimap.errorHighlight#ff5555
minimap.findMatchHighlight#4c93ff
minimap.selectionHighlight#4c93ff
minimap.warningHighlight#ffb86c
minimapGutter.addedBackground#20e852
minimapGutter.deletedBackground#f92672
minimapGutter.modifiedBackground#ff473d
notificationCenterHeader.background#222222
notificationLink.foreground#66d9ef
notifications.background#1b1b1b
notifications.border#45474e
notifications.foreground#f8f8f2
notificationsErrorIcon.foreground#ff5555
notificationsInfoIcon.foreground#66d9ef
notificationsWarningIcon.foreground#ffb86c
panel.background#1b1b1b
panel.border#45474e
panelTitle.activeBorder#f92672
panelTitle.activeForeground#f8f8f2
panelTitle.inactiveForeground#909194
peekView.border#4c93ff
peekViewEditor.background#1b1b1b
peekViewEditor.matchHighlightBackground#4c93ff66
peekViewResult.background#1b1b1b
peekViewResult.fileForeground#f8f8f2
peekViewResult.lineForeground#d0d0d0
peekViewResult.matchHighlightBackground#4c93ff66
peekViewResult.selectionBackground#4c4c4c
peekViewResult.selectionForeground#f8f8f2
peekViewTitle.background#222222
peekViewTitleDescription.foreground#909194
peekViewTitleLabel.foreground#f8f8f2
problemsErrorIcon.foreground#ff5555
problemsInfoIcon.foreground#66d9ef
problemsWarningIcon.foreground#ffb86c
progressBar.background#a6e22e
sash.hoverBorder#4c93ff
scrollbar.shadow#00000060
scrollbarSlider.activeBackground#909194aa
scrollbarSlider.background#4c4c4c80
scrollbarSlider.hoverBackground#5b5a4aaa
selection.background#4c93ff66
settings.headerForeground#f8f8f2
settings.modifiedItemIndicator#ff473d
sideBar.background#1b1b1b
sideBar.border#45474e
sideBar.foreground#d0d0d0
sideBarSectionHeader.background#222222
sideBarSectionHeader.border#45474e
sideBarSectionHeader.foreground#f8f8f2
sideBarTitle.foreground#f8f8f2
statusBar.background#1b1b1b
statusBar.border#45474e
statusBar.debuggingBackground#ffb86c
statusBar.debuggingForeground#222222
statusBar.foreground#d0d0d0
statusBar.noFolderBackground#1b1b1b
statusBarItem.errorBackground#ff5555
statusBarItem.errorForeground#222222
statusBarItem.hoverBackground#4c4c4c
statusBarItem.remoteBackground#a6e22e
statusBarItem.remoteForeground#222222
statusBarItem.warningBackground#ffb86c
statusBarItem.warningForeground#222222
tab.activeBackground#222222
tab.activeBorderTop#f92672
tab.activeForeground#f8f8f2
tab.activeModifiedBorder#ff473d
tab.border#45474e
tab.hoverBackground#2b2b2b
tab.inactiveBackground#1b1b1b
tab.inactiveForeground#909194
tab.inactiveModifiedBorder#ff473d
tab.unfocusedActiveForeground#d0d0d0
tab.unfocusedInactiveForeground#75715e
terminal.ansiBlack#222222
terminal.ansiBlue#66d9ef
terminal.ansiBrightBlack#75715e
terminal.ansiBrightBlue#4c93ff
terminal.ansiBrightCyan#52afbf
terminal.ansiBrightGreen#20e852
terminal.ansiBrightMagenta#ff80f4
terminal.ansiBrightRed#ff5555
terminal.ansiBrightWhite#f8f8f2
terminal.ansiBrightYellow#f1fa8c
terminal.ansiCyan#66d9ef
terminal.ansiGreen#a6e22e
terminal.ansiMagenta#ae81ff
terminal.ansiRed#f92672
terminal.ansiWhite#d0d0d0
terminal.ansiYellow#e6db74
terminal.background#222222
terminal.foreground#f8f8f2
terminal.selectionBackground#4c93ff66
terminalCursor.foreground#f8f8f2
textBlockQuote.background#1b1b1b
textBlockQuote.border#45474e
textCodeBlock.background#1b1b1b
textLink.activeForeground#a6e22e
textLink.foreground#66d9ef
textPreformat.foreground#e6db74
textSeparator.foreground#45474e
titleBar.activeBackground#1b1b1b
titleBar.activeForeground#f8f8f2
titleBar.border#45474e
titleBar.inactiveBackground#1b1b1b
titleBar.inactiveForeground#909194
tree.indentGuidesStroke#45474e
widget.shadow#00000060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.embedded, source.groovy.embedded, variable.legacy.builtin.python	#f8f8f2	—
comment, punctuation.definition.comment	#d0d0d0	—
comment.block.documentation, comment.block.javadoc, string.quoted.docstring	#a3a3ff	—
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, keyword.other.documentation, comment.block.documentation keyword, comment.block.documentation storage.type, entity.name.tag.documentation	#52afbf	—
meta.decorator entity.name.function, punctuation.decorator, storage.type.annotation, meta.annotation, entity.name.function.decorator	#a3a3ff	—
comment.block.region, meta.preprocessor.region	#75715e	—
keyword.other.alert, comment keyword.codetag.notation, comment.line.todo	#ff5555	bold
keyword, keyword.other, storage, storage.type.function.arrow, storage.modifier, keyword.operator.new, keyword.operator.expression, keyword.operator.delete, keyword.operator.instanceof, keyword.operator.of, keyword.operator.in, keyword.operator.sizeof, keyword.operator.logical.python	#66d9ef	bold
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.exception, keyword.control.trycatch, keyword.control.return, storage.type.class.python	#f92672
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.at-rule.import, keyword.other.import, keyword.other.using, keyword.package, keyword.import, meta.import keyword.other, keyword.control.directive.include	#f92672
support.type.builtin, support.class.builtin, constant.language.builtin, variable.language.builtin, support.function.builtin, support.variable.magic, support.type.exception	#66d9ef	bold
storage.type, storage.type.primitive, storage.type.built-in, support.type, support.type.primitive, entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, entity.other.inherited-class, support.class, meta.type.annotation entity.name.type	#66d9ef	italic
entity.name.function, meta.function-call entity.name.function, meta.function-call.generic, support.function, variable.function, meta.require, entity.name.method, entity.name.function.member	#a6e22e
entity.name.function.preprocessor, entity.name.function.macro, support.function.macro, meta.macro entity.name.function	#a6e22e	—
meta.preprocessor, keyword.control.directive, punctuation.definition.directive, keyword.preprocessor	#329932	—
string.quoted.other.lt-gt.include, meta.preprocessor.include string, meta.preprocessor.string	#e6db74	—
variable, variable.other, variable.other.readwrite, meta.definition.variable variable.other, variable.other.global, punctuation.definition.variable	#ff80f4	—
variable.parameter, meta.function.parameters variable, entity.other.attribute-name, meta.attribute, variable.other.makefile	#fd971f	—
variable.language.this, variable.language.self, variable.language.special.self, keyword.other.this, variable.parameter.function.language.special.self	#fd971f	—
variable.other.property, variable.other.object.property, meta.property-name, support.variable.property, variable.other.member	#f8f8f2	—
variable.other.enummember, variable.other.constant, constant.other.enum	#ae81ff	—
constant, constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, support.constant, keyword.other.unit	#ae81ff	—
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary, constant.other.placeholder.numeric	#ae81ff	—
string, string.quoted, string.quoted.single, string.quoted.double, punctuation.definition.string, string.unquoted, constant.character.escape.line-continuation	#e6db74	—
string.quoted.single.c, constant.character, string.quoted.single.char	#e6db74	—
string.quoted.other.raw, string.quoted.triple, string.unquoted.heredoc, string.regexp.raw, meta.string.raw	#d8c72c	—
string.regexp, string.template, string.interpolated, punctuation.definition.string.template, constant.other.symbol	#e6db74	—
constant.character.escape, constant.other.character-class.escape, constant.character.entity, keyword.other.escape	#ae81ff	—
punctuation.definition.template-expression, punctuation.section.embedded, meta.template.expression punctuation.definition, constant.other.placeholder, punctuation.definition.interpolation	#f92672	—
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.bitwise, keyword.operator.ternary, punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, meta.brace, punctuation.section	#d0d0d0	—
entity.name.label, entity.name.section, support.other	#a6e22e	—
support.type.property-name.json.comments, keyword.other.special-method	#e5ce00	—
invalid, invalid.illegal	#ff5555	underline
invalid.deprecated	#ff5555	—
support.type.property-name.json, meta.structure.dictionary.json support.type.property-name, entity.name.tag.yaml, support.type.property-name.toml	#f92672
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown	#a6e22e	bold
markup.bold, punctuation.definition.bold.markdown	#66d9ef	bold
markup.italic, punctuation.definition.italic.markdown	#66d9ef	italic
markup.underline.link, string.other.link, constant.other.reference.link.markdown, punctuation.definition.constant.markdown, meta.link.reference	#ae81ff	—
string.other.link.title.markdown, string.other.link.description.markdown	#66d9ef	—
markup.inline.raw, markup.raw.block, fenced_code.block.language	#e6db74	—
markup.list punctuation.definition.list, beginning.punctuation.definition.list.markdown, markup.quote	#d0d0d0	—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted	#a6e22e	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#f92672	—
markup.changed, meta.diff.range, punctuation.definition.changed	#e6db74	—
entity.name.tag, punctuation.definition.tag, meta.tag	#f92672	—
support.class.component, entity.name.tag.namespace, meta.jsx.children support.class.component, entity.name.tag.tsx support.class.component	#66d9ef
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#a6e22e	—
support.type.property-name.css, support.type.vendored.property-name.css	#66d9ef	—
support.constant.property-value.css, meta.property-value.css, constant.other.color	#ae81ff	—
entity.name.function.target.makefile, entity.name.function.target	#a6e22e	—
storage.modifier.lifetime.rust, entity.name.lifetime.rust, punctuation.definition.lifetime.rust	#f92672	—
entity.name.function.macro.rust, support.function.macro.rust, meta.macro.rules.rust entity.name	#a6e22e	—
constant.language.go, support.type.builtin.go	#ae81ff	—
variable.other.register, storage.other.register, support.type.register	#fd971f
keyword.operator.quantifier.regexp, keyword.control.anchor.regexp, keyword.other.back-reference.regexp	#ae81ff	—