Mojojo

Name: Mojojo
Author: Christophe Eymard

Publisher: Christophe EymardThemes in package: 12

My custom theme, mainly targeted for a nice Typescript/TSX experience.

Open in VS Code GitHub

Color themes

VS Code preview

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

Mojojo — Mojojo Dandelion

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.background#433b2d
activityBar.border#36312b
activityBar.foreground#ffffff
activityBarBadge.background#57ccff
activityBarBadge.foreground#ffffff
editor.background#181616
editor.foreground#ffffff
editor.lineHighlightBackground#290000
editor.selection#392400
editor.selectionBorder#493500
editorBracketMatch.background#422e00
editorBracketMatch.border#4d3a00
editorGroupHeader.tabsBackground#181616
editorIndentGuide.background#131010
foreground#ffffff
sideBar.background#181616
sideBar.border#36312b
sideBar.foreground#ffffff
sideBarSectionHeader.background#433b2d
sideBarSectionHeader.foreground#ffffff
statusBar.background#433b2d
statusBar.border#36312b
tab.activeBackground#181616
tab.activeForeground#ffffff
tab.border#36312b
tab.inactiveBackground#181616
tab.inactiveForeground#5e5e5e
widget.shadow#131010

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.quoted.docstring, string.quoted.docstring punctuation.definition.string	#6d5962	italic
keyword, storage.modifier, storage.type	#ff96c9	—
variable, string variable, string punctuation.accessor, string keyword	#ffffff	—
meta.objectliteral punctuation.definition, meta.objectliteral meta.object-literal.key, meta.class variable.object.property	#ffb2e5	—
markup.bold	#ffb2e5	bold
markup.italic	#ffb2e5	italic
meta.type.annotation, entity.name.type, meta.return.type, meta.type.parameters, entity.other.inherited-class, support.type, storage.type.postgres, markup.list beginning.punctuation	#00d4ff	—
meta.parameters	#ebaa67	—
meta.indexer.declaration variable.parameter, meta.object.type punctuation.definition, meta.type.annotation variable.object.property, punctuation.definition.typeparameters, meta.type.annotation keyword, meta.type.annotation meta.brace, meta.type.annotation punctuation, meta.type.parameters punctuation, meta.type.parameters meta.brace, markup.quote	#4cf0ff	—
source.ts source.pgsql keyword, source.ts keyword.other.DML.sql, source.ts keyword.other.create.sql, source.ts keyword.other.order.sql	#8bd392	—
source.ts keyword.other.DDL.create.II.sql, source.ts keyword.other.sql, source.ts keyword.other.alias.sql, source.ts support.function.expression.sql, source.ts constant.other.database-name.sql	#b3c8b3	—
source.ts constant.other.table-name.sql	#b4febb	—
entity.name.type.class, meta.decorator, meta.decorator variable, meta.decorator meta.function-call entity.name.function	#00c6f1	—
support.function, markup.heading	#ff96c9	—
meta.definition.variable, meta.parameters punctuation, meta.parameters punctuation.definition, variable.parameter, markup.heading punctuation	#ffa4d7	—
entity.name.tag, markup.inline punctuation, markup.fenced_code punctuation	#46cca5	—
support.class.component	#00ffff	—
meta.definition entity.name.function, entity.name.function, support.function	#ebaa67	—
entity.other.attribute-name, meta.tag punctuation.section, meta.tag punctuation.definition, meta.tag keyword.operator.assignment, markup.inline, markup.fenced_code	#56dab3	—
meta.embedded string, punctuation.definition.string, string	#fb989f	—
meta.link.inline.markdown, meta.link.inline.markdown punctuation.definition.string, meta.image.inline, meta.image.inline punctuation.definition.string	#ffa5ac	—
string punctuation.definition.template-expression	#ec8a92	—
variable.language	#8bd392	—
constant	#c5cb71	—
comment, punctuation.definition.comment, string.quoted.docstring, string.quoted.docstring punctuation.definition.string	#6f5956	italic
keyword, storage.modifier, storage.type	#ff9c91	—
variable, string variable, string punctuation.accessor, string keyword	#ffffff	—
meta.objectliteral punctuation.definition, meta.objectliteral meta.object-literal.key, meta.class variable.object.property	#ffb7ac	—
markup.bold	#ffb7ac	bold
markup.italic	#ffb7ac	italic
meta.type.annotation, entity.name.type, meta.return.type, meta.type.parameters, entity.other.inherited-class, support.type, storage.type.postgres, markup.list beginning.punctuation	#e6afff	—
meta.parameters	#b5bd6e	—
meta.indexer.declaration variable.parameter, meta.object.type punctuation.definition, meta.type.annotation variable.object.property, punctuation.definition.typeparameters, meta.type.annotation keyword, meta.type.annotation meta.brace, meta.type.annotation punctuation, meta.type.parameters punctuation, meta.type.parameters meta.brace, markup.quote	#ffcbff	—
source.ts source.pgsql keyword, source.ts keyword.other.DML.sql, source.ts keyword.other.create.sql, source.ts keyword.other.order.sql	#00d5ff	—
source.ts keyword.other.DDL.create.II.sql, source.ts keyword.other.sql, source.ts keyword.other.alias.sql, source.ts support.function.expression.sql, source.ts constant.other.database-name.sql	#a6c9d6	—
source.ts constant.other.table-name.sql	#61ffff	—
entity.name.type.class, meta.decorator, meta.decorator variable, meta.decorator meta.function-call entity.name.function	#d7a1f1	—
support.function, markup.heading	#ff9c91	—
meta.definition.variable, meta.parameters punctuation, meta.parameters punctuation.definition, variable.parameter, markup.heading punctuation	#ffaa9f	—
entity.name.tag, markup.inline punctuation, markup.fenced_code punctuation	#00cadd	—
support.class.component	#00ffff	—
meta.definition entity.name.function, entity.name.function, support.function	#b5bd6e	—
entity.other.attribute-name, meta.tag punctuation.section, meta.tag punctuation.definition, meta.tag keyword.operator.assignment, markup.inline, markup.fenced_code	#2fd8eb	—
meta.embedded string, punctuation.definition.string, string	#eca877	—
meta.link.inline.markdown, meta.link.inline.markdown punctuation.definition.string, meta.image.inline, meta.image.inline punctuation.definition.string	#fbb584	—
string punctuation.definition.template-expression	#dd9b6b	—
variable.language	#00d5ff	—
constant	#86d69d	—
comment, punctuation.definition.comment, string.quoted.docstring, string.quoted.docstring punctuation.definition.string	#6b5b50	italic
keyword, storage.modifier, storage.type	#ffaf66	—
variable, string variable, string punctuation.accessor, string keyword	#ffffff	—
meta.objectliteral punctuation.definition, meta.objectliteral meta.object-literal.key, meta.class variable.object.property	#ffca80	—
markup.bold	#ffca80	bold
markup.italic	#ffca80	italic
meta.type.annotation, entity.name.type, meta.return.type, meta.type.parameters, entity.other.inherited-class, support.type, storage.type.postgres, markup.list beginning.punctuation	#ff9af1	—
meta.parameters	#77d486	—
meta.indexer.declaration variable.parameter, meta.object.type punctuation.definition, meta.type.annotation variable.object.property, punctuation.definition.typeparameters, meta.type.annotation keyword, meta.type.annotation meta.brace, meta.type.annotation punctuation, meta.type.parameters punctuation, meta.type.parameters meta.brace, markup.quote	#ffb6ff	—
source.ts source.pgsql keyword, source.ts keyword.other.DML.sql, source.ts keyword.other.create.sql, source.ts keyword.other.order.sql	#00ceff	—
source.ts keyword.other.DDL.create.II.sql, source.ts keyword.other.sql, source.ts keyword.other.alias.sql, source.ts support.function.expression.sql, source.ts constant.other.database-name.sql	#a1c3d2	—
source.ts constant.other.table-name.sql	#60f9ff	—
entity.name.type.class, meta.decorator, meta.decorator variable, meta.decorator meta.function-call entity.name.function	#f08de3	—
support.function, markup.heading	#ffaf66	—
meta.definition.variable, meta.parameters punctuation, meta.parameters punctuation.definition, variable.parameter, markup.heading punctuation	#ffbc73	—
entity.name.tag, markup.inline punctuation, markup.fenced_code punctuation	#00d0ff	—
support.class.component	#20ffff	—
meta.definition entity.name.function, entity.name.function, support.function	#77d486	—
entity.other.attribute-name, meta.tag punctuation.section, meta.tag punctuation.definition, meta.tag keyword.operator.assignment, markup.inline, markup.fenced_code	#33deff	—
meta.embedded string, punctuation.definition.string, string	#d2c076	—
meta.link.inline.markdown, meta.link.inline.markdown punctuation.definition.string, meta.image.inline, meta.image.inline punctuation.definition.string	#e1ce83	—
string punctuation.definition.template-expression	#c4b369	—
variable.language	#00ceff	—
constant	#2fe8d6	—
comment, punctuation.definition.comment, string.quoted.docstring, string.quoted.docstring punctuation.definition.string	#655e4e	italic
keyword, storage.modifier, storage.type	#e6c352	—
variable, string variable, string punctuation.accessor, string keyword	#ffffff	—
meta.objectliteral punctuation.definition, meta.objectliteral meta.object-literal.key, meta.class variable.object.property	#ffdf6c	—
markup.bold	#ffdf6c	bold
markup.italic	#ffdf6c	italic
meta.type.annotation, entity.name.type, meta.return.type, meta.type.parameters, entity.other.inherited-class, support.type, storage.type.postgres, markup.list beginning.punctuation	#ff91cb	—
meta.parameters	#00e1b1	—
meta.indexer.declaration variable.parameter, meta.object.type punctuation.definition, meta.type.annotation variable.object.property, punctuation.definition.typeparameters, meta.type.annotation keyword, meta.type.annotation meta.brace, meta.type.annotation punctuation, meta.type.parameters punctuation, meta.type.parameters meta.brace, markup.quote	#fface7	—
source.ts source.pgsql keyword, source.ts keyword.other.DML.sql, source.ts keyword.other.create.sql, source.ts keyword.other.order.sql	#43bdff	—
source.ts keyword.other.DDL.create.II.sql, source.ts keyword.other.sql, source.ts keyword.other.alias.sql, source.ts support.function.expression.sql, source.ts constant.other.database-name.sql	#9cb6cb	—
source.ts constant.other.table-name.sql	#79e7ff	—
entity.name.type.class, meta.decorator, meta.decorator variable, meta.decorator meta.function-call entity.name.function	#f083bd	—
support.function, markup.heading	#e6c352	—
meta.definition.variable, meta.parameters punctuation, meta.parameters punctuation.definition, variable.parameter, markup.heading punctuation	#f6d15f	—
entity.name.tag, markup.inline punctuation, markup.fenced_code punctuation	#57ccff	—
support.class.component	#76ffff	—
meta.definition entity.name.function, entity.name.function, support.function	#00e1b1	—
entity.other.attribute-name, meta.tag punctuation.section, meta.tag punctuation.definition, meta.tag keyword.operator.assignment, markup.inline, markup.fenced_code	#69daff	—
meta.embedded string, punctuation.definition.string, string	#b8cf85	—
meta.link.inline.markdown, meta.link.inline.markdown punctuation.definition.string, meta.image.inline, meta.image.inline punctuation.definition.string	#c6dd92	—
string punctuation.definition.template-expression	#abc178	—
variable.language	#43bdff	—
constant	#33f0ff	—

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