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 Light

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#efefef
activityBar.border#efefef
activityBar.foreground#16161b
activityBarBadge.background#efefef
activityBarBadge.foreground#16161b
badge.background#efefef
badge.foreground#16161b
button.background#16161b
button.foreground#efefef
button.hoverBackground#16161b
debugExceptionWidget.background#efefef
debugExceptionWidget.border#16161b
debugToolBar.background#efefef
diffEditor.insertedTextBackground#efefef
diffEditor.removedTextBackground#efefef
dropdown.background#efefef
editor.background#efefef
editor.findMatchBackground#aaa
editor.findMatchHighlightBackground#aaa
editor.findRangeHighlightBackground#aaa
editor.foreground#16161b
editor.lineHighlightBackground#ddd
editor.rangeHighlightBackground#ddd
editor.selectionBackground#aaa
editor.wordHighlightBackground#ddd
editor.wordHighlightStrongBackground#ddd
editorBracketMatch.background#efefef
editorBracketMatch.border#ddd
editorCursor.foreground#16161b
editorError.foreground#ff3333
editorGroup.background#efefef
editorGroup.border#1d242c
editorGroupHeader.noTabsBackground#efefef
editorGroupHeader.tabsBackground#efefef
editorGroupHeader.tabsBorder#efefef
editorGutter.addedBackground#c2d94c
editorGutter.deletedBackground#ff3333
editorGutter.modifiedBackground#50b4e6
editorHoverWidget.background#efefef
editorHoverWidget.border#efefef
editorIndentGuide.background#efefef
editorLineNumber.foreground#16161b
editorLink.activeForeground#16161b
editorMarkerNavigation.background#efefef
editorOverviewRuler.border#ddd
editorOverviewRuler.errorForeground#ff3333
editorOverviewRuler.warningForeground#f29718
editorRuler.foreground#16161b
editorSuggestWidget.background#efefef
editorSuggestWidget.border#1d242c
editorSuggestWidget.highlightForeground#16161b
editorSuggestWidget.selectedBackground#efefef
editorWarning.foreground#f29718
editorWhitespace.foreground#16161b
editorWidget.background#efefef
editorWidget.border#ddd
editorWidget.foreground#16161b
extensionButton.prominentBackground#efefef
extensionButton.prominentForeground#16161b
extensionButton.prominentHoverBackground#efefef
focusBorder#efefef
foreground#16161b
input.background#efefef
input.border#efefef
input.foreground#16161b
input.placeholderForeground#16161b
inputOption.activeBorder#efefef
inputValidation.errorBackground#efefef
inputValidation.errorBorder#ff3333
inputValidation.infoBackground#efefef
inputValidation.infoBorder#50b4e6
inputValidation.warningBackground#efefef
inputValidation.warningBorder#16161b333
list.activeSelectionBackground#efefef
list.activeSelectionForeground#16161b
list.focusBackground#efefef
list.focusForeground#16161b
list.highlightForeground#16161b
list.hoverBackground#efefef
list.hoverForeground#16161b
list.inactiveSelectionBackground#efefef
list.inactiveSelectionForeground#16161b
menubar.selectionForeground#000
panel.background#efefef
panel.border#1d242c
panelTitle.activeBorder#f29718
panelTitle.activeForeground#16161b
panelTitle.inactiveForeground#16161b
peekView.border#1d242c
peekViewEditor.background#efefef
peekViewEditor.matchHighlightBackground#aaa
peekViewResult.background#efefef
peekViewResult.fileForeground#16161b
peekViewResult.matchHighlightBackground#aaa
peekViewTitle.background#efefef
peekViewTitleDescription.foreground#16161b
peekViewTitleLabel.foreground#16161b
pickerGroup.border#efefef
pickerGroup.foreground#16161b
progressBar.background#efefef
quickInputList.focusBackground#ddd
scrollbar.shadow#efefef
scrollbarSlider.activeBackground#efefef
scrollbarSlider.background#efefef
scrollbarSlider.hoverBackground#efefef
selection.background#efefef
sideBar.background#efefef
sideBar.border#efefef
sideBarSectionHeader.background#efefef
sideBarSectionHeader.foreground#16161b
sideBarTitle.foreground#16161b
statusBar.background#efefef
statusBar.border#efefef
statusBar.debuggingBackground#efefef
statusBar.debuggingForeground#16161b
statusBar.foreground#16161b
statusBar.noFolderBackground#efefef
statusBarItem.activeBackground#efefef
statusBarItem.hoverBackground#efefef
statusBarItem.prominentBackground#efefef
statusBarItem.prominentHoverBackground#efefef
tab.activeBackground#efefef
tab.activeBorder#efefef
tab.activeForeground#16161b
tab.border#efefef
tab.inactiveBackground#efefef
tab.inactiveForeground#16161b
tab.unfocusedActiveBorder#f29718
tab.unfocusedActiveForeground#16161b
tab.unfocusedInactiveForeground#16161b
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#efefef
terminal.foreground#16161b
textBlockQuote.background#efefef
textLink.activeForeground#16161b
textLink.foreground#16161b
textPreformat.foreground#16161b
titleBar.activeBackground#efefef
titleBar.activeForeground#16161b
titleBar.border#efefef
titleBar.inactiveBackground#efefef
titleBar.inactiveForeground#16161b
walkThrough.embeddedEditorBackground#efefef
widget.shadow#efefef

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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