Monokai Faded

Name: Monokai Faded
Author: Dion Munk

Publisher: Dion MunkThemes in package: 1

A faded Monokai theme for Visual Studio Code.

Open in VS Code GitHub

VS Code preview

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

Monokai Faded — Monokai Faded

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#F8F8F8
activityBar.background#282828
activityBar.border#181818
activityBar.dropBackground#F8F8F814
activityBar.foreground#f8f8f8
activityBarBadge.background#F8F8F8
activityBarBadge.foreground#181818
badge.background#3b3b3b
badge.foreground#f8f8f8
breadcrumb.activeSelectionForeground#F8F8F8
breadcrumb.background#202020
breadcrumb.focusForeground#F8F8F8
breadcrumb.foreground#727272
breadcrumbPicker.background#181818
button.background#484848
button.foreground#f8f8f8
button.hoverBackground#5A5A5A
checkbox.background#181818
checkbox.border#484848
checkbox.foreground#f8f8f8
debugToolBar.background#181818
descriptionForeground#f8f8f8
diffEditor.insertedLineBackground#A9C84114
diffEditor.insertedTextBackground#A9C8412B
diffEditor.removedLineBackground#D13B2E1A
diffEditor.removedTextBackground#D13B2E33
dropdown.background#181818
dropdown.border#484848
dropdown.foreground#f8f8f8
dropdown.listBackground#181818
editor.background#202020
editor.findMatchBackground#FFA500CC
editor.findMatchBorder#FFA50000
editor.findMatchHighlightBackground#FFA50040
editor.findMatchHighlightBorder#FFA50000
editor.findRangeHighlightBackground#FFA50026
editor.foreground#f8f8f8
editor.hoverHighlightBackground#F8F8F81A
editor.inactiveSelectionBackground#F8F8F814
editor.lineHighlightBackground#F8F8F814
editor.rangeHighlightBackground#FFFFFF0D
editor.selectionBackground#f8f8f833
editor.selectionForeground#f8f8f8
editor.selectionHighlightBackground#f8f8f81a
editor.wordHighlightBackground#45454580
editor.wordHighlightStrongBackground#5A5A5A80
editorBracketHighlight.foreground1#DF5077
editorBracketHighlight.foreground2#EA9B40
editorBracketHighlight.foreground3#E0D77B
editorBracketHighlight.foreground4#B5D93F
editorBracketHighlight.foreground5#74C5D9
editorBracketHighlight.foreground6#7D72C8
editorBracketHighlight.unexpectedBracket.foreground#D13B2E
editorBracketMatch.background#5A5A5A40
editorBracketMatch.border#5A5A5A
editorCodeLens.foreground#666666
editorCursor.background#282828
editorCursor.foreground#f8f8f8
editorError.foreground#d13b2e
editorGroup.border#181818
editorGroup.dropBackground#F8F8F814
editorGroup.emptyBackground#202020
editorGroup.focusedEmptyBorder#181818
editorGroupHeader.noTabsBackground#202020
editorGroupHeader.tabsBackground#202020
editorGroupHeader.tabsBorder#181818
editorGutter.addedBackground#B5D93F
editorGutter.background#202020
editorGutter.commentRangeForeground#727272
editorGutter.deletedBackground#D13B2E
editorGutter.modifiedBackground#5c89d6
editorHint.foreground#b5d93f
editorHoverWidget.background#202020
editorHoverWidget.border#484848
editorIndentGuide.activeBackground#727272
editorIndentGuide.activeBackground1#5A5A5A
editorIndentGuide.background#3B3B3B
editorIndentGuide.background1#303030
editorInfo.foreground#74c5d9
editorLightBulb.foreground#E0C452
editorLightBulbAutoFix.foreground#E0C452
editorLineNumber.activeForeground#F8F8F8
editorLineNumber.foreground#727272
editorLink.activeForeground#74C5D9
editorOverviewRuler.addedForeground#B5D93F
editorOverviewRuler.border#181818
editorOverviewRuler.deletedForeground#D13B2E
editorOverviewRuler.errorForeground#D13B2E
editorOverviewRuler.findMatchForeground#FFA50099
editorOverviewRuler.modifiedForeground#5C89D6
editorOverviewRuler.warningForeground#EA9B40
editorPane.background#282828
editorRuler.foreground#303030
editorStickyScroll.background#202020
editorStickyScroll.border#181818
editorStickyScrollHover.background#282828
editorSuggestWidget.background#202020
editorSuggestWidget.border#484848
editorSuggestWidget.foreground#F8F8F8
editorSuggestWidget.highlightForeground#FFA500
editorSuggestWidget.selectedBackground#484848
editorWarning.foreground#ea9b40
editorWhitespace.foreground#3B3B3B
editorWidget.background#202020
editorWidget.border#484848
editorWidget.foreground#F8F8F8
errorForeground#d13b2e
focusBorder#F8F8F899
foreground#f8f8f8
gitDecoration.addedResourceForeground#B5D93F
gitDecoration.conflictingResourceForeground#7d72c8
gitDecoration.deletedResourceForeground#D13B2E
gitDecoration.ignoredResourceForeground#424242
gitDecoration.modifiedResourceForeground#5c89d6
gitDecoration.submoduleResourceForeground#74c5d9
gitDecoration.untrackedResourceForeground#E0D77B
icon.foreground#f8f8f8
imagePreview.border#181818
input.background#181818
input.border#484848
input.placeholderForeground#727272
inputOption.activeBackground#484848
inputOption.activeBorder#181818
inputValidation.errorBackground#d13b2e
inputValidation.errorBorder#181818
inputValidation.errorForeground#f8f8f8
inputValidation.infoBackground#74c5d9
inputValidation.infoBorder#181818
inputValidation.infoForeground#181818
inputValidation.warningBackground#ea9b40
inputValidation.warningBorder#181818
inputValidation.warningForeground#181818
list.activeSelectionBackground#484848
list.activeSelectionForeground#f8f8f8
list.dropBackground#F8F8F814
list.errorForeground#d13b2e
list.focusBackground#F8F8F821
list.focusForeground#ffffff
list.focusOutline#00000000
list.highlightForeground#f8f8f8
list.hoverBackground#F8F8F814
list.hoverForeground#f8f8f8
list.inactiveSelectionBackground#484848
list.inactiveSelectionForeground#f8f8f8
list.invalidItemForeground#ff0000
list.warningForeground#ea9b40
menu.background#181818
menu.border#484848
menu.foreground#F8F8F8
menu.selectionBackground#484848
menu.selectionForeground#F8F8F8
menu.separatorBackground#484848
menubar.selectionBackground#484848
menubar.selectionForeground#FFFFFF
minimap.errorHighlight#d13b2e
minimap.findMatchHighlight#ffa500
minimap.selectionHighlight#F8F8F84D
minimap.warningHighlight#ea9b40
minimapGutter.addedBackground#B5D93F
minimapGutter.deletedBackground#D13B2E
minimapGutter.modifiedBackground#5c89d6
minimapSlider.activeBackground#f8f8f866
minimapSlider.background#F8F8F814
minimapSlider.hoverBackground#F8F8F840
notificationCenter.border#484848
notificationCenterHeader.background#3B3B3B
notificationCenterHeader.foreground#f8f8f8
notificationLink.foreground#74C5D9
notifications.background#181818
notifications.border#181818
notifications.foreground#f8f8f8
notificationsErrorIcon.foreground#d13b2e
notificationsInfoIcon.foreground#74c5d9
notificationsWarningIcon.foreground#ea9b40
panel.background#202020
panel.border#181818
panel.dropBackground#F8F8F814
panelInput.border#484848
panelTitle.activeBorder#F8F8F8
panelTitle.activeForeground#f8f8f8
panelTitle.inactiveForeground#727272
peekView.border#484848
peekViewEditor.background#202020
peekViewEditor.matchHighlightBackground#FFA50040
peekViewResult.background#181818
peekViewResult.fileForeground#F8F8F8
peekViewResult.lineForeground#727272
peekViewResult.matchHighlightBackground#FFA50040
peekViewResult.selectionBackground#303030
peekViewTitle.background#181818
peekViewTitleDescription.foreground#727272
peekViewTitleLabel.foreground#F8F8F8
pickerGroup.border#484848
pickerGroup.foreground#727272
ports.iconRunningProcessForeground#B5D93F
problemsErrorIcon.foreground#d13b2e
problemsInfoIcon.foreground#74c5d9
problemsWarningIcon.foreground#ea9b40
progressBar.background#F8F8F8
quickInput.background#202020
quickInput.border#484848
quickInput.foreground#F8F8F8
quickInputList.focusBackground#484848
quickInputList.focusForeground#FFFFFF
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#f8f8f866
scrollbarSlider.background#F8F8F814
scrollbarSlider.hoverBackground#F8F8F840
selection.background#F8F8F833
settings.dropdownBackground#3B3B3B
settings.dropdownBorder#484848
settings.focusedRowBackground#2828285A
settings.headerForeground#F8F8F8
settings.modifiedItemIndicator#EA9B40
sideBar.background#202020
sideBar.border#181818
sideBar.dropBackground#F8F8F814
sideBar.foreground#727272
sideBarSectionHeader.background#282828
sideBarSectionHeader.border#181818
sideBarSectionHeader.foreground#f8f8f8
sideBarTitle.foreground#f8f8f8
statusBar.background#282828
statusBar.border#181818
statusBar.debuggingBackground#7c71c8
statusBar.debuggingBorder#181818
statusBar.foreground#f8f8f8
statusBar.noFolderBackground#282828
statusBar.noFolderBorder#181818
statusBarItem.activeBackground#F8F8F821
statusBarItem.hoverBackground#F8F8F814
statusBarItem.prominentBackground#181818
statusBarItem.prominentForeground#F8F8F8
statusBarItem.remoteBackground#74C5D9
statusBarItem.remoteForeground#181818
tab.activeBackground#202020
tab.activeBorder#202020
tab.activeBorderTop#F8F8F8
tab.activeForeground#f8f8f8
tab.activeModifiedBorder#5c89d6
tab.border#181818
tab.hoverBackground#F8F8F814
tab.hoverBorder#181818
tab.inactiveBackground#202020
tab.inactiveForeground#727272
tab.inactiveModifiedBorder#5c89d680
tab.lastPinnedBorder#484848
tab.unfocusedActiveBackground#282828
tab.unfocusedActiveBorder#202020
tab.unfocusedActiveBorderTop#F8F8F8
tab.unfocusedActiveForeground#727272
tab.unfocusedActiveModifiedBorder#5C89D680
tab.unfocusedHoverBackground#F8F8F814
tab.unfocusedHoverBorder#181818
tab.unfocusedInactiveForeground#727272
tab.unfocusedInactiveModifiedBorder#5c89d680
terminal.ansiBlack#000000
terminal.ansiBlue#74C5D9
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#74C5D9
terminal.ansiBrightCyan#74C5D9
terminal.ansiBrightGreen#b5d93f
terminal.ansiBrightMagenta#DF5077
terminal.ansiBrightRed#d13b2e
terminal.ansiBrightWhite#f8f8f8
terminal.ansiBrightYellow#e0d77b
terminal.ansiCyan#74C5D9
terminal.ansiGreen#b5d93f
terminal.ansiMagenta#DF5077
terminal.ansiRed#d13b2e
terminal.ansiWhite#f8f8f8
terminal.ansiYellow#e0d77b
terminal.background#202020
terminal.border#181818
terminal.foreground#f8f8f8
terminal.inactiveSelectionBackground#F8F8F814
terminal.selectionBackground#f8f8f833
terminalCursor.background#202020
terminalCursor.foreground#f8f8f8
textBlockQuote.background#323232
textBlockQuote.border#484848
textCodeBlock.background#323232
textLink.activeForeground#74C5D9
textLink.foreground#74C5D9
textPreformat.foreground#ea9b40
textSeparator.foreground#F8F8F8
titleBar.activeBackground#282828
titleBar.activeForeground#f8f8f8
titleBar.border#181818
titleBar.inactiveBackground#202020
titleBar.inactiveForeground#727272
toolbar.hoverBackground#FFFFFF1A
tree.indentGuidesStroke#5A5A5A
widget.border#484848
widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
markup.heading.markdown, markup.heading.setext, markup.heading	#B5D93F	bold
markup.bold	—	bold
markup.italic	—	italic
markup.strikethrough	—	strikethrough
markup.underline.link.markdown, markup.underline.link.image.markdown	#74C5D9	underline
string.other.link.title.markdown, string.other.link.description.markdown	#74C5D9	—
markup.quote.markdown	#666666	italic
punctuation.definition.list.begin.markdown	#DF5077	—
entity.name.namespace, entity.name.scope-resolution	#B5D93F	underline
punctuation.separator.namespace.ruby	#B5D93F	italic underline
variable.legacy.builtin.python, string meta.image.inline.markdown	#F8F8F8	—
—	#f8f8f8	—
meta.embedded, source.groovy.embedded	#f8f8f8	—
comment	#666666	—
string	#e0d77b	—
punctuation.definition.template-expression, punctuation.section.embedded	#df5077	—
meta.template.expression	#f8f8f8	—
constant.language	#7d72c8	—
constant.character, constant.other	#7d72c8	—
numeric-suffix	#74c5d9	italic
constant.numeric	#7d72c8	—
variable	#f8f8f8
punctuation.tilde	#b5d93f
punctuation.squarebracket-attribute	#df5077
keyword.type	#74c5d9	italic
keyword	#df5077
keyword.other.class	#74c5d9	italic
storage	#df5077
meta.function-call	#74c5d9
storage.type, entity.name.type.type-parameter	#74c5d9	italic
storage.type.numeric	#74c5d9	italic
entity.name.type, entity.name.class	#b5d93f	—
entity.name.variable.parameter, keyword.other.this, keyword.other.base	#ea9b40	italic
entity.name.type.namespace	#ffffff	—
entity.other.inherited-class	#b5d93f	italic underline
entity.name.function	#b5d93f
inherit-class	#b5d93f
variable.parameter	#ea9b40	italic
entity.name.tag	#df5077
entity.other.attribute-name	#b5d93f
support.function	#74c5d9
support.constant	#74c5d9
support.type, support.class	#74c5d9	italic
support.other.variable	—
invalid	#f8f8f8
invalid.deprecated	#f8f8f8	—
meta.structure.dictionary.json string.quoted.double.json	#CFCFC2	—
meta.diff, meta.diff.header	#75715e	—
markup.deleted	#df5077	—
markup.inserted	#b5d93f	—
markup.changed	#e0d77b	—
constant.numeric.line-number.find-in-files - match	#7d72c8A0	—
entity.name.filename.find-in-files	#e0d77b	—
markup.quote	#df5077	—
markup.list	#f8f8f8	—
markup.bold, markup.italic	#74c5d9	—
markup.inline.raw	#ea9b40
markup.heading	#b5d93f	—
markup.heading.setext	#b5d93f
token.info-token	#74c5d9	—
token.warn-token	#ea9b40	—
token.error-token	#d13b2e	—
token.debug-token	#7d72c8	—
variable.language	#ea9b40	—