Momo Theme

Name: Momo Theme
Author: momosct

Publisher: momosctThemes in package: 6

Momo Theme - Visual Studio Code theme inspired by Material, Solarized, Boxy, and One Dark themes

Open in VS Code GitHub

Color themes

VS Code preview

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

Momo Theme — MomoDark

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...

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#263238
activityBar.foreground#c4dde1
activityBarBadge.background#80CBC4
activityBarBadge.foreground#000000
badge.background#00000030
badge.foreground#546E7A
button.background#80CBC4
debugToolBar.background#263238
diffEditor.insertedTextBackground#C3E88D15
diffEditor.removedTextBackground#FF537020
dropdown.background#263238
dropdown.border#FFFFFF10
editor.background#263238
editor.foreground#c4dde1
editor.lineHighlightBackground#00000050
editor.selectionBackground#61616150
editor.selectionHighlightBackground#61616150
editorBracketMatch.background#263238
editorBracketMatch.border#FFCC0050
editorCursor.foreground#FFCC00
editorError.foreground#FF537070
editorGroup.border#212c31
editorGroupHeader.tabsBackground#263238
editorGutter.addedBackground#C3E88D60
editorGutter.deletedBackground#FF537060
editorGutter.modifiedBackground#82AAFF60
editorHoverWidget.background#2d3b41
editorHoverWidget.border#FFFFFF10
editorIndentGuide.background#37474F80
editorLineNumber.foreground#37474F
editorLink.activeForeground#c4dde1
editorMarkerNavigation.background#c4dde105
editorSuggestWidget.background#2d3b41
editorSuggestWidget.border#FFFFFF10
editorSuggestWidget.foreground#c4dde1
editorSuggestWidget.highlightForeground#80CBC4
editorSuggestWidget.selectedBackground#00000050
editorWarning.foreground#C3E88D70
editorWhitespace.foreground#c4dde110
editorWidget.background#2d3b41
editorWidget.border#2d3b41
extensionButton.prominentBackground#C3E88D90
extensionButton.prominentHoverBackground#C3E88D
focusBorder#FFFFFF00
input.background#2d3b41
input.border#2d3b41
input.foreground#EEFFFF
input.placeholderForeground#c4dde160
inputValidation.errorBorder#FF5370
inputValidation.infoBorder#82AAFF
inputValidation.warningBorder#FFCB6B
list.activeSelectionBackground#2d3b41
list.activeSelectionForeground#80CBC4
list.focusBackground#c4dde120
list.focusForeground#c4dde1
list.highlightForeground#80CBC4
list.hoverBackground#2d3b41
list.hoverForeground#FFFFFF
list.inactiveSelectionBackground#263238
list.inactiveSelectionForeground#80CBC4
notification.background#263238
notification.buttonBackground#c4dde150
notification.foreground#c4dde1
notification.infoBackground#82AAFF
notification.infoForeground#ffffff
notification.warningBackground#FF5370
notification.warningForeground#ffffff
panel.border#37474F80
panelTitle.activeForeground#c4dde1
peekView.border#212c31
peekViewEditor.background#2d3b41
peekViewEditorGutter.background#2d3b41
peekViewResult.background#2d3b41
peekViewTitle.background#2d3b41
peekViewTitleDescription.foreground#c4dde160
pickerGroup.foreground#80CBC4
progressBar.background#80CBC4
quickInputList.focusBackground#263238
scrollbar.shadow#26323800
scrollbarSlider.activeBackground#80CBC4
scrollbarSlider.background#00000030
scrollbarSlider.hoverBackground#00000020
selection.background#61616150
sideBar.background#263238
sideBar.border#37474F80
sideBar.foreground#7695a3
sideBarSectionHeader.background#263238
sideBarTitle.foreground#c4dde1
statusBar.background#263238
statusBar.debuggingBackground#C792EA
statusBar.debuggingForeground#ffffff
statusBar.foreground#546e7a
statusBar.noFolderBackground#263238
tab.activeBorder#80CBC4
tab.activeForeground#FFFFFF
tab.border#263238
tab.inactiveBackground#263238
tab.inactiveForeground#7695a3
tab.unfocusedActiveBorder#546E7A
tab.unfocusedActiveForeground#c4dde1
terminal.ansiBlack#546E7A
terminal.ansiBlue#82AAFF
terminal.ansiBrightBlack#546E7A
terminal.ansiBrightBlue#82AAFF
terminal.ansiBrightCyan#89DDFF
terminal.ansiBrightGreen#C3E88D
terminal.ansiBrightpurple#C792EA
terminal.ansiBrightRed#FF5370
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#FFCB6B
terminal.ansiCyan#89DDFF
terminal.ansiGreen#C3E88D
terminal.ansipurple#C792EA
terminal.ansiRed#FF5370
terminal.ansiWhite#ffffff
terminal.ansiYellow#FFCB6B
textLink.activeForeground#c4dde1
textLink.foreground#80CBC4
titleBar.activeBackground#263238
titleBar.activeForeground#546E7A
titleBar.inactiveBackground#263238
titleBar.inactiveForeground#546E7A
widget.shadow#212c31

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#c4dde1	—
comment, punctuation.definition.comment	#546E7A	italic
variable, string constant.other.placeholder	#c4dde1	—
support.variable.property, meta.jsx.children	#c4dde1	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#FF5370	—
invalid.deprecated	#C792EA	—
keyword, storage.type, storage.modifier	#C792EA	—
keyword.control, storage.type, storage.modifier	—	—
Keyword, Storage	—	—
constant.other.color, meta.tag, punctuation.separator.inheritance.php, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, punctuation	#808889	—
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#808889	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.class.component	#f07178	—
support.class.component	—	bold
entity.other.attribute-name	#9576aa	—
entity.name.function, meta.function-call - variable.other.object, meta.function-call.generic, variable.function, support.function, keyword.other.special-method	#6abbd9	bold
source.cpp meta.block variable.other	#FF5370	—
variable.other.constant	#f07178	—
support.other.variable, string.other.link, variable.other.normal.shell, variable.other.positional.shell	#f07178	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other	#f07178	—
string, 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	#C3E88D	normal
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#FFCB6B	—
support.type	#B2CCD6	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#B2CCD6	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#FF5370	—
variable.language	#FF5370	—
entity.name.method.js	#82AAFF	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#82AAFF	—
entity.other.attribute-name.class	#FFCB6B	—
source.sass keyword.control	#82AAFF	—
markup.inserted	#C3E88D	—
markup.deleted	#FF5370	—
markup.changed	#C792EA	—
string.regexp	#C3E88D	—
constant.character.escape	#89DDFF	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#82AAFF	—
source.js constant.other.object.key.js string.unquoted.label.js	#FF5370	—
source.json meta.structure.dictionary.json support.type.property-name.json, meta.object-literal.key	#2e8ccf	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#32a198	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#2e8ccf	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#32a198	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#2e8ccf	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#32a198	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#2e8ccf	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#32a198	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#2e8ccf	—
text.html.markdown, punctuation.definition.list_item.markdown	#c4dde1	—
text.html.markdown markup.inline.raw.markdown	#C792EA	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#65737E	—
text.html.markdown meta.dummy.line-break		—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#C3E88D	bold
markup.italic	#f07178	italic
markup.bold, markup.bold string	#f07178	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#f07178	bold
markup.underline	#F78C6C	underline
markup.strike		strike
markup.quote punctuation.definition.blockquote.markdown	#65737E	—
markup.quote		italic
string.other.link.title.markdown	#82AAFF	—
string.other.link.description.title.markdown	#C792EA	—
constant.other.reference.link.markdown	#FFCB6B	—
markup.raw.block	#C792EA	—
markup.raw.block.fenced.markdown	#65737E	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown	#c4dde1	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#c4dde1	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown	#C3E88D	—
meta.brace.square, punctuation.bracket.square, punctuation.definition.list.begin, punctuation.definition.list.end, meta.item-access punctuation.definition.arguments.begin, meta.item-access punctuation.definition.arguments.end, meta.function-call meta.item-access punctuation.definition.arguments.begin, meta.function-call meta.item-access punctuation.definition.arguments.end	#808889	—
meta.brace.round, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.bracket.round, punctuation.parenthesis.begin, punctuation.parenthesis.end, meta.function-call punctuation.definition.arguments.begin, meta.function-call punctuation.definition.arguments.end	#808889	—
meta.brace.curly, punctuation.definition.block, punctuation.definition.binding-pattern.object, punctuation.section.property-list.begin.bracket.curly, punctuation.section.property-list.end.bracket.curly, punctuation.definition.generic.begin.html, punctuation.definition.generic.end.html, punctuation.section.method.begin.bracket.curly, punctuation.section.method.end.bracket.curly, punctuation.section.block.begin.bracket.curly, punctuation.section.block.end.bracket.curly, punctuation.section.embedded	#808889	—
keyword.operator, keyword.punctuation	#80CBC4	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end, punctuation.definition.string.begin, punctuation.definition.string.end	#808889	—
meta.decorator, meta.decorator variable.other.readwrite	#FFCB6B	—

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