Monochromator

Name: Monochromator
Author: Josias Beem

Publisher: Josias BeemThemes in package: 16

Distraction-free monochrome coding theme

The requested theme was not found on this page; showing the first available theme.

Color themes

VS Code preview

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

Monochromator — Monochromator Dark

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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.activeForeground#d0d0d2
activityBar.background#202024
activityBar.foreground#e7e7e7
activityBar.inactiveForeground#d0d0d2
activityBarBadge.background#d0d0d2
activityBarBadge.foreground#0f0f12
badge.background#00000000
badge.foreground#e7e7e7
breadcrumb.foreground#808086
button.background#505058
button.foreground#e7e7e7
button.secondaryBackground#50505880
checkbox.background#0f0f12
commandCenter.activeBackground#0f0f12
commandCenter.activeBorder#50505880
commandCenter.activeForeground#e7e7e7
commandCenter.background#0f0f12
commandCenter.border#50505880
commandCenter.foreground#d0d0d2
diffEditor.insertedLineBackground#30df8126
diffEditor.insertedTextBackground#30df814d
diffEditor.removedLineBackground#fe303a26
diffEditor.removedTextBackground#fe303a4d
dropdown.background#0f0f12
dropdown.border#505058
editor.background#0f0f12
editor.findMatchBackground#393941
editor.findMatchHighlightBackground#393941bf
editor.foldBackground#20202480
editor.foreground#e7e7e7
editor.hoverHighlightBackground#39394180
editor.lineHighlightBackground#202024
editor.selectionBackground#393941
editor.selectionHighlightBackground#393941
editor.wordHighlightBackground#39394180
editor.wordHighlightStrongBackground#02a9ff40
editor.wordHighlightTextBackground#39394180
editorBracketHighlight.foreground1#e7e7e7
editorBracketHighlight.foreground2#e7e7e7
editorBracketHighlight.foreground3#e7e7e7
editorBracketHighlight.foreground4#e7e7e7
editorBracketHighlight.foreground5#e7e7e7
editorBracketHighlight.foreground6#e7e7e7
editorBracketHighlight.unexpectedBracket.foreground#e7e7e7
editorBracketMatch.background#0f0f12
editorBracketMatch.border#e7e7e7
editorCodeLens.foreground#808086
editorCursor.foreground#e7e7e7
editorError.foreground#fe303a
editorGroup.border#202024
editorGroupHeader.tabsBackground#202024
editorGutter.addedBackground#30df81
editorGutter.addedSecondaryBackground#30df8180
editorGutter.deletedBackground#fe303a
editorGutter.deletedSecondaryBackground#fe303a80
editorGutter.modifiedBackground#ffae49
editorGutter.modifiedSecondaryBackground#ffae4980
editorHoverWidget.border#505058
editorHoverWidget.foreground#e7e7e7
editorIndentGuide.activeBackground#808086
editorIndentGuide.background#80808650
editorInfo.foreground#02a9ff
editorInlayHint.background#202024
editorInlayHint.foreground#808086
editorLightBulb.foreground#808086
editorLightBulbAi.foreground#808086
editorLightBulbAutoFix.foreground#808086
editorLineNumber.activeForeground#e7e7e7
editorLineNumber.foreground#808086
editorLink.activeForeground#e7e7e7
editorOverviewRuler.border#00000000
editorOverviewRuler.errorForeground#fe303a
editorOverviewRuler.infoForeground#02a9ff
editorOverviewRuler.warningForeground#ffae49
editorStickyScrollHover.background#202024
editorSuggestWidget.background#202024
editorSuggestWidget.focusHighlightForeground#e7e7e7
editorSuggestWidget.highlightForeground#e7e7e7
editorSuggestWidget.selectionBackground#393941
editorWarning.foreground#ffae49
editorWidget.background#202024
extensionButton.background#505058
focusBorder#00000000
gitDecoration.addedResourceForeground#30df81
gitDecoration.deletedResourceForeground#fe303a
gitDecoration.ignoredResourceForeground#808086
gitDecoration.modifiedResourceForeground#ffae49
gitDecoration.renamedResourceForeground#30df81
gitDecoration.stageDeletedResourceForeground#fe303a
gitDecoration.stageModifiedResourceForeground#ffae49
gitDecoration.untrackedResourceForeground#30df81
icon.foreground#d0d0d2
input.background#0f0f12
input.border#505058
inputValidation.errorBackground#202024
inputValidation.errorBorder#fe303a
inputValidation.infoBackground#202024
inputValidation.infoBorder#505058
inputValidation.warningBackground#202024
inputValidation.warningBorder#ffae49
keybindingLabel.background#0f0f12
keybindingLabel.border#808086
keybindingLabel.bottomBorder#808086
keybindingLabel.foreground#d0d0d2
list.activeSelectionBackground#393941
list.activeSelectionForeground#e7e7e7
list.errorForeground#fe303a
list.focusBackground#393941
list.highlightForeground#e7e7e7
list.hoverBackground#393941
list.inactiveSelectionBackground#39394180
list.warningForeground#ffae49
menu.background#202024
menu.border#505058
menu.selectionBackground#393941
menu.selectionForeground#d0d0d2
menu.separatorBackground#393941
minimap.errorHighlight#fe303a
minimap.findMatchHighlight#393941
minimap.infoHighlight#02a9ff
minimap.selectionHighlight#393941
minimap.selectionOccurrenceHighlight#393941
minimap.warningHighlight#ffae49
multiDiffEditor.border#505058
multiDiffEditor.headerBackground#202024
notifications.background#202024
notifications.foreground#d0d0d2
notificationsErrorIcon.foreground#d0d0d2
notificationsInfoIcon.foreground#d0d0d2
notificationsWarningIcon.foreground#d0d0d2
panel.border#202024
panelTitle.activeForeground#e7e7e7
panelTitle.inactiveForeground#d0d0d2
pickerGroup.border#505058
pickerGroup.foreground#d0d0d2
progressBar.background#d0d0d2
quickInput.background#202024
quickInput.foreground#d0d0d2
quickInputList.focusBackground#393941
quickInputList.focusForeground#e7e7e7
scmGraph.historyItemHoverAdditionsForeground#30df81
scmGraph.historyItemHoverDeletionsForeground#fe303a
scmGraph.historyItemHoverLabelForeground#000000
scmGraph.historyItemRefColor#d0d0d2
scmGraph.historyItemRemoteRefColor#808086
scrollbarSlider.activeBackground#50505890
scrollbarSlider.background#50505843
scrollbarSlider.hoverBackground#50505870
selection.background#393941
sideBar.background#202024
sideBar.border#202024
sideBar.foreground#d0d0d2
sideBarSectionHeader.background#202024
sideBarSectionHeader.border#202024
statusBar.background#202024
statusBar.border#00000000
statusBar.debuggingBackground#202024
statusBar.foreground#d0d0d2
statusBar.noFolderBackground#202024
statusBarItem.errorBackground#fe303a
statusBarItem.hoverBackground#393941
statusBarItem.prominentBackground#393941
statusBarItem.remoteBackground#202024
statusBarItem.remoteForeground#d0d0d2
statusBarItem.warningBackground#ffae49
tab.activeForeground#d0d0d2
tab.border#00000000
tab.hoverBackground#0f0f12
tab.inactiveBackground#202024
terminal.ansiBlack#0f0f12
terminal.ansiBlue#02a9ff
terminal.ansiBrightBlack#808086
terminal.ansiBrightBlue#02a9ff
terminal.ansiBrightCyan#00f3ff
terminal.ansiBrightGreen#30df81
terminal.ansiBrightMagenta#d559ff
terminal.ansiBrightRed#fe303a
terminal.ansiBrightWhite#e7e7e7
terminal.ansiBrightYellow#fff556
terminal.ansiCyan#00f3ff
terminal.ansiGreen#30df81
terminal.ansiMagenta#d559ff
terminal.ansiRed#fe303a
terminal.ansiWhite#808086
terminal.ansiYellow#fff556
terminal.background#0f0f12
terminal.foreground#e7e7e7
terminal.selectionBackground#e7e7e7
terminal.selectionForeground#0f0f12
terminalCommandDecoration.defaultBackground#808086
terminalCommandDecoration.errorBackground#fe303a
terminalCommandDecoration.successBackground#30df81
textBlockQuote.background#202024
textBlockQuote.border#505058
textCodeBlock.background#202024
textCodeBlock.border#505058
textLink.activeForeground#02a9ff
textLink.foreground#02a9ff
textPreformat.background#393941
textPreformat.foreground#e7e7e7
textSeparator.foreground#393941
titleBar.activeBackground#202024
titleBar.activeForeground#d0d0d2
titleBar.border#00000000
titleBar.inactiveBackground#202024
titleBar.inactiveForeground#808086
tree.indentGuidesStroke#80808650
welcomePage.progress.foreground#d0d0d2
widget.border#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
constant.character.escape.content.typst, constant.other.symbol.typst, entity.name.function.hash.typst, entity.name.operator.cpp, keyword.control.equation.align.latex, keyword.control.equation.newline.latex, keyword.control.flow.block-scalar.literal.yaml, keyword.control.newline.tex, keyword.control.table.cell.latex, keyword.control.table.newline.latex, keyword.control.ternary, keyword.operator, keyword.other.r, keyword.symbol, markup.content.brace.typst, markup.heading.setext, meta.brace.curly.typst, meta.brace.round.js, meta.brace.round.ts, meta.brace.round.typst, meta.brace.square.js, meta.brace.square.ts, meta.brace.square.typst, meta.entry.braces.bibtex, meta.separator.markdown, punctuation, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown, punctuation.definition.constant.hashkey.ruby, punctuation.definition.constant.markdown, punctuation.definition.constant.math.tex, punctuation.definition.constant.ruby, punctuation.definition.entity.function.2.nix, punctuation.definition.entity.function.nix, punctuation.definition.heading.typst, punctuation.definition.keyword.latex, punctuation.definition.keyword.tex, punctuation.definition.raw.begin.typst, punctuation.definition.raw.end.typst, punctuation.definition.string.begin.latex, punctuation.definition.string.begin.math.typst, punctuation.definition.string.begin.tex, punctuation.definition.string.end.latex, punctuation.definition.string.end.math.typst, punctuation.definition.string.end.tex, storage.modifier.array, storage.modifier.pointer, storage.modifier.reference, storage.type.function.arrow, variable.parameter.function.4.nix	#808086	normal
keyword.other.documentation, meta.shebang.shell, punctuation.definition.block.tag.jsdoc, storage.type.class.doxygen, storage.type.class.jsdoc	#808086	bold italic
comment, entity.name.type.instance.jsdoc, markup.quote, punctuation.definition.comment, variable.other.jsdoc	#808086	italic
constant, constant.language.register, constant.language.symbol.hashkey.ruby, constant.language.symbol.ruby, constant.other.bareword, constant.other.caps, constant.other.class, constant.other.database-name, constant.other.enum, constant.other.haskell, constant.other.key, constant.other.option, constant.other.reference, constant.other.table-name, entity.name.function.preprocessor, entity.name.section.latex, entity.name.type.class, entity.name.type.entry-key.bibtex, entity.name.type.enum, entity.name.type.package.go, entity.name.type.struct.rust, entity.name.type.trait.rust, keyword.label.assembly, markup.bold.textbf.latex, markup.italic.emph.latex, markup.italic.textit.latex, meta.interpolation.rust, punctuation.definition.variable, storage.modifier.import, storage.modifier.package, string.other.link.description.markdown, string.other.link.title.markdown, string.unquoted.argument.shell, string.unquoted.plain.out.yaml, support.class.latex, support.class.math.block.environment.latex, support.class.math.block.tex, support.type.property-name, support.type.vendored.property-name, variable.language, variable.other, variable.parameter.positional.shell, variable.parameter.ts	#e7e7e7	normal
constant.character.escape.markdown, constant.character.escape.tex, constant.character.math.tex, constant.other.general.math.tex, constant.other.math.tex, entity.name.command.shell, entity.name.function.decorator, entity.name.function.instructions, entity.name.function.math.tex, entity.name.section, entity.name.tag, entity.name.type, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class, keyword, keyword.operator.new, keyword.operator.word.mnemonic, markup.bold, markup.heading.typst, punctuation.definition.annotation, punctuation.definition.attribute, punctuation.definition.decorator, punctuation.definition.directive, punctuation.definition.entity, punctuation.definition.include, punctuation.definition.keyword, punctuation.definition.string.heredoc.delimiter.shell, storage.modifier, storage.modifier.sql, storage.type, support.class, support.constant.subsections, support.function.be.latex, support.function.builtin.shell, support.function.emph.latex, support.function.footnote.latex, support.function.general.tex, support.function.marginpar.latex, support.function.mips, support.function.mnemonic, support.function.pseudo.mips, support.function.riscv, support.function.section.latex, support.function.textbf.latex, support.function.textit.latex, support.function.texttt.latex, support.function.verb.latex, support.type, support.type.property-name.table.toml, variable.language.self, variable.language.special.self, variable.language.super, variable.language.this, variable.other.readwrite.hash.typst, variable.other.readwrite.typst	#ffffff	bold
entity.name.function, keyword.operator.sizeof, support.function	#e7e7e7	italic
constant.character, constant.numeric, constant.other, keyword.other.unit, markup.inline.raw, meta.key-assignment.bibtex, punctuation.definition.char, punctuation.definition.constant, punctuation.definition.raw, punctuation.definition.reference.typst, punctuation.definition.string, punctuation.separator.dot.decimal, string	#02a9ff	normal
constant.character.escape, constant.character.format.placeholder, constant.language, constant.other.placeholder, keyword.constant, keyword.format.specifier, punctuation.definition.group.begin.bibtex, punctuation.definition.group.end.bibtex, punctuation.definition.interpolation, punctuation.definition.template-expression, punctuation.definition.variable.shell, storage.type.string.python, string.quoted.byte.raw	#02a9ff	bold
markup.italic	#e7e7e7	italic
markup.underline	—	underline
markup.strikethrough	—	strikethrough
constant.character.escape.content.typst, constant.other.symbol.typst, entity.name.function.hash.typst, entity.name.operator.cpp, keyword.control.equation.align.latex, keyword.control.equation.newline.latex, keyword.control.flow.block-scalar.literal.yaml, keyword.control.newline.tex, keyword.control.table.cell.latex, keyword.control.table.newline.latex, keyword.control.ternary, keyword.operator, keyword.other.r, keyword.symbol, markup.content.brace.typst, markup.heading.setext, meta.brace.curly.typst, meta.brace.round.js, meta.brace.round.ts, meta.brace.round.typst, meta.brace.square.js, meta.brace.square.ts, meta.brace.square.typst, meta.entry.braces.bibtex, meta.separator.markdown, punctuation, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown, punctuation.definition.constant.hashkey.ruby, punctuation.definition.constant.markdown, punctuation.definition.constant.math.tex, punctuation.definition.constant.ruby, punctuation.definition.entity.function.2.nix, punctuation.definition.entity.function.nix, punctuation.definition.heading.typst, punctuation.definition.keyword.latex, punctuation.definition.keyword.tex, punctuation.definition.raw.begin.typst, punctuation.definition.raw.end.typst, punctuation.definition.string.begin.latex, punctuation.definition.string.begin.math.typst, punctuation.definition.string.begin.tex, punctuation.definition.string.end.latex, punctuation.definition.string.end.math.typst, punctuation.definition.string.end.tex, storage.modifier.array, storage.modifier.pointer, storage.modifier.reference, storage.type.function.arrow, variable.parameter.function.4.nix	#808086	normal
keyword.other.documentation, meta.shebang.shell, punctuation.definition.block.tag.jsdoc, storage.type.class.doxygen, storage.type.class.jsdoc	#808086	bold italic
comment, entity.name.type.instance.jsdoc, markup.quote, punctuation.definition.comment, variable.other.jsdoc	#808086	italic
constant, constant.language.register, constant.language.symbol.hashkey.ruby, constant.language.symbol.ruby, constant.other.bareword, constant.other.caps, constant.other.class, constant.other.database-name, constant.other.enum, constant.other.haskell, constant.other.key, constant.other.option, constant.other.reference, constant.other.table-name, entity.name.function.preprocessor, entity.name.section.latex, entity.name.type.class, entity.name.type.entry-key.bibtex, entity.name.type.enum, entity.name.type.package.go, entity.name.type.struct.rust, entity.name.type.trait.rust, keyword.label.assembly, markup.bold.textbf.latex, markup.italic.emph.latex, markup.italic.textit.latex, meta.interpolation.rust, punctuation.definition.variable, storage.modifier.import, storage.modifier.package, string.other.link.description.markdown, string.other.link.title.markdown, string.unquoted.argument.shell, string.unquoted.plain.out.yaml, support.class.latex, support.class.math.block.environment.latex, support.class.math.block.tex, support.type.property-name, support.type.vendored.property-name, variable.language, variable.other, variable.parameter.positional.shell, variable.parameter.ts	#e7e7e7	normal
constant.character.escape.markdown, constant.character.escape.tex, constant.character.math.tex, constant.other.general.math.tex, constant.other.math.tex, entity.name.command.shell, entity.name.function.decorator, entity.name.function.instructions, entity.name.function.math.tex, entity.name.section, entity.name.tag, entity.name.type, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class, keyword, keyword.operator.new, keyword.operator.word.mnemonic, markup.bold, markup.heading.typst, punctuation.definition.annotation, punctuation.definition.attribute, punctuation.definition.decorator, punctuation.definition.directive, punctuation.definition.entity, punctuation.definition.include, punctuation.definition.keyword, punctuation.definition.string.heredoc.delimiter.shell, storage.modifier, storage.modifier.sql, storage.type, support.class, support.constant.subsections, support.function.be.latex, support.function.builtin.shell, support.function.emph.latex, support.function.footnote.latex, support.function.general.tex, support.function.marginpar.latex, support.function.mips, support.function.mnemonic, support.function.pseudo.mips, support.function.riscv, support.function.section.latex, support.function.textbf.latex, support.function.textit.latex, support.function.texttt.latex, support.function.verb.latex, support.type, support.type.property-name.table.toml, variable.language.self, variable.language.special.self, variable.language.super, variable.language.this, variable.other.readwrite.hash.typst, variable.other.readwrite.typst	#ffffff	bold
entity.name.function, keyword.operator.sizeof, support.function	#e7e7e7	italic
constant.character, constant.numeric, constant.other, keyword.other.unit, markup.inline.raw, meta.key-assignment.bibtex, punctuation.definition.char, punctuation.definition.constant, punctuation.definition.raw, punctuation.definition.reference.typst, punctuation.definition.string, punctuation.separator.dot.decimal, string	#02a9ff	normal
constant.character.escape, constant.character.format.placeholder, constant.language, constant.other.placeholder, keyword.constant, keyword.format.specifier, punctuation.definition.group.begin.bibtex, punctuation.definition.group.end.bibtex, punctuation.definition.interpolation, punctuation.definition.template-expression, punctuation.definition.variable.shell, storage.type.string.python, string.quoted.byte.raw	#02a9ff	bold
markup.italic	#e7e7e7	italic
markup.underline	—	underline
markup.strikethrough	—	strikethrough
comment	#808086	italic

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