Monoclean

Name: Monoclean
Author: Reaper

Publisher: ReaperThemes in package: 2

Clean Monochromatic Theme for VSCODE

GitHub

Color themes

VS Code preview

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

Monoclean — Monoclean

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#16161b
activityBar.border#16161b
activityBar.foreground#efefef
activityBarBadge.background#16161b
activityBarBadge.foreground#efefef
badge.background#16161b
badge.foreground#efefef
button.background#efefef
button.foreground#16161b
button.hoverBackground#efefef
debugExceptionWidget.background#16161b
debugExceptionWidget.border#efefef
debugToolBar.background#16161b
diffEditor.insertedTextBackground#16161b
diffEditor.removedTextBackground#16161b
dropdown.background#16161b
editor.background#16161b
editor.findMatchBackground#666
editor.findMatchHighlightBackground#666
editor.findRangeHighlightBackground#666
editor.foreground#efefef
editor.lineHighlightBackground#222
editor.rangeHighlightBackground#222
editor.selectionBackground#666
editor.wordHighlightBackground#222
editor.wordHighlightStrongBackground#222
editorBracketMatch.background#16161b
editorBracketMatch.border#222
editorCursor.foreground#efefef
editorError.foreground#ff3333
editorGroup.background#16161b
editorGroup.border#1d242c
editorGroupHeader.noTabsBackground#16161b
editorGroupHeader.tabsBackground#16161b
editorGroupHeader.tabsBorder#16161b
editorGutter.addedBackground#c2d94c
editorGutter.deletedBackground#ff3333
editorGutter.modifiedBackground#50b4e6
editorHoverWidget.background#16161b
editorHoverWidget.border#16161b
editorIndentGuide.background#16161b
editorLineNumber.foreground#efefef
editorLink.activeForeground#efefef
editorMarkerNavigation.background#16161b
editorOverviewRuler.border#222
editorOverviewRuler.errorForeground#ff3333
editorOverviewRuler.warningForeground#f29718
editorRuler.foreground#efefef
editorSuggestWidget.background#16161b
editorSuggestWidget.border#1d242c
editorSuggestWidget.highlightForeground#efefef
editorSuggestWidget.selectedBackground#16161b
editorWarning.foreground#f29718
editorWhitespace.foreground#efefef
editorWidget.background#16161b
editorWidget.border#222
editorWidget.foreground#efefef
extensionButton.prominentBackground#16161b
extensionButton.prominentForeground#efefef
extensionButton.prominentHoverBackground#16161b
focusBorder#16161b
foreground#efefef
input.background#16161b
input.border#16161b
input.foreground#efefef
input.placeholderForeground#efefef
inputOption.activeBorder#16161b
inputValidation.errorBackground#16161b
inputValidation.errorBorder#ff3333
inputValidation.infoBackground#16161b
inputValidation.infoBorder#50b4e6
inputValidation.warningBackground#16161b
inputValidation.warningBorder#f29718
list.activeSelectionBackground#16161b
list.activeSelectionForeground#efefef
list.focusBackground#16161b
list.focusForeground#efefef
list.highlightForeground#efefef
list.hoverBackground#16161b
list.hoverForeground#efefef
list.inactiveSelectionBackground#16161b
list.inactiveSelectionForeground#efefef
menubar.selectionForeground#000
panel.background#16161b
panel.border#1d242c
panelTitle.activeBorder#f29718
panelTitle.activeForeground#efefef
panelTitle.inactiveForeground#efefef
peekView.border#1d242c
peekViewEditor.background#16161b
peekViewEditor.matchHighlightBackground#666
peekViewResult.background#16161b
peekViewResult.fileForeground#efefef
peekViewResult.matchHighlightBackground#666
peekViewTitle.background#16161b
peekViewTitleDescription.foreground#efefef
peekViewTitleLabel.foreground#efefef
pickerGroup.border#16161b
pickerGroup.foreground#efefef
progressBar.background#16161b
quickInputList.focusBackground#222
scrollbar.shadow#16161b
scrollbarSlider.activeBackground#16161b
scrollbarSlider.background#16161b
scrollbarSlider.hoverBackground#16161b
selection.background#16161b
sideBar.background#16161b
sideBar.border#16161b
sideBarSectionHeader.background#16161b
sideBarSectionHeader.foreground#efefef
sideBarTitle.foreground#efefef
statusBar.background#16161b
statusBar.border#16161b
statusBar.debuggingBackground#16161b
statusBar.debuggingForeground#efefef
statusBar.foreground#efefef
statusBar.noFolderBackground#16161b
statusBarItem.activeBackground#16161b
statusBarItem.hoverBackground#16161b
statusBarItem.prominentBackground#16161b
statusBarItem.prominentHoverBackground#16161b
tab.activeBackground#16161b
tab.activeBorder#16161b
tab.activeForeground#efefef
tab.border#16161b
tab.inactiveBackground#16161b
tab.inactiveForeground#efefef
tab.unfocusedActiveBorder#f29718
tab.unfocusedActiveForeground#efefef
tab.unfocusedInactiveForeground#efefef
terminal.ansiBlack#121212
terminal.ansiBlue#50b4e6
terminal.ansiBrightBlack#16161b
terminal.ansiBrightBlue#6871ff
terminal.ansiBrightCyan#a6fde1
terminal.ansiBrightGreen#3FDAA4
terminal.ansiBrightMagenta#ff77ff
terminal.ansiBrightRed#f00
terminal.ansiBrightWhite#d1d1d1
terminal.ansiBrightYellow#FAB795
terminal.ansiCyan#95e6cb
terminal.ansiGreen#29D398
terminal.ansiMagenta#ca30c7
terminal.ansiRed#e00
terminal.ansiWhite#969696
terminal.ansiYellow#FAB795
terminal.background#16161b
terminal.foreground#efefef
textBlockQuote.background#16161b
textLink.activeForeground#efefef
textLink.foreground#efefef
textPreformat.foreground#efefef
titleBar.activeBackground#16161b
titleBar.activeForeground#efefef
titleBar.border#16161b
titleBar.inactiveBackground#16161b
titleBar.inactiveForeground#efefef
walkThrough.embeddedEditorBackground#16161b
widget.shadow#16161b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#efefef	—
comment, punctuation.definition.comment	#ddd	italic
variable	#efefef	italic
keyword, storage.type, storage.modifier	#efefef	—
constant.other.color, meta.tag, punctuation.separator.inheritance.php, punctuation.section.embedded, keyword.other.substitution	#efefef	bold
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#efefef	—
meta.tag.jsx	#efefef	—
entity.name.function, keyword.other.special-method, variable.function, meta.block-level, support.function	#efefef	italic
support.other.variable, string.other.link	#efefef	italic
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit	#efefef	italic
string, keyword.other.template, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#efefef	normal
entity.name.class, entity.name.type.class, entity.name.instance, entity.name.type.instance, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter	#efefef	—
entity.name.module, entity.name.type.module, variable.import.parameter.js, variable.other.class.js	#efefef	—
variable.language	#efefef	italic
invalid	#efefef	italic
invalid.deprecated	#efefef	—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#efefef	—
entity.other.attribute-name	#efefef	—
markup.inserted	#efefef	—
markup.deleted	#efefef	—
markup.changed	#efefef	—
string.regexp, constant.character.escape	#efefef	—
url, link, uri	—	underline
constant.numeric.line-number.find-in-files - match	#efefef	—
entity.name.filename.find-in-files	#efefef	—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#efefef	italic
source.js constant.other.object.key.js string.unquoted.label.js	#efefef	italic
entity.name.method.js	#efefef	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#efefef	—
markup.italic	#efefef	italic
markup.bold	#efefef	bold
markup.underline	#efefef	underline
markup.strike	#efefef	strike
markup.quote	#efefef	italic
markup.fenced_code.block.markdown	#efefef	—
markup.table	#efefef	—
text.html.markdown, punctuation.definition.list_item.markdown	#efefef	—
text.html.markdown markup.inline.raw.string.markdown	#efefef	—
text.html.markdown meta.dummy.line-break	#efefef	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#efefef	—
markup.quote, punctuation.definition.blockquote.markdown	#efefef	italic
string.other.link.title.markdown	#efefef	underline
markup.raw.block.fenced.markdown	#efefef	—
punctuation.definition.fenced.markdown, variable.language.fenced.markdown	#efefef	—
variable.language.fenced.markdown	#efefef	—
meta.separator	#efefef	bold
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#efefef	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#efefef	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#efefef	—
source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#efefef	—
source.json meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#efefef	—
source.json meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#efefef	—
source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#efefef	—
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta.structure.dictionary.json punctuation.definition.string - meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#efefef	—
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#efefef	—
acejump.label.blue	#efefef	—
acejump.label.green	#efefef	—
acejump.label.orange	#efefef	—
acejump.label.purple	#efefef	—
sublimelinter.mark.warning	#efefef	—
sublimelinter.gutter-mark	#efefef	—
sublimelinter.mark.error	#efefef	—
markup.ignored.git_gutter	#efefef	—
markup.untracked.git_gutter	#efefef	—
gutter_color	#efefef	—
token.info-token	#efefef	—
token.warn-token	#efefef	—
token.error-token	#efefef	—
token.debug-token	#efefef	—

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

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